js-draw 0.0.1

package/dist/src/tools/SelectionTool.js

@@ -0,0 +1,437 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Mat33 from '../geometry/Mat33';
+// import Mat33 from "../geometry/Mat33";
+import Rect2 from '../geometry/Rect2';
+import { Vec2 } from '../geometry/Vec2';
+import { EditorEventType } from '../types';
+import Viewport from '../Viewport';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+const handleScreenSize = 30;
+const styles = `
+	.handleOverlay {
+	}
+
+	.handleOverlay > .selectionBox {
+		position: fixed;
+		z-index: 0;
+		transform-origin: center;
+	}
+
+	.handleOverlay > .selectionBox .draggableBackground {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		background-color: var(--secondary-background-color);
+		opacity: 0.8;
+		border: 1px solid var(--primary-background-color);
+	}
+
+	.handleOverlay .resizeCorner {
+		width: ${handleScreenSize}px;
+		height: ${handleScreenSize}px;
+		margin-right: -${handleScreenSize / 2}px;
+		margin-bottom: -${handleScreenSize / 2}px;
+
+		position: absolute;
+		bottom: 0;
+		right: 0;
+
+		opacity: 0.8;
+		background-color: var(--primary-background-color);
+		border: 1px solid var(--primary-foreground-color);
+	}
+
+	.handleOverlay > .selectionBox .rotateCircleContainer {
+		position: absolute;
+		top: 50%;
+		bottom: 50%;
+		left: 50%;
+		right: 50%;
+	}
+
+	.handleOverlay .rotateCircle {
+		width: ${handleScreenSize}px;
+		height: ${handleScreenSize}px;
+		margin-left: -${handleScreenSize / 2}px;
+		margin-top: -${handleScreenSize / 2}px;
+		opacity: 0.8;
+
+		border: 1px solid var(--primary-foreground-color);
+		background-color: var(--primary-background-color);
+		border-radius: 100%;
+	}
+`;
+const makeDraggable = (element, onDrag, onDragEnd) => {
+    element.style.touchAction = 'none';
+    let down = false;
+    // Work around a Safari bug
+    element.addEventListener('touchstart', evt => evt.preventDefault());
+    let lastX;
+    let lastY;
+    element.addEventListener('pointerdown', event => {
+        if (event.isPrimary) {
+            down = true;
+            element.setPointerCapture(event.pointerId);
+            lastX = event.pageX;
+            lastY = event.pageY;
+            return true;
+        }
+        return false;
+    });
+    element.addEventListener('pointermove', event => {
+        if (event.isPrimary && down) {
+            // Safari/iOS doesn't seem to support movementX/movementY on pointer events.
+            // Calculate manually:
+            const delta = Vec2.of(event.pageX - lastX, event.pageY - lastY);
+            onDrag(delta, Vec2.of(event.offsetX, event.offsetY));
+            lastX = event.pageX;
+            lastY = event.pageY;
+            return true;
+        }
+        return false;
+    });
+    const onPointerEnd = (event) => {
+        if (event.isPrimary) {
+            down = false;
+            onDragEnd();
+            return true;
+        }
+        return false;
+    };
+    element.addEventListener('pointerup', onPointerEnd);
+    element.addEventListener('pointercancel', onPointerEnd);
+};
+// Maximum number of strokes to transform without a re-render.
+const updateChunkSize = 50;
+class Selection {
+    constructor(startPoint, editor) {
+        this.startPoint = startPoint;
+        this.editor = editor;
+        this.boxRotation = this.editor.viewport.getRotationAngle();
+        this.selectedElems = [];
+        this.region = Rect2.bboxOf([startPoint]);
+        // Create draggable rectangles
+        this.backgroundBox = document.createElement('div');
+        const draggableBackground = document.createElement('div');
+        const resizeCorner = document.createElement('div');
+        this.rotateCircle = document.createElement('div');
+        const rotateCircleContainer = document.createElement('div');
+        this.backgroundBox.classList.add('selectionBox');
+        draggableBackground.classList.add('draggableBackground');
+        resizeCorner.classList.add('resizeCorner');
+        this.rotateCircle.classList.add('rotateCircle');
+        rotateCircleContainer.classList.add('rotateCircleContainer');
+        rotateCircleContainer.appendChild(this.rotateCircle);
+        this.backgroundBox.appendChild(draggableBackground);
+        this.backgroundBox.appendChild(rotateCircleContainer);
+        this.backgroundBox.appendChild(resizeCorner);
+        this.transformationCommands = [];
+        this.transform = Mat33.identity;
+        makeDraggable(draggableBackground, (deltaPosition) => {
+            this.handleBackgroundDrag(deltaPosition);
+        }, () => this.finishDragging());
+        makeDraggable(resizeCorner, (deltaPosition) => {
+            this.handleResizeCornerDrag(deltaPosition);
+        }, () => this.finishDragging());
+        makeDraggable(this.rotateCircle, (_deltaPosition, offset) => {
+            this.handleRotateCircleDrag(offset);
+        }, () => this.finishDragging());
+    }
+    // Note a small change in the position of this' background while dragging
+    // At the end of a drag, changes should be applied by calling this.finishDragging()
+    handleBackgroundDrag(deltaPosition) {
+        // Re-scale the change in position
+        // (use a Vec3 transform to avoid translating deltaPosition)
+        deltaPosition = this.editor.viewport.screenToCanvasTransform.transformVec3(deltaPosition);
+        // Snap position to a multiple of 10 (additional decimal points lead to larger files).
+        deltaPosition = this.editor.viewport.roundPoint(deltaPosition);
+        this.region = this.region.translatedBy(deltaPosition);
+        this.transform = this.transform.rightMul(Mat33.translation(deltaPosition));
+        this.previewTransformCmds();
+    }
+    handleResizeCornerDrag(deltaPosition) {
+        deltaPosition = this.editor.viewport.screenToCanvasTransform.transformVec3(deltaPosition);
+        deltaPosition = this.editor.viewport.roundPoint(deltaPosition);
+        const oldWidth = this.region.w;
+        const oldHeight = this.region.h;
+        const newSize = this.region.size.plus(deltaPosition);
+        if (newSize.y > 0 && newSize.x > 0) {
+            this.region = this.region.resizedTo(newSize);
+            const scaleFactor = Vec2.of(this.region.w / oldWidth, this.region.h / oldHeight);
+            const currentTransfm = Mat33.scaling2D(scaleFactor, this.region.topLeft);
+            this.transform = this.transform.rightMul(currentTransfm);
+            this.previewTransformCmds();
+        }
+    }
+    handleRotateCircleDrag(offset) {
+        this.boxRotation = this.boxRotation % (2 * Math.PI);
+        if (this.boxRotation < 0) {
+            this.boxRotation += 2 * Math.PI;
+        }
+        let targetRotation = offset.angle();
+        targetRotation = targetRotation % (2 * Math.PI);
+        if (targetRotation < 0) {
+            targetRotation += 2 * Math.PI;
+        }
+        let deltaRotation = (targetRotation - this.boxRotation);
+        const rotationStep = Math.PI / 12;
+        if (Math.abs(deltaRotation) < rotationStep || !isFinite(deltaRotation)) {
+            return;
+        }
+        else {
+            const rotationDirection = Math.sign(deltaRotation);
+            // Step exactly one rotationStep
+            deltaRotation = Math.floor(Math.abs(deltaRotation) / rotationStep) * rotationStep;
+            deltaRotation *= rotationDirection;
+        }
+        this.transform = this.transform.rightMul(Mat33.zRotation(deltaRotation, this.region.center));
+        this.boxRotation += deltaRotation;
+        this.previewTransformCmds();
+    }
+    computeTransformCommands() {
+        return this.selectedElems.map(elem => {
+            return elem.transformBy(this.transform);
+        });
+    }
+    // Applies the current transformation to the selection
+    finishDragging() {
+        this.transformationCommands.forEach(cmd => {
+            cmd.unapply(this.editor);
+        });
+        const fullTransform = this.transform;
+        const inverseTransform = this.transform.inverse();
+        const deltaBoxRotation = this.boxRotation;
+        const currentTransfmCommands = this.computeTransformCommands();
+        // Reset for the next drag
+        this.transformationCommands = [];
+        this.transform = Mat33.identity;
+        this.region = this.region.transformedBoundingBox(inverseTransform);
+        // Make the commands undo-able
+        this.editor.dispatch({
+            apply: (editor) => __awaiter(this, void 0, void 0, function* () {
+                // Approximate the new selection
+                this.region = this.region.transformedBoundingBox(fullTransform);
+                this.boxRotation += deltaBoxRotation;
+                this.updateUI();
+                yield editor.asyncApplyCommands(currentTransfmCommands, updateChunkSize);
+                this.recomputeRegion();
+                this.updateUI();
+            }),
+            unapply: (editor) => __awaiter(this, void 0, void 0, function* () {
+                this.region = this.region.transformedBoundingBox(inverseTransform);
+                this.boxRotation -= deltaBoxRotation;
+                this.updateUI();
+                yield editor.asyncUnapplyCommands(currentTransfmCommands, updateChunkSize);
+                this.recomputeRegion();
+                this.updateUI();
+            }),
+            description(localizationTable) {
+                return localizationTable.transformedElements(currentTransfmCommands.length);
+            },
+        });
+    }
+    // Preview the effects of the current transformation on the selection
+    previewTransformCmds() {
+        // Don't render what we're moving if it's likely to be slow.
+        if (this.selectedElems.length > updateChunkSize) {
+            this.updateUI();
+            return;
+        }
+        this.transformationCommands.forEach(cmd => cmd.unapply(this.editor));
+        this.transformationCommands = this.computeTransformCommands();
+        this.transformationCommands.forEach(cmd => cmd.apply(this.editor));
+        this.updateUI();
+    }
+    appendBackgroundBoxTo(elem) {
+        if (this.backgroundBox.parentElement) {
+            this.backgroundBox.remove();
+        }
+        elem.appendChild(this.backgroundBox);
+    }
+    setToPoint(point) {
+        this.region = this.region.grownToPoint(point);
+        this.recomputeBoxRotation();
+        this.updateUI();
+    }
+    cancelSelection() {
+        if (this.backgroundBox.parentElement) {
+            this.backgroundBox.remove();
+        }
+        this.region = Rect2.empty;
+    }
+    // Find the objects corresponding to this in the document,
+    // select them.
+    // Returns false iff nothing was selected.
+    resolveToObjects() {
+        // Grow the rectangle, if necessary
+        if (this.region.w === 0 || this.region.h === 0) {
+            const padding = this.editor.viewport.visibleRect.maxDimension / 100;
+            this.region = Rect2.bboxOf(this.region.corners, padding);
+        }
+        this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
+            if (this.region.containsRect(elem.getBBox())) {
+                return true;
+            }
+            else if (this.region.getEdges().some(edge => elem.intersects(edge))) {
+                return true;
+            }
+            return false;
+        });
+        // Find the bounding box of all selected elements.
+        if (!this.recomputeRegion()) {
+            return false;
+        }
+        this.updateUI();
+        return true;
+    }
+    // Recompute this' region from the selected elements. Resets rotation to zero.
+    // Returns false if the selection is empty.
+    recomputeRegion() {
+        const newRegion = this.selectedElems.reduce((accumulator, elem) => {
+            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
+        }, null);
+        if (!newRegion) {
+            this.cancelSelection();
+            return false;
+        }
+        this.region = newRegion;
+        const minSize = this.getMinCanvasSize();
+        if (this.region.w < minSize || this.region.h < minSize) {
+            // Add padding
+            const padding = minSize / 2;
+            this.region = Rect2.bboxOf(this.region.corners, padding);
+        }
+        this.recomputeBoxRotation();
+        return true;
+    }
+    getMinCanvasSize() {
+        const canvasHandleSize = handleScreenSize / this.editor.viewport.getScaleFactor();
+        return canvasHandleSize * 2;
+    }
+    recomputeBoxRotation() {
+        this.boxRotation = this.editor.viewport.getRotationAngle();
+    }
+    getSelectedItemCount() {
+        return this.selectedElems.length;
+    }
+    updateUI() {
+        if (!this.backgroundBox) {
+            return;
+        }
+        const rightSideDirection = this.region.topRight.minus(this.region.bottomRight);
+        const topSideDirection = this.region.topLeft.minus(this.region.topRight);
+        const toScreen = this.editor.viewport.canvasToScreenTransform;
+        const centerOnScreen = toScreen.transformVec2(this.region.center);
+        const heightOnScreen = toScreen.transformVec3(rightSideDirection).magnitude();
+        const widthOnScreen = toScreen.transformVec3(topSideDirection).magnitude();
+        this.backgroundBox.style.marginLeft = `${centerOnScreen.x - widthOnScreen / 2}px`;
+        this.backgroundBox.style.marginTop = `${centerOnScreen.y - heightOnScreen / 2}px`;
+        this.backgroundBox.style.width = `${widthOnScreen}px`;
+        this.backgroundBox.style.height = `${heightOnScreen}px`;
+        const rotationDeg = this.boxRotation * 180 / Math.PI;
+        this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
+        this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
+    }
+}
+export default class SelectionTool extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.kind = ToolType.Selection;
+        this.handleOverlay = document.createElement('div');
+        editor.createHTMLOverlay(this.handleOverlay);
+        editor.addStyleSheet(styles);
+        this.handleOverlay.style.display = 'none';
+        this.handleOverlay.classList.add('handleOverlay');
+        editor.notifier.on(EditorEventType.ViewportChanged, _data => {
+            var _a, _b;
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.recomputeRegion();
+            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.updateUI();
+        });
+    }
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 && event.current.isPrimary) {
+            this.prevSelectionBox = this.selectionBox;
+            this.selectionBox = new Selection(event.current.canvasPos, this.editor);
+            // Remove any previous selection rects
+            this.handleOverlay.replaceChildren();
+            this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        if (!this.selectionBox)
+            return;
+        this.selectionBox.setToPoint(event.current.canvasPos);
+    }
+    onGestureEnd() {
+        if (!this.selectionBox)
+            return;
+        // Expand/shrink the selection rectangle, if applicable
+        const hasSelection = this.selectionBox.resolveToObjects();
+        // Note that the selection has changed
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+        if (hasSelection) {
+            const visibleRect = this.editor.viewport.visibleRect;
+            const selectionRect = this.selectionBox.region;
+            this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
+            // Try to move the selection within the center 2/3rds of the viewport.
+            const targetRect = visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+            // Ensure that the selection fits within the target
+            if (targetRect.w < selectionRect.w || targetRect.h < selectionRect.h) {
+                const multiplier = Math.max(selectionRect.w / targetRect.w, selectionRect.h / targetRect.h);
+                const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+                const viewportContentTransform = visibleRectTransform.inverse();
+                (new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
+            }
+            // Ensure that the top left is visible
+            if (!targetRect.containsRect(selectionRect)) {
+                // target position - current position
+                const translation = selectionRect.center.minus(targetRect.center);
+                const visibleRectTransform = Mat33.translation(translation);
+                const viewportContentTransform = visibleRectTransform.inverse();
+                (new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
+            }
+        }
+    }
+    onPointerUp(event) {
+        if (!this.selectionBox)
+            return;
+        this.selectionBox.setToPoint(event.current.canvasPos);
+        this.onGestureEnd();
+    }
+    onGestureCancel() {
+        var _a, _b;
+        // Revert to the previous selection, if any.
+        (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.cancelSelection();
+        this.selectionBox = this.prevSelectionBox;
+        (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.appendBackgroundBoxTo(this.handleOverlay);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        // Clear the selection
+        this.handleOverlay.replaceChildren();
+        this.selectionBox = null;
+        this.handleOverlay.style.display = enabled ? 'block' : 'none';
+    }
+    // Get the object responsible for displaying this' selection.
+    getSelection() {
+        return this.selectionBox;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { InputEvt } from '../types';
+import Editor from '../Editor';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+export declare enum ToolType {
+    TouchPanZoom = 0,
+    Pen = 1,
+    Selection = 2,
+    Eraser = 3,
+    PanZoom = 4
+}
+export default class ToolController {
+    private tools;
+    private activeTool;
+    constructor(editor: Editor, localization: ToolLocalization);
+    dispatchInputEvent(event: InputEvt): boolean;
+    getMatchingTools(kind: ToolType): BaseTool[];
+}

package/dist/src/tools/ToolController.js

@@ -0,0 +1,110 @@
+import { InputEvtType, EditorEventType } from '../types';
+import PanZoom, { PanZoomMode } from './PanZoom';
+import Pen from './Pen';
+import ToolEnabledGroup from './ToolEnabledGroup';
+import Eraser from './Eraser';
+import SelectionTool from './SelectionTool';
+import Color4 from '../Color4';
+export var ToolType;
+(function (ToolType) {
+    ToolType[ToolType["TouchPanZoom"] = 0] = "TouchPanZoom";
+    ToolType[ToolType["Pen"] = 1] = "Pen";
+    ToolType[ToolType["Selection"] = 2] = "Selection";
+    ToolType[ToolType["Eraser"] = 3] = "Eraser";
+    ToolType[ToolType["PanZoom"] = 4] = "PanZoom";
+})(ToolType || (ToolType = {}));
+export default class ToolController {
+    constructor(editor, localization) {
+        const primaryToolEnabledGroup = new ToolEnabledGroup();
+        const touchPanZoom = new PanZoom(editor, PanZoomMode.OneFingerGestures, localization.touchPanTool);
+        const primaryPenTool = new Pen(editor, localization.penTool(1));
+        const primaryTools = [
+            new SelectionTool(editor, localization.selectionTool),
+            new Eraser(editor, localization.eraserTool),
+            // Three pens
+            primaryPenTool,
+            new Pen(editor, localization.penTool(2), Color4.clay, 8),
+            // Highlighter-like pen with width=64
+            new Pen(editor, localization.penTool(3), Color4.ofRGBA(1, 1, 0, 0.5), 64),
+        ];
+        this.tools = [
+            touchPanZoom,
+            ...primaryTools,
+            new PanZoom(editor, PanZoomMode.TwoFingerGestures | PanZoomMode.AnyDevice, localization.twoFingerPanZoomTool),
+        ];
+        primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
+        touchPanZoom.setEnabled(false);
+        primaryPenTool.setEnabled(true);
+        editor.notifier.on(EditorEventType.ToolEnabled, event => {
+            if (event.kind === EditorEventType.ToolEnabled) {
+                editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
+            }
+        });
+        editor.notifier.on(EditorEventType.ToolDisabled, event => {
+            if (event.kind === EditorEventType.ToolDisabled) {
+                editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
+            }
+        });
+        this.activeTool = null;
+    }
+    // Returns true if the event was handled
+    dispatchInputEvent(event) {
+        var _a, _b;
+        let handled = false;
+        if (event.kind === InputEvtType.PointerDownEvt) {
+            for (const tool of this.tools) {
+                if (tool.isEnabled() && tool.onPointerDown(event)) {
+                    if (this.activeTool !== tool) {
+                        (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.onGestureCancel();
+                    }
+                    this.activeTool = tool;
+                    handled = true;
+                    break;
+                }
+            }
+        }
+        else if (event.kind === InputEvtType.PointerUpEvt) {
+            (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
+            this.activeTool = null;
+            handled = true;
+        }
+        else if (event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent) {
+            const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
+            const isWheelEvt = event.kind === InputEvtType.WheelEvt;
+            for (const tool of this.tools) {
+                if (!tool.isEnabled()) {
+                    continue;
+                }
+                const wheelResult = isWheelEvt && tool.onWheel(event);
+                const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
+                handled = keyPressResult || wheelResult;
+                if (handled) {
+                    break;
+                }
+            }
+        }
+        else if (this.activeTool !== null) {
+            let allCasesHandledGuard;
+            switch (event.kind) {
+                case InputEvtType.PointerMoveEvt:
+                    this.activeTool.onPointerMove(event);
+                    break;
+                case InputEvtType.GestureCancelEvt:
+                    this.activeTool.onGestureCancel();
+                    this.activeTool = null;
+                    break;
+                default:
+                    allCasesHandledGuard = event;
+                    return allCasesHandledGuard;
+            }
+            handled = true;
+        }
+        else {
+            handled = false;
+        }
+        return handled;
+    }
+    getMatchingTools(kind) {
+        return this.tools.filter(tool => tool.kind === kind);
+    }
+}

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

@@ -0,0 +1,6 @@
+import BaseTool from './BaseTool';
+export default class ToolEnabledGroup {
+    private activeTool;
+    constructor();
+    notifyEnabled(tool: BaseTool): void;
+}

package/dist/src/tools/ToolEnabledGroup.js

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

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

@@ -0,0 +1,10 @@
+export interface ToolLocalization {
+    penTool: (penId: number) => string;
+    selectionTool: string;
+    eraserTool: string;
+    touchPanTool: string;
+    twoFingerPanZoomTool: string;
+    toolEnabledAnnouncement: (toolName: string) => string;
+    toolDisabledAnnouncement: (toolName: string) => string;
+}
+export declare const defaultToolLocalization: ToolLocalization;

package/dist/src/tools/localization.js

@@ -0,0 +1,9 @@
+export const defaultToolLocalization = {
+    penTool: (penId) => `Pen ${penId}`,
+    selectionTool: 'Selection',
+    eraserTool: 'Eraser',
+    touchPanTool: 'Touch Panning',
+    twoFingerPanZoomTool: 'Panning and Zooming',
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
+};