js-draw 1.21.2 → 1.22.0

package/dist/cjs/tools/SelectionTool/TransformMode.js

@@ -0,0 +1,154 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RotateTransformer = exports.ResizeTransformer = exports.DragTransformer = void 0;
+const math_1 = require("@js-draw/math");
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const types_1 = require("./types");
+class DragTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+    }
+    onDragStart(startPoint) {
+        this.selection.setTransform(math_1.Mat33.identity);
+        this.dragStartPoint = startPoint;
+    }
+    onDragUpdate(canvasPos) {
+        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+        this.selection.setTransform(math_1.Mat33.translation(delta));
+    }
+    onDragEnd() {
+        return this.selection.finalizeTransform();
+    }
+}
+exports.DragTransformer = DragTransformer;
+class ResizeTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.mode = types_1.ResizeMode.Both;
+    }
+    onDragStart(startPoint, mode) {
+        this.selection.setTransform(math_1.Mat33.identity);
+        this.mode = mode;
+        this.dragStartPoint = startPoint;
+        this.computeOriginAndScaleRate();
+    }
+    computeOriginAndScaleRate() {
+        // Store the index of the furthest corner from startPoint. We'll use that
+        // to determine where the transform considers (0, 0) (where we scale from).
+        const selectionRect = this.selection.preTransformRegion;
+        const selectionBoxCorners = selectionRect.corners;
+        let largestDistSquared = 0;
+        for (let i = 0; i < selectionBoxCorners.length; i++) {
+            const currentCorner = selectionBoxCorners[i];
+            const distSquaredToCurrent = this.dragStartPoint.minus(currentCorner).magnitudeSquared();
+            if (distSquaredToCurrent > largestDistSquared) {
+                largestDistSquared = distSquaredToCurrent;
+                this.transformOrigin = currentCorner;
+            }
+        }
+        // Determine whether moving the mouse to the right increases or decreases the width.
+        let widthScaleRate = 1;
+        let heightScaleRate = 1;
+        if (this.transformOrigin.x > selectionRect.center.x) {
+            widthScaleRate = -1;
+        }
+        if (this.transformOrigin.y > selectionRect.center.y) {
+            heightScaleRate = -1;
+        }
+        this.scaleRate = math_1.Vec2.of(widthScaleRate, heightScaleRate);
+    }
+    onDragUpdate(canvasPos) {
+        const canvasDelta = canvasPos.minus(this.dragStartPoint);
+        const origWidth = this.selection.preTransformRegion.width;
+        const origHeight = this.selection.preTransformRegion.height;
+        let scale = math_1.Vec2.of(1, 1);
+        if (this.mode === types_1.ResizeMode.HorizontalOnly) {
+            const newWidth = origWidth + canvasDelta.x * this.scaleRate.x;
+            scale = math_1.Vec2.of(newWidth / origWidth, scale.y);
+        }
+        if (this.mode === types_1.ResizeMode.VerticalOnly) {
+            const newHeight = origHeight + canvasDelta.y * this.scaleRate.y;
+            scale = math_1.Vec2.of(scale.x, newHeight / origHeight);
+        }
+        if (this.mode === types_1.ResizeMode.Both) {
+            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
+            const newWidth = origWidth + delta;
+            scale = math_1.Vec2.of(newWidth / origWidth, newWidth / origWidth);
+        }
+        // Round: If this isn't done, scaling can create numbers with long decimal representations.
+        //    long decimal representations => large file sizes.
+        scale = scale.map((component) => Viewport_1.default.roundScaleRatio(component, 2));
+        if (scale.x !== 0 && scale.y !== 0) {
+            const origin = this.editor.viewport.roundPoint(this.transformOrigin);
+            this.selection.setTransform(math_1.Mat33.scaling2D(scale, origin));
+        }
+    }
+    onDragEnd() {
+        return this.selection.finalizeTransform();
+    }
+}
+exports.ResizeTransformer = ResizeTransformer;
+class RotateTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.startAngle = 0;
+        this.targetRotation = 0;
+        this.maximumDistFromStart = 0;
+    }
+    getAngle(canvasPoint) {
+        const selectionCenter = this.selection.preTransformRegion.center;
+        const offset = canvasPoint.minus(selectionCenter);
+        return offset.angle();
+    }
+    roundAngle(angle) {
+        // Round angles to the nearest 16th of a turn
+        const roundingFactor = 16 / 2 / Math.PI;
+        return Math.round(angle * roundingFactor) / roundingFactor;
+    }
+    onDragStart(startPoint) {
+        this.startPoint = startPoint;
+        this.selection.setTransform(math_1.Mat33.identity);
+        this.startAngle = this.getAngle(startPoint);
+        this.targetRotation = 0;
+        // Used to determine whether the user clicked or not.
+        this.maximumDistFromStart = 0;
+        this.startTime = performance.now();
+    }
+    setRotationTo(angle) {
+        // Transform in canvas space
+        const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
+        const unrounded = math_1.Mat33.zRotation(angle);
+        const roundedRotationTransform = unrounded.mapEntries((entry) => Viewport_1.default.roundScaleRatio(entry));
+        const fullRoundedTransform = math_1.Mat33.translation(canvasSelCenter)
+            .rightMul(roundedRotationTransform)
+            .rightMul(math_1.Mat33.translation(canvasSelCenter.times(-1)));
+        this.selection.setTransform(fullRoundedTransform);
+    }
+    onDragUpdate(canvasPos) {
+        this.targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        this.setRotationTo(this.targetRotation);
+        const distFromStart = canvasPos.minus(this.startPoint).magnitude();
+        if (distFromStart > this.maximumDistFromStart) {
+            this.maximumDistFromStart = distFromStart;
+        }
+    }
+    onDragEnd() {
+        // Anything with motion less than this is considered a click
+        const clickThresholdDist = 10;
+        const clickThresholdTime = 0.4; // s
+        const dragTimeSeconds = (performance.now() - this.startTime) / 1000;
+        if (dragTimeSeconds < clickThresholdTime &&
+            this.maximumDistFromStart < clickThresholdDist &&
+            this.targetRotation === 0) {
+            this.setRotationTo(-Math.PI / 2);
+        }
+        return this.selection.finalizeTransform();
+    }
+}
+exports.RotateTransformer = RotateTransformer;

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

@@ -0,0 +1,15 @@
+export declare const selectAllKeyboardShortcut = "jsdraw.tools.SelectionTool.selectAll";
+export declare const duplicateSelectionShortcut = "jsdraw.tools.SelectionTool.duplicateSelection";
+export declare const sendToBackSelectionShortcut = "jsdraw.tools.SelectionTool.sendToBack";
+export declare const translateLeftSelectionShortcutId = "jsdraw.tools.SelectionTool.translateLeft";
+export declare const translateRightSelectionShortcutId = "jsdraw.tools.SelectionTool.translateRight";
+export declare const translateUpSelectionShortcutId = "jsdraw.tools.SelectionTool.translateUp";
+export declare const translateDownSelectionShortcutId = "jsdraw.tools.SelectionTool.translateDown";
+export declare const rotateCounterClockwiseSelectionShortcutId = "jsdraw.tools.SelectionTool.rotateCCW";
+export declare const rotateClockwiseSelectionShortcutId = "jsdraw.tools.SelectionTool.rotateCW";
+export declare const shrinkXSelectionShortcutId = "jsdraw.tools.SelectionTool.shrink.x";
+export declare const stretchXSelectionShortcutId = "jsdraw.tools.SelectionTool.stretch.x";
+export declare const shrinkYSelectionShortcutId = "jsdraw.tools.SelectionTool.shrink.y";
+export declare const stretchYSelectionShortcutId = "jsdraw.tools.SelectionTool.stretch.y";
+export declare const shrinkXYSelectionShortcutId = "jsdraw.tools.SelectionTool.shrink.xy";
+export declare const stretchXYSelectionShortcutId = "jsdraw.tools.SelectionTool.stretch.xy";

package/dist/cjs/tools/SelectionTool/keybindings.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stretchXYSelectionShortcutId = exports.shrinkXYSelectionShortcutId = exports.stretchYSelectionShortcutId = exports.shrinkYSelectionShortcutId = exports.stretchXSelectionShortcutId = exports.shrinkXSelectionShortcutId = exports.rotateClockwiseSelectionShortcutId = exports.rotateCounterClockwiseSelectionShortcutId = exports.translateDownSelectionShortcutId = exports.translateUpSelectionShortcutId = exports.translateRightSelectionShortcutId = exports.translateLeftSelectionShortcutId = exports.sendToBackSelectionShortcut = exports.duplicateSelectionShortcut = exports.selectAllKeyboardShortcut = void 0;
+const KeyboardShortcutManager_1 = __importDefault(require("../../shortcuts/KeyboardShortcutManager"));
+// Selection
+exports.selectAllKeyboardShortcut = 'jsdraw.tools.SelectionTool.selectAll';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.selectAllKeyboardShortcut, ['CtrlOrMeta+KeyA'], 'Select all');
+exports.duplicateSelectionShortcut = 'jsdraw.tools.SelectionTool.duplicateSelection';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.duplicateSelectionShortcut, ['CtrlOrMeta+KeyD'], 'Duplicate selection');
+exports.sendToBackSelectionShortcut = 'jsdraw.tools.SelectionTool.sendToBack';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.sendToBackSelectionShortcut, ['End'], 'Send to back');
+exports.translateLeftSelectionShortcutId = 'jsdraw.tools.SelectionTool.translateLeft';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.translateLeftSelectionShortcutId, ['KeyA', 'KeyH', 'ArrowLeft'], 'Move selection left');
+exports.translateRightSelectionShortcutId = 'jsdraw.tools.SelectionTool.translateRight';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.translateRightSelectionShortcutId, ['KeyD', 'KeyL', 'ArrowRight'], 'Move selection right');
+exports.translateUpSelectionShortcutId = 'jsdraw.tools.SelectionTool.translateUp';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.translateUpSelectionShortcutId, ['KeyQ', 'KeyK', 'ArrowUp'], 'Move selection up');
+exports.translateDownSelectionShortcutId = 'jsdraw.tools.SelectionTool.translateDown';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.translateDownSelectionShortcutId, ['KeyE', 'KeyJ', 'ArrowDown'], 'Move selection down');
+exports.rotateCounterClockwiseSelectionShortcutId = 'jsdraw.tools.SelectionTool.rotateCCW';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.rotateCounterClockwiseSelectionShortcutId, ['Shift+KeyR'], 'Rotate selection counter clockwise');
+exports.rotateClockwiseSelectionShortcutId = 'jsdraw.tools.SelectionTool.rotateCW';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.rotateClockwiseSelectionShortcutId, ['KeyR'], 'Rotate selection clockwise');
+exports.shrinkXSelectionShortcutId = 'jsdraw.tools.SelectionTool.shrink.x';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.shrinkXSelectionShortcutId, ['KeyI'], 'Decrease width');
+exports.stretchXSelectionShortcutId = 'jsdraw.tools.SelectionTool.stretch.x';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.stretchXSelectionShortcutId, ['Shift+KeyI'], 'Increase width');
+exports.shrinkYSelectionShortcutId = 'jsdraw.tools.SelectionTool.shrink.y';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.shrinkYSelectionShortcutId, ['KeyO'], 'Decrease height');
+exports.stretchYSelectionShortcutId = 'jsdraw.tools.SelectionTool.stretch.y';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.stretchYSelectionShortcutId, ['Shift+KeyO'], 'Increase height');
+exports.shrinkXYSelectionShortcutId = 'jsdraw.tools.SelectionTool.shrink.xy';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.shrinkXYSelectionShortcutId, ['Comma'], 'Decrease selection size');
+exports.stretchXYSelectionShortcutId = 'jsdraw.tools.SelectionTool.stretch.xy';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.stretchXYSelectionShortcutId, ['Period'], 'Increase selection size');

package/dist/cjs/tools/SelectionTool/types.d.ts

@@ -0,0 +1,35 @@
+import type { Rect2, Point2 } from '@js-draw/math';
+import Pointer from '../../Pointer';
+export declare enum ResizeMode {
+    Both = 0,
+    HorizontalOnly = 1,
+    VerticalOnly = 2
+}
+export declare enum TransformMode {
+    Snap = 0,
+    NoSnap = 1
+}
+/**
+ * Represents a child of the selection that should move with the selection
+ * and handle events.
+ *
+ * Although selection children should be `HTMLElement`s, the selection may be
+ * hidden behind an invisible element. As such, these elements should handle
+ * drag start/update/end events.
+ */
+export interface SelectionBoxChild {
+    /**
+     * Update the position of this child, based on the screen position of
+     * the selection box.
+     */
+    updatePosition(selectionScreenBBox: Rect2): void;
+    /** @returns true iff `point` (in editor **canvas** coordinates) is in this child. */
+    containsPoint(point: Point2): boolean;
+    /** Adds this component's HTMLElement to the given `container`. */
+    addTo(container: HTMLElement): void;
+    /** Removes this from its parent container. */
+    remove(): void;
+    handleDragStart(pointer: Pointer): boolean;
+    handleDragUpdate(pointer: Pointer): void;
+    handleDragEnd(): void;
+}

package/dist/cjs/tools/SelectionTool/types.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransformMode = exports.ResizeMode = void 0;
+var ResizeMode;
+(function (ResizeMode) {
+    ResizeMode[ResizeMode["Both"] = 0] = "Both";
+    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
+    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
+})(ResizeMode || (exports.ResizeMode = ResizeMode = {}));
+var TransformMode;
+(function (TransformMode) {
+    TransformMode[TransformMode["Snap"] = 0] = "Snap";
+    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
+})(TransformMode || (exports.TransformMode = TransformMode = {}));

package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts

@@ -0,0 +1,6 @@
+import Editor from '../../../Editor';
+declare const makeClipboardErrorHandlers: (editor: Editor) => {
+    onCopyError(error: Error | unknown): Promise<void>;
+    onPasteError(error: Error | unknown): void;
+};
+export default makeClipboardErrorHandlers;

package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const makeMessageDialog_1 = __importDefault(require("../../../dialogs/makeMessageDialog"));
+const ClipboardHandler_1 = __importDefault(require("../../../util/ClipboardHandler"));
+const makeClipboardErrorHandlers = (editor) => {
+    const makeErrorDialog = (error) => {
+        const dialog = (0, makeMessageDialog_1.default)(editor, {
+            title: editor.localization.copyPasteError__heading,
+            classNames: ['clipboard-error-dialog'],
+        });
+        dialog.appendChild(document.createTextNode(editor.localization.copyPasteError__description));
+        const errorDetailsElement = document.createElement('details');
+        const errorDetailsSummary = document.createElement('summary');
+        errorDetailsSummary.textContent = editor.localization.copyPasteError__errorDetails;
+        errorDetailsElement.appendChild(errorDetailsSummary);
+        errorDetailsElement.appendChild(document.createTextNode(`Error: ${error}`));
+        dialog.appendChild(errorDetailsElement);
+        return dialog;
+    };
+    return {
+        async onCopyError(error) {
+            const dialog = makeErrorDialog(error);
+            const textboxLabel = document.createElement('label');
+            textboxLabel.textContent = editor.localization.copyPasteError__copyRetry;
+            const copyTextbox = document.createElement('textarea');
+            textboxLabel.appendChild(copyTextbox);
+            const retryHandler = new ClipboardHandler_1.default(editor);
+            const handleCopy = (event) => {
+                event.preventDefault();
+                // Use .then to ensure that .copy runs within the event handler.
+                // Copy can fail if certain logic is run async.
+                return retryHandler.copy(event).then(() => {
+                    dialog.close();
+                });
+            };
+            copyTextbox.oncopy = handleCopy;
+            copyTextbox.ondragstart = handleCopy;
+            copyTextbox.value = editor.localization.copyPasteError__copyMe;
+            dialog.appendChild(textboxLabel);
+            copyTextbox.select();
+            document.execCommand('copy');
+        },
+        onPasteError(error) {
+            const dialog = makeErrorDialog(error);
+            const textboxLabel = document.createElement('label');
+            textboxLabel.textContent = editor.localization.copyPasteError__pasteRetry;
+            const pasteTextbox = document.createElement('textarea');
+            textboxLabel.appendChild(pasteTextbox);
+            const retryHandler = new ClipboardHandler_1.default(editor);
+            const handlePaste = (event) => {
+                event.preventDefault();
+                // Use .then to ensure that .paste runs within the event handler.
+                // Paste can fail if certain logic is run async.
+                return retryHandler.paste(event).then((pasted) => {
+                    if (pasted) {
+                        dialog.close();
+                    }
+                });
+            };
+            pasteTextbox.onpaste = handlePaste;
+            pasteTextbox.ondrop = handlePaste;
+            dialog.appendChild(textboxLabel);
+            pasteTextbox.focus();
+            document.execCommand('paste');
+        },
+    };
+};
+exports.default = makeClipboardErrorHandlers;

package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts

@@ -0,0 +1,5 @@
+import { Point2 } from '@js-draw/math';
+import Editor from '../../../Editor';
+import Selection from '../Selection';
+declare const showSelectionContextMenu: (selectionBox: Selection | null, editor: Editor, canvasAnchor: Point2, preferSelectionMenu: boolean, clearSelection: () => void) => Promise<void>;
+export default showSelectionContextMenu;

package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const createMenuOverlay_1 = __importDefault(require("../../util/createMenuOverlay"));
+const ClipboardHandler_1 = __importDefault(require("../../../util/ClipboardHandler"));
+const makeClipboardErrorHandlers_1 = __importDefault(require("./makeClipboardErrorHandlers"));
+const showSelectionContextMenu = async (selectionBox, editor, canvasAnchor, preferSelectionMenu, clearSelection) => {
+    const localization = editor.localization;
+    const showSelectionMenu = selectionBox?.getSelectedItemCount() && preferSelectionMenu;
+    const noSelectionMenu = [
+        {
+            text: localization.selectionMenu__paste,
+            icon: () => editor.icons.makePasteIcon(),
+            key: () => {
+                const clipboardHandler = new ClipboardHandler_1.default(editor, (0, makeClipboardErrorHandlers_1.default)(editor));
+                void clipboardHandler.paste();
+            },
+        },
+    ];
+    const onActivated = await (0, createMenuOverlay_1.default)(editor, canvasAnchor, showSelectionMenu
+        ? [
+            {
+                text: localization.selectionMenu__duplicate,
+                icon: () => editor.icons.makeDuplicateSelectionIcon(),
+                key: async () => {
+                    await editor.dispatch(await selectionBox.duplicateSelectedObjects());
+                },
+            },
+            {
+                text: localization.selectionMenu__delete,
+                icon: () => editor.icons.makeDeleteSelectionIcon(),
+                key: async () => {
+                    await editor.dispatch(selectionBox.deleteSelectedObjects());
+                    clearSelection();
+                },
+            },
+            {
+                text: localization.selectionMenu__copyToClipboard,
+                icon: () => editor.icons.makeCopyIcon(),
+                key: () => {
+                    const clipboardHandler = new ClipboardHandler_1.default(editor, (0, makeClipboardErrorHandlers_1.default)(editor));
+                    void clipboardHandler.copy();
+                },
+            },
+            ...noSelectionMenu,
+        ]
+        : noSelectionMenu);
+    onActivated?.();
+};
+exports.default = showSelectionContextMenu;

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

@@ -0,0 +1,26 @@
+import Editor from '../Editor';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, plays a sound representing the color of the portion of the display
+ * currently under the cursor. This tool adds a button that can be navigated to with the tab key
+ * that enables/disables the tool.
+ *
+ * This allows the user to explore the content of the display without a working screen.
+ */
+export default class SoundUITool extends BaseTool {
+    private editor;
+    private soundFeedback;
+    private toggleButton;
+    private toggleButtonContainer;
+    constructor(editor: Editor, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    private updateToggleButtonText;
+    setEnabled(enabled: boolean): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+    private lastPointerPos;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+}

package/dist/cjs/tools/SoundUITool.js

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+class SoundFeedback {
+    constructor() {
+        this.closed = false;
+        // No AudioContext? Exit!
+        if (!window.AudioContext) {
+            console.warn('Accessibility sound UI: Unable to open AudioContext.');
+            this.closed = true;
+            return;
+        }
+        this.ctx = new AudioContext();
+        // Color oscillator and gain
+        this.colorOscHue = this.ctx.createOscillator();
+        this.colorOscValue = this.ctx.createOscillator();
+        this.colorOscSaturation = this.ctx.createOscillator();
+        this.colorOscHue.type = 'triangle';
+        this.colorOscSaturation.type = 'sine';
+        this.colorOscValue.type = 'sawtooth';
+        this.valueGain = this.ctx.createGain();
+        this.colorOscValue.connect(this.valueGain);
+        this.valueGain.gain.setValueAtTime(0.18, this.ctx.currentTime);
+        this.colorGain = this.ctx.createGain();
+        this.colorOscHue.connect(this.colorGain);
+        this.valueGain.connect(this.colorGain);
+        this.colorOscSaturation.connect(this.colorGain);
+        this.colorGain.connect(this.ctx.destination);
+        // Boundary oscillator and gain
+        this.boundaryGain = this.ctx.createGain();
+        this.boundaryOsc = this.ctx.createOscillator();
+        this.boundaryOsc.type = 'sawtooth';
+        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        this.boundaryOsc.connect(this.boundaryGain);
+        this.boundaryGain.connect(this.ctx.destination);
+        // Prepare for the first announcement/feedback.
+        this.colorOscHue.start();
+        this.colorOscSaturation.start();
+        this.colorOscValue.start();
+        this.boundaryOsc.start();
+        this.pause();
+    }
+    pause() {
+        if (this.closed)
+            return;
+        this.colorGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        void this.ctx.suspend();
+    }
+    play() {
+        if (this.closed)
+            return;
+        void this.ctx.resume();
+    }
+    setColor(color) {
+        const hsv = color.asHSV();
+        // Choose frequencies that roughly correspond to hue, saturation, and value.
+        const hueFrequency = -Math.cos(hsv.x / 2) * 220 + 440;
+        const saturationFrequency = hsv.y * 440 + 220;
+        const valueFrequency = (hsv.z + 0.1) * 440;
+        // Sigmoid with maximum 0.25 * alpha.
+        // Louder for greater value.
+        const gain = (0.25 * Math.min(1, color.a)) / (1 + Math.exp(-(hsv.z - 0.5) * 3));
+        this.colorOscHue.frequency.setValueAtTime(hueFrequency, this.ctx.currentTime);
+        this.colorOscSaturation.frequency.setValueAtTime(saturationFrequency, this.ctx.currentTime);
+        this.colorOscValue.frequency.setValueAtTime(valueFrequency, this.ctx.currentTime);
+        this.valueGain.gain.setValueAtTime((1 - hsv.z) * 0.4, this.ctx.currentTime);
+        this.colorGain.gain.setValueAtTime(gain, this.ctx.currentTime);
+    }
+    announceBoundaryCross(boundaryCrossCount) {
+        this.boundaryGain.gain.cancelScheduledValues(this.ctx.currentTime);
+        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        this.boundaryGain.gain.linearRampToValueAtTime(0.018, this.ctx.currentTime + 0.1);
+        this.boundaryOsc.frequency.setValueAtTime(440 + Math.atan(boundaryCrossCount / 2) * 100, this.ctx.currentTime);
+        this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
+    }
+    close() {
+        this.ctx.close();
+        this.closed = true;
+    }
+}
+/**
+ * This tool, when enabled, plays a sound representing the color of the portion of the display
+ * currently under the cursor. This tool adds a button that can be navigated to with the tab key
+ * that enables/disables the tool.
+ *
+ * This allows the user to explore the content of the display without a working screen.
+ */
+class SoundUITool extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.soundFeedback = null;
+        // Create a screen-reader-usable method of toggling the tool:
+        this.toggleButtonContainer = document.createElement('div');
+        this.toggleButtonContainer.classList.add('js-draw-sound-ui-toggle');
+        this.toggleButton = document.createElement('button');
+        this.toggleButton.onclick = () => {
+            this.setEnabled(!this.isEnabled());
+        };
+        this.toggleButtonContainer.appendChild(this.toggleButton);
+        this.updateToggleButtonText();
+        editor.createHTMLOverlay(this.toggleButtonContainer);
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    updateToggleButtonText() {
+        const containerEnabledClass = 'sound-ui-tool-enabled';
+        if (this.isEnabled()) {
+            this.toggleButton.innerText = this.editor.localization.disableAccessibilityExploreTool;
+            this.toggleButtonContainer.classList.add(containerEnabledClass);
+        }
+        else {
+            this.toggleButton.innerText = this.editor.localization.enableAccessibilityExploreTool;
+            this.toggleButtonContainer.classList.remove(containerEnabledClass);
+        }
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (!this.isEnabled()) {
+            this.soundFeedback?.close();
+            this.soundFeedback = null;
+        }
+        else {
+            this.editor.announceForAccessibility(this.editor.localization.soundExplorerUsageAnnouncement);
+        }
+        this.updateToggleButtonText();
+    }
+    onKeyPress(event) {
+        if (event.code === 'Escape') {
+            this.setEnabled(false);
+            return true;
+        }
+        return false;
+    }
+    onPointerDown({ current, allPointers }) {
+        if (!this.soundFeedback) {
+            this.soundFeedback = new SoundFeedback();
+        }
+        // Allow two-finger gestures to move the screen.
+        if (allPointers.length >= 2) {
+            return false;
+        }
+        // Accept multiple cursors -- some screen readers require multiple (touch) pointers to interact with
+        // an image instead of using the built-in navigation features.
+        this.soundFeedback?.play();
+        this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? math_1.Color4.black);
+        this.lastPointerPos = current.canvasPos;
+        return true;
+    }
+    onPointerMove({ current }) {
+        this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? math_1.Color4.black);
+        const pointerMotionLine = new math_1.LineSegment2(this.lastPointerPos, current.canvasPos);
+        const collisions = this.editor.image
+            .getElementsIntersectingRegion(pointerMotionLine.bbox)
+            .filter((component) => component.intersects(pointerMotionLine));
+        this.lastPointerPos = current.canvasPos;
+        if (collisions.length > 0) {
+            this.soundFeedback?.announceBoundaryCross(collisions.length);
+        }
+    }
+    onPointerUp(_event) {
+        this.soundFeedback?.pause();
+    }
+    onGestureCancel() {
+        this.soundFeedback?.pause();
+    }
+}
+exports.default = SoundUITool;

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

@@ -0,0 +1,36 @@
+import Editor from '../Editor';
+import { Color4 } from '@js-draw/math';
+import { PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
+import { MutableReactiveValue } from '../util/ReactiveValue';
+export default class TextTool extends BaseTool {
+    private editor;
+    private localizationTable;
+    private textStyleValue;
+    private textStyle;
+    private textEditOverlay;
+    private textInputElem;
+    private textTargetPosition;
+    private textMeasuringCtx;
+    private textRotation;
+    private textScale;
+    private removeExistingCommand;
+    constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
+    private initTextMeasuringCanvas;
+    private getTextAscent;
+    private flushInput;
+    private getTextScaleMatrix;
+    private updateTextInput;
+    private startTextInput;
+    setEnabled(enabled: boolean): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onGestureCancel(): void;
+    setFontFamily(fontFamily: string): void;
+    setColor(color: Color4): void;
+    setFontSize(size: number): void;
+    getTextStyle(): TextRenderingStyle;
+    getStyleValue(): MutableReactiveValue<TextRenderingStyle>;
+    private setTextStyle;
+}