js-draw 1.21.2 → 1.21.3

package/dist/mjs/tools/ToolSwitcherShortcut.mjs

@@ -0,0 +1,34 @@
+import  BaseTool  from './BaseTool.mjs';
+/**
+ * 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 {
+    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;
+    }
+}

package/dist/mjs/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/mjs/tools/ToolbarShortcutHandler.mjs

@@ -0,0 +1,28 @@
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+import  BaseTool  from './BaseTool.mjs';
+export default class ToolbarShortcutHandler extends BaseTool {
+    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;
+    }
+}

package/dist/mjs/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/mjs/tools/UndoRedoShortcut.mjs

@@ -0,0 +1,21 @@
+import  BaseTool  from './BaseTool.mjs';
+import  { redoKeyboardShortcutId, undoKeyboardShortcutId }  from './keybindings.mjs';
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+export default class UndoRedoShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.undoRedoTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(undoKeyboardShortcutId, event)) {
+            this.editor.history.undo();
+            return true;
+        }
+        else if (this.editor.shortcuts.matchesShortcut(redoKeyboardShortcutId, event)) {
+            this.editor.history.redo();
+            return true;
+        }
+        return false;
+    }
+}

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

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

package/dist/mjs/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/mjs/tools/keybindings.mjs

@@ -0,0 +1,38 @@
+import  KeyboardShortcutManager  from '../shortcuts/KeyboardShortcutManager.mjs';
+// This file contains user-overridable tool-realted keybindings.
+// Undo/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 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 const toggleFindVisibleShortcutId = 'js-draw.tools.FindTool.toggleVisible';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(toggleFindVisibleShortcutId, ['CtrlOrMeta+KeyF'], 'Shows/hides the find tool');
+// Pan/zoom
+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 tool
+export  *  from './SelectionTool/keybindings.mjs';

package/dist/mjs/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/mjs/tools/lib.mjs

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

package/dist/mjs/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/mjs/tools/localization.mjs

@@ -0,0 +1,42 @@
+export const 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/mjs/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/mjs/tools/util/StationaryPenDetector.mjs

@@ -0,0 +1,103 @@
+import { Vec2 } from '@js-draw/math';
+export const defaultStationaryDetectionConfig = {
+    maxSpeed: 8.5, // screenPx/s
+    maxRadius: 11, // screenPx
+    minTimeSeconds: 0.5, // s
+};
+export default 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 = 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);
+        }
+    }
+}

package/dist/mjs/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/mjs/tools/util/createMenuOverlay.mjs

@@ -0,0 +1,121 @@
+import  waitForTimeout  from '../../util/waitForTimeout.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+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(EditorEventType.ViewportChanged, updateMenuLocation);
+    overlay.appendChild(menuModal);
+    let dismissing = false;
+    const dismissMenu = async () => {
+        if (dismissing)
+            return;
+        dismissing = true;
+        viewportChangeListener.remove();
+        menuModal.classList.add('-hide');
+        await waitForTimeout(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' });
+    });
+};
+export default createMenuOverlay;

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

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

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.21.2',
+    number: '1.21.3',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.21.2",
+  "version": "1.21.3",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.21.2",
+    "@js-draw/math": "^1.21.3",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.21.2",
+    "@js-draw/build-tool": "^1.21.3",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "f29b0658121b39fab5d20599003917363290bf6f"
+  "gitHead": "2b11a1efafeeb3b84effb7d849343d273df371f8"
 }

package/src/tools/FindTool.css

@@ -0,0 +1,7 @@
+
+.find-tool-overlay {
+	/* Show at the bottom of the screen. */
+	order: -1;
+
+	position: absolute;
+}

package/src/tools/ScrollbarTool.scss

@@ -0,0 +1,57 @@
+
+.ScrollbarTool-overlay {
+	width: 0;
+	height: 0;
+	overflow: visible;
+
+	$visible-opacity: 0.2;
+	opacity: $visible-opacity;
+	pointer-events: none;
+
+	--fade-out-animation: 1s ease 0s fade-out;
+
+	@media (prefers-reduced-motion: reduce) {
+		--fade-out-animation: none !important;
+	}
+
+	@keyframes fade-out {
+		from { opacity: $visible-opacity; }
+		to { opacity: 0; }
+	}
+
+	&:not(.just-updated) {
+		animation: var(--fade-out-animation);
+		opacity: 0;
+	}
+
+	--scrollbar-size: 3px;
+
+	.vertical-scrollbar, .horizontal-scrollbar {
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+
+		min-width: var(--scrollbar-size);
+		min-height: var(--scrollbar-size);
+
+		background-color: var(--foreground-color-1);
+		border-radius: var(--scrollbar-size);
+		position: absolute;
+
+		&.represents-no-scroll {
+			animation: var(--fade-out-animation);
+			opacity: 0;
+		}
+	}
+
+	&:not(.scrollbar-left) {
+		.vertical-scrollbar {
+			margin-left: calc(var(--editor-current-display-width-px) - var(--scrollbar-size));
+		}
+	}
+	
+	&:not(.scrollbar-top) {
+		.horizontal-scrollbar {
+			margin-top: calc(var(--editor-current-display-height-px) - var(--scrollbar-size));
+		}
+	}
+}