js-draw 1.21.2 → 1.22.0

package/dist/cjs/tools/util/createMenuOverlay.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const waitForTimeout_1 = __importDefault(require("../../util/waitForTimeout"));
+const types_1 = require("../../types");
+let idCounter = 0;
+const createMenuOverlay = async (editor, canvasAnchor, options) => {
+    const overlay = document.createElement('div');
+    const { remove: removeOverlay } = editor.createHTMLOverlay(overlay);
+    const menuModal = document.createElement('dialog');
+    menuModal.classList.add('editor-popup-menu');
+    const hideMenuTimeout = 240;
+    menuModal.style.setProperty('--hide-menu-animation-timeout', `${hideMenuTimeout}ms`);
+    const updateMenuLocation = () => {
+        const overlayRect = editor.getOutputBBoxInDOM();
+        const anchor = editor.viewport.canvasToScreen(canvasAnchor).plus(overlayRect.topLeft);
+        menuModal.style.setProperty('--anchor-x', `${anchor.x}px`);
+        menuModal.style.setProperty('--anchor-y', `${anchor.y}px`);
+    };
+    updateMenuLocation();
+    const viewportChangeListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, updateMenuLocation);
+    overlay.appendChild(menuModal);
+    let dismissing = false;
+    const dismissMenu = async () => {
+        if (dismissing)
+            return;
+        dismissing = true;
+        viewportChangeListener.remove();
+        menuModal.classList.add('-hide');
+        await (0, waitForTimeout_1.default)(hideMenuTimeout);
+        menuModal.close();
+    };
+    return new Promise((resolve) => {
+        let resolved = false;
+        let result = null;
+        const resolveWithSelectedResult = () => {
+            if (!resolved) {
+                resolve(result);
+                resolved = true;
+            }
+        };
+        menuModal.onclose = () => {
+            removeOverlay();
+            resolveWithSelectedResult();
+        };
+        const onOptionSelected = (key) => {
+            result = key;
+            void dismissMenu();
+            // To properly handle clipboard events, this needs to be called synchronously
+            // and not after a delay:
+            resolveWithSelectedResult();
+        };
+        editor.handlePointerEventsExceptClicksFrom(menuModal, (eventName, event) => {
+            if (event.target === menuModal && eventName === 'pointerdown') {
+                void dismissMenu();
+                return true;
+            }
+            else if (dismissing) {
+                // Send pointer events to the editor if the dialog is in the process of being
+                // dismissed (e.g. pointermove events just after a pointerdown outside of the
+                // editor).
+                return true;
+            }
+            return false;
+        }, (_eventName, event) => {
+            return event.target === menuModal;
+        });
+        const contentElement = document.createElement('div');
+        contentElement.classList.add('content');
+        contentElement.role = 'menu';
+        const optionElements = [];
+        // Keyboard focus handling as described in
+        // - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role and
+        // - https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+        contentElement.addEventListener('keydown', (event) => {
+            const focusedIndex = optionElements.findIndex((item) => item === document.activeElement);
+            if (focusedIndex === -1)
+                return;
+            let newFocusedIndex = focusedIndex;
+            if (event.key === 'ArrowDown') {
+                newFocusedIndex++;
+            }
+            else if (event.key === 'ArrowUp') {
+                newFocusedIndex--;
+            }
+            else if (event.key === 'End') {
+                newFocusedIndex = optionElements.length - 1;
+            }
+            else if (event.key === 'Home') {
+                newFocusedIndex = 0;
+            }
+            if (newFocusedIndex < 0) {
+                newFocusedIndex += optionElements.length;
+            }
+            newFocusedIndex %= optionElements.length;
+            if (newFocusedIndex !== focusedIndex) {
+                event.preventDefault();
+                optionElements[newFocusedIndex].focus();
+            }
+        });
+        for (const option of options) {
+            const optionElement = document.createElement('button');
+            optionElement.id = `menu-overlay-option-${idCounter++}`;
+            optionElement.role = 'menuitem';
+            optionElement.classList.add('option', 'editor-popup-menu-option');
+            optionElement.replaceChildren(option.icon(), document.createTextNode(option.text));
+            optionElement.onclick = (event) => {
+                if (event.defaultPrevented)
+                    return;
+                onOptionSelected(option.key);
+            };
+            contentElement.appendChild(optionElement);
+            if (optionElements.length === 0) {
+                optionElement.autofocus = true;
+            }
+            optionElements.push(optionElement);
+        }
+        menuModal.appendChild(contentElement);
+        menuModal.showModal();
+        // Ensures that the menu is visible even if triggered near the edge of the screen.
+        contentElement.scrollIntoView({ block: 'nearest' });
+    });
+};
+exports.default = createMenuOverlay;

package/dist/cjs/tools/util/createMenuOverlay.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/cjs/util/ClipboardHandler.js

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

package/dist/cjs/util/ReactiveValue.js

@@ -14,7 +14,7 @@ var _ReactiveValueImpl_value, _ReactiveValueImpl_onUpdateListeners;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MutableReactiveValue = exports.ReactiveValue = void 0;
 const noOpUpdateListenerResult = {
-    remove() { }
+    remove() { },
 };
 /**
  * An update listener that does nothing. Useful for reactive values
@@ -40,8 +40,8 @@ const noOpSetUpdateListener = () => {
 class ReactiveValue {
     /** Returns a promise that resolves when this value is next changed. */
     waitForNextUpdate() {
-        return new Promise(resolve => {
-            const listener = this.onUpdate(value => {
+        return new Promise((resolve) => {
+            const listener = this.onUpdate((value) => {
                 listener.remove();
                 resolve(value);
             });
@@ -56,7 +56,7 @@ class ReactiveValue {
         return {
             get: () => value,
             onUpdate: noOpSetUpdateListener,
-            onUpdateAndNow: callback => {
+            onUpdateAndNow: (callback) => {
                 callback(value);
                 return noOpUpdateListenerResult;
             },
@@ -72,7 +72,9 @@ class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef ? new window.WeakRef(result) : { deref: () => result };
+        const resultRef = window.WeakRef
+            ? new window.WeakRef(result)
+            : { deref: () => result };
         for (const value of sourceValues) {
             const listener = value.onUpdate(() => {
                 // Use resultRef to allow `result` to be garbage collected
@@ -91,12 +93,12 @@ class ReactiveValue {
     static map(source, map, inverseMap) {
         const result = ReactiveValue.fromInitialValue(map(source.get()));
         let expectedResultValue = result.get();
-        source.onUpdate(newValue => {
+        source.onUpdate((newValue) => {
             expectedResultValue = map(newValue);
             result.set(expectedResultValue);
         });
         if (inverseMap) {
-            result.onUpdate(newValue => {
+            result.onUpdate((newValue) => {
                 // Prevent infinite loops if inverseMap is not a true
                 // inverse.
                 if (newValue !== expectedResultValue) {
@@ -108,7 +110,7 @@ class ReactiveValue {
     }
     static union(values) {
         return ReactiveValue.fromCallback(() => {
-            return values.map(value => value.get());
+            return values.map((value) => value.get());
         }, values);
     }
 }
@@ -116,9 +118,11 @@ exports.ReactiveValue = ReactiveValue;
 class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {
         const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
-        const childRef = window.WeakRef ? new window.WeakRef(child) : { deref: () => child };
+        const childRef = window.WeakRef
+            ? new window.WeakRef(child)
+            : { deref: () => child };
         // When the source is updated...
-        const sourceListener = sourceValue.onUpdate(newValue => {
+        const sourceListener = sourceValue.onUpdate((newValue) => {
             const childValue = childRef.deref();
             if (childValue) {
                 childValue.set(newValue[propertyName]);
@@ -131,7 +135,7 @@ class MutableReactiveValue extends ReactiveValue {
         });
         // When the child is updated, also apply the update to the
         // parent.
-        child.onUpdate(newValue => {
+        child.onUpdate((newValue) => {
             sourceValue.set({
                 ...sourceValue.get(),
                 [propertyName]: newValue,
@@ -169,7 +173,7 @@ class ReactiveValueImpl extends MutableReactiveValue {
         __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").push(listener);
         return {
             remove: () => {
-                __classPrivateFieldSet(this, _ReactiveValueImpl_onUpdateListeners, __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").filter(otherListener => {
+                __classPrivateFieldSet(this, _ReactiveValueImpl_onUpdateListeners, __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").filter((otherListener) => {
                     return otherListener !== listener;
                 }), "f");
             },

package/dist/cjs/util/adjustEditorThemeForContrast.js

@@ -75,8 +75,12 @@ const adjustEditorThemeForContrast = (editor, options) => {
     // true if the variable can be updated
     updateVar1, updateVar2) => {
         // Fetch from updatedColors if available -- styles isn't updated dynamically.
-        let color1 = updatedColors[var1] ? updatedColors[var1] : math_1.Color4.fromString(styles.getPropertyValue(var1));
-        let color2 = updatedColors[var2] ? updatedColors[var2] : math_1.Color4.fromString(styles.getPropertyValue(var2));
+        let color1 = updatedColors[var1]
+            ? updatedColors[var1]
+            : math_1.Color4.fromString(styles.getPropertyValue(var1));
+        let color2 = updatedColors[var2]
+            ? updatedColors[var2]
+            : math_1.Color4.fromString(styles.getPropertyValue(var2));
         // Ensure that color1 has the lesser luminance
         if (color1.relativeLuminance() < color2.relativeLuminance()) {
             const tmp = color1;

package/dist/cjs/util/guessKeyCodeFromKey.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // See https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values for
 // more
 const keyToKeyCode = {
-    'Control': 'ControlLeft',
+    Control: 'ControlLeft',
     '=': 'Equal',
     '-': 'Minus',
     ';': 'Semicolon',

package/dist/cjs/util/listenForKeyboardEventsFrom.js

@@ -21,7 +21,7 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
         return a.key === b.key && a.code === b.code;
     };
     const isKeyDown = (keyEvent) => {
-        return keysDown.some(other => keyEventsMatch(other, keyEvent));
+        return keysDown.some((other) => keyEventsMatch(other, keyEvent));
     };
     const keyEventToRecord = (event) => {
         return {
@@ -47,10 +47,11 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
             }
             callbacks.handleKeyDown(htmlEvent);
         }
-        else { // keyup
+        else {
+            // keyup
             console.assert(htmlEvent.type === 'keyup');
             // Remove the key from keysDown -- it's no longer down.
-            keysDown = keysDown.filter(event => {
+            keysDown = keysDown.filter((event) => {
                 const matches = keyEventsMatch(event, htmlEvent);
                 return !matches;
             });
@@ -60,17 +61,18 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
             callbacks.handleKeyUp(htmlEvent);
         }
     };
-    elem.addEventListener('keydown', htmlEvent => {
+    elem.addEventListener('keydown', (htmlEvent) => {
         handleKeyEvent(htmlEvent);
     });
-    elem.addEventListener('keyup', htmlEvent => {
+    elem.addEventListener('keyup', (htmlEvent) => {
         handleKeyEvent(htmlEvent);
     });
     elem.addEventListener('focusout', (focusEvent) => {
         let stillHasFocus = false;
         if (focusEvent.relatedTarget) {
             const relatedTarget = focusEvent.relatedTarget;
-            stillHasFocus = elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
+            stillHasFocus =
+                elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
         }
         if (!stillHasFocus) {
             for (const event of keysDown) {

package/dist/cjs/util/waitForAll.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 const waitForAll = (results) => {
     // If any are Promises...
-    if (results.some(command => command && command['then'])) {
+    if (results.some((command) => command && command['then'])) {
         // Wait for all commands to finish.
-        return Promise.all(results)
+        return (Promise.all(results)
             // Ensure we return a Promise<void> and not a Promise<void[]>
-            .then(() => { });
+            .then(() => { }));
     }
     return;
 };

package/dist/cjs/util/waitForImageLoaded.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const waitForImageLoad = async (image) => {
     if (!image.complete) {
         await new Promise((resolve, reject) => {
-            image.onload = event => resolve(event);
+            image.onload = (event) => resolve(event);
             // TODO(v2): Return a `new Error(event.message)`
             // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
-            image.onerror = event => reject(event);
+            image.onerror = (event) => reject(event);
             // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
-            image.onabort = event => reject(event);
+            image.onabort = (event) => reject(event);
         });
     }
 };

package/dist/cjs/util/waitForTimeout.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 /** Returns a promise that resolves after `timeout` milliseconds. */
 const waitForTimeout = (timeout) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         setTimeout(() => resolve(), timeout);
     });
 };

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.21.2',
+    number: '1.22.0',
 };

package/dist/mjs/Editor.mjs

@@ -1,7 +1,7 @@
 import  EditorImage  from './image/EditorImage.mjs';
 import  ToolController  from './tools/ToolController.mjs';
 import  { EditorEventType }  from './types.mjs';
-import  { InputEvtType, keyUpEventFromHTMLEvent, keyPressEventFromHTMLEvent }  from './inputEvents.mjs';
+import  { InputEvtType, keyUpEventFromHTMLEvent, keyPressEventFromHTMLEvent, }  from './inputEvents.mjs';
 import  UndoRedoHistory  from './UndoRedoHistory.mjs';
 import  Viewport  from './Viewport.mjs';
 import  EventDispatcher  from './EventDispatcher.mjs';
@@ -112,7 +112,7 @@ export class Editor {
             appInfo: settings.appInfo ? { ...settings.appInfo } : null,
             pens: {
                 additionalPenTypes: settings.pens?.additionalPenTypes ?? [],
-                filterPenTypes: settings.pens?.filterPenTypes ?? (() => true)
+                filterPenTypes: settings.pens?.filterPenTypes ?? (() => true),
             },
             text: {
                 fonts: settings.text?.fonts ?? ['sans-serif', 'serif', 'monospace'],
@@ -172,7 +172,7 @@ export class Editor {
         this.queueRerender();
         this.hideLoadingWarning();
         // Enforce zoom limits.
-        this.notifier.on(EditorEventType.ViewportChanged, evt => {
+        this.notifier.on(EditorEventType.ViewportChanged, (evt) => {
             if (evt.kind !== EditorEventType.ViewportChanged)
                 return;
             const getZoom = (mat) => mat.transformVec3(Vec2.unitX).length();
@@ -281,16 +281,16 @@ export class Editor {
             this.loadingWarning,
         ];
         for (const element of preventSelectionOf) {
-            element.addEventListener('drag', event => {
+            element.addEventListener('drag', (event) => {
                 event.preventDefault();
                 return false;
             });
-            element.addEventListener('dragstart', event => {
+            element.addEventListener('dragstart', (event) => {
                 event.preventDefault();
                 return false;
             });
         }
-        this.container.addEventListener('wheel', evt => {
+        this.container.addEventListener('wheel', (evt) => {
             this.handleHTMLWheelEvent(evt);
         });
         const handleResize = () => {
@@ -316,7 +316,7 @@ export class Editor {
             }
             copyHandler.copy(evt);
         });
-        document.addEventListener('paste', evt => {
+        document.addEventListener('paste', (evt) => {
             this.handlePaste(evt);
         });
     }
@@ -371,7 +371,7 @@ export class Editor {
         const res = [];
         for (const id in this.pointers) {
             const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
-            if (this.pointers[id] && (nowTime - this.pointers[id].timeStamp) < maxUnupdatedTime) {
+            if (this.pointers[id] && nowTime - this.pointers[id].timeStamp < maxUnupdatedTime) {
                 res.push(this.pointers[id]);
             }
         }
@@ -526,10 +526,15 @@ export class Editor {
             evt.preventDefault();
         };
         const listeners = {
-            'touchstart': touchstartListener,
-            'contextmenu': contextmenuListener,
+            touchstart: touchstartListener,
+            contextmenu: contextmenuListener,
         };
-        const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        const eventNames = [
+            'pointerdown',
+            'pointermove',
+            'pointerup',
+            'pointercancel',
+        ];
         for (const eventName of eventNames) {
             listeners[eventName] = (evt) => {
                 // This listener will only be called in the context of PointerEvents.
@@ -614,8 +619,9 @@ export class Editor {
             // Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
             // buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
             // pointercancel event.
-            else if ((eventName === 'pointerup' || eventName === 'pointercancel')
-                && gestureData[pointerId] && gestureData[pointerId].eventBuffer.length > 0) {
+            else if ((eventName === 'pointerup' || eventName === 'pointercancel') &&
+                gestureData[pointerId] &&
+                gestureData[pointerId].eventBuffer.length > 0) {
                 this.releasePointerCapture(elem, event.pointerId);
                 // Don't send to the editor.
                 sendToEditor = false;
@@ -675,10 +681,10 @@ export class Editor {
             },
         });
         // Allow drop.
-        elem.ondragover = evt => {
+        elem.ondragover = (evt) => {
             evt.preventDefault();
         };
-        elem.ondrop = evt => {
+        elem.ondrop = (evt) => {
             this.handleDrop(evt);
         };
         this.eventListenerTargets.push(elem);
@@ -760,7 +766,7 @@ export class Editor {
             }
             // Re-render to show progress, but only if we're not done.
             if (i + updateChunkSize < commands.length) {
-                await new Promise(resolve => {
+                await new Promise((resolve) => {
                     this.rerender();
                     requestAnimationFrame(resolve);
                 });
@@ -803,7 +809,7 @@ export class Editor {
                 }
             });
         }
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             this.nextRerenderListeners.push(() => resolve());
         });
     }
@@ -831,7 +837,7 @@ export class Editor {
             renderer.drawRect(this.getImportExportRect(), exportRectStrokeWidth, exportRectFill);
         }
         this.rerenderQueued = false;
-        this.nextRerenderListeners.forEach(listener => listener());
+        this.nextRerenderListeners.forEach((listener) => listener());
         this.nextRerenderListeners = [];
     }
     /**
@@ -873,6 +879,7 @@ export class Editor {
      * (e.g. a selection box).
      */
     createHTMLOverlay(overlay) {
+        // TODO(v2): Fix conflict with toolbars that have been added to the editor.
         overlay.classList.add('overlay', 'js-draw-editor-overlay');
         this.container.appendChild(overlay);
         return {
@@ -951,7 +958,8 @@ export class Editor {
         const scaleRatioX = visibleRect.width / bbox.width;
         const scaleRatioY = visibleRect.height / bbox.height;
         let scaleRatio = scaleRatioX;
-        if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+        if (bbox.width * scaleRatio > visibleRect.width ||
+            bbox.height * scaleRatio > visibleRect.height) {
             scaleRatio = scaleRatioY;
         }
         scaleRatio *= 2 / 3;
@@ -1106,7 +1114,9 @@ export class Editor {
         const originalType = originalBackground?.getBackgroundType?.() ?? BackgroundType.None;
         const originalColor = originalBackground?.getStyle?.().color ?? Color4.transparent;
         const originalFillsScreen = this.image.getAutoresizeEnabled();
-        const defaultType = (style.color && originalType === BackgroundType.None ? BackgroundType.SolidColor : originalType);
+        const defaultType = style.color && originalType === BackgroundType.None
+            ? BackgroundType.SolidColor
+            : originalType;
         const backgroundType = style.type ?? defaultType;
         const backgroundColor = style.color ?? originalColor;
         const fillsScreen = style.autoresize ?? originalFillsScreen;
@@ -1134,7 +1144,9 @@ export class Editor {
     setBackgroundColor(color) {
         let background = this.getTopmostBackgroundComponent();
         if (!background) {
-            const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+            const backgroundType = color.eq(Color4.transparent)
+                ? BackgroundType.None
+                : BackgroundType.SolidColor;
             background = new BackgroundComponent(backgroundType, color);
             return this.image.addElement(background);
         }
@@ -1221,14 +1233,16 @@ export class Editor {
             heading: this.localization.developerInformation,
             text: [
                 'Image debug information (from when this dialog was opened):',
-                `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()}° rotation`,
+                `    ${this.viewport.getScaleFactor()}x zoom, ${(180 / Math.PI) * this.viewport.getRotationAngle()}° rotation`,
                 `    ${this.image.estimateNumElements()} components`,
                 `    auto-resize: ${this.image.getAutoresizeEnabled() ? 'enabled' : 'disabled'}`,
                 `    image size: ${this.getImportExportRect().w}x${this.getImportExportRect().h}`,
                 `    screen size: ${screenSize.x}x${screenSize.y}`,
                 `    device pixel ratio: ${this.display.getDevicePixelRatio()}`,
                 '    cache:',
-                `        ${this.display.getCache().getDebugInfo()
+                `        ${this.display
+                    .getCache()
+                    .getDebugInfo()
                     // Indent
                     .replace(/([\n])/g, '\n        ')}`,
             ].join('\n'),

package/dist/mjs/EventDispatcher.mjs

@@ -49,6 +49,6 @@ export default class EventDispatcher {
         // Replace the current list of listeners with a new, shortened list.
         // This allows any iterators over this.listeners to continue iterating
         // without skipping elements.
-        this.listeners[eventName] = listeners.filter(otherCallback => otherCallback !== callback);
+        this.listeners[eventName] = listeners.filter((otherCallback) => otherCallback !== callback);
     }
 }

package/dist/mjs/Pointer.mjs

@@ -86,9 +86,9 @@ export default class Pointer {
             screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
         }
         const pointerTypeToDevice = {
-            'mouse': PointerDevice.PrimaryButtonMouse,
-            'pen': PointerDevice.Pen,
-            'touch': PointerDevice.Touch,
+            mouse: PointerDevice.PrimaryButtonMouse,
+            pen: PointerDevice.Pen,
+            touch: PointerDevice.Touch,
         };
         let device = pointerTypeToDevice[evt.pointerType] ?? PointerDevice.Other;
         const eraserButtonMask = 0x20;