js-draw 1.21.3 → 1.23.1

package/dist/mjs/tools/FindTool.mjs

@@ -22,7 +22,7 @@ export default class FindTool extends BaseTool {
     }
     getMatches(searchFor) {
         const lowerSearchFor = searchFor.toLocaleLowerCase();
-        const matchingComponents = this.editor.image.getAllElements().filter(component => {
+        const matchingComponents = this.editor.image.getAllElements().filter((component) => {
             let text = '';
             if (component instanceof TextComponent) {
                 text = component.getText();
@@ -37,7 +37,7 @@ export default class FindTool extends BaseTool {
             const hasSameCaseMatch = text.indexOf(searchFor) !== -1;
             return hasLowercaseMatch || hasSameCaseMatch;
         });
-        return matchingComponents.map(match => match.getBBox());
+        return matchingComponents.map((match) => match.getBBox());
     }
     focusCurrentMatch() {
         const matches = this.getMatches(this.searchInput.value);

package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.mjs

@@ -1,6 +1,6 @@
 import  { InputEvtType, isPointerEvt }  from '../../inputEvents.mjs';
 import  InputMapper  from './InputMapper.mjs';
-import  StationaryPenDetector, { defaultStationaryDetectionConfig }  from '../util/StationaryPenDetector.mjs';
+import  StationaryPenDetector, { defaultStationaryDetectionConfig, }  from '../util/StationaryPenDetector.mjs';
 import  { PointerDevice }  from '../../Pointer.mjs';
 export default class ContextMenuRecognizer extends InputMapper {
     constructor() {
@@ -15,9 +15,7 @@ export default class ContextMenuRecognizer extends InputMapper {
      * one such device.
      */
     canMakeLongPressMenuEvent(event) {
-        const allowedDevices = [
-            PointerDevice.Touch,
-        ];
+        const allowedDevices = [PointerDevice.Touch];
         return event.allPointers.length === 1 && allowedDevices.includes(event.current.device);
     }
     onEvent(event) {

package/dist/mjs/tools/InputFilter/InputMapper.mjs

@@ -19,7 +19,7 @@ class InputMapper {
     }
     // @internal
     setEmitListener(listener) {
-        if (listener && typeof (listener) === 'object') {
+        if (listener && typeof listener === 'object') {
             __classPrivateFieldSet(this, _InputMapper_listener, (event) => {
                 return listener.onEvent(event) ?? false;
             }, "f");

package/dist/mjs/tools/InputFilter/InputPipeline.mjs

@@ -42,7 +42,7 @@ class InputPipeline extends InputMapper {
             __classPrivateFieldGet(this, _InputPipeline_tail, "f").setEmitListener(mapper);
             __classPrivateFieldSet(this, _InputPipeline_tail, mapper, "f");
         }
-        __classPrivateFieldGet(this, _InputPipeline_tail, "f").setEmitListener(event => this.emit(event));
+        __classPrivateFieldGet(this, _InputPipeline_tail, "f").setEmitListener((event) => this.emit(event));
     }
 }
 _InputPipeline_head = new WeakMap(), _InputPipeline_tail = new WeakMap();

package/dist/mjs/tools/InputFilter/InputStabilizer.mjs

@@ -1,4 +1,4 @@
-import  { InputEvtType, isPointerEvt }  from '../../inputEvents.mjs';
+import  { InputEvtType, isPointerEvt, }  from '../../inputEvents.mjs';
 import  InputMapper  from './InputMapper.mjs';
 import { Vec2 } from '@js-draw/math';
 import  untilNextAnimationFrame  from '../../util/untilNextAnimationFrame.mjs';
@@ -48,10 +48,14 @@ class StylusInputStabilizer {
         const springForce = toTarget.times(this.options.springConstant);
         const gravityAccel = 10;
         const normalForceMagnitude = this.options.mass * gravityAccel;
-        const frictionForce = this.velocity.normalizedOrZero().times(-this.options.frictionCoefficient * normalForceMagnitude);
-        const acceleration = (springForce.plus(frictionForce)).times(1 / this.options.mass);
+        const frictionForce = this.velocity
+            .normalizedOrZero()
+            .times(-this.options.frictionCoefficient * normalForceMagnitude);
+        const acceleration = springForce.plus(frictionForce).times(1 / this.options.mass);
         const decayFactor = this.options.velocityDecayFactor;
-        const springVelocity = this.velocity.times(1 - decayFactor).plus(acceleration.times(deltaTimeMs / 1000));
+        const springVelocity = this.velocity
+            .times(1 - decayFactor)
+            .plus(acceleration.times(deltaTimeMs / 1000));
         // An alternate velocity that goes directly towards the target.
         const toTargetVelocity = toTarget.normalizedOrZero().times(springVelocity.length());
         return toTargetVelocity.lerp(springVelocity, this.options.inertiaFraction);
@@ -117,7 +121,9 @@ export default class InputStabilizer extends InputMapper {
             this.lastPointerEvent = event;
         }
         // Only apply smoothing if there is a single pointer.
-        if (event.kind === InputEvtType.GestureCancelEvt || event.allPointers.length > 1 || this.stabilizer === null) {
+        if (event.kind === InputEvtType.GestureCancelEvt ||
+            event.allPointers.length > 1 ||
+            this.stabilizer === null) {
             return this.emit(event);
         }
         this.stabilizer.setTarget(event.current.screenPos);
@@ -161,7 +167,8 @@ export default class InputStabilizer extends InputMapper {
                 }
             }
             const handled = this.mapPointerEvent(event);
-            if (event.kind === InputEvtType.PointerUpEvt || event.kind === InputEvtType.GestureCancelEvt) {
+            if (event.kind === InputEvtType.PointerUpEvt ||
+                event.kind === InputEvtType.GestureCancelEvt) {
                 this.stabilizer?.cancel();
                 this.stabilizer = null;
             }

package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.mjs

@@ -48,18 +48,21 @@ export default class StrokeKeyboardControl extends InputMapper {
     }
     onEvent(event) {
         const shortcuts = this.shortcuts;
-        if (event.kind === InputEvtType.PointerDownEvt || event.kind === InputEvtType.PointerMoveEvt || event.kind === InputEvtType.PointerUpEvt) {
+        if (event.kind === InputEvtType.PointerDownEvt ||
+            event.kind === InputEvtType.PointerMoveEvt ||
+            event.kind === InputEvtType.PointerUpEvt) {
             if (event.kind === InputEvtType.PointerDownEvt) {
                 this.startPointCanvas = event.current.canvasPos;
             }
             event = this.mapPointerEvent(event);
         }
         let handled = this.emit(event);
-        if ( // Always check keyUpEvents (in case we handled the corresponding keyDown event)
-        event.kind === InputEvtType.KeyUpEvent
+        if (
+        // Always check keyUpEvents (in case we handled the corresponding keyDown event)
+        event.kind === InputEvtType.KeyUpEvent ||
             // Only handle key press events if another tool isn't handling it. We don't want
             // snap to grid/angle lock to conflict with selection/another tool's shortcuts.
-            || (!handled && event.kind === InputEvtType.KeyPressEvent)) {
+            (!handled && event.kind === InputEvtType.KeyPressEvent)) {
             const isKeyPress = event.kind === InputEvtType.KeyPressEvent;
             if (shortcuts.matchesShortcut(snapToGridKeyboardShortcutId, event)) {
                 this.snapToGridEnabled = isKeyPress;

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

@@ -54,7 +54,7 @@ export default class PanZoom extends BaseTool {
     canReceiveInputInReadOnlyEditor(): boolean;
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
     private allPointersAreOfType;
-    onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
+    onPointerDown({ allPointers: pointers, current: currentPointer, }: PointerEvt): boolean;
     private updateVelocity;
     private getCenterDelta;
     private toSnappedRotationDelta;

package/dist/mjs/tools/PanZoom.mjs

@@ -4,7 +4,7 @@ import  { EditorEventType }  from '../types.mjs';
 import  untilNextAnimationFrame  from '../util/untilNextAnimationFrame.mjs';
 import  { Viewport }  from '../Viewport.mjs';
 import  BaseTool  from './BaseTool.mjs';
-import  { moveDownKeyboardShortcutId, moveLeftKeyboardShortcutId, moveRightKeyboardShortcutId, moveUpKeyboardShortcutId, rotateClockwiseKeyboardShortcutId, rotateCounterClockwiseKeyboardShortcutId, zoomInKeyboardShortcutId, zoomOutKeyboardShortcutId }  from './keybindings.mjs';
+import  { moveDownKeyboardShortcutId, moveLeftKeyboardShortcutId, moveRightKeyboardShortcutId, moveUpKeyboardShortcutId, rotateClockwiseKeyboardShortcutId, rotateCounterClockwiseKeyboardShortcutId, zoomInKeyboardShortcutId, zoomOutKeyboardShortcutId, }  from './keybindings.mjs';
 export var PanZoomMode;
 (function (PanZoomMode) {
     /** Touch gestures with a single pointer. Ignores non-touch gestures. */
@@ -117,9 +117,9 @@ export default class PanZoom extends BaseTool {
         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() ?? Vec2.zero;
         this.inertialScroller?.stop();
@@ -141,9 +141,10 @@ export default class PanZoom extends BaseTool {
             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;
@@ -197,7 +198,9 @@ export default class PanZoom extends BaseTool {
         // `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;
@@ -216,7 +219,7 @@ export default class PanZoom extends BaseTool {
      */
     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);
@@ -295,10 +298,10 @@ export default class PanZoom extends BaseTool {
             this.velocity = Vec2.zero;
         };
         const minInertialScrollDt = 30;
-        const shouldInertialScroll = event.current.device === PointerDevice.Touch
-            && event.allPointers.length === 1
-            && this.velocity !== null
-            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
+        const shouldInertialScroll = event.current.device === 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,
@@ -424,7 +427,7 @@ export default class PanZoom extends BaseTool {
         translation = translation.times(-1);
         rotation = rotation * -1;
         scale = 1 / scale;
-        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+        // Work around an issue that seems to be related to rotation matrices losing precision on inversion.
         // TODO: Figure out why and implement a better solution.
         if (rotation !== 0) {
             rotation += 0.0001;
@@ -438,7 +441,9 @@ export default class PanZoom extends BaseTool {
         translation = toCanvas.transformVec3(translation);
         // Rotate/scale about the center of the canvas
         const transformCenter = this.editor.viewport.visibleRect.center;
-        const transformUpdate = Mat33.scaling2D(scale, transformCenter).rightMul(Mat33.zRotation(rotation, transformCenter)).rightMul(Mat33.translation(translation));
+        const transformUpdate = Mat33.scaling2D(scale, transformCenter)
+            .rightMul(Mat33.zRotation(rotation, transformCenter))
+            .rightMul(Mat33.translation(translation));
         this.applyAndFinalizeTransform(transformUpdate);
         return true;
     }

package/dist/mjs/tools/PasteHandler.mjs

@@ -85,14 +85,20 @@ export default class PasteHandler extends BaseTool {
             }
             return 0;
         });
-        const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+        const defaultTextStyle = {
+            size: 12,
+            fontFamily: 'sans',
+            renderingStyle: { fill: 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.fromLines(lines, Mat33.identity, pastedTextStyle)]);
+        await this.addComponentsFromPaste([
+            TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle),
+        ]);
     }
     async doImagePaste(dataURL) {
         const image = new Image();

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

@@ -11,6 +11,12 @@ export interface PenStyle {
     readonly thickness: number;
     readonly factory: ComponentBuilderFactory;
 }
+/**
+ * A tool that allows drawing shapes and freehand lines.
+ *
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
+ * pen type), see {@link setStrokeFactory}.
+ */
 export default class Pen extends BaseTool {
     private editor;
     protected builder: ComponentBuilder | null;
@@ -42,6 +48,13 @@ export default class Pen extends BaseTool {
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
+    /**
+     * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
+     * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
+     *
+     * Example:
+     * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+     */
     setStrokeFactory(factory: ComponentBuilderFactory): void;
     setHasStabilization(hasStabilization: boolean): void;
     setStrokeAutocorrectEnabled(enabled: boolean): void;

package/dist/mjs/tools/Pen.mjs

@@ -8,7 +8,13 @@ import  { undoKeyboardShortcutId }  from './keybindings.mjs';
 import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
 import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
-import  StationaryPenDetector, { defaultStationaryDetectionConfig }  from './util/StationaryPenDetector.mjs';
+import  StationaryPenDetector, { defaultStationaryDetectionConfig, }  from './util/StationaryPenDetector.mjs';
+/**
+ * A tool that allows drawing shapes and freehand lines.
+ *
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
+ * pen type), see {@link setStrokeFactory}.
+ */
 export default class Pen extends BaseTool {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -29,14 +35,14 @@ export default class Pen extends BaseTool {
             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) {
@@ -95,7 +101,7 @@ export default class Pen extends BaseTool {
             this.currentDeviceType = current.device;
             this.currentPointerId = current.id;
             if (this.shapeAutocompletionEnabled) {
-                this.stationaryDetector = new StationaryPenDetector(current, defaultStationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
+                this.stationaryDetector = new StationaryPenDetector(current, defaultStationaryDetectionConfig, (pointer) => this.autocorrectShape(pointer));
             }
             else {
                 this.stationaryDetector = null;
@@ -244,6 +250,13 @@ export default class Pen extends BaseTool {
             });
         }
     }
+    /**
+     * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
+     * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
+     *
+     * Example:
+     * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+     */
     setStrokeFactory(factory) {
         if (factory !== this.style.factory) {
             this.styleValue.set({
@@ -275,10 +288,18 @@ export default class Pen extends BaseTool {
     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.
@@ -291,10 +312,10 @@ export default class Pen extends BaseTool {
         }
         let newThickness;
         if (shortcuts.matchesShortcut(decreaseSizeKeyboardShortcutId, event)) {
-            newThickness = this.getThickness() * 2 / 3;
+            newThickness = (this.getThickness() * 2) / 3;
         }
         else if (shortcuts.matchesShortcut(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/mjs/tools/ScrollbarTool.mjs

@@ -22,13 +22,13 @@ export default class ScrollbarTool extends BaseTool {
         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(EditorEventType.ViewportChanged, _event => {
+                viewportListener = editor.notifier.on(EditorEventType.ViewportChanged, (_event) => {
                     this.updateScrollbars();
                 });
                 this.updateScrollbars();
@@ -40,16 +40,17 @@ export default class ScrollbarTool extends BaseTool {
         const viewport = this.editor.viewport;
         const screenSize = viewport.getScreenRectSize();
         const screenRect = new 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/mjs/tools/SelectionTool/Selection.mjs

@@ -147,7 +147,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
@@ -177,7 +177,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 uniteCommands(commands, updateChunkSize);
@@ -218,7 +218,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) {
@@ -276,7 +278,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
@@ -343,7 +345,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.
@@ -504,7 +506,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();
@@ -519,7 +521,7 @@ _a = Selection;
     SerializableCommand.register('selection-tool-transform', (json, _editor) => {
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new 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);
     });
@@ -542,8 +544,8 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             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);
             });
         }
@@ -552,7 +554,8 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         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:
@@ -570,9 +573,10 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
                 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/mjs/tools/SelectionTool/SelectionHandle.mjs

@@ -65,7 +65,9 @@ export default 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.
@@ -73,7 +75,8 @@ export default class SelectionHandle {
     getBBoxParentCoords() {
         const parentRect = this.parent.getScreenRegion();
         const size = Vec2.of(handleSize, handleSize);
-        const topLeft = parentRect.size.scale(this.parentSide)
+        const topLeft = parentRect.size
+            .scale(this.parentSide)
             // Center
             .minus(size.times(1 / 2));
         return new Rect2(topLeft.x, topLeft.y, size.x, size.y);

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

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