js-draw 0.1.9 → 0.1.10

package/dist/src/Editor.d.ts

@@ -37,6 +37,7 @@ export declare class Editor {
     announceForAccessibility(message: string): void;
     addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
+    handleKeyEventsFrom(elem: HTMLElement): void;
     dispatch(command: Command, addToHistory?: boolean): void;
     dispatchNoAnnounce(command: Command, addToHistory?: boolean): void;
     private asyncApplyOrUnapplyCommands;

package/dist/src/Editor.js

@@ -23,11 +23,10 @@ import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
 import Mat33 from './geometry/Mat33';
-import { defaultEditorLocalization } from './localization';
+import getLocalizationTable from './localizations/getLocalizationTable';
 export class Editor {
     constructor(parent, settings = {}) {
         var _a, _b;
-        this.localization = defaultEditorLocalization;
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
         };
@@ -35,7 +34,7 @@ export class Editor {
             this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this.localization)));
         };
         this.rerenderQueued = false;
-        this.localization = Object.assign(Object.assign({}, this.localization), settings.localization);
+        this.localization = Object.assign(Object.assign({}, getLocalizationTable()), settings.localization);
         // Fill default settings.
         this.settings = {
             wheelEventsEnabled: (_a = settings.wheelEventsEnabled) !== null && _a !== void 0 ? _a : true,
@@ -176,18 +175,7 @@ export class Editor {
         this.renderingRegion.addEventListener('pointercancel', evt => {
             pointerEnd(evt);
         });
-        this.renderingRegion.addEventListener('keydown', evt => {
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.KeyPressEvent,
-                key: evt.key,
-                ctrlKey: evt.ctrlKey,
-            })) {
-                evt.preventDefault();
-            }
-            else if (evt.key === 'Escape') {
-                this.renderingRegion.blur();
-            }
-        });
+        this.handleKeyEventsFrom(this.renderingRegion);
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
             // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
@@ -234,6 +222,31 @@ export class Editor {
             this.queueRerender();
         });
     }
+    // Adds event listners for keypresses to [elem] and forwards those events to the
+    // editor.
+    handleKeyEventsFrom(elem) {
+        elem.addEventListener('keydown', evt => {
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyPressEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            })) {
+                evt.preventDefault();
+            }
+            else if (evt.key === 'Escape') {
+                this.renderingRegion.blur();
+            }
+        });
+        elem.addEventListener('keyup', evt => {
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            })) {
+                evt.preventDefault();
+            }
+        });
+    }
     // Adds to history by default
     dispatch(command, addToHistory = true) {
         if (addToHistory) {

package/dist/src/UndoRedoHistory.js

@@ -20,6 +20,9 @@ class UndoRedoHistory {
             command.apply(this.editor);
         }
         this.undoStack.push(command);
+        for (const elem of this.redoStack) {
+            elem.onDrop(this.editor);
+        }
         this.redoStack = [];
         this.fireUpdateEvent();
     }

package/dist/src/bundle/bundled.d.ts

@@ -1,4 +1,5 @@
 import '../styles';
 import Editor from '../Editor';
+import getLocalizationTable from '../localizations/getLocalizationTable';
 export default Editor;
-export { Editor };
+export { Editor, getLocalizationTable };

package/dist/src/bundle/bundled.js

@@ -1,5 +1,6 @@
 // Main entrypoint for Webpack when building a bundle for release.
 import '../styles';
 import Editor from '../Editor';
+import getLocalizationTable from '../localizations/getLocalizationTable';
 export default Editor;
-export { Editor };
+export { Editor, getLocalizationTable };

package/dist/src/geometry/LineSegment2.d.ts

@@ -15,5 +15,6 @@ export default class LineSegment2 {
     get p2(): Point2;
     get(t: number): Point2;
     intersection(other: LineSegment2): IntersectionResult | null;
+    closestPointTo(target: Point2): import("./Vec3").default;
 }
 export {};

package/dist/src/geometry/LineSegment2.js

@@ -97,4 +97,20 @@ export default class LineSegment2 {
             t: resultT,
         };
     }
+    // Returns the closest point on this to [target]
+    closestPointTo(target) {
+        // Distance from P1 along this' direction.
+        const projectedDistFromP1 = target.minus(this.p1).dot(this.direction);
+        const projectedDistFromP2 = this.length - projectedDistFromP1;
+        const projection = this.p1.plus(this.direction.times(projectedDistFromP1));
+        if (projectedDistFromP1 > 0 && projectedDistFromP1 < this.length) {
+            return projection;
+        }
+        if (Math.abs(projectedDistFromP2) < Math.abs(projectedDistFromP1)) {
+            return this.p2;
+        }
+        else {
+            return this.p1;
+        }
+    }
 }

package/dist/src/geometry/Rect2.d.ts

@@ -30,6 +30,7 @@ export default class Rect2 {
     divideIntoGrid(columns: number, rows: number): Rect2[];
     grownToPoint(point: Point2, margin?: number): Rect2;
     grownBy(margin: number): Rect2;
+    getClosestPointOnBoundaryTo(target: Point2): import("./Vec3").default;
     get corners(): Point2[];
     get maxDimension(): number;
     get topRight(): import("./Vec3").default;

package/dist/src/geometry/Rect2.js

@@ -25,6 +25,7 @@ export default class Rect2 {
     translatedBy(vec) {
         return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
     }
+    // Returns a copy of this with the given size (but same top-left).
     resizedTo(size) {
         return new Rect2(this.x, this.y, size.x, size.y);
     }
@@ -109,6 +110,21 @@ export default class Rect2 {
     grownBy(margin) {
         return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
     }
+    getClosestPointOnBoundaryTo(target) {
+        const closestEdgePoints = this.getEdges().map(edge => {
+            return edge.closestPointTo(target);
+        });
+        let closest = null;
+        let closestDist = null;
+        for (const point of closestEdgePoints) {
+            const dist = point.minus(target).length();
+            if (closestDist === null || dist < closestDist) {
+                closest = point;
+                closestDist = dist;
+            }
+        }
+        return closest;
+    }
     get corners() {
         return [
             this.bottomRight,

package/dist/src/localizations/en.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/en.js

@@ -0,0 +1,4 @@
+import { defaultEditorLocalization } from '../localization';
+// Default localizations are already in English.
+const localization = Object.assign({}, defaultEditorLocalization);
+export default localization;

package/dist/src/localizations/es.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/es.js

@@ -0,0 +1,18 @@
+import { defaultEditorLocalization } from '../localization';
+// A partial Spanish localization.
+const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { 
+    // Strings for the main editor interface
+    // (see src/localization.ts)
+    loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`, undo: 'Deshace', redo: 'Rehace', 
+    // Strings for the toolbar
+    // (see src/toolbar/localization.ts)
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFronScreen: 'Selecciona un color de la pantalla', dropdownShown(toolName) {
+        return `Menú por ${toolName} es visible`;
+    }, dropdownHidden: function (toolName) {
+        return `Menú por ${toolName} fue ocultado`;
+    }, colorChangedAnnouncement: function (color) {
+        return `Color fue cambiado a ${color}`;
+    }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
+        return `Lapiz ${penId}`;
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto' });
+export default localization;

package/dist/src/localizations/getLocalizationTable.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const getLocalizationTable: (userLocales?: readonly string[]) => EditorLocalization;
+export default getLocalizationTable;

package/dist/src/localizations/getLocalizationTable.js

@@ -0,0 +1,43 @@
+import { defaultEditorLocalization } from '../localization';
+import en from './en';
+import es from './es';
+const allLocales = {
+    en,
+    es,
+};
+// [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
+const languageFromLocale = (locale) => {
+    const matches = /^(\w+)[_-](\w+)$/.exec(locale);
+    if (!matches) {
+        // If not in languageCode_region format, the locale should be the
+        // languageCode. Return that.
+        return locale;
+    }
+    return matches[1];
+};
+const getLocalizationTable = (userLocales) => {
+    userLocales !== null && userLocales !== void 0 ? userLocales : (userLocales = navigator.languages);
+    let prevLanguage;
+    for (const locale of userLocales) {
+        const language = languageFromLocale(locale);
+        // If the specific localization of the language is not available, but
+        // a localization for the language is,
+        if (prevLanguage && language !== prevLanguage) {
+            if (prevLanguage in allLocales) {
+                return allLocales[prevLanguage];
+            }
+        }
+        // If the full locale (e.g. en_US) is available,
+        if (locale in allLocales) {
+            return allLocales[locale];
+        }
+        prevLanguage = language;
+    }
+    if (prevLanguage && prevLanguage in allLocales) {
+        return allLocales[prevLanguage];
+    }
+    else {
+        return defaultEditorLocalization;
+    }
+};
+export default getLocalizationTable;

package/dist/src/toolbar/HTMLToolbar.js

@@ -108,13 +108,13 @@ export default class HTMLToolbar {
         const undoRedoGroup = document.createElement('div');
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
-            label: 'Undo',
+            label: this.localizationTable.undo,
             icon: makeUndoIcon()
         }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
         const redoButton = this.addActionButton({
-            label: 'Redo',
+            label: this.localizationTable.redo,
             icon: makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
@@ -157,11 +157,9 @@ export default class HTMLToolbar {
             }
             (new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
-        for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
-            if (!(tool instanceof PanZoom)) {
-                throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
-            }
-            (new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
+        if (panZoomTool && panZoomTool instanceof PanZoom) {
+            (new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
         }
         this.setupColorPickers();
     }

package/dist/src/toolbar/icons.js

@@ -3,11 +3,11 @@ import { Vec2 } from '../geometry/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
+const iconColorFill = `
+	style='fill: var(--icon-color);'
 `;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
 `;
 const checkerboardPatternDef = `
 	<pattern
@@ -31,7 +31,7 @@ export const makeRedoIcon = (mirror = false) => {
     icon.innerHTML = `
 		<style>
 			.toolbar-svg-undo-redo-icon {
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 12;
 				stroke-linejoin: round;
 				stroke-linecap: round;
@@ -54,7 +54,7 @@ export const makeDropdownIcon = () => {
 	<g>
 		<path
 			d='M5,10 L50,90 L95,10 Z'
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -69,7 +69,7 @@ export const makeEraserIcon = () => {
 		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
 		<rect
 			x=10 y=10 width=80 height=50
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -116,7 +116,7 @@ export const makeHandToolIcon = () => {
 			
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -158,7 +158,7 @@ export const makeTouchPanningIcon = () => {
 			'
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -222,7 +222,7 @@ export const makeAllDevicePanningIcon = () => {
 			'
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -241,7 +241,7 @@ export const makeZoomIcon = () => {
         textNode.style.textAlign = 'center';
         textNode.style.textAnchor = 'middle';
         textNode.style.fontSize = '55px';
-        textNode.style.fill = 'var(--primary-foreground-color)';
+        textNode.style.fill = 'var(--icon-color)';
         textNode.style.fontFamily = 'monospace';
         icon.appendChild(textNode);
     };
@@ -282,7 +282,7 @@ export const makePenIcon = (tipThickness, color) => {
 		<!-- Pen grip -->
 		<path
 			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
-			${primaryForegroundStrokeFill}
+			${iconColorStrokeFill}
 		/>
 	</g>
 	<g>
@@ -348,7 +348,7 @@ export const makePipetteIcon = (color) => {
 			65,15 65,5      47,6
 		Z
 	`);
-    pipette.style.fill = 'var(--primary-foreground-color)';
+    pipette.style.fill = 'var(--icon-color)';
     if (color) {
         const defs = document.createElementNS(svgNamespace, 'defs');
         defs.innerHTML = checkerboardPatternDef;

package/dist/src/toolbar/localization.d.ts

@@ -21,6 +21,7 @@ export interface ToolbarLocalization {
     undo: string;
     redo: string;
     zoom: string;
+    selectionToolKeyboardShortcuts: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;

package/dist/src/toolbar/localization.js

@@ -14,6 +14,7 @@ export const defaultToolbarLocalization = {
     redo: 'Redo',
     selectObjectType: 'Object type: ',
     pickColorFronScreen: 'Pick color from screen',
+    selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
     anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -10,6 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
+import { InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 export default class BaseWidget {
@@ -44,6 +45,34 @@ export default class BaseWidget {
         return true;
     }
     setupActionBtnClickListener(button) {
+        const clickTriggers = { enter: true, ' ': true, };
+        button.onkeydown = (evt) => {
+            let handled = false;
+            if (evt.key in clickTriggers) {
+                if (!this.disabled) {
+                    this.handleClick();
+                    handled = true;
+                }
+            }
+            // If we didn't do anything with the event, send it to the editor.
+            if (!handled) {
+                this.editor.toolController.dispatchInputEvent({
+                    kind: InputEvtType.KeyPressEvent,
+                    key: evt.key,
+                    ctrlKey: evt.ctrlKey,
+                });
+            }
+        };
+        button.onkeyup = evt => {
+            if (evt.key in clickTriggers) {
+                return;
+            }
+            this.editor.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            });
+        };
         button.onclick = () => {
             if (!this.disabled) {
                 this.handleClick();

package/dist/src/tools/BaseTool.d.ts

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent } from '../types';
 import { ToolType } from './ToolController';
 import ToolEnabledGroup from './ToolEnabledGroup';
 export default abstract class BaseTool implements PointerEvtListener {
@@ -14,6 +14,7 @@ export default abstract class BaseTool implements PointerEvtListener {
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
+    onKeyUp(_event: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;
     isEnabled(): boolean;
     setToolGroup(group: ToolEnabledGroup): void;

package/dist/src/tools/BaseTool.js

@@ -16,6 +16,9 @@ export default class BaseTool {
     onKeyPress(_event) {
         return false;
     }
+    onKeyUp(_event) {
+        return false;
+    }
     setEnabled(enabled) {
         var _a;
         this.enabled = enabled;

package/dist/src/tools/PanZoom.d.ts

@@ -14,7 +14,8 @@ export declare enum PanZoomMode {
     OneFingerTouchGestures = 1,
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
-    SinglePointerGestures = 8
+    SinglePointerGestures = 8,
+    Keyboard = 16
 }
 export default class PanZoom extends BaseTool {
     private editor;

package/dist/src/tools/PanZoom.js

@@ -12,6 +12,7 @@ export var PanZoomMode;
     PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -133,6 +134,9 @@ export default class PanZoom extends BaseTool {
         return true;
     }
     onKeyPress({ key }) {
+        if (!(this.mode & PanZoomMode.Keyboard)) {
+            return false;
+        }
         let translation = Vec2.zero;
         let scale = 1;
         let rotation = 0;

package/dist/src/tools/SelectionTool.d.ts

@@ -1,8 +1,9 @@
 import Command from '../commands/Command';
 import Editor from '../Editor';
+import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
-import { PointerEvt } from '../types';
+import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 declare class Selection {
@@ -20,7 +21,8 @@ declare class Selection {
     handleResizeCornerDrag(deltaPosition: Vec2): void;
     handleRotateCircleDrag(offset: Vec2): void;
     private computeTransformCommands;
-    finishDragging(): void;
+    transformPreview(transform: Mat33): void;
+    finalizeTransform(): void;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
     appendBackgroundBoxTo(elem: HTMLElement): void;
@@ -32,6 +34,7 @@ declare class Selection {
     private recomputeBoxRotation;
     getSelectedItemCount(): number;
     updateUI(): void;
+    scrollTo(): void;
     deleteSelectedObjects(): Command;
     duplicateSelectedObjects(): Command;
 }
@@ -45,8 +48,12 @@ export default class SelectionTool extends BaseTool {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onGestureEnd;
+    private zoomToSelection;
     onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
+    private static handleableKeys;
+    onKeyPress(event: KeyPressEvent): boolean;
+    onKeyUp(evt: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
     clearSelection(): void;