From 7d679b615128af21779b4517b90127c610f84fdd Mon Sep 17 00:00:00 2001 From: Aaron Meese Date: Sun, 27 Mar 2022 22:00:39 -0400 Subject: [PATCH 1/3] Typedoc comments Adds better editor support for detailing the purpose of the methods and functions in this application. --- src/canvas.js | 4 ++-- src/index.js | 8 ++++---- src/tool.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/canvas.js b/src/canvas.js index 1ffdbdb..91f59c1 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -30,7 +30,7 @@ import {tools} from './tool.js'; -/* +/** * Creates a new canvas with context */ export const createCanvas = (width, height, className) => { @@ -45,7 +45,7 @@ export const createCanvas = (width, height, className) => { ]; }; -/* +/** * Binds and resolves events to canvas actions */ export const createCanvasActions = ({ diff --git a/src/index.js b/src/index.js index d8f30d6..d9b8426 100644 --- a/src/index.js +++ b/src/index.js @@ -51,7 +51,7 @@ import {createCanvas, createCanvasActions} from './canvas.js'; import {popupFactory} from './popup.js'; import {tools} from './tool.js'; -/* +/** * Creates the toolbar buttons */ const createToolButtons = (current, actions, proc, __) => Object.keys(tools) @@ -62,7 +62,7 @@ const createToolButtons = (current, actions, proc, __) => Object.keys(tools) onclick: () => actions.buttonTool(name) })); -/* +/** * Creates file menu items */ const createFileMenu = (current, actions, _) => ([ @@ -73,7 +73,7 @@ const createFileMenu = (current, actions, _) => ([ {label: _('LBL_QUIT'), onclick: () => actions.menuQuit()} ]); -/* +/** * Creates the image menu items */ const createImageMenu = (actions, __) => ([ @@ -81,7 +81,7 @@ const createImageMenu = (actions, __) => ([ {label: __('LBL_RESIZE_CANVAS'), onclick: () => actions.menuResizeCanvas()} ]); -/* +/** * Creates the application */ const createApplication = (core, proc, win, $content) => { diff --git a/src/tool.js b/src/tool.js index acf94f1..6788e3d 100644 --- a/src/tool.js +++ b/src/tool.js @@ -44,7 +44,7 @@ const rgbToHex = (r, g, b) => '#' + [ parseInt(b, 10).toString(16) ].map(val => String(val).padStart(2, '0')).join(''); -/* +/** * The list of tools */ export const tools = { From baead3bb9ac3d3e0848c06f1c6f26c3a17784321 Mon Sep 17 00:00:00 2001 From: Aaron Meese Date: Sun, 27 Mar 2022 22:01:26 -0400 Subject: [PATCH 2/3] Added .gitignore Prevents the files that were not previously committed from being committed on accident now. --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..16acd49 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +package-lock.json From 4ba11c72abab858adba69c17f802682e9313d66b Mon Sep 17 00:00:00 2001 From: Aaron Meese Date: Sun, 27 Mar 2022 22:56:38 -0400 Subject: [PATCH 3/3] Beginning of text input implementation This is a solid start that allows the user to configure the font, size, and style, but it still lacks a way to get text from the user and add it to the canvas. --- src/index.js | 24 ++++++++++++++++++++++++ src/locales.js | 14 ++++++++++++++ src/tool.js | 18 ++++++++++++++++++ 3 files changed, 56 insertions(+) diff --git a/src/index.js b/src/index.js index d9b8426..ed0b9d3 100644 --- a/src/index.js +++ b/src/index.js @@ -97,6 +97,16 @@ const createApplication = (core, proc, win, $content) => { } }); + const fontDialog = (font, cb) => core.make('osjs/dialog', 'font', { + name: font.name, + size: font.size, + style: font.style + }, (btn, value) => { + if (btn === "ok") { + cb(value); + } + }); + const basic = core.make('osjs/basic-application', proc, win, { defaultFilename: 'New Image.png' }); @@ -121,6 +131,10 @@ const createApplication = (core, proc, win, $content) => { orientation: 'horizontal' }, [ ...createToolButtons(state.tool, actions, proc, __), + h(Button, { + label: __('LBL_SET_FONT'), + onclick: () => actions.buttonFont() + }), h(Button, {}, [ h('div', { style: {height: '1em', backgroundColor: state.tool.foreground}, @@ -200,6 +214,11 @@ const createApplication = (core, proc, win, $content) => { }, tool: { name: 'pointer', + font: { + name: 'arial', + size: 10, + style: 'regular', + }, foreground: '#000000', background: '#ffffff', stroke: false, @@ -224,6 +243,10 @@ const createApplication = (core, proc, win, $content) => { actions.setSize({width, height}); }), + buttonFont: () => (state, actions) => fontDialog(state.tool.font, font => { + actions.setFont(font); + }), + buttonForeground: () => (state, actions) => colorDialog(state.tool.foreground, color => { actions.setForeground(color); }), @@ -263,6 +286,7 @@ const createApplication = (core, proc, win, $content) => { setSize: size => state => ({image: size}), setTool: name => state => ({tool: Object.assign({}, state.tool, {name})}), + setFont: font => state => ({tool: Object.assign({}, state.tool, {font})}), setForeground: foreground => state => ({tool: Object.assign({}, state.tool, {foreground})}), setBackground: background => state => ({tool: Object.assign({}, state.tool, {background})}), setStroke: stroke => state => ({tool: Object.assign({}, state.tool, {stroke})}), diff --git a/src/locales.js b/src/locales.js index 5310bd6..9a5c209 100644 --- a/src/locales.js +++ b/src/locales.js @@ -5,10 +5,12 @@ export const en_EN = { LBL_PICKER: 'Picker', LBL_FILL: 'Fill', LBL_PENCIL: 'Pencil', + LBL_TEXT: 'Text', LBL_RECTANGLE: 'Rectangle', LBL_SQUARE: 'Square', LBL_OVAL: 'Oval', LBL_CIRCLE: 'Circle', + LBL_SET_FONT: 'Set Font', LBL_STROKE: 'Stroke', LBL_PATH: 'Path' }; @@ -20,10 +22,12 @@ export const sv_SE = { LBL_PICKER: 'Plockare', LBL_FILL: 'Fylla', LBL_PENCIL: 'Penna', + LBL_TEXT: 'Text', LBL_RECTANGLE: 'Rektangel', LBL_SQUARE: 'Fyrkant', LBL_OVAL: 'Oval', LBL_CIRCLE: 'Cirkel', + LBL_SET_FONT: 'Ställ in teckensnitt', LBL_STROKE: 'Stroke', LBL_PATH: 'Väg' }; @@ -35,10 +39,12 @@ export const nb_NO = { LBL_PICKER: 'Fargevalg', LBL_FILL: 'Fyll', LBL_PENCIL: 'Blyant', + LBL_TEXT: 'Tekst', LBL_RECTANGLE: 'Rektangel', LBL_SQUARE: 'Firkant', LBL_OVAL: 'Oval', LBL_CIRCLE: 'Sirkel', + LBL_SET_FONT: 'Angi skrifttype', LBL_STROKE: 'Strøk', LBL_PATH: 'Sti' }; @@ -50,10 +56,12 @@ export const vi_VN = { LBL_PICKER: 'Chọn màu', LBL_FILL: 'Tô màu', LBL_PENCIL: 'Bút chì', + LBL_TEXT: 'Văn bản', LBL_RECTANGLE: 'Hình chữ nhật', LBL_SQUARE: 'Hình vuông', LBL_OVAL: 'Hình trái xoan', LBL_CIRCLE: 'Hình tròn', + LBL_SET_FONT: 'Thiết lập phông chữ', LBL_STROKE: 'Độ nét', LBL_PATH: 'Đường kẻ' }; @@ -65,10 +73,12 @@ export const pt_BR = { LBL_PICKER: 'Selecionador de cores', LBL_FILL: 'Preencher com cor', LBL_PENCIL: 'Lápis', + LBL_TEXT: 'Texto', LBL_RECTANGLE: 'Retângulo', LBL_SQUARE: 'Quadrado', LBL_OVAL: 'Oval', LBL_CIRCLE: 'Circulo', + LBL_SET_FONT: 'Definir fonte', LBL_STROKE: 'Contorno', LBL_PATH: 'Linha' }; @@ -80,10 +90,12 @@ export const fr_FR = { LBL_PICKER: 'Sélectionner la couleur', LBL_FILL: 'Remplir', LBL_PENCIL: 'Crayon', + LBL_TEXT: 'Texte', LBL_RECTANGLE: 'Rectangle', LBL_SQUARE: 'Carré', LBL_OVAL: 'Ellipse', LBL_CIRCLE: 'Cercle', + LBL_SET_FONT: 'Définir la police', LBL_STROKE: 'Contour', LBL_PATH: 'Ligne' }; @@ -95,10 +107,12 @@ export const tr_TR = { LBL_PICKER: 'Renk Seçim Aracı', LBL_FILL: 'Doldur', LBL_PENCIL: 'Kalem', + LBL_TEXT: 'Metin', LBL_RECTANGLE: 'Dörtgen', LBL_SQUARE: 'Kare', LBL_OVAL: 'Oval', LBL_CIRCLE: 'Daire', + LBL_SET_FONT: 'Yazı Tipini Ayarla', LBL_STROKE: 'Kalınlık', LBL_PATH: 'Yol' }; diff --git a/src/tool.js b/src/tool.js index 6788e3d..d59e13d 100644 --- a/src/tool.js +++ b/src/tool.js @@ -33,6 +33,7 @@ import iconPicker from './icons/stock-color-pick-from-screen-16.png'; import iconFile from './icons/stock-tool-bucket-fill-16.png'; import iconPath from './icons/stock-tool-path-16.png'; import iconPencil from './icons/stock-tool-pencil-16.png'; +import iconText from './icons/stock-tool-text-16.png'; import iconRectangle from './icons/stock-shape-rectangle-16.png'; import iconSquare from './icons/stock-shape-square-16.png'; import iconOval from './icons/stock-shape-ellipse-16.png'; @@ -126,6 +127,23 @@ export const tools = { } }, + text: { + label: 'LBL_TEXT', + icon: iconText, + + // TODO: Open text input somehow, either here or from `index.js` + mousedown: ({tool, tempContext}) => { + tempContext.strokeStyle = tool.foreground; + }, + + mousemove: ({tool, tempContext, current, diff, start, width, height}) => { + tempContext.font = `${tool.font.size}px ${tool.font.name}`; + + // TODO: Implement a way to get text from the user + tempContext.fillText(tool.text, start.x, start.y); + } + }, + rect: { label: 'LBL_RECTANGLE', icon: iconRectangle,