js-draw 1.21.3 → 1.22.0

package/dist/mjs/toolbar/widgets/components/makeFileInput.mjs

@@ -42,7 +42,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
             icon.style.display = 'none';
         }
         else if (files.length > 0) {
-            const fileNames = files.map(file => file.name);
+            const fileNames = files.map((file) => file.name);
             const maxNames = 5;
             if (fileNames.length <= maxNames) {
                 descriptionText.textContent = fileNames.join('\n');
@@ -84,15 +84,15 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
     };
     const addFileEventListeners = () => {
         // Support dropping files
-        label.addEventListener('dragover', event => {
+        label.addEventListener('dragover', (event) => {
             event.preventDefault();
             label.classList.add('drag-target');
         });
-        label.addEventListener('dragenter', event => {
+        label.addEventListener('dragenter', (event) => {
             event.preventDefault();
             label.classList.add('drag-target');
         });
-        label.addEventListener('dragleave', event => {
+        label.addEventListener('dragleave', (event) => {
             event.preventDefault();
             // Ensure the event wasn't targeting a child.
             // See https://stackoverflow.com/a/54271161 and
@@ -103,7 +103,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
             }
         });
         // See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#process_the_drop
-        label.addEventListener('drop', event => {
+        label.addEventListener('drop', (event) => {
             event.preventDefault();
             label.classList.remove('drag-target');
             const fileList = [];
@@ -132,7 +132,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
                 const data = await customPickerAction({
                     setOnCancelCallback: (onCancel) => {
                         if (!loading) {
-                            throw new Error('Task already completed. Can\'t register cancel handler.');
+                            throw new Error("Task already completed. Can't register cancel handler.");
                         }
                         cancelLoading = () => {
                             cancelLoading = null;
@@ -154,7 +154,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
         };
         input.onclick = promptForFiles;
     }
-    selectedFiles.onUpdate(files => {
+    selectedFiles.onUpdate((files) => {
         if (files.length === 0 && input.files && input.files.length > 0) {
             input.value = '';
         }

package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs

@@ -21,7 +21,7 @@ labelText, defaultId, choices) => {
     menuContainer.id = `${toolbarCSSPrefix}-grid-select-id-${idCounter++}`;
     stopPropagationOfScrollingWheelEvents(menuContainer);
     const label = document.createElement('label');
-    label.innerText = labelText;
+    label.textContent = labelText;
     label.htmlFor = menuContainer.id;
     outerContainer.appendChild(label);
     // All buttons in a radiogroup need the same name attribute.
@@ -83,7 +83,7 @@ labelText, defaultId, choices) => {
         // Prevent the right-click menu from being shown on long-press
         // (important for some toolbars that use long-press gestures to
         // show grid selector labels).
-        buttonContainer.oncontextmenu = event => {
+        buttonContainer.oncontextmenu = (event) => {
             event.preventDefault();
         };
         buttonContainer.replaceChildren(button, labelContainer);
@@ -102,7 +102,7 @@ labelText, defaultId, choices) => {
             choiceRecord: record,
             setChecked,
             updateIcon,
-            updateButtonRadiogroupName
+            updateButtonRadiogroupName,
         };
     };
     const buttons = [];
@@ -113,7 +113,7 @@ labelText, defaultId, choices) => {
     // However, it is still possible that selectedValue does not correspond
     // to a choice in `choices`. This is acceptable.
     outerContainer.appendChild(menuContainer);
-    selectedValue.onUpdateAndNow(choiceId => {
+    selectedValue.onUpdateAndNow((choiceId) => {
         for (let i = 0; i < buttons.length; i++) {
             buttons[i].setChecked(buttons[i].choiceRecord.id === choiceId);
         }
@@ -129,7 +129,7 @@ labelText, defaultId, choices) => {
             }
         },
         updateIcons: () => {
-            buttons.forEach(button => button.updateIcon());
+            buttons.forEach((button) => button.updateIcon());
         },
         getRootElement() {
             return outerContainer;

package/dist/mjs/toolbar/widgets/components/makeSnappedList.mjs

@@ -17,7 +17,10 @@ const makeSnappedList = (itemsValue) => {
         // TODO: Does it make sense for the page marker list to be focusable?
         markerContainer.setAttribute('tabindex', '-1');
         const markers = [];
-        const pairedItems = ReactiveValue.union([visibleIndex, itemsValue]);
+        const pairedItems = ReactiveValue.union([
+            visibleIndex,
+            itemsValue,
+        ]);
         pairedItems.onUpdateAndNow(([currentVisibleIndex, items]) => {
             let addedOrRemovedMarkers = false;
             // Items may have been removed from the list of pages. Make the markers reflect that.
@@ -51,7 +54,8 @@ const makeSnappedList = (itemsValue) => {
                 }
                 const markerIndex = i;
                 marker.onclick = () => {
-                    wrappedItems.get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                    wrappedItems
+                        .get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                 };
             }
             // Only call .replaceChildren when necessary -- doing so on every change would
@@ -99,7 +103,7 @@ const makeSnappedList = (itemsValue) => {
             observer = null;
         }
     };
-    const wrappedItems = ReactiveValue.map(itemsValue, items => {
+    const wrappedItems = ReactiveValue.map(itemsValue, (items) => {
         return items.map((item, index) => {
             const wrapper = document.createElement('div');
             if (item.element.parentElement)
@@ -114,7 +118,7 @@ const makeSnappedList = (itemsValue) => {
         });
     });
     const lastItems = [];
-    wrappedItems.onUpdateAndNow(items => {
+    wrappedItems.onUpdateAndNow((items) => {
         visibleIndex.set(-1);
         for (const item of lastItems) {
             observer?.unobserve(item.element);
@@ -144,7 +148,7 @@ const makeSnappedList = (itemsValue) => {
             }
         }
     });
-    const visibleItem = ReactiveValue.map(visibleIndex, index => {
+    const visibleItem = ReactiveValue.map(visibleIndex, (index) => {
         const values = itemsValue.get();
         if (0 <= index && index < values.length) {
             return values[index].data;

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -3,10 +3,10 @@ import  KeyboardShortcutManager  from '../../shortcuts/KeyboardShortcutManager.m
 export const resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(resizeImageToSelectionKeyboardShortcut, ['ctrlOrMeta+r'], 'Resize image to selection');
 // Pen tool
-export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(id => `jsdraw.toolbar.PenTool.select-pen-${id}`);
+export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((id) => `jsdraw.toolbar.PenTool.select-pen-${id}`);
 for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
     const id = selectStrokeTypeKeyboardShortcutIds[i];
-    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${(i + 1)}`], 'Select pen style ' + (i + 1));
+    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${i + 1}`], 'Select pen style ' + (i + 1));
 }
 // Save
 export const saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';

package/dist/mjs/toolbar/widgets/layout/DropdownLayoutManager.mjs

@@ -44,7 +44,7 @@ class Dropdown {
         }
         // Shift the dropdown if it's off the screen, but only if doing so moves it on to the screen
         // (prevents dropdowns from going almost completely offscreen on small screens).
-        if (dropdownBBox.bottom > screenHeight && (dropdownBBox.top - dropdownBBox.height > 0)) {
+        if (dropdownBBox.bottom > screenHeight && dropdownBBox.top - dropdownBBox.height > 0) {
             const targetElem = this.parent.target;
             translateY = `calc(-${targetElem.clientHeight}px - 100%)`;
         }
@@ -131,7 +131,7 @@ export default class DropdownLayoutManager {
                 return;
             announceForAccessibility(this.localization.dropdownShown(dropdown.parent.getTitle()));
             // Share the event with other connected notifiers
-            this.connectedNotifiers.forEach(notifier => {
+            this.connectedNotifiers.forEach((notifier) => {
                 notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
                     kind: EditorEventType.ToolbarDropdownShown,
                     fromToplevelDropdown,
@@ -168,7 +168,7 @@ export default class DropdownLayoutManager {
     refreshListeners() {
         const clearListeners = () => {
             // Remove all listeners & resources that won't be garbage collected.
-            this.listeners.forEach(l => l.remove());
+            this.listeners.forEach((l) => l.remove());
             this.listeners = [];
         };
         if (this.dropdowns.size === 0) {
@@ -176,11 +176,11 @@ export default class DropdownLayoutManager {
         }
         else if (this.listeners.length !== this.connectedNotifiers.length) {
             clearListeners();
-            this.listeners = this.connectedNotifiers.map(notifier => {
+            this.listeners = this.connectedNotifiers.map((notifier) => {
                 return notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
-                    if (evt.kind !== EditorEventType.ToolbarDropdownShown
+                    if (evt.kind !== EditorEventType.ToolbarDropdownShown ||
                         // Don't forward to ourselves events that we originally triggered.
-                        || evt.layoutManager === this) {
+                        evt.layoutManager === this) {
                         return;
                     }
                     this.notifier.dispatch(DropdownEventType.DropdownShown, {

package/dist/mjs/tools/BaseTool.mjs

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper, _BaseTool_readOnlyEditorChangeListener;
 import  { EditorEventType }  from '../types.mjs';
-import  { InputEvtType }  from '../inputEvents.mjs';
+import  { InputEvtType, }  from '../inputEvents.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
 class BaseTool {
     constructor(notifier, description) {
@@ -22,7 +22,7 @@ class BaseTool {
         _BaseTool_inputMapper.set(this, null);
         _BaseTool_readOnlyEditorChangeListener.set(this, null);
         __classPrivateFieldSet(this, _BaseTool_enabled, ReactiveValue.fromInitialValue(true), "f");
-        __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate(enabled => {
+        __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate((enabled) => {
             // Ensure that at most one tool in the group is enabled.
             if (enabled) {
                 __classPrivateFieldGet(this, _BaseTool_group, "f")?.notifyEnabled(this);
@@ -46,7 +46,7 @@ class BaseTool {
     setInputMapper(mapper) {
         __classPrivateFieldSet(this, _BaseTool_inputMapper, mapper, "f");
         if (mapper) {
-            mapper.setEmitListener(event => this.dispatchEventToCallback(event));
+            mapper.setEmitListener((event) => this.dispatchEventToCallback(event));
         }
     }
     getInputMapper() {
@@ -94,7 +94,9 @@ class BaseTool {
      * Returns true iff the tool handled the event and thus should receive additional
      * events.
      */
-    onPointerDown(_event) { return false; }
+    onPointerDown(_event) {
+        return false;
+    }
     onPointerMove(_event) { }
     /**
      * Returns true iff there are additional pointers down and the tool should

package/dist/mjs/tools/Eraser.mjs

@@ -23,7 +23,9 @@ class EraserSwitcher extends BaseTool {
     onPointerDown(event) {
         if (event.allPointers.length === 1 && event.current.device === PointerDevice.Eraser) {
             const toolController = this.editor.toolController;
-            const enabledPrimaryTools = toolController.getPrimaryTools().filter(tool => tool.isEnabled());
+            const enabledPrimaryTools = toolController
+                .getPrimaryTools()
+                .filter((tool) => tool.isEnabled());
             if (enabledPrimaryTools.length) {
                 this.previousEnabledTool = enabledPrimaryTools[0];
             }
@@ -74,7 +76,7 @@ export default class Eraser extends BaseTool {
         this.addCommands = [];
         this.thickness = options?.thickness ?? 10;
         this.thicknessValue = ReactiveValue.fromInitialValue(this.thickness);
-        this.thicknessValue.onUpdate(value => {
+        this.thicknessValue.onUpdate((value) => {
             this.thickness = value;
             this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
                 kind: EditorEventType.ToolUpdated,
@@ -82,7 +84,7 @@ export default class Eraser extends BaseTool {
             });
         });
         this.modeValue = ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
-        this.modeValue.onUpdate(_value => {
+        this.modeValue.onUpdate((_value) => {
             this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
                 kind: EditorEventType.ToolUpdated,
                 tool: this,
@@ -136,18 +138,20 @@ export default class Eraser extends BaseTool {
         const eraserRect = this.getEraserRect(currentPoint);
         const line = new LineSegment2(this.lastPoint, currentPoint);
         const region = Rect2.union(line.bbox, eraserRect);
-        const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
+        const intersectingElems = this.editor.image
+            .getElementsIntersectingRegion(region)
+            .filter((component) => {
             return component.intersects(line) || component.intersectsRect(eraserRect);
         });
         // Only erase components that could be selected (and thus interacted with)
         // by the user.
-        const eraseableElems = intersectingElems.filter(elem => elem.isSelectable());
+        const eraseableElems = intersectingElems.filter((elem) => elem.isSelectable());
         if (this.modeValue.get() === EraserMode.FullStroke) {
             // Remove any intersecting elements.
             this.toRemove.push(...eraseableElems);
             // Create new Erase commands for the now-to-be-erased elements and apply them.
-            const newPartialCommands = eraseableElems.map(elem => new Erase([elem]));
-            newPartialCommands.forEach(cmd => cmd.apply(this.editor));
+            const newPartialCommands = eraseableElems.map((elem) => new Erase([elem]));
+            newPartialCommands.forEach((cmd) => cmd.apply(this.editor));
             this.eraseCommands.push(...newPartialCommands);
         }
         else {
@@ -168,14 +172,15 @@ export default class Eraser extends BaseTool {
                 // Join the current and previous rectangles so that points between events are also
                 // erased.
                 const erasePath = Path.fromConvexHullOf([
-                    ...eraserRect.corners, ...this.getEraserRect(this.lastPoint ?? currentPoint).corners
-                ].map(p => this.editor.viewport.roundPoint(p)));
+                    ...eraserRect.corners,
+                    ...this.getEraserRect(this.lastPoint ?? currentPoint).corners,
+                ].map((p) => this.editor.viewport.roundPoint(p)));
                 toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
             }
             const eraseCommand = new Erase(toErase);
-            const newAddCommands = toAdd.map(elem => EditorImage.addElement(elem));
+            const newAddCommands = toAdd.map((elem) => EditorImage.addElement(elem));
             eraseCommand.apply(this.editor);
-            newAddCommands.forEach(command => command.apply(this.editor));
+            newAddCommands.forEach((command) => command.apply(this.editor));
             const finalToErase = [];
             for (const item of toErase) {
                 if (this.toAdd.has(item)) {
@@ -214,27 +219,27 @@ export default class Eraser extends BaseTool {
         this.eraseTo(event.current.canvasPos);
         const commands = [];
         if (this.addCommands.length > 0) {
-            this.addCommands.forEach(cmd => cmd.unapply(this.editor));
+            this.addCommands.forEach((cmd) => cmd.unapply(this.editor));
             // Remove items from toAdd that are also present in toRemove -- adding, then
             // removing these does nothing, and can break undo/redo.
             for (const item of this.toAdd) {
                 if (this.toRemove.includes(item)) {
                     this.toAdd.delete(item);
-                    this.toRemove = this.toRemove.filter(other => other !== item);
+                    this.toRemove = this.toRemove.filter((other) => other !== item);
                 }
             }
             for (const item of this.toRemove) {
                 if (this.toAdd.has(item)) {
                     this.toAdd.delete(item);
-                    this.toRemove = this.toRemove.filter(other => other !== item);
+                    this.toRemove = this.toRemove.filter((other) => other !== item);
                 }
             }
-            commands.push(...[...this.toAdd].map(a => EditorImage.addElement(a)));
+            commands.push(...[...this.toAdd].map((a) => EditorImage.addElement(a)));
             this.addCommands = [];
         }
         if (this.eraseCommands.length > 0) {
             // Undo commands for each individual component and unite into a single command.
-            this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
+            this.eraseCommands.forEach((cmd) => cmd.unapply(this.editor));
             this.eraseCommands = [];
             const command = new Erase(this.toRemove);
             commands.push(command);
@@ -248,8 +253,8 @@ export default class Eraser extends BaseTool {
         this.clearPreview();
     }
     onGestureCancel(_event) {
-        this.addCommands.forEach(cmd => cmd.unapply(this.editor));
-        this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
+        this.addCommands.forEach((cmd) => cmd.unapply(this.editor));
+        this.eraseCommands.forEach((cmd) => cmd.unapply(this.editor));
         this.eraseCommands = [];
         this.addCommands = [];
         this.clearPreview();
@@ -258,10 +263,10 @@ export default class Eraser extends BaseTool {
         const shortcuts = this.editor.shortcuts;
         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), 200);

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,
@@ -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();