js-draw 1.21.3 → 1.23.1

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -6,7 +6,7 @@ import  CanvasRenderer  from '../../rendering/renderers/CanvasRenderer.mjs';
 import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
 import  Selection  from './Selection.mjs';
 import  TextComponent  from '../../components/TextComponent.mjs';
-import  { duplicateSelectionShortcut, translateLeftSelectionShortcutId, translateRightSelectionShortcutId, selectAllKeyboardShortcut, sendToBackSelectionShortcut, snapToGridKeyboardShortcutId, translateDownSelectionShortcutId, translateUpSelectionShortcutId, rotateClockwiseSelectionShortcutId, rotateCounterClockwiseSelectionShortcutId, stretchXSelectionShortcutId, shrinkXSelectionShortcutId, shrinkYSelectionShortcutId, stretchYSelectionShortcutId, stretchXYSelectionShortcutId, shrinkXYSelectionShortcutId }  from '../keybindings.mjs';
+import  { duplicateSelectionShortcut, translateLeftSelectionShortcutId, translateRightSelectionShortcutId, selectAllKeyboardShortcut, sendToBackSelectionShortcut, snapToGridKeyboardShortcutId, translateDownSelectionShortcutId, translateUpSelectionShortcutId, rotateClockwiseSelectionShortcutId, rotateCounterClockwiseSelectionShortcutId, stretchXSelectionShortcutId, shrinkXSelectionShortcutId, shrinkYSelectionShortcutId, stretchYSelectionShortcutId, stretchXYSelectionShortcutId, shrinkXYSelectionShortcutId, }  from '../keybindings.mjs';
 import  ToPointerAutoscroller  from './ToPointerAutoscroller.mjs';
 import  showSelectionContextMenu  from './util/showSelectionContextMenu.mjs';
 export const cssPrefix = 'selection-tool-';
@@ -47,7 +47,7 @@ export default class SelectionTool extends BaseTool {
         editor.createHTMLOverlay(this.handleOverlay);
         this.handleOverlay.style.display = 'none';
         this.handleOverlay.classList.add('handleOverlay');
-        editor.notifier.on(EditorEventType.ViewportChanged, _data => {
+        editor.notifier.on(EditorEventType.ViewportChanged, (_data) => {
             // The selection box could be using the wet ink display if its transformation
             // hasn't been finalized yet. Clear before updating the UI.
             this.editor.clearWetInk();
@@ -82,7 +82,9 @@ export default class SelectionTool extends BaseTool {
         this.selectionBox.finalizeTransform();
     }
     onContextMenu(event) {
-        const canShowSelectionMenu = this.selectionBox?.getScreenRegion()?.containsPoint(event.screenPos);
+        const canShowSelectionMenu = this.selectionBox
+            ?.getScreenRegion()
+            ?.containsPoint(event.screenPos);
         void this.showContextMenu(event.canvasPos, canShowSelectionMenu);
         return true;
     }
@@ -196,8 +198,8 @@ export default class SelectionTool extends BaseTool {
     onSelectionUpdated() {
         const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
         const selectedObjects = this.selectionBox?.getSelectedObjects() ?? [];
-        const hasDifferentSelection = this.lastSelectedObjects.length !== selectedItemCount
-            || selectedObjects.some((obj, i) => this.lastSelectedObjects[i] !== obj);
+        const hasDifferentSelection = this.lastSelectedObjects.length !== selectedItemCount ||
+            selectedObjects.some((obj, i) => this.lastSelectedObjects[i] !== obj);
         if (hasDifferentSelection) {
             this.lastSelectedObjects = selectedObjects;
             // Note that the selection has changed
@@ -234,8 +236,9 @@ export default class SelectionTool extends BaseTool {
             this.snapToGrid = true;
             return true;
         }
-        if (this.selectionBox && (shortcucts.matchesShortcut(duplicateSelectionShortcut, event)
-            || shortcucts.matchesShortcut(sendToBackSelectionShortcut, event))) {
+        if (this.selectionBox &&
+            (shortcucts.matchesShortcut(duplicateSelectionShortcut, event) ||
+                shortcucts.matchesShortcut(sendToBackSelectionShortcut, event))) {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
             return true;
@@ -298,11 +301,11 @@ export default class SelectionTool extends BaseTool {
             xScaleSteps += 1;
             yScaleSteps += 1;
         }
-        let handled = xTranslateSteps !== 0
-            || yTranslateSteps !== 0
-            || rotationSteps !== 0
-            || xScaleSteps !== 0
-            || yScaleSteps !== 0;
+        let handled = xTranslateSteps !== 0 ||
+            yTranslateSteps !== 0 ||
+            rotationSteps !== 0 ||
+            xScaleSteps !== 0 ||
+            yScaleSteps !== 0;
         if (!this.selectionBox) {
             handled = false;
         }
@@ -313,9 +316,13 @@ export default class SelectionTool extends BaseTool {
             const region = this.selectionBox.region;
             const scaleFactor = Vec2.of(scaleStepSize ** xScaleSteps, scaleStepSize ** yScaleSteps);
             const rotationMat = Mat33.zRotation(rotationSteps * rotateStepSize);
-            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport.roundScaleRatio(component));
+            const roundedRotationMatrix = rotationMat.mapEntries((component) => Viewport.roundScaleRatio(component));
             const regionCenter = this.editor.viewport.roundPoint(region.center);
-            const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33.translation(regionCenter.times(-1)))).rightMul(Mat33.translation(this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
+            const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft))
+                .rightMul(Mat33.translation(regionCenter)
+                .rightMul(roundedRotationMatrix)
+                .rightMul(Mat33.translation(regionCenter.times(-1))))
+                .rightMul(Mat33.translation(this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
             this.selectionBox.scrollTo();
@@ -341,7 +348,7 @@ export default class SelectionTool extends BaseTool {
         }
         if (this.selectionBox && shortcucts.matchesShortcut(duplicateSelectionShortcut, evt)) {
             // Finalize duplicating the selection
-            this.selectionBox.duplicateSelectedObjects().then(command => {
+            this.selectionBox.duplicateSelectedObjects().then((command) => {
                 this.editor.dispatch(command);
             });
             return true;
@@ -386,7 +393,9 @@ export default class SelectionTool extends BaseTool {
             return false;
         }
         const exportViewport = new Viewport(() => { });
-        const selectionScreenSize = this.selectionBox.getScreenRegion().size.times(this.editor.display.getDevicePixelRatio());
+        const selectionScreenSize = this.selectionBox
+            .getScreenRegion()
+            .size.times(this.editor.display.getDevicePixelRatio());
         // Update the viewport to have screen size roughly equal to the size of the selection box
         let scaleFactor = selectionScreenSize.maximumEntryMagnitude() / (bbox.size.maximumEntryMagnitude() || 1);
         // Round to a nearby power of two
@@ -455,7 +464,7 @@ export default class SelectionTool extends BaseTool {
     // Select the given `objects`. Any non-selectable objects in `objects` are ignored.
     setSelection(objects) {
         // Only select selectable objects.
-        objects = objects.filter(obj => obj.isSelectable());
+        objects = objects.filter((obj) => obj.isSelectable());
         // Sort by z-index
         objects.sort((a, b) => a.getZIndex() - b.getZIndex());
         // Remove duplicates

package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs

@@ -63,7 +63,7 @@ export default class ToPointerAutoscroller {
                 const currentTime = performance.now();
                 const deltaTimeMs = currentTime - lastUpdateTime;
                 const scrollDirection = this.getScrollForPoint(this.targetPoint);
-                const screenScrollAmount = scrollDirection.times(this.scrollRate * deltaTimeMs / 1000);
+                const screenScrollAmount = scrollDirection.times((this.scrollRate * deltaTimeMs) / 1000);
                 this.scrollByCanvasDelta(this.viewport.screenToCanvasTransform.transformVec3(screenScrollAmount));
                 lastUpdateTime = currentTime;
                 await untilNextAnimationFrame();

package/dist/mjs/tools/SelectionTool/TransformMode.mjs

@@ -75,7 +75,7 @@ export class ResizeTransformer {
         }
         // 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.roundScaleRatio(component, 2));
+        scale = scale.map((component) => Viewport.roundScaleRatio(component, 2));
         if (scale.x !== 0 && scale.y !== 0) {
             const origin = this.editor.viewport.roundPoint(this.transformOrigin);
             this.selection.setTransform(Mat33.scaling2D(scale, origin));
@@ -116,9 +116,8 @@ export class RotateTransformer {
         // Transform in canvas space
         const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
         const unrounded = Mat33.zRotation(angle);
-        const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
-        const fullRoundedTransform = Mat33
-            .translation(canvasSelCenter)
+        const roundedRotationTransform = unrounded.mapEntries((entry) => Viewport.roundScaleRatio(entry));
+        const fullRoundedTransform = Mat33.translation(canvasSelCenter)
             .rightMul(roundedRotationTransform)
             .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
         this.selection.setTransform(fullRoundedTransform);
@@ -136,9 +135,9 @@ export class RotateTransformer {
         const clickThresholdDist = 10;
         const clickThresholdTime = 0.4; // s
         const dragTimeSeconds = (performance.now() - this.startTime) / 1000;
-        if (dragTimeSeconds < clickThresholdTime
-            && this.maximumDistFromStart < clickThresholdDist
-            && this.targetRotation === 0) {
+        if (dragTimeSeconds < clickThresholdTime &&
+            this.maximumDistFromStart < clickThresholdDist &&
+            this.targetRotation === 0) {
             this.setRotationTo(-Math.PI / 2);
         }
         return this.selection.finalizeTransform();

package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs

@@ -4,7 +4,7 @@ const makeClipboardErrorHandlers = (editor) => {
     const makeErrorDialog = (error) => {
         const dialog = makeMessageDialog(editor, {
             title: editor.localization.copyPasteError__heading,
-            classNames: ['clipboard-error-dialog']
+            classNames: ['clipboard-error-dialog'],
         });
         dialog.appendChild(document.createTextNode(editor.localization.copyPasteError__description));
         const errorDetailsElement = document.createElement('details');
@@ -17,7 +17,26 @@ const makeClipboardErrorHandlers = (editor) => {
     };
     return {
         async onCopyError(error) {
-            makeErrorDialog(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(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);
@@ -39,6 +58,8 @@ const makeClipboardErrorHandlers = (editor) => {
             pasteTextbox.onpaste = handlePaste;
             pasteTextbox.ondrop = handlePaste;
             dialog.appendChild(textboxLabel);
+            pasteTextbox.focus();
+            document.execCommand('paste');
         },
     };
 };

package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.mjs

@@ -4,35 +4,44 @@ import  makeClipboardErrorHandlers  from './makeClipboardErrorHandlers.mjs';
 const showSelectionContextMenu = async (selectionBox, editor, canvasAnchor, preferSelectionMenu, clearSelection) => {
     const localization = editor.localization;
     const showSelectionMenu = selectionBox?.getSelectedItemCount() && preferSelectionMenu;
-    const noSelectionMenu = [{
+    const noSelectionMenu = [
+        {
             text: localization.selectionMenu__paste,
             icon: () => editor.icons.makePasteIcon(),
             key: () => {
                 const clipboardHandler = new ClipboardHandler(editor, makeClipboardErrorHandlers(editor));
                 void clipboardHandler.paste();
             },
-        }];
-    const onActivated = await createMenuOverlay(editor, canvasAnchor, showSelectionMenu ? [{
-            text: localization.selectionMenu__duplicate,
-            icon: () => editor.icons.makeDuplicateSelectionIcon(),
-            key: async () => {
-                await editor.dispatch(await selectionBox.duplicateSelectedObjects());
+        },
+    ];
+    const onActivated = await createMenuOverlay(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__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(editor, makeClipboardErrorHandlers(editor));
-                void clipboardHandler.copy();
+            {
+                text: localization.selectionMenu__copyToClipboard,
+                icon: () => editor.icons.makeCopyIcon(),
+                key: () => {
+                    const clipboardHandler = new ClipboardHandler(editor, makeClipboardErrorHandlers(editor));
+                    void clipboardHandler.copy();
+                },
             },
-        }, ...noSelectionMenu] : noSelectionMenu);
+            ...noSelectionMenu,
+        ]
+        : noSelectionMenu);
     onActivated?.();
 };
 export default showSelectionContextMenu;

package/dist/mjs/tools/SoundUITool.mjs

@@ -53,12 +53,12 @@ class SoundFeedback {
     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 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));
+        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);
@@ -150,7 +150,9 @@ export default class SoundUITool extends BaseTool {
     onPointerMove({ current }) {
         this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
         const pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
-        const collisions = this.editor.image.getElementsIntersectingRegion(pointerMotionLine.bbox).filter(component => component.intersects(pointerMotionLine));
+        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);

package/dist/mjs/tools/TextTool.mjs

@@ -76,7 +76,7 @@ export default class TextTool extends BaseTool {
             return measurement.fontBoundingBoxAscent ?? measurement.actualBoundingBoxAscent;
         }
         // Estimate
-        return style.size * 2 / 3;
+        return (style.size * 2) / 3;
     }
     // Take input from this' textInputElem and add it to the EditorImage.
     // If [removeInput], the HTML input element is removed. Otherwise, its value
@@ -95,7 +95,10 @@ export default class TextTool extends BaseTool {
             if (content === '') {
                 return;
             }
-            const textTransform = Mat33.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
+            const textTransform = Mat33.translation(this.textTargetPosition)
+                .rightMul(this.getTextScaleMatrix())
+                .rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()))
+                .rightMul(Mat33.zRotation(this.textRotation));
             const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
             const action = EditorImage.addElement(textComponent);
             if (this.removeExistingCommand) {
@@ -139,8 +142,7 @@ export default class TextTool extends BaseTool {
         const vertAdjust = ascent;
         const rotation = this.textRotation + viewport.getRotationAngle();
         const scale = this.getTextScaleMatrix();
-        this.textInputElem.style.transform =
-            `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
+        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${(rotation * 180) / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
         // Match the line height of default rendered text.
         const lineHeight = Math.floor(this.textStyle.size);
@@ -208,11 +210,11 @@ export default class TextTool extends BaseTool {
             const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
-            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent);
             // Don't try to edit text nodes that contain the viewport (this allows us
             // to zoom in on text nodes and add text on top of them.)
             const visibleRect = this.editor.viewport.visibleRect;
-            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
+            targetTextNodes = targetTextNodes.filter((node) => !node.getBBox().containsRect(visibleRect));
             // End any TextNodes we're currently editing.
             this.flushInput();
             if (targetTextNodes.length > 0) {

package/dist/mjs/tools/ToolController.mjs

@@ -25,13 +25,19 @@ export default class ToolController {
         this.activeTool = null;
         this.isEditorReadOnly = editor.isReadOnlyReactiveValue();
         this.inputPipeline = new InputPipeline();
-        this.inputPipeline.setEmitListener(event => this.onEventInternal(event));
+        this.inputPipeline.setEmitListener((event) => this.onEventInternal(event));
         const primaryToolGroup = new ToolEnabledGroup();
         this.primaryToolGroup = primaryToolGroup;
         const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
-        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
-        const secondaryPenTool = new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 });
+        const primaryPenTool = new Pen(editor, localization.penTool(1), {
+            color: Color4.purple,
+            thickness: 8,
+        });
+        const secondaryPenTool = new Pen(editor, localization.penTool(2), {
+            color: Color4.clay,
+            thickness: 4,
+        });
         // Stabilize the secondary pen tool.
         secondaryPenTool.setInputMapper(new InputStabilizer(editor.viewport));
         const eraser = new Eraser(editor, localization.eraserTool);
@@ -43,7 +49,7 @@ export default class ToolController {
             new Pen(editor, localization.penTool(3), {
                 color: Color4.ofRGBA(1, 1, 0, 0.5),
                 thickness: 40,
-                factory: makePressureSensitiveFreehandLineBuilder
+                factory: makePressureSensitiveFreehandLineBuilder,
             }),
             eraser,
             new SelectionTool(editor, localization.selectionTool),
@@ -68,15 +74,15 @@ export default class ToolController {
             new PasteHandler(editor),
             new SelectAllShortcutHandler(editor),
         ];
-        primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
+        primaryTools.forEach((tool) => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
         primaryPenTool.setEnabled(true);
-        editor.notifier.on(EditorEventType.ToolEnabled, event => {
+        editor.notifier.on(EditorEventType.ToolEnabled, (event) => {
             if (event.kind === EditorEventType.ToolEnabled) {
                 editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
             }
         });
-        editor.notifier.on(EditorEventType.ToolDisabled, event => {
+        editor.notifier.on(EditorEventType.ToolDisabled, (event) => {
             if (event.kind === EditorEventType.ToolDisabled) {
                 editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
             }
@@ -110,7 +116,7 @@ export default class ToolController {
         }
     }
     getPrimaryTools() {
-        return this.tools.filter(tool => {
+        return this.tools.filter((tool) => {
             return tool.getToolGroup() === this.primaryToolGroup;
         });
     }
@@ -152,7 +158,7 @@ export default class ToolController {
         this.tools = newTools;
     }
     insertTools(insertNear, toolsToInsert, mode) {
-        this.tools = this.tools.filter(tool => !toolsToInsert.includes(tool));
+        this.tools = this.tools.filter((tool) => !toolsToInsert.includes(tool));
         const newTools = [];
         for (const tool of this.tools) {
             if (mode === 'after') {
@@ -264,7 +270,7 @@ export default class ToolController {
         this.inputPipeline.addToTail(mapper);
     }
     getMatchingTools(type) {
-        return this.tools.filter(tool => tool instanceof type);
+        return this.tools.filter((tool) => tool instanceof type);
     }
     // @internal
     onEditorDestroyed() {

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

@@ -1,3 +1,4 @@
+export { default as InputMapper } from './InputFilter/InputMapper';
 export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';

package/dist/mjs/tools/lib.mjs

@@ -1,3 +1,4 @@
+export  { default as InputMapper }  from './InputFilter/InputMapper.mjs';
 export  { default as BaseTool }  from './BaseTool.mjs';
 export  { default as ToolController }  from './ToolController.mjs';
 export  { default as ToolEnabledGroup }  from './ToolEnabledGroup.mjs';

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

@@ -36,6 +36,8 @@ export interface ToolLocalization {
     copyPasteError__heading: string;
     copyPasteError__description: string;
     copyPasteError__pasteRetry: string;
+    copyPasteError__copyRetry: string;
+    copyPasteError__copyMe: string;
     copyPasteError__errorDetails: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;

package/dist/mjs/tools/localization.mjs

@@ -14,10 +14,12 @@ export const defaultToolLocalization = {
     selectionMenu__duplicate: 'Duplicate',
     selectionMenu__delete: 'Delete',
     selectionMenu__paste: 'Paste',
-    copyPasteError__heading: 'Error!',
+    copyPasteError__heading: 'Copy/paste',
     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:',
+    copyPasteError__copyRetry: 'To retry, please copy the text in the input box below:',
+    copyPasteError__copyMe: 'Copy me!',
     autocorrectedTo: (strokeDescription) => `Autocorrected to ${strokeDescription}`,
     autocorrectionCanceled: 'Autocorrect cancelled',
     textTool: 'Text',

package/dist/mjs/tools/util/StationaryPenDetector.mjs

@@ -45,9 +45,9 @@ export default class StationaryPenDetector {
         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) {
+        if (movedOutOfRadius ||
+            this.averageVelocity.length() > this.config.maxSpeed ||
+            dtFromStart < this.config.minTimeSeconds) {
             this.stationaryStartPointer = currentPointer;
             this.lastPointer = currentPointer;
             this.setStationaryTimeout(this.config.minTimeSeconds * 1000);

package/dist/mjs/tools/util/createMenuOverlay.mjs

@@ -27,7 +27,7 @@ const createMenuOverlay = async (editor, canvasAnchor, options) => {
         await waitForTimeout(hideMenuTimeout);
         menuModal.close();
     };
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         let resolved = false;
         let result = null;
         const resolveWithSelectedResult = () => {
@@ -70,7 +70,7 @@ const createMenuOverlay = async (editor, canvasAnchor, options) => {
         // - 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);
+            const focusedIndex = optionElements.findIndex((item) => item === document.activeElement);
             if (focusedIndex === -1)
                 return;
             let newFocusedIndex = focusedIndex;

package/dist/mjs/util/ClipboardHandler.d.ts

@@ -29,7 +29,7 @@ export default class ClipboardHandler {
      * is to be copied. This is done because `ClipboardEvent`s seem to not support attaching
      * images.
      */
-    copy(event?: ClipboardEvent): Promise<void>;
+    copy(event?: ClipboardEvent | DragEvent): Promise<void>;
     private copyInternal;
 }
 export {};

package/dist/mjs/util/ClipboardHandler.mjs

@@ -58,20 +58,15 @@ class ClipboardHandler {
         const clipboardData = event?.dataTransfer ?? event?.clipboardData ?? null;
         const hasEvent = !!clipboardData;
         const sendPasteEvent = (mime, data) => {
-            return data && editor.toolController.dispatchInputEvent({
-                kind: InputEvtType.PasteEvent,
-                mime,
-                data,
-            });
+            return (data &&
+                editor.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PasteEvent,
+                    mime,
+                    data,
+                }));
         };
         // Listed in order of precedence
-        const supportedMIMEs = [
-            'image/svg+xml',
-            'text/html',
-            'image/png',
-            'image/jpeg',
-            'text/plain',
-        ];
+        const supportedMIMEs = ['image/svg+xml', 'text/html', 'image/png', 'image/jpeg', 'text/plain'];
         let files = [];
         const textData = new Map();
         if (hasEvent) {
@@ -105,7 +100,7 @@ class ClipboardHandler {
                 }
             }
             for (const file of files) {
-                const fileType = file.type.toLowerCase();
+                const fileType = file?.type?.toLowerCase();
                 if (fileType !== mime) {
                     continue;
                 }
@@ -181,14 +176,19 @@ class ClipboardHandler {
             event?.preventDefault();
         }
         const mimeTypes = [...mimeToData.keys()];
-        const hasNonTextMimeTypes = mimeTypes.some(mime => !isTextMimeType(mime));
+        const hasNonTextMimeTypes = mimeTypes.some((mime) => !isTextMimeType(mime));
         const copyToEvent = (reason) => {
             if (!event) {
                 throw new Error(`Unable to copy -- no event provided${reason ? `. Original error: ${reason}` : ''}`);
             }
             for (const [key, value] of mimeToData.entries()) {
                 if (typeof value === 'string') {
-                    event.clipboardData?.setData(key, value);
+                    if ('clipboardData' in event) {
+                        event.clipboardData?.setData(key, value);
+                    }
+                    else {
+                        event.dataTransfer?.setData(key, value);
+                    }
                 }
             }
         };
@@ -219,7 +219,9 @@ class ClipboardHandler {
                     // Browser support for ClipboardItem.supports is limited as of mid 2024. However, some browsers
                     // that do support `.supports` throw an exception when attempting to copy an unsupported MIME type
                     // (e.g. Firefox).
-                    const unsupported = 'supports' in ClipboardItem && typeof ClipboardItem.supports === 'function' && !ClipboardItem.supports(key);
+                    const unsupported = 'supports' in ClipboardItem &&
+                        typeof ClipboardItem.supports === 'function' &&
+                        !ClipboardItem.supports(key);
                     if (!unsupported) {
                         filteredMimeToData[key] = data;
                     }
@@ -229,8 +231,7 @@ class ClipboardHandler {
             const browserMimeToData = removeUnsupportedMime(mapInternalDataToBrowserData(mimeToData));
             return navigator.clipboard.write([new ClipboardItem(browserMimeToData)]);
         };
-        const supportsClipboardApi = (typeof ClipboardItem !== 'undefined'
-            && typeof navigator?.clipboard?.write !== 'undefined');
+        const supportsClipboardApi = typeof ClipboardItem !== 'undefined' && typeof navigator?.clipboard?.write !== 'undefined';
         if (!__classPrivateFieldGet(this, _ClipboardHandler_preferClipboardEvents, "f") && supportsClipboardApi && (hasNonTextMimeTypes || !event)) {
             let clipboardApiPromise = null;
             const fallBackToCopyEvent = (reason) => {