js-draw 1.21.3 → 1.23.1

package/dist/cjs/util/createElement.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSvgPaths = exports.createSvgElements = exports.createSvgElement = exports.ElementNamespace = void 0;
+var ElementNamespace;
+(function (ElementNamespace) {
+    ElementNamespace["Html"] = "html";
+    ElementNamespace["Svg"] = "svg";
+})(ElementNamespace || (exports.ElementNamespace = ElementNamespace = {}));
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+const createElement = (tag, props, elementType = ElementNamespace.Html) => {
+    let elem;
+    if (elementType === ElementNamespace.Html) {
+        elem = document.createElement(tag);
+    }
+    else if (elementType === ElementNamespace.Svg) {
+        elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    }
+    else {
+        throw new Error(`Unknown element type ${elementType}`);
+    }
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'children')
+            continue;
+        if (typeof value !== 'string' && typeof value !== 'number') {
+            throw new Error(`Unsupported value type ${typeof value}`);
+        }
+        elem.setAttribute(key, value.toString());
+    }
+    if (props.children) {
+        for (const item of props.children) {
+            elem.appendChild(item);
+        }
+    }
+    return elem;
+};
+const createSvgElement = (tag, props) => {
+    return createElement(tag, props, ElementNamespace.Svg);
+};
+exports.createSvgElement = createSvgElement;
+const createSvgElements = (tag, elements) => {
+    return elements.map((props) => (0, exports.createSvgElement)(tag, props));
+};
+exports.createSvgElements = createSvgElements;
+const createSvgPaths = (...paths) => {
+    return (0, exports.createSvgElements)('path', paths);
+};
+exports.createSvgPaths = createSvgPaths;
+exports.default = createElement;

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.3',
+    number: '1.23.1',
 };

package/dist/mjs/Editor.d.ts

@@ -411,9 +411,7 @@ export declare class Editor {
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
      * called.
      *
-     * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
-     * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
-     * be sent across the network), while `apply` does not.
+     * If `addToHistory` is `false`, this is equivalent to `command.apply(editor)`.
      *
      * @example
      * ```

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';
@@ -108,11 +108,11 @@ export class Editor {
             maxZoom: settings.maxZoom ?? 1e12,
             keyboardShortcutOverrides: settings.keyboardShortcutOverrides ?? {},
             iconProvider: settings.iconProvider ?? new IconProvider(),
-            notices: [],
+            notices: settings.notices ?? [],
             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);
@@ -720,9 +726,7 @@ export class Editor {
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
      * called.
      *
-     * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
-     * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
-     * be sent across the network), while `apply` does not.
+     * If `addToHistory` is `false`, this is equivalent to `command.apply(editor)`.
      *
      * @example
      * ```
@@ -760,7 +764,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 +807,7 @@ export class Editor {
                 }
             });
         }
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             this.nextRerenderListeners.push(() => resolve());
         });
     }
@@ -831,7 +835,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 +877,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 +956,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 +1112,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 +1142,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 +1231,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;

package/dist/mjs/SVGLoader/SVGLoader.mjs

@@ -1,5 +1,5 @@
 import { Color4, Mat33, Path, Rect2, Vec2 } from '@js-draw/math';
-import  BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName }  from '../components/BackgroundComponent.mjs';
+import  BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName, }  from '../components/BackgroundComponent.mjs';
 import  ImageComponent  from '../components/ImageComponent.mjs';
 import  Stroke  from '../components/Stroke.mjs';
 import  SVGGlobalAttributesObject  from '../components/SVGGlobalAttributesObject.mjs';
@@ -59,7 +59,10 @@ export default class SVGLoader {
             }
         }
         const strokeAttribute = node.getAttribute('stroke') ?? computedStyles?.stroke ?? node.style?.stroke ?? '';
-        const strokeWidthAttr = node.getAttribute('stroke-width') ?? computedStyles?.strokeWidth ?? node.style?.strokeWidth ?? '';
+        const strokeWidthAttr = node.getAttribute('stroke-width') ??
+            computedStyles?.strokeWidth ??
+            node.style?.strokeWidth ??
+            '';
         if (strokeAttribute && strokeWidthAttr) {
             try {
                 let width = parseFloat(strokeWidthAttr ?? '1');
@@ -114,7 +117,10 @@ export default class SVGLoader {
             if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
                 continue;
             }
-            elem.attachLoadSaveData(svgAttributesDataKey, [attr, node.getAttribute(attr)]);
+            elem.attachLoadSaveData(svgAttributesDataKey, [
+                attr,
+                node.getAttribute(attr),
+            ]);
         }
         if (supportedStyleAttrs && node.style) {
             // Use a for loop instead of an iterator: js-dom seems to not
@@ -131,7 +137,7 @@ export default class SVGLoader {
                 elem.attachLoadSaveData(svgStyleAttributesDataKey, {
                     key: attr,
                     value: node.style.getPropertyValue(attr),
-                    priority: node.style.getPropertyPriority(attr)
+                    priority: node.style.getPropertyPriority(attr),
                 });
             }
         }
@@ -492,7 +498,7 @@ export default class SVGLoader {
     }
     // Get SVG element attributes (e.g. xlink=...)
     getSourceAttrs(node) {
-        return node.getAttributeNames().map(attr => {
+        return node.getAttributeNames().map((attr) => {
             return [attr, node.getAttribute(attr)];
         });
     }
@@ -526,6 +532,7 @@ export default class SVGLoader {
         const { svgElem, cleanUp } = (() => {
             // If the user requested an iframe load (the default) try to load with an iframe.
             // There are some cases (e.g. in a sandboxed iframe) where this doesn't work.
+            // TODO(v2): Use domParserLoad by default.
             if (!domParserLoad) {
                 try {
                     const sandbox = document.createElement('iframe');
@@ -533,7 +540,7 @@ export default class SVGLoader {
                     // allow-same-origin is necessary for how we interact with the sandbox. As such,
                     // DO NOT ENABLE ALLOW-SCRIPTS.
                     sandbox.setAttribute('sandbox', 'allow-same-origin');
-                    sandbox.setAttribute('csp', 'default-src \'about:blank\'');
+                    sandbox.setAttribute('csp', "default-src 'about:blank'");
                     sandbox.style.display = 'none';
                     // Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
                     document.body.appendChild(sandbox);
@@ -565,6 +572,7 @@ export default class SVGLoader {
 					`);
                     sandboxDoc.close();
                     const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    // eslint-disable-next-line no-unsanitized/property -- setting innerHTML in a sandboxed document.
                     svgElem.innerHTML = text;
                     sandboxDoc.body.appendChild(svgElem);
                     const cleanUp = () => {
@@ -603,7 +611,8 @@ export default class SVGLoader {
             disableUnknownObjectWarnings = options.disableUnknownObjectWarnings ?? false;
         }
         return new SVGLoader(svgElem, cleanUp, {
-            sanitize, disableUnknownObjectWarnings,
+            sanitize,
+            disableUnknownObjectWarnings,
         });
     }
 }

package/dist/mjs/UndoRedoHistory.mjs

@@ -45,7 +45,7 @@ class UndoRedoHistory {
         if (__classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length > this.maxUndoRedoStackSize) {
             const removeAtOnceCount = Math.ceil(this.maxUndoRedoStackSize / 100);
             const removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
-            removedElements.forEach(elem => elem.onDrop(this.editor));
+            removedElements.forEach((elem) => elem.onDrop(this.editor));
         }
         this.fireUpdateEvent(UndoEventType.CommandDone, command);
         this.editor.notifier.dispatch(EditorEventType.CommandDone, {

package/dist/mjs/Viewport.d.ts

@@ -53,7 +53,7 @@ export declare class Viewport {
     /**
      * Snaps `canvasPos` to the nearest grid cell corner.
      *
-     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     * @see {@link getGridSize}.
      */
     snapToGrid(canvasPos: Point2): {
         readonly x: number;

package/dist/mjs/Viewport.mjs

@@ -100,7 +100,7 @@ export class Viewport {
     /**
      * Snaps `canvasPos` to the nearest grid cell corner.
      *
-     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     * @see {@link getGridSize}.
      */
     snapToGrid(canvasPos) {
         const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
@@ -151,7 +151,9 @@ export class Viewport {
         // Represent as k 10ⁿ for some n, k ∈ ℤ.
         const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
         const roundAmountFactor = 2 ** roundAmount;
-        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
+        scaleRatio =
+            (Math.round((scaleRatio / decimalComponent) * roundAmountFactor) / roundAmountFactor) *
+                decimalComponent;
         return scaleRatio;
     }
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
@@ -240,7 +242,7 @@ Viewport.ViewportTransform = (_a = class extends ViewportTransform {
             const linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
             const affineTransformedVec = this.transform.transformVec2(origVec);
             const scale = linearTransformedVec.magnitude();
-            const rotation = 180 / Math.PI * linearTransformedVec.angle();
+            const rotation = (180 / Math.PI) * linearTransformedVec.angle();
             const translation = affineTransformedVec.minus(origVec);
             if (scale > 1.2) {
                 result.push(localizationTable.zoomedIn);

package/dist/mjs/commands/Command.mjs

@@ -8,7 +8,7 @@ export class Command {
     onDrop(_editor) { }
     /** @deprecated Use {@link uniteCommands} */
     static union(a, b) {
-        return new class extends Command {
+        return new (class extends Command {
             apply(editor) {
                 a.apply(editor);
                 b.apply(editor);
@@ -25,12 +25,14 @@ export class Command {
                 }
                 return `${aDescription}, ${bDescription}`;
             }
-        };
+        })();
     }
 }
-Command.empty = new class extends Command {
-    description(_editor, _localizationTable) { return ''; }
+Command.empty = new (class extends Command {
+    description(_editor, _localizationTable) {
+        return '';
+    }
     apply(_editor) { }
     unapply(_editor) { }
-};
+})();
 export default Command;

package/dist/mjs/commands/Duplicate.mjs

@@ -28,7 +28,7 @@ class Duplicate extends SerializableCommand {
     constructor(toDuplicate) {
         super('duplicate');
         this.toDuplicate = toDuplicate;
-        this.duplicates = toDuplicate.map(elem => elem.clone());
+        this.duplicates = toDuplicate.map((elem) => elem.clone());
         this.reverse = new Erase(this.duplicates);
     }
     apply(editor) {
@@ -47,7 +47,7 @@ class Duplicate extends SerializableCommand {
         return localizationTable.duplicateAction(describeComponentList(localizationTable, this.duplicates) ?? localizationTable.elements, this.duplicates.length);
     }
     serializeToJSON() {
-        return this.toDuplicate.map(elem => elem.getId());
+        return this.toDuplicate.map((elem) => elem.getId());
     }
 }
 (() => {

package/dist/mjs/commands/Erase.mjs

@@ -46,7 +46,7 @@ class Erase extends SerializableCommand {
     constructor(toRemove) {
         super('erase');
         // Clone the list
-        this.toRemove = toRemove.map(elem => elem);
+        this.toRemove = toRemove.map((elem) => elem);
         this.applied = false;
     }
     apply(editor) {
@@ -86,7 +86,7 @@ class Erase extends SerializableCommand {
     serializeToJSON() {
         // If applied, the elements can't be fetched from the image because they're
         // erased. Serialize and return the elements themselves.
-        const elems = this.toRemove.map(elem => elem.serialize());
+        const elems = this.toRemove.map((elem) => elem.serialize());
         return elems;
     }
 }
@@ -95,8 +95,7 @@ class Erase extends SerializableCommand {
         if (!Array.isArray(json)) {
             throw new Error('seralized erase data must be an array');
         }
-        const elems = json
-            .map((elemData) => {
+        const elems = json.map((elemData) => {
             const componentId = typeof elemData === 'string' ? elemData : `${elemData.id}`;
             const component = editor.image.lookupElement(componentId) ?? AbstractComponent.deserialize(elemData);
             return component;

package/dist/mjs/commands/invertCommand.mjs

@@ -5,7 +5,7 @@ import  SerializableCommand  from './SerializableCommand.mjs';
 const invertCommand = (command) => {
     if (command instanceof SerializableCommand) {
         // SerializableCommand that does the inverse of [command]
-        return new class extends SerializableCommand {
+        return new (class extends SerializableCommand {
             constructor() {
                 super(...arguments);
                 // For debugging
@@ -26,11 +26,11 @@ const invertCommand = (command) => {
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }
-        }('inverse');
+        })('inverse');
     }
     else {
         // Command that does the inverse of [command].
-        const result = new class extends Command {
+        const result = new (class extends Command {
             apply(editor) {
                 command.unapply(editor);
             }
@@ -43,7 +43,7 @@ const invertCommand = (command) => {
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }
-        };
+        })();
         // We know that T does not extend SerializableCommand, and thus returning a Command
         // is appropriate.
         return result;

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

@@ -4,4 +4,4 @@ import Erase from './Erase';
 import invertCommand from './invertCommand';
 import SerializableCommand from './SerializableCommand';
 import uniteCommands from './uniteCommands';
-export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands, };
+export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands };