js-draw 0.1.11 → 0.1.12

package/dist/src/toolbar/icons.js

@@ -1,5 +1,5 @@
 import EventDispatcher from '../EventDispatcher';
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 const svgNamespace = 'http://www.w3.org/2000/svg';
@@ -88,147 +88,130 @@ export const makeSelectionIcon = () => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
-export const makeHandToolIcon = () => {
+const pathIcon = (pathData, fill = 'var(--icon-color)', strokeColor = 'none', strokeWidth = '0px') => {
     const icon = document.createElementNS(svgNamespace, 'svg');
-    // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
-    icon.innerHTML = `
-	<g>
-		<path d='
-			m 10,60
-			  5,30
-			H 90
-			V 30
-			C 90,20 75,20 75,30
-			V 60
-			  20
-			C 75,10 60,10 60,20
-			V 60
-			  15
-			C 60,5 45,5 45,15
-			V 60
-			  25
-			C 45,15 30,15 30,25
-			V 60
-			  75
-			L 25,60
-			C 20,45 10,50 10,60 
-			Z'
-			
-			fill='none'
-			style='
-				stroke: var(--icon-color);
-				stroke-width: 2;
-			'
-		/>
-	</g>
-	`;
+    const path = document.createElementNS(svgNamespace, 'path');
+    path.setAttribute('d', pathData);
+    path.style.fill = fill;
+    path.style.stroke = strokeColor;
+    path.style.strokeWidth = strokeWidth;
+    icon.appendChild(path);
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeHandToolIcon = () => {
+    const fill = 'none';
+    const strokeColor = 'var(--icon-color)';
+    const strokeWidth = '3';
+    // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+    return pathIcon(`
+		m 10,60
+			5,30
+		H 90
+		V 30
+		C 90,20 75,20 75,30
+		V 60
+			20
+		C 75,10 60,10 60,20
+		V 60
+			15
+		C 60,5 45,5 45,15
+		V 60
+			25
+		C 45,15 30,15 30,25
+		V 60
+			75
+		L 25,60
+		C 20,45 10,50 10,60
+		Z
+	`, fill, strokeColor, strokeWidth);
+};
 export const makeTouchPanningIcon = () => {
-    const icon = document.createElementNS(svgNamespace, 'svg');
-    icon.innerHTML = `
-		<path
-			d='
-				M 5,5.5
-				V 17.2
-				L 16.25,5.46
-				Z
+    const fill = 'none';
+    const strokeColor = 'var(--icon-color)';
+    const strokeWidth = '3';
+    return pathIcon(`
+		M 5,5.5
+		V 17.2
+		L 16.25,5.46
+		Z
 
-				m 33.75,0
-				L 50,17
-				V 5.5
-				Z
+		m 33.75,0
+		L 50,17
+		V 5.5
+		Z
 
-				M 5,40.7
-				v 11.7
-				h 11.25
-				z
-				
-				M 26,19
-				C 19.8,19.4 17.65,30.4 21.9,34.8
-				L 50,70
-				H 27.5
-				c -11.25,0 -11.25,17.6 0,17.6
-				H 61.25
-				C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
-				L 33.1,23
-				C 30.3125,20.128192 27.9,19 25.830078,19.119756
-				Z
-			'
-			fill='none'
-			style='
-				stroke: var(--icon-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
-    icon.setAttribute('viewBox', '0 0 100 100');
-    return icon;
+		M 5,40.7
+		v 11.7
+		h 11.25
+		z
+
+		M 26,19
+		C 19.8,19.4 17.65,30.4 21.9,34.8
+		L 50,70
+		H 27.5
+		c -11.25,0 -11.25,17.6 0,17.6
+		H 61.25
+		C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+		L 33.1,23
+		C 30.3125,20.128192 27.9,19 25.830078,19.119756
+		Z
+	`, fill, strokeColor, strokeWidth);
 };
 export const makeAllDevicePanningIcon = () => {
-    const icon = document.createElementNS(svgNamespace, 'svg');
-    icon.innerHTML = `
-		<path
-			d='
-				M 5 5
-				L 5 17.5
-				  17.5 5
-				  5 5
-				z
-				
-				M 42.5 5
-				L 55 17.5
-				  55 5
-				  42.5 5
-				z
-				
-				M 70 10
-				L 70 21
-				  61 15
-			      55.5 23
-			      66 30
-				  56 37
-				  61 45
-				  70 39
-				  70 50
-				  80 50
-				  80 39
-				  89 45
-				  95 36
-				  84 30
-				  95 23
-				  89 15
-				  80 21
-				  80 10
-				  70 10
-				z
+    const fill = 'none';
+    const strokeColor = 'var(--icon-color)';
+    const strokeWidth = '3';
+    return pathIcon(`
+		M 5 5
+		L 5 17.5
+			17.5 5
+			5 5
+		z
 
-				M 27.5 26.25
-				L 27.5 91.25
-				L 43.75 83.125
-				L 52 99
-				L 68 91
-				L 60 75
-				L 76.25 66.875
-				L 27.5 26.25
-				z
-				
-				M 5 42.5
-				L 5 55
-				L 17.5 55
-				L 5 42.5
-				z 
-			'
-			fill='none'
-			style='
-				stroke: var(--icon-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
-    icon.setAttribute('viewBox', '0 0 100 100');
-    return icon;
+		M 42.5 5
+		L 55 17.5
+			55 5
+			42.5 5
+		z
+
+		M 70 10
+		L 70 21
+			61 15
+			55.5 23
+			66 30
+			56 37
+			61 45
+			70 39
+			70 50
+			80 50
+			80 39
+			89 45
+			95 36
+			84 30
+			95 23
+			89 15
+			80 21
+			80 10
+			70 10
+		z
+
+		M 27.5 26.25
+		L 27.5 91.25
+		L 43.75 83.125
+		L 52 99
+		L 68 91
+		L 60 75
+		L 76.25 66.875
+		L 27.5 26.25
+		z
+
+		M 5 42.5
+		L 5 55
+		L 17.5 55
+		L 5 42.5
+		z
+	`, fill, strokeColor, strokeWidth);
 };
 export const makeZoomIcon = () => {
     const icon = document.createElementNS(svgNamespace, 'svg');
@@ -369,3 +352,30 @@ export const makePipetteIcon = (color) => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeResizeViewportIcon = () => {
+    return pathIcon(`
+		M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
+		M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
+        M 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z
+        M 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z
+        M 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z
+        M 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z
+        M 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z
+        M 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z
+	`);
+};
+export const makeDuplicateSelectionIcon = () => {
+    return pathIcon(`
+		M 45,10 45,55 90,55 90,10 45,10 z
+		M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+	`);
+};
+export const makeDeleteSelectionIcon = () => {
+    const strokeWidth = '5px';
+    const strokeColor = 'var(--icon-color)';
+    const fillColor = 'none';
+    return pathIcon(`
+		M 10,10 90,90
+		M 10,90 90,10
+	`, fillColor, strokeColor, strokeWidth);
+};

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

@@ -17,7 +17,8 @@ export interface ToolbarLocalization {
     resizeImageToSelection: string;
     deleteSelection: string;
     duplicateSelection: string;
-    pickColorFronScreen: string;
+    pickColorFromScreen: string;
+    clickToPickColorAnnouncement: string;
     undo: string;
     redo: string;
     zoom: string;

package/dist/src/toolbar/localization.js

@@ -14,7 +14,8 @@ export const defaultToolbarLocalization = {
     undo: 'Undo',
     redo: 'Redo',
     selectObjectType: 'Object type: ',
-    pickColorFronScreen: 'Pick color from screen',
+    pickColorFromScreen: 'Pick color from screen',
+    clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
     anyDevicePanning: 'Any device panning',

package/dist/src/toolbar/makeColorInput.js

@@ -53,7 +53,7 @@ export const makeColorInput = (editor, onColorChange) => {
 const addPipetteTool = (editor, container, onColorChange) => {
     const pipetteButton = document.createElement('button');
     pipetteButton.classList.add('pipetteButton');
-    pipetteButton.title = editor.localization.pickColorFronScreen;
+    pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);
     const updatePipetteIcon = (color) => {
         pipetteButton.replaceChildren(makePipetteIcon(color));
@@ -88,6 +88,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
         if (pipetteTool) {
             pipetteButton.classList.add('active');
+            editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
         }
     };
     container.appendChild(pipetteButton);

package/dist/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -0,0 +1,13 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    protected makeIcon: () => Element;
+    protected title: string;
+    protected clickAction: () => void;
+    constructor(editor: Editor, localizationTable: ToolbarLocalization, makeIcon: () => Element, title: string, clickAction: () => void);
+    protected handleClick(): void;
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected fillDropdown(_dropdown: HTMLElement): boolean;
+}

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

@@ -0,0 +1,21 @@
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    constructor(editor, localizationTable, makeIcon, title, clickAction) {
+        super(editor, localizationTable);
+        this.makeIcon = makeIcon;
+        this.title = title;
+        this.clickAction = clickAction;
+    }
+    handleClick() {
+        this.clickAction();
+    }
+    getTitle() {
+        return this.title;
+    }
+    createIcon() {
+        return this.makeIcon();
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+}

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

@@ -114,9 +114,11 @@ export default class BaseWidget {
         this.disabled = disabled;
         if (this.disabled) {
             this.button.classList.add('disabled');
+            this.button.setAttribute('aria-disabled', 'true');
         }
         else {
             this.button.classList.remove('disabled');
+            this.button.removeAttribute('aria-disabled');
         }
     }
     setSelected(selected) {

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

@@ -1,4 +1,4 @@
-import Mat33 from '../../geometry/Mat33';
+import Mat33 from '../../math/Mat33';
 import { PanZoomMode } from '../../tools/PanZoom';
 import { EditorEventType } from '../../types';
 import Viewport from '../../Viewport';
@@ -43,7 +43,7 @@ const makeZoomControl = (localizationTable, editor) => {
     const zoomBy = (factor) => {
         const screenCenter = editor.viewport.visibleRect.center;
         const transformUpdate = Mat33.scaling2D(factor, screenCenter);
-        editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+        editor.dispatch(Viewport.transformBy(transformUpdate), false);
     };
     increaseButton.onclick = () => {
         zoomBy(5.0 / 4);
@@ -52,7 +52,7 @@ const makeZoomControl = (localizationTable, editor) => {
         zoomBy(4.0 / 5);
     };
     resetViewButton.onclick = () => {
-        editor.dispatch(new Viewport.ViewportTransform(editor.viewport.canvasToScreenTransform.inverse()), true);
+        editor.dispatch(Viewport.transformBy(editor.viewport.canvasToScreenTransform.inverse()), true);
     };
     return zoomLevelRow;
 };

package/dist/src/toolbar/widgets/SelectionWidget.d.ts

@@ -7,5 +7,4 @@ export declare class SelectionWidget extends BaseToolWidget {
     constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
 }

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

@@ -1,41 +1,33 @@
 import { EditorEventType } from '../../types';
-import { makeSelectionIcon } from '../icons';
+import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
+import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 export class SelectionWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, localization);
         this.tool = tool;
-    }
-    getTitle() {
-        return this.localizationTable.select;
-    }
-    createIcon() {
-        return makeSelectionIcon();
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        const resizeButton = document.createElement('button');
-        const duplicateButton = document.createElement('button');
-        const deleteButton = document.createElement('button');
-        resizeButton.innerText = this.localizationTable.resizeImageToSelection;
-        resizeButton.disabled = true;
-        deleteButton.innerText = this.localizationTable.deleteSelection;
-        deleteButton.disabled = true;
-        duplicateButton.innerText = this.localizationTable.duplicateSelection;
-        duplicateButton.disabled = true;
-        resizeButton.onclick = () => {
+        const resizeButton = new ActionButtonWidget(editor, localization, makeResizeViewportIcon, this.localizationTable.resizeImageToSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(this.editor.setImportExportRect(selection.region));
-        };
-        deleteButton.onclick = () => {
+        });
+        const deleteButton = new ActionButtonWidget(editor, localization, makeDeleteSelectionIcon, this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
-        };
-        duplicateButton.onclick = () => {
+        });
+        const duplicateButton = new ActionButtonWidget(editor, localization, makeDuplicateSelectionIcon, this.localizationTable.duplicateSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.duplicateSelectedObjects());
+        });
+        this.addSubWidget(resizeButton);
+        this.addSubWidget(deleteButton);
+        this.addSubWidget(duplicateButton);
+        const updateDisabled = (disabled) => {
+            resizeButton.setDisabled(disabled);
+            deleteButton.setDisabled(disabled);
+            duplicateButton.setDisabled(disabled);
         };
+        updateDisabled(true);
         // Enable/disable actions based on whether items are selected
         this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
@@ -44,13 +36,14 @@ export class SelectionWidget extends BaseToolWidget {
             if (toolEvt.tool === this.tool) {
                 const selection = this.tool.getSelection();
                 const hasSelection = selection && selection.region.area > 0;
-                resizeButton.disabled = !hasSelection;
-                deleteButton.disabled = resizeButton.disabled;
-                duplicateButton.disabled = resizeButton.disabled;
+                updateDisabled(!hasSelection);
             }
         });
-        container.replaceChildren(resizeButton, duplicateButton, deleteButton);
-        dropdown.appendChild(container);
-        return true;
+    }
+    getTitle() {
+        return this.localizationTable.select;
+    }
+    createIcon() {
+        return makeSelectionIcon();
     }
 }

package/dist/src/tools/Eraser.js

@@ -1,5 +1,5 @@
 import BaseTool from './BaseTool';
-import LineSegment2 from '../geometry/LineSegment2';
+import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
 import { ToolType } from './ToolController';
 import { PointerDevice } from '../Pointer';

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

@@ -1,5 +1,5 @@
 import { Editor } from '../Editor';
-import { Point2 } from '../geometry/Vec2';
+import { Point2 } from '../math/Vec2';
 import Pointer from '../Pointer';
 import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
 import BaseTool from './BaseTool';

package/dist/src/tools/PanZoom.js

@@ -1,6 +1,6 @@
-import Mat33 from '../geometry/Mat33';
-import { Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
+import Mat33 from '../math/Mat33';
+import { Vec2 } from '../math/Vec2';
+import Vec3 from '../math/Vec3';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import { Viewport } from '../Viewport';
@@ -53,7 +53,7 @@ export default class PanZoom extends BaseTool {
             handlingGesture = true;
         }
         if (handlingGesture) {
-            (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
+            (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = Viewport.transformBy(Mat33.identity));
             this.editor.display.setDraftMode(true);
         }
         return handlingGesture;
@@ -74,16 +74,16 @@ export default class PanZoom extends BaseTool {
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
         this.lastAngle = angle;
-        this.transform = new Viewport.ViewportTransform(this.transform.transform.rightMul(transformUpdate));
+        this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
     }
     handleOneFingerMove(pointer) {
         const delta = this.getCenterDelta(pointer.screenPos);
-        this.transform = new Viewport.ViewportTransform(this.transform.transform.rightMul(Mat33.translation(delta)));
+        this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(delta)));
         this.lastScreenCenter = pointer.screenPos;
     }
     onPointerMove({ allPointers }) {
         var _a;
-        (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
+        (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = Viewport.transformBy(Mat33.identity));
         const lastTransform = this.transform;
         if (allPointers.length === 2) {
             this.handleTwoFingerMove(allPointers);
@@ -110,27 +110,30 @@ export default class PanZoom extends BaseTool {
     }
     // Applies [transformUpdate] to the editor. This stacks on top of the
     // current transformation, if it exists.
-    updateTransform(transformUpdate) {
+    updateTransform(transformUpdate, announce = false) {
         var _a;
         let newTransform = transformUpdate;
         if (this.transform) {
             newTransform = this.transform.transform.rightMul(transformUpdate);
         }
         (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
-        this.transform = new Viewport.ViewportTransform(newTransform);
+        this.transform = Viewport.transformBy(newTransform);
         this.transform.apply(this.editor);
+        if (announce) {
+            this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
+        }
     }
     onWheel({ delta, screenPos }) {
         // Reset the transformation -- wheel events are individual events, so we don't
         // need to unapply/reapply.
-        this.transform = new Viewport.ViewportTransform(Mat33.identity);
+        this.transform = Viewport.transformBy(Mat33.identity);
         const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
         const pinchZoomScaleFactor = 1.04;
         const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
-        this.updateTransform(transformUpdate);
+        this.updateTransform(transformUpdate, true);
         return true;
     }
     onKeyPress({ key }) {
@@ -138,7 +141,7 @@ export default class PanZoom extends BaseTool {
             return false;
         }
         // No need to keep the same the transform for keyboard events.
-        this.transform = new Viewport.ViewportTransform(Mat33.identity);
+        this.transform = Viewport.transformBy(Mat33.identity);
         let translation = Vec2.zero;
         let scale = 1;
         let rotation = 0;
@@ -154,10 +157,12 @@ export default class PanZoom extends BaseTool {
             case 'ArrowRight':
                 translation = Vec2.of(1, 0);
                 break;
+            case 'q':
             case 'k':
             case 'ArrowUp':
                 translation = Vec2.of(0, -1);
                 break;
+            case 'e':
             case 'j':
             case 'ArrowDown':
                 translation = Vec2.of(0, 1);
@@ -179,11 +184,16 @@ export default class PanZoom extends BaseTool {
         }
         // For each keypress,
         translation = translation.times(30); // Move at most 30 units
-        rotation *= Math.PI / 8; // Rotate at most a sixteenth of a rotation
+        rotation *= Math.PI / 8; // Rotate at least a sixteenth of a rotation
         // Transform the canvas, not the viewport:
         translation = translation.times(-1);
         rotation = rotation * -1;
         scale = 1 / scale;
+        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+        // TODO: Figure out why and implement a better solution.
+        if (rotation !== 0) {
+            rotation += 0.0001;
+        }
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without translating (treat toCanvas as a linear instead of
         // an affine transformation).
@@ -191,7 +201,7 @@ export default class PanZoom extends BaseTool {
         // Rotate/scale about the center of the canvas
         const transformCenter = this.editor.viewport.visibleRect.center;
         const transformUpdate = Mat33.scaling2D(scale, transformCenter).rightMul(Mat33.zRotation(rotation, transformCenter)).rightMul(Mat33.translation(translation));
-        this.updateTransform(transformUpdate);
+        this.updateTransform(transformUpdate, true);
         return true;
     }
     setMode(mode) {

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

@@ -1,8 +1,8 @@
 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 Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import { Point2, Vec2 } from '../math/Vec2';
 import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';