js-draw 1.21.3 → 1.22.0

package/dist/cjs/tools/PanZoom.js

@@ -123,9 +123,9 @@ class PanZoom extends BaseTool_1.default {
         return { canvasCenter, screenCenter, angle, dist };
     }
     allPointersAreOfType(pointers, kind) {
-        return pointers.every(pointer => pointer.device === kind);
+        return pointers.every((pointer) => pointer.device === kind);
     }
-    onPointerDown({ allPointers: pointers, current: currentPointer }) {
+    onPointerDown({ allPointers: pointers, current: currentPointer, }) {
         let handlingGesture = false;
         const inertialScrollerVelocity = this.inertialScroller?.getCurrentVelocity() ?? math_1.Vec2.zero;
         this.inertialScroller?.stop();
@@ -147,9 +147,10 @@ class PanZoom extends BaseTool_1.default {
             this.isRotating = Math.abs(Math.sin(this.initialViewportRotation * 2)) > 1e-3;
             handlingGesture = true;
         }
-        else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
-            || (isRightClick && this.mode & PanZoomMode.RightClickDrags)
-            || (this.mode & PanZoomMode.SinglePointerGestures))) {
+        else if (pointers.length === 1 &&
+            ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch) ||
+                (isRightClick && this.mode & PanZoomMode.RightClickDrags) ||
+                this.mode & PanZoomMode.SinglePointerGestures)) {
             this.lastScreenCenter = pointers[0].screenPos;
             this.isScaling = false;
             handlingGesture = true;
@@ -203,7 +204,9 @@ class PanZoom extends BaseTool_1.default {
         // `snapToMultipleOf`.
         // Use a smaller snap angle if already rotated (to avoid pinch zoom gestures from
         // starting rotation).
-        const maxSnapAngle = this.isRotating ? this.afterRotationStartSnapAngle : this.initialRotationSnapAngle;
+        const maxSnapAngle = this.isRotating
+            ? this.afterRotationStartSnapAngle
+            : this.initialRotationSnapAngle;
         // Snap the rotation
         if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
             fullRotation = roundedFullRotation;
@@ -222,7 +225,7 @@ class PanZoom extends BaseTool_1.default {
      */
     toSnappedScaleFactor(touchDist) {
         // scaleFactor is applied to the current transformation of the viewport.
-        const newScale = this.initialViewportScale * touchDist / this.startTouchDist;
+        const newScale = (this.initialViewportScale * touchDist) / this.startTouchDist;
         const currentScale = this.editor.viewport.getScaleFactor();
         const logNewScale = Math.log(newScale) / Math.log(10);
         const roundedLogNewScale = Math.round(logNewScale);
@@ -301,10 +304,10 @@ class PanZoom extends BaseTool_1.default {
             this.velocity = math_1.Vec2.zero;
         };
         const minInertialScrollDt = 30;
-        const shouldInertialScroll = event.current.device === Pointer_1.PointerDevice.Touch
-            && event.allPointers.length === 1
-            && this.velocity !== null
-            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
+        const shouldInertialScroll = event.current.device === Pointer_1.PointerDevice.Touch &&
+            event.allPointers.length === 1 &&
+            this.velocity !== null &&
+            event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
             const oldVelocity = this.velocity;
             // If the user drags the screen, then stops, then lifts the pointer,
@@ -444,7 +447,9 @@ class PanZoom extends BaseTool_1.default {
         translation = toCanvas.transformVec3(translation);
         // Rotate/scale about the center of the canvas
         const transformCenter = this.editor.viewport.visibleRect.center;
-        const transformUpdate = math_1.Mat33.scaling2D(scale, transformCenter).rightMul(math_1.Mat33.zRotation(rotation, transformCenter)).rightMul(math_1.Mat33.translation(translation));
+        const transformUpdate = math_1.Mat33.scaling2D(scale, transformCenter)
+            .rightMul(math_1.Mat33.zRotation(rotation, transformCenter))
+            .rightMul(math_1.Mat33.translation(translation));
         this.applyAndFinalizeTransform(transformUpdate);
         return true;
     }

package/dist/cjs/tools/PasteHandler.js

@@ -90,14 +90,20 @@ class PasteHandler extends BaseTool_1.default {
             }
             return 0;
         });
-        const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: math_1.Color4.red } };
+        const defaultTextStyle = {
+            size: 12,
+            fontFamily: 'sans',
+            renderingStyle: { fill: math_1.Color4.red },
+        };
         const pastedTextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
         // Don't paste text that would be invisible.
         if (text.trim() === '') {
             return;
         }
         const lines = text.split('\n');
-        await this.addComponentsFromPaste([TextComponent_1.default.fromLines(lines, math_1.Mat33.identity, pastedTextStyle)]);
+        await this.addComponentsFromPaste([
+            TextComponent_1.default.fromLines(lines, math_1.Mat33.identity, pastedTextStyle),
+        ]);
     }
     async doImagePaste(dataURL) {
         const image = new Image();

package/dist/cjs/tools/Pen.js

@@ -57,14 +57,14 @@ class Pen extends BaseTool_1.default {
             thickness: 4,
             ...style,
         });
-        this.styleValue.onUpdateAndNow(newValue => {
+        this.styleValue.onUpdateAndNow((newValue) => {
             this.style = newValue;
             this.noteUpdated();
         });
     }
     getPressureMultiplier() {
         const thickness = this.style.thickness;
-        return 1 / this.editor.viewport.getScaleFactor() * thickness;
+        return (1 / this.editor.viewport.getScaleFactor()) * thickness;
     }
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
@@ -123,7 +123,7 @@ class Pen extends BaseTool_1.default {
             this.currentDeviceType = current.device;
             this.currentPointerId = current.id;
             if (this.shapeAutocompletionEnabled) {
-                this.stationaryDetector = new StationaryPenDetector_1.default(current, StationaryPenDetector_1.defaultStationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
+                this.stationaryDetector = new StationaryPenDetector_1.default(current, StationaryPenDetector_1.defaultStationaryDetectionConfig, (pointer) => this.autocorrectShape(pointer));
             }
             else {
                 this.stationaryDetector = null;
@@ -303,10 +303,18 @@ class Pen extends BaseTool_1.default {
     getStrokeAutocorrectionEnabled() {
         return this.shapeAutocompletionEnabled;
     }
-    getThickness() { return this.style.thickness; }
-    getColor() { return this.style.color; }
-    getStrokeFactory() { return this.style.factory; }
-    getStyleValue() { return this.styleValue; }
+    getThickness() {
+        return this.style.thickness;
+    }
+    getColor() {
+        return this.style.color;
+    }
+    getStrokeFactory() {
+        return this.style.factory;
+    }
+    getStyleValue() {
+        return this.styleValue;
+    }
     onKeyPress(event) {
         const shortcuts = this.editor.shortcuts;
         // Ctrl+Z: End the stroke so that it can be undone/redone.
@@ -319,10 +327,10 @@ class Pen extends BaseTool_1.default {
         }
         let newThickness;
         if (shortcuts.matchesShortcut(keybindings_2.decreaseSizeKeyboardShortcutId, event)) {
-            newThickness = this.getThickness() * 2 / 3;
+            newThickness = (this.getThickness() * 2) / 3;
         }
         else if (shortcuts.matchesShortcut(keybindings_2.increaseSizeKeyboardShortcutId, event)) {
-            newThickness = this.getThickness() * 3 / 2;
+            newThickness = (this.getThickness() * 3) / 2;
         }
         if (newThickness !== undefined) {
             newThickness = Math.min(Math.max(1, newThickness), 256);

package/dist/cjs/tools/ScrollbarTool.js

@@ -27,13 +27,13 @@ class ScrollbarTool extends BaseTool_1.default {
         this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
         let overlay = null;
         let viewportListener = null;
-        this.enabledValue().onUpdateAndNow(enabled => {
+        this.enabledValue().onUpdateAndNow((enabled) => {
             overlay?.remove();
             viewportListener?.remove();
             viewportListener = null;
             overlay = null;
             if (enabled) {
-                viewportListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, _event => {
+                viewportListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, (_event) => {
                     this.updateScrollbars();
                 });
                 this.updateScrollbars();
@@ -45,16 +45,17 @@ class ScrollbarTool extends BaseTool_1.default {
         const viewport = this.editor.viewport;
         const screenSize = viewport.getScreenRectSize();
         const screenRect = new math_1.Rect2(0, 0, screenSize.x, screenSize.y);
-        const imageRect = this.editor.getImportExportRect()
+        const imageRect = this.editor
+            .getImportExportRect()
             // The scrollbars are positioned in screen coordinates, so the exportRect also needs
             // to be in screen coordinates
             .transformedBoundingBox(viewport.canvasToScreenTransform)
             // If the screenRect is outside of the exportRect, expand the image rectangle
             .union(screenRect);
-        const scrollbarWidth = screenRect.width / imageRect.width * screenSize.x;
-        const scrollbarHeight = screenRect.height / imageRect.height * screenSize.y;
-        const scrollbarX = (screenRect.x - imageRect.x) / imageRect.width * (screenSize.x);
-        const scrollbarY = (screenRect.y - imageRect.y) / imageRect.height * (screenSize.y);
+        const scrollbarWidth = (screenRect.width / imageRect.width) * screenSize.x;
+        const scrollbarHeight = (screenRect.height / imageRect.height) * screenSize.y;
+        const scrollbarX = ((screenRect.x - imageRect.x) / imageRect.width) * screenSize.x;
+        const scrollbarY = ((screenRect.y - imageRect.y) / imageRect.height) * screenSize.y;
         this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
         this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
         this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;

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

@@ -175,7 +175,7 @@ class Selection {
         const selectedBottommostZIndex = this.selectedElems[0].getZIndex();
         const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.region);
         const topMostVisibleZIndex = visibleObjects[visibleObjects.length - 1]?.getZIndex() ?? selectedBottommostZIndex;
-        const deltaZIndex = (topMostVisibleZIndex + 1) - selectedBottommostZIndex;
+        const deltaZIndex = topMostVisibleZIndex + 1 - selectedBottommostZIndex;
         return deltaZIndex;
     }
     // Applies the current transformation to the selection
@@ -205,7 +205,7 @@ class Selection {
         const targetHighestZIndex = lowestVisibleZIndex - 1;
         const deltaZIndex = targetHighestZIndex - highestSelectedZIndex;
         if (deltaZIndex !== 0) {
-            const commands = this.selectedElems.map(elem => {
+            const commands = this.selectedElems.map((elem) => {
                 return elem.setZIndex(elem.getZIndex() + deltaZIndex);
             });
             return (0, uniteCommands_1.default)(commands, updateChunkSize);
@@ -246,7 +246,9 @@ class Selection {
             // Only select one item if the rectangle was very small.
             singleItemSelectionMode = true;
         }
-        this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
+        this.selectedElems = this.editor.image
+            .getElementsIntersectingRegion(this.region)
+            .filter((elem) => {
             return elem.intersectsRect(this.region) && elem.isSelectable();
         });
         if (singleItemSelectionMode && this.selectedElems.length > 0) {
@@ -304,7 +306,7 @@ class Selection {
         this.backgroundElem.style.marginTop = `${screenRegion.topLeft.y}px`;
         this.backgroundElem.style.width = `${screenRegion.width}px`;
         this.backgroundElem.style.height = `${screenRegion.height}px`;
-        const rotationDeg = this.screenRegionRotation * 180 / Math.PI;
+        const rotationDeg = (this.screenRegionRotation * 180) / Math.PI;
         this.backgroundElem.style.transform = `rotate(${rotationDeg}deg)`;
         this.backgroundElem.style.transformOrigin = 'center';
         // If closer to perpendicular, apply different CSS
@@ -371,7 +373,7 @@ class Selection {
     }
     removeDeletedElemsFromSelection() {
         // Remove any deleted elements from the selection.
-        this.selectedElems = this.selectedElems.filter(elem => {
+        this.selectedElems = this.selectedElems.filter((elem) => {
             const hasParent = !!this.editor.image.findParent(elem);
             // If we removed the element and haven't added it back yet, don't remove it
             // from the selection.
@@ -532,7 +534,7 @@ class Selection {
         this.addRemoveSelectionFromImage(true);
         this.originalRegion = bbox;
         this.selectionTightBoundingBox = bbox;
-        this.selectedElems = objects.filter(object => object.isSelectable());
+        this.selectedElems = objects.filter((object) => object.isSelectable());
         // Enforce increasing z-index invariant
         this.selectedElems.sort((a, b) => a.getZIndex() - b.getZIndex());
         this.padRegion();
@@ -547,7 +549,7 @@ _a = Selection;
     SerializableCommand_1.default.register('selection-tool-transform', (json, _editor) => {
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new math_1.Mat33(...json.transform);
-        const elemIds = (json.elems ?? []);
+        const elemIds = json.elems ?? [];
         const deltaZIndex = parseInt(json.deltaZIndex ?? 0);
         return new _a.ApplyTransformationCommand(null, elemIds, fullTransform, deltaZIndex);
     });
@@ -570,8 +572,8 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
             this.selectedElemIds = selectedElems;
         }
         else {
-            this.selectedElemIds = selectedElems.map(elem => elem.getId());
-            this.transformCommands = selectedElems.map(elem => {
+            this.selectedElemIds = selectedElems.map((elem) => elem.getId());
+            this.transformCommands = selectedElems.map((elem) => {
                 return elem.setZIndexAndTransformBy(this.fullTransform, elem.getZIndex() + deltaZIndex);
             });
         }
@@ -580,7 +582,8 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         if (this.transformCommands) {
             return;
         }
-        this.transformCommands = this.selectedElemIds.map(id => {
+        this.transformCommands = this.selectedElemIds
+            .map((id) => {
             const elem = editor.image.lookupElement(id);
             if (!elem) {
                 // There may be valid reasons for an element lookup to fail:
@@ -598,9 +601,10 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
                 originalZIndex = elem.getZIndex() - this.deltaZIndex;
             }
             return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
-        }).filter(// Remove all null commands
+        })
+            .filter(
         // Remove all null commands
-        command => command !== null);
+        (command) => command !== null);
     }
     async apply(editor) {
         this.resolveToElems(editor, false);

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

@@ -68,7 +68,9 @@ class SelectionHandle {
      * Removes this element from its container. Should only be called
      * after {@link addTo}.
      */
-    remove() { this.element.remove(); }
+    remove() {
+        this.element.remove();
+    }
     /**
      * Returns this handle's bounding box relative to the top left of the
      * selection box.
@@ -76,7 +78,8 @@ class SelectionHandle {
     getBBoxParentCoords() {
         const parentRect = this.parent.getScreenRegion();
         const size = math_1.Vec2.of(exports.handleSize, exports.handleSize);
-        const topLeft = parentRect.size.scale(this.parentSide)
+        const topLeft = parentRect.size
+            .scale(this.parentSide)
             // Center
             .minus(size.times(1 / 2));
         return new math_1.Rect2(topLeft.x, topLeft.y, size.x, size.y);

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

@@ -41,7 +41,9 @@ class SelectionMenuShortcut {
     addTo(container) {
         container.appendChild(this.element);
     }
-    remove() { this.element.remove(); }
+    remove() {
+        this.element.remove();
+    }
     getElementScreenSize() {
         return math_1.Vec2.of(this.element.clientWidth, this.element.clientHeight);
     }

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

@@ -53,7 +53,7 @@ class SelectionTool extends BaseTool_1.default {
         editor.createHTMLOverlay(this.handleOverlay);
         this.handleOverlay.style.display = 'none';
         this.handleOverlay.classList.add('handleOverlay');
-        editor.notifier.on(types_1.EditorEventType.ViewportChanged, _data => {
+        editor.notifier.on(types_1.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();
@@ -88,7 +88,9 @@ class SelectionTool extends BaseTool_1.default {
         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;
     }
@@ -202,8 +204,8 @@ class SelectionTool extends BaseTool_1.default {
     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
@@ -240,8 +242,9 @@ class SelectionTool extends BaseTool_1.default {
             this.snapToGrid = true;
             return true;
         }
-        if (this.selectionBox && (shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event)
-            || shortcucts.matchesShortcut(keybindings_1.sendToBackSelectionShortcut, event))) {
+        if (this.selectionBox &&
+            (shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event) ||
+                shortcucts.matchesShortcut(keybindings_1.sendToBackSelectionShortcut, event))) {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
             return true;
@@ -304,11 +307,11 @@ class SelectionTool extends BaseTool_1.default {
             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;
         }
@@ -319,9 +322,13 @@ class SelectionTool extends BaseTool_1.default {
             const region = this.selectionBox.region;
             const scaleFactor = math_1.Vec2.of(scaleStepSize ** xScaleSteps, scaleStepSize ** yScaleSteps);
             const rotationMat = math_1.Mat33.zRotation(rotationSteps * rotateStepSize);
-            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport_1.default.roundScaleRatio(component));
+            const roundedRotationMatrix = rotationMat.mapEntries((component) => Viewport_1.default.roundScaleRatio(component));
             const regionCenter = this.editor.viewport.roundPoint(region.center);
-            const transform = math_1.Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(math_1.Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(math_1.Mat33.translation(regionCenter.times(-1)))).rightMul(math_1.Mat33.translation(this.editor.viewport.roundPoint(math_1.Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
+            const transform = math_1.Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft))
+                .rightMul(math_1.Mat33.translation(regionCenter)
+                .rightMul(roundedRotationMatrix)
+                .rightMul(math_1.Mat33.translation(regionCenter.times(-1))))
+                .rightMul(math_1.Mat33.translation(this.editor.viewport.roundPoint(math_1.Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
             this.selectionBox.scrollTo();
@@ -347,7 +354,7 @@ class SelectionTool extends BaseTool_1.default {
         }
         if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, evt)) {
             // Finalize duplicating the selection
-            this.selectionBox.duplicateSelectedObjects().then(command => {
+            this.selectionBox.duplicateSelectedObjects().then((command) => {
                 this.editor.dispatch(command);
             });
             return true;
@@ -392,7 +399,9 @@ class SelectionTool extends BaseTool_1.default {
             return false;
         }
         const exportViewport = new Viewport_1.default(() => { });
-        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
@@ -461,7 +470,7 @@ class SelectionTool extends BaseTool_1.default {
     // 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/cjs/tools/SelectionTool/ToPointerAutoscroller.js

@@ -68,7 +68,7 @@ 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 (0, untilNextAnimationFrame_1.default)();

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

@@ -82,7 +82,7 @@ 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_1.default.roundScaleRatio(component, 2));
+        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));
@@ -124,9 +124,8 @@ class RotateTransformer {
         // 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)
+        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);
@@ -144,9 +143,9 @@ 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/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js

@@ -9,7 +9,7 @@ const makeClipboardErrorHandlers = (editor) => {
     const makeErrorDialog = (error) => {
         const dialog = (0, makeMessageDialog_1.default)(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');
@@ -22,7 +22,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_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);
@@ -44,6 +63,8 @@ const makeClipboardErrorHandlers = (editor) => {
             pasteTextbox.onpaste = handlePaste;
             pasteTextbox.ondrop = handlePaste;
             dialog.appendChild(textboxLabel);
+            pasteTextbox.focus();
+            document.execCommand('paste');
         },
     };
 };

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

@@ -9,35 +9,44 @@ const makeClipboardErrorHandlers_1 = __importDefault(require("./makeClipboardErr
 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_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());
+        },
+    ];
+    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__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();
+            {
+                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);
+            ...noSelectionMenu,
+        ]
+        : noSelectionMenu);
     onActivated?.();
 };
 exports.default = showSelectionContextMenu;

package/dist/cjs/tools/SoundUITool.js

@@ -58,12 +58,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);
@@ -155,7 +155,9 @@ class SoundUITool extends BaseTool_1.default {
     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));
+        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);