Text Editing

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+package-lock.json

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 = ({

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,15 +73,15 @@ const createFileMenu = (current, actions, _) => ([
   {label: _('LBL_QUIT'), onclick: () => actions.menuQuit()}
 ]);
 
-/*
+/**
  * Creates the image menu items
  */
 const createImageMenu = (actions, __) => ([
   {label: __('LBL_RESIZE_SCALED'), onclick: () => actions.menuResizeImage()},
   {label: __('LBL_RESIZE_CANVAS'), onclick: () => actions.menuResizeCanvas()}
 ]);
 
-/*
+/**
  * Creates the application
  */
 const createApplication = (core, proc, win, $content) => {
@@ -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})}),

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'
 };

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';
@@ -44,7 +45,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 = {
@@ -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,