js-draw 1.21.1 → 1.21.3

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

@@ -0,0 +1,16 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../inputEvents';
+import BaseTool from './BaseTool';
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ */
+export default class ToolSwitcherShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    onKeyPress({ key }: KeyPressEvent): boolean;
+}

package/dist/cjs/tools/ToolSwitcherShortcut.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ */
+class ToolSwitcherShortcut extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    // @internal
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
+        // Map keys 0-9 to primary tools.
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
+        if (keyMatch) {
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
+            targetTool = primaryTools[targetIdx];
+        }
+        if (targetTool) {
+            targetTool.setEnabled(true);
+            return true;
+        }
+        return false;
+    }
+}
+exports.default = ToolSwitcherShortcut;

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

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../inputEvents';
+import BaseTool from './BaseTool';
+type KeyPressListener = (event: KeyPressEvent) => boolean;
+export default class ToolbarShortcutHandler extends BaseTool {
+    private listeners;
+    constructor(editor: Editor);
+    registerListener(listener: KeyPressListener): void;
+    removeListener(listener: KeyPressListener): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+}
+export {};

package/dist/cjs/tools/ToolbarShortcutHandler.js

@@ -0,0 +1,34 @@
+"use strict";
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+class ToolbarShortcutHandler extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.listeners = new Set([]);
+    }
+    registerListener(listener) {
+        this.listeners.add(listener);
+    }
+    removeListener(listener) {
+        this.listeners.delete(listener);
+    }
+    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
+        const listeners = Array.from(this.listeners.values());
+        for (const listener of listeners) {
+            if (listener(event)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+exports.default = ToolbarShortcutHandler;

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

@@ -0,0 +1,8 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../inputEvents';
+import BaseTool from './BaseTool';
+export default class UndoRedoShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress(event: KeyPressEvent): boolean;
+}

package/dist/cjs/tools/UndoRedoShortcut.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const keybindings_1 = require("./keybindings");
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+class UndoRedoShortcut extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.undoRedoTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event)) {
+            this.editor.history.undo();
+            return true;
+        }
+        else if (this.editor.shortcuts.matchesShortcut(keybindings_1.redoKeyboardShortcutId, event)) {
+            this.editor.history.redo();
+            return true;
+        }
+        return false;
+    }
+}
+exports.default = UndoRedoShortcut;

package/dist/cjs/tools/UndoRedoShortcut.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/keybindings.d.ts

@@ -0,0 +1,16 @@
+export declare const undoKeyboardShortcutId = "jsdraw.tools.undo";
+export declare const redoKeyboardShortcutId = "jsdaw.tools.redo";
+export declare const increaseSizeKeyboardShortcutId = "jsdraw.tools.increaseSize";
+export declare const decreaseSizeKeyboardShortcutId = "jsdraw.tools.decreaseSize";
+export declare const snapToGridKeyboardShortcutId = "jsdraw.tools.snapToGrid";
+export declare const lineLockKeyboardShortcutId = "jsdraw.tools.lockToLine";
+export declare const toggleFindVisibleShortcutId = "js-draw.tools.FindTool.toggleVisible";
+export declare const moveLeftKeyboardShortcutId = "jsdraw.tools.PanZoom.moveLeft";
+export declare const moveRightKeyboardShortcutId = "jsdraw.tools.PanZoom.moveRight";
+export declare const moveUpKeyboardShortcutId = "jsdraw.tools.PanZoom.moveUp";
+export declare const moveDownKeyboardShortcutId = "jsdraw.tools.PanZoom.moveDown";
+export declare const rotateClockwiseKeyboardShortcutId = "jsdraw.tools.PanZoom.rotateViewClockwise";
+export declare const rotateCounterClockwiseKeyboardShortcutId = "jsdraw.tools.PanZoom.rotateViewCounterClockwise";
+export declare const zoomInKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomIn";
+export declare const zoomOutKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomOut";
+export * from './SelectionTool/keybindings';

package/dist/cjs/tools/keybindings.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zoomOutKeyboardShortcutId = exports.zoomInKeyboardShortcutId = exports.rotateCounterClockwiseKeyboardShortcutId = exports.rotateClockwiseKeyboardShortcutId = exports.moveDownKeyboardShortcutId = exports.moveUpKeyboardShortcutId = exports.moveRightKeyboardShortcutId = exports.moveLeftKeyboardShortcutId = exports.toggleFindVisibleShortcutId = exports.lineLockKeyboardShortcutId = exports.snapToGridKeyboardShortcutId = exports.decreaseSizeKeyboardShortcutId = exports.increaseSizeKeyboardShortcutId = exports.redoKeyboardShortcutId = exports.undoKeyboardShortcutId = void 0;
+const KeyboardShortcutManager_1 = __importDefault(require("../shortcuts/KeyboardShortcutManager"));
+// This file contains user-overridable tool-realted keybindings.
+// Undo/redo
+exports.undoKeyboardShortcutId = 'jsdraw.tools.undo';
+exports.redoKeyboardShortcutId = 'jsdaw.tools.redo';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.undoKeyboardShortcutId, ['CtrlOrMeta+KeyZ'], 'Undo');
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.redoKeyboardShortcutId, ['CtrlOrMeta+Shift+KeyZ', 'CtrlOrMeta+KeyY'], 'Redo');
+// Pen/eraser/selection keybindings
+exports.increaseSizeKeyboardShortcutId = 'jsdraw.tools.increaseSize';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.increaseSizeKeyboardShortcutId, ['Equal', 'Shift+Equal'], 'Increase pen/eraser size');
+exports.decreaseSizeKeyboardShortcutId = 'jsdraw.tools.decreaseSize';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.decreaseSizeKeyboardShortcutId, ['Minus', 'Shift+Minus'], 'Decrease pen/eraser size');
+exports.snapToGridKeyboardShortcutId = 'jsdraw.tools.snapToGrid';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.snapToGridKeyboardShortcutId, ['Control', 'Meta'], 'Snap to grid (press and hold)');
+exports.lineLockKeyboardShortcutId = 'jsdraw.tools.lockToLine';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.lineLockKeyboardShortcutId, ['Shift'], 'Snap to XY axes (press and hold)');
+// Find tool
+exports.toggleFindVisibleShortcutId = 'js-draw.tools.FindTool.toggleVisible';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.toggleFindVisibleShortcutId, ['CtrlOrMeta+KeyF'], 'Shows/hides the find tool');
+// Pan/zoom
+exports.moveLeftKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveLeft';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.moveLeftKeyboardShortcutId, ['ArrowLeft', 'KeyH', 'KeyA'], 'Pan left');
+exports.moveRightKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveRight';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.moveRightKeyboardShortcutId, ['ArrowRight', 'KeyL', 'KeyD'], 'Pan right');
+exports.moveUpKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveUp';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.moveUpKeyboardShortcutId, ['ArrowUp', 'KeyK', 'KeyQ'], 'Pan up');
+exports.moveDownKeyboardShortcutId = 'jsdraw.tools.PanZoom.moveDown';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.moveDownKeyboardShortcutId, ['ArrowDown', 'KeyJ', 'KeyE'], 'Pan down');
+exports.rotateClockwiseKeyboardShortcutId = 'jsdraw.tools.PanZoom.rotateViewClockwise';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.rotateClockwiseKeyboardShortcutId, ['Shift+KeyR'], 'Rotate viewport clockwise');
+exports.rotateCounterClockwiseKeyboardShortcutId = 'jsdraw.tools.PanZoom.rotateViewCounterClockwise';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.rotateCounterClockwiseKeyboardShortcutId, ['KeyR'], 'Rotate viewport counter-clockwise');
+exports.zoomInKeyboardShortcutId = 'jsdraw.tools.PanZoom.zoomIn';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.zoomInKeyboardShortcutId, ['KeyW'], 'Zoom in');
+exports.zoomOutKeyboardShortcutId = 'jsdraw.tools.PanZoom.zoomOut';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.zoomOutKeyboardShortcutId, ['KeyS'], 'Zoom out');
+// Selection tool
+__exportStar(require("./SelectionTool/keybindings"), exports);

package/dist/cjs/tools/lib.d.ts

@@ -0,0 +1,14 @@
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+export { default as PenTool, PenStyle } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
+export { default as EraserTool, EraserMode } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';
+export { default as SoundUITool } from './SoundUITool';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/cjs/tools/lib.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserMode = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = void 0;
+var BaseTool_1 = require("./BaseTool");
+Object.defineProperty(exports, "BaseTool", { enumerable: true, get: function () { return __importDefault(BaseTool_1).default; } });
+var ToolController_1 = require("./ToolController");
+Object.defineProperty(exports, "ToolController", { enumerable: true, get: function () { return __importDefault(ToolController_1).default; } });
+var ToolEnabledGroup_1 = require("./ToolEnabledGroup");
+Object.defineProperty(exports, "ToolEnabledGroup", { enumerable: true, get: function () { return __importDefault(ToolEnabledGroup_1).default; } });
+var UndoRedoShortcut_1 = require("./UndoRedoShortcut");
+Object.defineProperty(exports, "UndoRedoShortcut", { enumerable: true, get: function () { return __importDefault(UndoRedoShortcut_1).default; } });
+var ToolSwitcherShortcut_1 = require("./ToolSwitcherShortcut");
+Object.defineProperty(exports, "ToolSwitcherShortcut", { enumerable: true, get: function () { return __importDefault(ToolSwitcherShortcut_1).default; } });
+var PanZoom_1 = require("./PanZoom");
+Object.defineProperty(exports, "PanZoomTool", { enumerable: true, get: function () { return __importDefault(PanZoom_1).default; } });
+Object.defineProperty(exports, "PanZoomMode", { enumerable: true, get: function () { return PanZoom_1.PanZoomMode; } });
+var Pen_1 = require("./Pen");
+Object.defineProperty(exports, "PenTool", { enumerable: true, get: function () { return __importDefault(Pen_1).default; } });
+var TextTool_1 = require("./TextTool");
+Object.defineProperty(exports, "TextTool", { enumerable: true, get: function () { return __importDefault(TextTool_1).default; } });
+var SelectionTool_1 = require("./SelectionTool/SelectionTool");
+Object.defineProperty(exports, "SelectionTool", { enumerable: true, get: function () { return __importDefault(SelectionTool_1).default; } });
+var SelectAllShortcutHandler_1 = require("./SelectionTool/SelectAllShortcutHandler");
+Object.defineProperty(exports, "SelectAllShortcutHandler", { enumerable: true, get: function () { return __importDefault(SelectAllShortcutHandler_1).default; } });
+var Eraser_1 = require("./Eraser");
+Object.defineProperty(exports, "EraserTool", { enumerable: true, get: function () { return __importDefault(Eraser_1).default; } });
+Object.defineProperty(exports, "EraserMode", { enumerable: true, get: function () { return Eraser_1.EraserMode; } });
+var PasteHandler_1 = require("./PasteHandler");
+Object.defineProperty(exports, "PasteHandler", { enumerable: true, get: function () { return __importDefault(PasteHandler_1).default; } });
+var SoundUITool_1 = require("./SoundUITool");
+Object.defineProperty(exports, "SoundUITool", { enumerable: true, get: function () { return __importDefault(SoundUITool_1).default; } });
+var ToolbarShortcutHandler_1 = require("./ToolbarShortcutHandler");
+Object.defineProperty(exports, "ToolbarShortcutHandler", { enumerable: true, get: function () { return __importDefault(ToolbarShortcutHandler_1).default; } });

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

@@ -0,0 +1,43 @@
+export interface ToolLocalization {
+    keyboardPanZoom: string;
+    penTool: (penId: number) => string;
+    selectionTool: string;
+    selectAllTool: string;
+    eraserTool: string;
+    touchPanTool: string;
+    twoFingerPanZoomTool: string;
+    undoRedoTool: string;
+    pipetteTool: string;
+    rightClickDragPanTool: string;
+    autocorrectedTo: (description: string) => string;
+    autocorrectionCanceled: string;
+    textTool: string;
+    enterTextToInsert: string;
+    changeTool: string;
+    pasteHandler: string;
+    soundExplorer: string;
+    disableAccessibilityExploreTool: string;
+    enableAccessibilityExploreTool: string;
+    soundExplorerUsageAnnouncement: string;
+    findLabel: string;
+    toNextMatch: string;
+    closeDialog: string;
+    findDialogShown: string;
+    findDialogHidden: string;
+    focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;
+    anyDevicePanning: string;
+    selectionMenu__show: string;
+    selectionMenu__copyToClipboard: string;
+    selectionMenu__duplicate: string;
+    selectionMenu__delete: string;
+    selectionMenu__paste: string;
+    copied: (count: number) => string;
+    pasted: (count: number) => string;
+    copyPasteError__heading: string;
+    copyPasteError__description: string;
+    copyPasteError__pasteRetry: string;
+    copyPasteError__errorDetails: string;
+    toolEnabledAnnouncement: (toolName: string) => string;
+    toolDisabledAnnouncement: (toolName: string) => string;
+}
+export declare const defaultToolLocalization: ToolLocalization;

package/dist/cjs/tools/localization.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultToolLocalization = void 0;
+exports.defaultToolLocalization = {
+    penTool: (penId) => `Pen ${penId}`,
+    selectionTool: 'Selection',
+    selectAllTool: 'Select all shortcut',
+    eraserTool: 'Eraser',
+    touchPanTool: 'Touch panning',
+    twoFingerPanZoomTool: 'Panning and zooming',
+    undoRedoTool: 'Undo/Redo',
+    rightClickDragPanTool: 'Right-click drag',
+    pipetteTool: 'Pick color from screen',
+    keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
+    selectionMenu__show: 'Show selection menu',
+    selectionMenu__copyToClipboard: 'Copy to clipboard',
+    selectionMenu__duplicate: 'Duplicate',
+    selectionMenu__delete: 'Delete',
+    selectionMenu__paste: 'Paste',
+    copyPasteError__heading: 'Error!',
+    copyPasteError__description: 'Something went wrong — this tool may not have clipboard access.',
+    copyPasteError__errorDetails: 'Show error',
+    copyPasteError__pasteRetry: 'To retry, please paste into the input box below:',
+    autocorrectedTo: (strokeDescription) => `Autocorrected to ${strokeDescription}`,
+    autocorrectionCanceled: 'Autocorrect cancelled',
+    textTool: 'Text',
+    enterTextToInsert: 'Text to insert',
+    changeTool: 'Change tool',
+    pasteHandler: 'Copy paste handler',
+    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',
+    closeDialog: 'Close',
+    findDialogShown: 'Find dialog shown',
+    findDialogHidden: 'Find dialog hidden',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
+    anyDevicePanning: 'Any device panning',
+    copied: (count) => `Copied ${count} item(s)`,
+    pasted: (count) => `Pasted ${count} item(s)`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
+};

package/dist/cjs/tools/util/StationaryPenDetector.d.ts

@@ -0,0 +1,25 @@
+import Pointer from '../../Pointer';
+interface Config {
+    maxSpeed: number;
+    minTimeSeconds: number;
+    maxRadius: number;
+}
+export declare const defaultStationaryDetectionConfig: Config;
+type OnStationaryCallback = (lastPointer: Pointer) => void;
+export default class StationaryPenDetector {
+    private config;
+    private onStationary;
+    private stationaryStartPointer;
+    private lastPointer;
+    private averageVelocity;
+    private hasMovedOutOfRadius;
+    private timeout;
+    constructor(startPointer: Pointer, config: Config, onStationary: OnStationaryCallback);
+    onPointerMove(currentPointer: Pointer): boolean | undefined;
+    onPointerUp(pointer: Pointer): void;
+    destroy(): void;
+    getHasMovedOutOfRadius(): boolean;
+    private cancelStationaryTimeout;
+    private setStationaryTimeout;
+}
+export {};

package/dist/cjs/tools/util/StationaryPenDetector.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultStationaryDetectionConfig = void 0;
+const math_1 = require("@js-draw/math");
+exports.defaultStationaryDetectionConfig = {
+    maxSpeed: 8.5, // screenPx/s
+    maxRadius: 11, // screenPx
+    minTimeSeconds: 0.5, // s
+};
+class StationaryPenDetector {
+    // Only handles one pen. As such, `startPointer` should be the same device/finger
+    // as `updatedPointer` in `onPointerMove`.
+    //
+    // A new `StationaryPenDetector` should be created for each gesture.
+    constructor(startPointer, config, onStationary) {
+        this.config = config;
+        this.onStationary = onStationary;
+        this.timeout = null;
+        this.stationaryStartPointer = startPointer;
+        this.lastPointer = startPointer;
+        this.averageVelocity = math_1.Vec2.zero;
+        this.setStationaryTimeout(this.config.minTimeSeconds * 1000);
+    }
+    // Returns true if stationary
+    onPointerMove(currentPointer) {
+        if (!this.stationaryStartPointer) {
+            // Destoroyed
+            return;
+        }
+        if (currentPointer.id !== this.stationaryStartPointer.id) {
+            return false;
+        }
+        // dx: "Δx" Displacement from last.
+        const dxFromLast = currentPointer.screenPos.minus(this.lastPointer.screenPos);
+        const dxFromStationaryStart = currentPointer.screenPos.minus(this.stationaryStartPointer.screenPos);
+        // dt: Delta time:
+        // /1000: Convert to s.
+        let dtFromLast = (currentPointer.timeStamp - this.lastPointer.timeStamp) / 1000; // s
+        // Don't divide by zero
+        if (dtFromLast === 0) {
+            dtFromLast = 1;
+        }
+        const currentVelocity = dxFromLast.times(1 / dtFromLast); // px/s
+        // Slight smoothing of the velocity to prevent input jitter from affecting the
+        // velocity too significantly.
+        this.averageVelocity = this.averageVelocity.lerp(currentVelocity, 0.5); // px/s
+        const dtFromStart = currentPointer.timeStamp - this.stationaryStartPointer.timeStamp; // ms
+        const movedOutOfRadius = dxFromStationaryStart.length() > this.config.maxRadius;
+        this.hasMovedOutOfRadius ||= movedOutOfRadius;
+        // If not stationary
+        if (movedOutOfRadius
+            || this.averageVelocity.length() > this.config.maxSpeed
+            || dtFromStart < this.config.minTimeSeconds) {
+            this.stationaryStartPointer = currentPointer;
+            this.lastPointer = currentPointer;
+            this.setStationaryTimeout(this.config.minTimeSeconds * 1000);
+            return false;
+        }
+        const stationaryTimeoutMs = this.config.minTimeSeconds * 1000 - dtFromStart;
+        this.lastPointer = currentPointer;
+        return stationaryTimeoutMs <= 0;
+    }
+    onPointerUp(pointer) {
+        if (pointer.id !== this.stationaryStartPointer?.id) {
+            this.cancelStationaryTimeout();
+        }
+    }
+    destroy() {
+        this.cancelStationaryTimeout();
+        this.stationaryStartPointer = null;
+    }
+    getHasMovedOutOfRadius() {
+        return this.hasMovedOutOfRadius;
+    }
+    cancelStationaryTimeout() {
+        if (this.timeout !== null) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+    }
+    setStationaryTimeout(timeoutMs) {
+        if (this.timeout !== null) {
+            return;
+        }
+        if (timeoutMs <= 0) {
+            this.onStationary(this.lastPointer);
+        }
+        else {
+            this.timeout = setTimeout(() => {
+                this.timeout = null;
+                if (!this.stationaryStartPointer) {
+                    // Destroyed
+                    return;
+                }
+                const timeSinceStationaryStart = performance.now() - this.stationaryStartPointer.timeStamp;
+                const timeRemaining = this.config.minTimeSeconds * 1000 - timeSinceStationaryStart;
+                if (timeRemaining <= 0) {
+                    this.onStationary(this.lastPointer);
+                }
+                else {
+                    this.setStationaryTimeout(timeRemaining);
+                }
+            }, timeoutMs);
+        }
+    }
+}
+exports.default = StationaryPenDetector;

package/dist/cjs/tools/util/createMenuOverlay.d.ts

@@ -0,0 +1,10 @@
+import Editor from '../../Editor';
+import { IconElemType } from '../../toolbar/IconProvider';
+import { Point2 } from '@js-draw/math';
+interface MenuOption<KeyType> {
+    key: KeyType;
+    text: string;
+    icon: () => IconElemType;
+}
+declare const createMenuOverlay: <KeyType>(editor: Editor, canvasAnchor: Point2, options: MenuOption<KeyType>[]) => Promise<KeyType | null>;
+export default createMenuOverlay;

package/dist/cjs/tools/util/createMenuOverlay.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const waitForTimeout_1 = __importDefault(require("../../util/waitForTimeout"));
+const types_1 = require("../../types");
+let idCounter = 0;
+const createMenuOverlay = async (editor, canvasAnchor, options) => {
+    const overlay = document.createElement('div');
+    const { remove: removeOverlay } = editor.createHTMLOverlay(overlay);
+    const menuModal = document.createElement('dialog');
+    menuModal.classList.add('editor-popup-menu');
+    const hideMenuTimeout = 240;
+    menuModal.style.setProperty('--hide-menu-animation-timeout', `${hideMenuTimeout}ms`);
+    const updateMenuLocation = () => {
+        const overlayRect = editor.getOutputBBoxInDOM();
+        const anchor = editor.viewport.canvasToScreen(canvasAnchor).plus(overlayRect.topLeft);
+        menuModal.style.setProperty('--anchor-x', `${anchor.x}px`);
+        menuModal.style.setProperty('--anchor-y', `${anchor.y}px`);
+    };
+    updateMenuLocation();
+    const viewportChangeListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, updateMenuLocation);
+    overlay.appendChild(menuModal);
+    let dismissing = false;
+    const dismissMenu = async () => {
+        if (dismissing)
+            return;
+        dismissing = true;
+        viewportChangeListener.remove();
+        menuModal.classList.add('-hide');
+        await (0, waitForTimeout_1.default)(hideMenuTimeout);
+        menuModal.close();
+    };
+    return new Promise(resolve => {
+        let resolved = false;
+        let result = null;
+        const resolveWithSelectedResult = () => {
+            if (!resolved) {
+                resolve(result);
+                resolved = true;
+            }
+        };
+        menuModal.onclose = () => {
+            removeOverlay();
+            resolveWithSelectedResult();
+        };
+        const onOptionSelected = (key) => {
+            result = key;
+            void dismissMenu();
+            // To properly handle clipboard events, this needs to be called synchronously
+            // and not after a delay:
+            resolveWithSelectedResult();
+        };
+        editor.handlePointerEventsExceptClicksFrom(menuModal, (eventName, event) => {
+            if (event.target === menuModal && eventName === 'pointerdown') {
+                void dismissMenu();
+                return true;
+            }
+            else if (dismissing) {
+                // Send pointer events to the editor if the dialog is in the process of being
+                // dismissed (e.g. pointermove events just after a pointerdown outside of the
+                // editor).
+                return true;
+            }
+            return false;
+        }, (_eventName, event) => {
+            return event.target === menuModal;
+        });
+        const contentElement = document.createElement('div');
+        contentElement.classList.add('content');
+        contentElement.role = 'menu';
+        const optionElements = [];
+        // Keyboard focus handling as described in
+        // - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role and
+        // - https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+        contentElement.addEventListener('keydown', (event) => {
+            const focusedIndex = optionElements.findIndex(item => item === document.activeElement);
+            if (focusedIndex === -1)
+                return;
+            let newFocusedIndex = focusedIndex;
+            if (event.key === 'ArrowDown') {
+                newFocusedIndex++;
+            }
+            else if (event.key === 'ArrowUp') {
+                newFocusedIndex--;
+            }
+            else if (event.key === 'End') {
+                newFocusedIndex = optionElements.length - 1;
+            }
+            else if (event.key === 'Home') {
+                newFocusedIndex = 0;
+            }
+            if (newFocusedIndex < 0) {
+                newFocusedIndex += optionElements.length;
+            }
+            newFocusedIndex %= optionElements.length;
+            if (newFocusedIndex !== focusedIndex) {
+                event.preventDefault();
+                optionElements[newFocusedIndex].focus();
+            }
+        });
+        for (const option of options) {
+            const optionElement = document.createElement('button');
+            optionElement.id = `menu-overlay-option-${idCounter++}`;
+            optionElement.role = 'menuitem';
+            optionElement.classList.add('option', 'editor-popup-menu-option');
+            optionElement.replaceChildren(option.icon(), document.createTextNode(option.text));
+            optionElement.onclick = (event) => {
+                if (event.defaultPrevented)
+                    return;
+                onOptionSelected(option.key);
+            };
+            contentElement.appendChild(optionElement);
+            if (optionElements.length === 0) {
+                optionElement.autofocus = true;
+            }
+            optionElements.push(optionElement);
+        }
+        menuModal.appendChild(contentElement);
+        menuModal.showModal();
+        // Ensures that the menu is visible even if triggered near the edge of the screen.
+        contentElement.scrollIntoView({ block: 'nearest' });
+    });
+};
+exports.default = createMenuOverlay;

package/dist/cjs/tools/util/createMenuOverlay.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.21.1',
+    number: '1.21.3',
 };