js-draw 0.25.0 → 1.0.0

package/dist/mjs/tools/ToolController.mjs

@@ -1,19 +1,10 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import  { InputEvtType, EditorEventType }  from '../types.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import { Color4 } from '@js-draw/math';
 import  PanZoom, { PanZoomMode }  from './PanZoom.mjs';
 import  Pen  from './Pen.mjs';
 import  ToolEnabledGroup  from './ToolEnabledGroup.mjs';
 import  Eraser  from './Eraser.mjs';
 import  SelectionTool  from './SelectionTool/SelectionTool.mjs';
-import  Color4  from '../Color4.mjs';
 import  UndoRedoShortcut  from './UndoRedoShortcut.mjs';
 import  TextTool  from './TextTool.mjs';
 import  PipetteTool  from './PipetteTool.mjs';
@@ -24,34 +15,46 @@ import  { makePressureSensitiveFreehandLineBuilder }  from '../components/builde
 import  FindTool  from './FindTool.mjs';
 import  SelectAllShortcutHandler  from './SelectionTool/SelectAllShortcutHandler.mjs';
 import  SoundUITool  from './SoundUITool.mjs';
-var ToolController = /** @class */ (function () {
+import  { InputEvtType }  from '../inputEvents.mjs';
+import  InputPipeline  from './InputFilter/InputPipeline.mjs';
+import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
+export default class ToolController {
     /** @internal */
-    function ToolController(editor, localization) {
+    constructor(editor, localization) {
         this.activeTool = null;
-        var primaryToolGroup = new ToolEnabledGroup();
+        this.inputPipeline = new InputPipeline();
+        this.inputPipeline.setEmitListener(event => this.onEventInternal(event));
+        const primaryToolGroup = new ToolEnabledGroup();
         this.primaryToolGroup = primaryToolGroup;
-        var panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
-        var keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
-        var primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
-        var primaryTools = [
+        const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
+        const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
+        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
+        const secondaryPenTool = new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 });
+        // Stabilize the secondary pen tool.
+        secondaryPenTool.setInputMapper(new InputStabilizer(editor.viewport));
+        const primaryTools = [
             // Three pens
             primaryPenTool,
-            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
+            secondaryPenTool,
             // Highlighter-like pen with width=40
-            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, makePressureSensitiveFreehandLineBuilder),
+            new Pen(editor, localization.penTool(3), {
+                color: Color4.ofRGBA(1, 1, 0, 0.5),
+                thickness: 40,
+                factory: makePressureSensitiveFreehandLineBuilder
+            }),
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
             new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
         ];
         // Accessibility tools
-        var soundExplorer = new SoundUITool(editor, localization.soundExplorer);
+        const soundExplorer = new SoundUITool(editor, localization.soundExplorer);
         soundExplorer.setEnabled(false);
-        this.tools = __spreadArray(__spreadArray([
+        this.tools = [
             new PipetteTool(editor, localization.pipetteTool),
             soundExplorer,
-            panZoomTool
-        ], primaryTools, true), [
+            panZoomTool,
+            ...primaryTools,
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
             new ToolbarShortcutHandler(editor),
@@ -59,16 +62,16 @@ var ToolController = /** @class */ (function () {
             new FindTool(editor),
             new PasteHandler(editor),
             new SelectAllShortcutHandler(editor),
-        ], false);
-        primaryTools.forEach(function (tool) { return tool.setToolGroup(primaryToolGroup); });
+        ];
+        primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
         primaryPenTool.setEnabled(true);
-        editor.notifier.on(EditorEventType.ToolEnabled, function (event) {
+        editor.notifier.on(EditorEventType.ToolEnabled, event => {
             if (event.kind === EditorEventType.ToolEnabled) {
                 editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
             }
         });
-        editor.notifier.on(EditorEventType.ToolDisabled, function (event) {
+        editor.notifier.on(EditorEventType.ToolDisabled, event => {
             if (event.kind === EditorEventType.ToolDisabled) {
                 editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
             }
@@ -76,48 +79,45 @@ var ToolController = /** @class */ (function () {
         this.activeTool = null;
     }
     // Replaces the current set of tools with `tools`. This should only be done before
-    // the creation of the app's toolbar (if using `HTMLToolbar`).
-    ToolController.prototype.setTools = function (tools, primaryToolGroup) {
+    // the creation of the app's toolbar (if using `AbstractToolbar`).
+    setTools(tools, primaryToolGroup) {
         this.tools = tools;
-        this.primaryToolGroup = primaryToolGroup !== null && primaryToolGroup !== void 0 ? primaryToolGroup : new ToolEnabledGroup();
-    };
+        this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
+    }
     // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
     // This should be called before creating the app's toolbar.
-    ToolController.prototype.addPrimaryTool = function (tool) {
+    addPrimaryTool(tool) {
         tool.setToolGroup(this.primaryToolGroup);
         if (tool.isEnabled()) {
             this.primaryToolGroup.notifyEnabled(tool);
         }
         this.addTool(tool);
-    };
-    ToolController.prototype.getPrimaryTools = function () {
-        var _this = this;
-        return this.tools.filter(function (tool) {
-            return tool.getToolGroup() === _this.primaryToolGroup;
+    }
+    getPrimaryTools() {
+        return this.tools.filter(tool => {
+            return tool.getToolGroup() === this.primaryToolGroup;
         });
-    };
+    }
     // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
     // This should be called before creating the app's toolbar.
-    ToolController.prototype.addTool = function (tool) {
+    addTool(tool) {
         this.tools.push(tool);
-    };
-    // Returns true if the event was handled
-    ToolController.prototype.dispatchInputEvent = function (event) {
-        var _a, _b;
-        var handled = false;
+    }
+    // @internal use `dispatchEvent` rather than calling `onEvent` directly.
+    onEventInternal(event) {
+        let handled = false;
         if (event.kind === InputEvtType.PointerDownEvt) {
-            var canOnlySendToActiveTool = false;
+            let canOnlySendToActiveTool = false;
             if (this.activeTool && !this.activeTool.eventCanBeDeliveredToNonActiveTool(event)) {
                 canOnlySendToActiveTool = true;
             }
-            for (var _i = 0, _c = this.tools; _i < _c.length; _i++) {
-                var tool = _c[_i];
+            for (const tool of this.tools) {
                 if (canOnlySendToActiveTool && tool !== this.activeTool) {
                     continue;
                 }
-                if (tool.isEnabled() && tool.onPointerDown(event)) {
+                if (tool.isEnabled() && tool.onEvent(event)) {
                     if (this.activeTool !== tool) {
-                        (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.onGestureCancel();
+                        this.activeTool?.onEvent({ kind: InputEvtType.GestureCancelEvt });
                     }
                     this.activeTool = tool;
                     handled = true;
@@ -126,8 +126,8 @@ var ToolController = /** @class */ (function () {
             }
         }
         else if (event.kind === InputEvtType.PointerUpEvt) {
-            var upResult = (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
-            var continueHandlingEvents = upResult && event.allPointers.length > 1;
+            const upResult = this.activeTool?.onEvent(event);
+            const continueHandlingEvents = upResult && event.allPointers.length > 1;
             // Should the active tool continue handling events (without an additional pointer down?)
             if (!continueHandlingEvents) {
                 // No -- Remove the current tool
@@ -137,53 +137,50 @@ var ToolController = /** @class */ (function () {
         }
         else if (event.kind === InputEvtType.PointerMoveEvt) {
             if (this.activeTool !== null) {
-                this.activeTool.onPointerMove(event);
+                this.activeTool.onEvent(event);
                 handled = true;
             }
         }
         else if (event.kind === InputEvtType.GestureCancelEvt) {
             if (this.activeTool !== null) {
-                this.activeTool.onGestureCancel();
+                this.activeTool.onEvent(event);
                 this.activeTool = null;
             }
         }
         else {
-            var allCasesHandledGuard = void 0;
-            for (var _d = 0, _e = this.tools; _d < _e.length; _d++) {
-                var tool = _e[_d];
+            for (const tool of this.tools) {
                 if (!tool.isEnabled()) {
                     continue;
                 }
-                switch (event.kind) {
-                    case InputEvtType.KeyPressEvent:
-                        handled = tool.onKeyPress(event);
-                        break;
-                    case InputEvtType.KeyUpEvent:
-                        handled = tool.onKeyUp(event);
-                        break;
-                    case InputEvtType.WheelEvt:
-                        handled = tool.onWheel(event);
-                        break;
-                    case InputEvtType.CopyEvent:
-                        handled = tool.onCopy(event);
-                        break;
-                    case InputEvtType.PasteEvent:
-                        handled = tool.onPaste(event);
-                        break;
-                    default:
-                        allCasesHandledGuard = event;
-                        return allCasesHandledGuard;
-                }
+                handled = tool.onEvent(event);
                 if (handled) {
                     break;
                 }
             }
         }
         return handled;
-    };
-    ToolController.prototype.getMatchingTools = function (type) {
-        return this.tools.filter(function (tool) { return tool instanceof type; });
-    };
-    return ToolController;
-}());
-export default ToolController;
+    }
+    /** Alias for {@link dispatchInputEvent}. */
+    onEvent(event) {
+        return this.dispatchInputEvent(event);
+    }
+    // Returns true if the event was handled.
+    dispatchInputEvent(event) {
+        // Feed the event through the input pipeline
+        return this.inputPipeline.onEvent(event);
+    }
+    /**
+     * Adds a new `InputMapper` to this' input pipeline.
+     *
+     * A `mapper` is really a relation that maps each event to no, one,
+     * or many other events.
+     *
+     * @see {@link InputMapper}.
+     */
+    addInputMapper(mapper) {
+        this.inputPipeline.addToTail(mapper);
+    }
+    getMatchingTools(type) {
+        return this.tools.filter(tool => tool instanceof type);
+    }
+}

package/dist/mjs/tools/ToolEnabledGroup.mjs

@@ -1,14 +1,10 @@
 // Connects a group of tools -- at most one tool in the group can be enabled.
-var ToolEnabledGroup = /** @class */ (function () {
-    function ToolEnabledGroup() {
-    }
-    ToolEnabledGroup.prototype.notifyEnabled = function (tool) {
-        var _a;
+export default class ToolEnabledGroup {
+    constructor() { }
+    notifyEnabled(tool) {
         if (tool !== this.activeTool) {
-            (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.setEnabled(false);
+            this.activeTool?.setEnabled(false);
             this.activeTool = tool;
         }
-    };
-    return ToolEnabledGroup;
-}());
-export default ToolEnabledGroup;
+    }
+}

package/dist/mjs/tools/ToolSwitcherShortcut.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import { KeyPressEvent } from '../types';
+import { KeyPressEvent } from '../inputEvents';
 import BaseTool from './BaseTool';
 /**
  * Handles keyboard events used, by default, to select tools. By default,

package/dist/mjs/tools/ToolSwitcherShortcut.mjs

@@ -1,18 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 import  BaseTool  from './BaseTool.mjs';
 /**
  * Handles keyboard events used, by default, to select tools. By default,
@@ -22,23 +7,20 @@ import  BaseTool  from './BaseTool.mjs';
  *
  * @deprecated This may be replaced in the future.
  */
-var ToolSwitcherShortcut = /** @class */ (function (_super) {
-    __extends(ToolSwitcherShortcut, _super);
-    function ToolSwitcherShortcut(editor) {
-        var _this = _super.call(this, editor.notifier, editor.localization.changeTool) || this;
-        _this.editor = editor;
-        return _this;
+export default class ToolSwitcherShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
     }
     // @internal
-    ToolSwitcherShortcut.prototype.onKeyPress = function (_a) {
-        var key = _a.key;
-        var toolController = this.editor.toolController;
-        var primaryTools = toolController.getPrimaryTools();
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
         // Map keys 0-9 to primary tools.
-        var keyMatch = /^[0-9]$/.exec(key);
-        var targetTool;
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
         if (keyMatch) {
-            var targetIdx = parseInt(keyMatch[0], 10) - 1;
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
             targetTool = primaryTools[targetIdx];
         }
         if (targetTool) {
@@ -46,7 +28,5 @@ var ToolSwitcherShortcut = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    return ToolSwitcherShortcut;
-}(BaseTool));
-export default ToolSwitcherShortcut;
+    }
+}

package/dist/mjs/tools/ToolbarShortcutHandler.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import { KeyPressEvent } from '../types';
+import { KeyPressEvent } from '../inputEvents';
 import BaseTool from './BaseTool';
 type KeyPressListener = (event: KeyPressEvent) => boolean;
 export default class ToolbarShortcutHandler extends BaseTool {

package/dist/mjs/tools/ToolbarShortcutHandler.mjs

@@ -1,48 +1,28 @@
 // Allows the toolbar to register keyboard events.
 // @packageDocumentation
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 import  BaseTool  from './BaseTool.mjs';
-var ToolbarShortcutHandler = /** @class */ (function (_super) {
-    __extends(ToolbarShortcutHandler, _super);
-    function ToolbarShortcutHandler(editor) {
-        var _this = _super.call(this, editor.notifier, editor.localization.changeTool) || this;
-        _this.listeners = new Set([]);
-        return _this;
+export default class ToolbarShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.listeners = new Set([]);
     }
-    ToolbarShortcutHandler.prototype.registerListener = function (listener) {
+    registerListener(listener) {
         this.listeners.add(listener);
-    };
-    ToolbarShortcutHandler.prototype.removeListener = function (listener) {
+    }
+    removeListener(listener) {
         this.listeners.delete(listener);
-    };
-    ToolbarShortcutHandler.prototype.onKeyPress = function (event) {
+    }
+    onKeyPress(event) {
         // TypeScript seems to automatically convert for of loops into for(init;check;update)
         // loops (even with target set to es6). Thus, we cannot iterate directly through the
         // set here.
         // See https://stackoverflow.com/q/48886500
-        var listeners = Array.from(this.listeners.values());
-        for (var _i = 0, listeners_1 = listeners; _i < listeners_1.length; _i++) {
-            var listener = listeners_1[_i];
+        const listeners = Array.from(this.listeners.values());
+        for (const listener of listeners) {
             if (listener(event)) {
                 return true;
             }
         }
         return false;
-    };
-    return ToolbarShortcutHandler;
-}(BaseTool));
-export default ToolbarShortcutHandler;
+    }
+}

package/dist/mjs/tools/UndoRedoShortcut.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import { KeyPressEvent } from '../types';
+import { KeyPressEvent } from '../inputEvents';
 import BaseTool from './BaseTool';
 export default class UndoRedoShortcut extends BaseTool {
     private editor;

package/dist/mjs/tools/UndoRedoShortcut.mjs

@@ -1,30 +1,13 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 import  BaseTool  from './BaseTool.mjs';
 import  { redoKeyboardShortcutId, undoKeyboardShortcutId }  from './keybindings.mjs';
 // Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
-var UndoRedoShortcut = /** @class */ (function (_super) {
-    __extends(UndoRedoShortcut, _super);
-    function UndoRedoShortcut(editor) {
-        var _this = _super.call(this, editor.notifier, editor.localization.undoRedoTool) || this;
-        _this.editor = editor;
-        return _this;
+export default class UndoRedoShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.undoRedoTool);
+        this.editor = editor;
     }
     // @internal
-    UndoRedoShortcut.prototype.onKeyPress = function (event) {
+    onKeyPress(event) {
         if (this.editor.shortcuts.matchesShortcut(undoKeyboardShortcutId, event)) {
             this.editor.history.undo();
             return true;
@@ -34,7 +17,5 @@ var UndoRedoShortcut = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    return UndoRedoShortcut;
-}(BaseTool));
-export default UndoRedoShortcut;
+    }
+}

package/dist/mjs/tools/keybindings.mjs

@@ -1,41 +1,41 @@
 import  KeyboardShortcutManager  from '../shortcuts/KeyboardShortcutManager.mjs';
 // This file contains user-overridable tool-realted keybindings.
 // Undo/redo
-export var undoKeyboardShortcutId = 'jsdraw.tools.undo';
-export var redoKeyboardShortcutId = 'jsdaw.tools.redo';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(undoKeyboardShortcutId, ['ctrlOrMeta+z'], 'Undo');
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(redoKeyboardShortcutId, ['ctrlOrMeta+Z', 'ctrlOrMeta+Shift+z'], 'Redo');
+export const undoKeyboardShortcutId = 'jsdraw.tools.undo';
+export const redoKeyboardShortcutId = 'jsdaw.tools.redo';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(undoKeyboardShortcutId, ['CtrlOrMeta+KeyZ'], 'Undo');
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(redoKeyboardShortcutId, ['CtrlOrMeta+Shift+KeyZ', 'CtrlOrMeta+KeyY'], 'Redo');
 // Pen/eraser/selection keybindings
-export var increaseSizeKeyboardShortcutId = 'jsdraw.tools.increaseSize';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(increaseSizeKeyboardShortcutId, ['+', '='], 'Increase pen/eraser size');
-export var decreaseSizeKeyboardShortcutId = 'jsdraw.tools.decreaseSize';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(decreaseSizeKeyboardShortcutId, ['-', '_'], 'Decrease pen/eraser size');
-export var snapToGridKeyboardShortcutId = 'jsdraw.tools.snapToGrid';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(snapToGridKeyboardShortcutId, ['control', 'meta'], 'Snap to grid (press and hold)');
-export var lineLockKeyboardShortcutId = 'jsdraw.tools.lockToLine';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(lineLockKeyboardShortcutId, ['shift'], 'Snap to XY axes (press and hold)');
+export const increaseSizeKeyboardShortcutId = 'jsdraw.tools.increaseSize';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(increaseSizeKeyboardShortcutId, ['Equal', 'Shift+Equal'], 'Increase pen/eraser size');
+export const decreaseSizeKeyboardShortcutId = 'jsdraw.tools.decreaseSize';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(decreaseSizeKeyboardShortcutId, ['Minus', 'Shift+Minus'], 'Decrease pen/eraser size');
+export const snapToGridKeyboardShortcutId = 'jsdraw.tools.snapToGrid';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(snapToGridKeyboardShortcutId, ['Control', 'Meta'], 'Snap to grid (press and hold)');
+export const lineLockKeyboardShortcutId = 'jsdraw.tools.lockToLine';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(lineLockKeyboardShortcutId, ['Shift'], 'Snap to XY axes (press and hold)');
 // Find tool
-export var toggleFindVisibleShortcutId = 'js-draw.tools.FindTool.toggleVisible';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(toggleFindVisibleShortcutId, ['ctrlOrMeta+f'], 'Shows/hides the find tool');
+export const toggleFindVisibleShortcutId = 'js-draw.tools.FindTool.toggleVisible';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(toggleFindVisibleShortcutId, ['CtrlOrMeta+KeyF'], 'Shows/hides the find tool');
 // Pan/zoom
-export var moveLeftKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveLeft';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveLeftKeyboardShortcutId, ['ArrowLeft', 'h', 'a'], 'Pan left');
-export var moveRightKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveRight';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveRightKeyboardShortcutId, ['ArrowRight', 'l', 'd'], 'Pan right');
-export var moveUpKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveUp';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveUpKeyboardShortcutId, ['ArrowUp', 'k', 'q'], 'Pan up');
-export var moveDownKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveDown';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveDownKeyboardShortcutId, ['ArrowDown', 'j', 'e'], 'Pan down');
-export var rotateClockwiseKeyboardShortcutId = 'jsdraw.tools.PanZoom.rotateViewClockwise';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(rotateClockwiseKeyboardShortcutId, ['R'], 'Rotate viewport clockwise');
-export var rotateCounterClockwiseKeyboardShortcutId = 'jsdraw.tools.PanZoom.rotateViewCounterClockwise';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(rotateCounterClockwiseKeyboardShortcutId, ['r'], 'Rotate viewport counter-clockwise');
-export var zoomInKeyboardShortcutId = 'jsdraw.tools.PanZoom.zoomIn';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(zoomInKeyboardShortcutId, ['w'], 'Zoom in');
-export var zoomOutKeyboardShortcutId = 'jsdraw.tools.PanZoom.zoomOut';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(zoomOutKeyboardShortcutId, ['s'], 'Zoom out');
+export const moveLeftKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveLeft';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveLeftKeyboardShortcutId, ['ArrowLeft', 'KeyH', 'KeyA'], 'Pan left');
+export const moveRightKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveRight';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveRightKeyboardShortcutId, ['ArrowRight', 'KeyL', 'KeyD'], 'Pan right');
+export const moveUpKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveUp';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveUpKeyboardShortcutId, ['ArrowUp', 'KeyK', 'KeyQ'], 'Pan up');
+export const moveDownKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveDown';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(moveDownKeyboardShortcutId, ['ArrowDown', 'KeyJ', 'KeyE'], 'Pan down');
+export const rotateClockwiseKeyboardShortcutId = 'jsdraw.tools.PanZoom.rotateViewClockwise';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(rotateClockwiseKeyboardShortcutId, ['Shift+KeyR'], 'Rotate viewport clockwise');
+export const rotateCounterClockwiseKeyboardShortcutId = 'jsdraw.tools.PanZoom.rotateViewCounterClockwise';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(rotateCounterClockwiseKeyboardShortcutId, ['KeyR'], 'Rotate viewport counter-clockwise');
+export const zoomInKeyboardShortcutId = 'jsdraw.tools.PanZoom.zoomIn';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(zoomInKeyboardShortcutId, ['KeyW'], 'Zoom in');
+export const zoomOutKeyboardShortcutId = 'jsdraw.tools.PanZoom.zoomOut';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(zoomOutKeyboardShortcutId, ['KeyS'], 'Zoom out');
 // Selection
-export var selectAllKeyboardShortcut = 'jsdraw.tools.SelectionTool.selectAll';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(selectAllKeyboardShortcut, ['ctrlOrMeta+a'], 'Select all');
-export var duplicateSelectionShortcut = 'jsdraw.tools.SelectionTool.duplicateSelection';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(duplicateSelectionShortcut, ['ctrlOrMeta+d'], 'Duplicate selection');
+export const selectAllKeyboardShortcut = 'jsdraw.tools.SelectionTool.selectAll';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(selectAllKeyboardShortcut, ['CtrlOrMeta+KeyA'], 'Select all');
+export const duplicateSelectionShortcut = 'jsdraw.tools.SelectionTool.duplicateSelection';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(duplicateSelectionShortcut, ['CtrlOrMeta+KeyD'], 'Duplicate selection');

package/dist/mjs/tools/localization.d.ts

@@ -16,9 +16,10 @@ export interface ToolLocalization {
     soundExplorer: string;
     disableAccessibilityExploreTool: string;
     enableAccessibilityExploreTool: string;
+    soundExplorerUsageAnnouncement: string;
     findLabel: string;
     toNextMatch: string;
-    closeFindDialog: string;
+    closeDialog: string;
     findDialogShown: string;
     findDialogHidden: string;
     focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;

package/dist/mjs/tools/localization.mjs

@@ -1,5 +1,5 @@
-export var defaultToolLocalization = {
-    penTool: function (penId) { return "Pen ".concat(penId); },
+export const defaultToolLocalization = {
+    penTool: (penId) => `Pen ${penId}`,
     selectionTool: 'Selection',
     selectAllTool: 'Select all shortcut',
     eraserTool: 'Eraser',
@@ -16,15 +16,16 @@ export var defaultToolLocalization = {
     soundExplorer: 'Sound-based image exploration',
     disableAccessibilityExploreTool: 'Disable sound-based exploration',
     enableAccessibilityExploreTool: 'Enable sound-based exploration',
+    soundExplorerUsageAnnouncement: 'Sound-based image exploration enabled: Click/drag the screen to play a sound representation of different parts of the image.',
     findLabel: 'Find',
     toNextMatch: 'Next',
-    closeFindDialog: 'Close',
+    closeDialog: 'Close',
     findDialogShown: 'Find dialog shown',
     findDialogHidden: 'Find dialog hidden',
-    focusedFoundText: function (matchIdx, totalMatches) { return "Viewing match ".concat(matchIdx, " of ").concat(totalMatches); },
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Any device panning',
-    copied: function (count, description) { return "Copied ".concat(count, " ").concat(description); },
-    pasted: function (count, description) { return "Pasted ".concat(count, " ").concat(description); },
-    toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " enabled"); },
-    toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " disabled"); },
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };