js-draw 1.21.3 → 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;

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)];
         });
     }
@@ -533,7 +539,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);
@@ -603,7 +609,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.mjs

@@ -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 };

package/dist/mjs/commands/lib.mjs

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

package/dist/mjs/commands/uniteCommands.mjs

@@ -10,7 +10,7 @@ class NonSerializableUnion extends Command {
     }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
-            const results = this.commands.map(cmd => cmd.apply(editor));
+            const results = this.commands.map((cmd) => cmd.apply(editor));
             return waitForAll(results);
         }
         else {
@@ -21,7 +21,7 @@ class NonSerializableUnion extends Command {
         const commands = [...this.commands];
         commands.reverse();
         if (this.applyChunkSize === undefined) {
-            const results = commands.map(cmd => cmd.unapply(editor));
+            const results = commands.map((cmd) => cmd.unapply(editor));
             return waitForAll(results);
         }
         else {
@@ -29,7 +29,7 @@ class NonSerializableUnion extends Command {
         }
     }
     onDrop(editor) {
-        this.commands.forEach(command => command.onDrop(editor));
+        this.commands.forEach((command) => command.onDrop(editor));
     }
     description(editor, localizationTable) {
         if (this.descriptionOverride) {
@@ -81,7 +81,7 @@ class SerializableUnion extends SerializableCommand {
         }
         return {
             applyChunkSize: this.applyChunkSize,
-            data: this.commands.map(command => command.serialize()),
+            data: this.commands.map((command) => command.serialize()),
             description: this.descriptionOverride,
         };
     }

package/dist/mjs/components/AbstractComponent.d.ts

@@ -4,7 +4,7 @@ import { LineSegment2, Mat33, Path, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 import Viewport from '../Viewport';
-export type LoadSaveData = (string[] | Record<symbol, string | number>);
+export type LoadSaveData = string[] | Record<symbol, string | number>;
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
 export declare enum ComponentSizingMode {

package/dist/mjs/components/AbstractComponent.mjs

@@ -36,7 +36,7 @@ class AbstractComponent {
         this.componentKind = componentKind;
         // Stores data attached by a loader.
         this.loadSaveData = {};
-        this.lastChangedTime = (new Date()).getTime();
+        this.lastChangedTime = new Date().getTime();
         if (initialZIndex !== undefined) {
             this.zIndex = initialZIndex;
         }
@@ -134,7 +134,7 @@ class AbstractComponent {
         }
         // Otherwise check if it intersects one of the rectangle's edges.
         const testLines = rect.getEdges();
-        return testLines.some(edge => this.intersects(edge));
+        return testLines.some((edge) => this.intersects(edge));
     }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
@@ -284,7 +284,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
             }
             this.component.applyTransformation(newTransfm);
             this.component.zIndex = targetZIndex;
-            this.component.lastChangedTime = (new Date()).getTime();
+            this.component.lastChangedTime = new Date().getTime();
             // Ensure that new components are automatically drawn above the current component.
             if (targetZIndex >= AbstractComponent.zIndexCounter) {
                 AbstractComponent.zIndexCounter = targetZIndex + 1;

package/dist/mjs/components/BackgroundComponent.mjs

@@ -1,7 +1,7 @@
 import  { EditorImageEventType }  from '../image/EditorImage.mjs';
-import { Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2 } from '@js-draw/math';
+import { Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2, } from '@js-draw/math';
 import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mjs';
-import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+import  { createRestyleComponentCommand, }  from './RestylableComponent.mjs';
 import  Viewport  from '../Viewport.mjs';
 import  { pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
 export var BackgroundType;
@@ -178,7 +178,7 @@ export default class BackgroundComponent extends AbstractComponent {
             });
             result.push({
                 kind: PathCommandType.LineTo,
-                point: Vec2.of(x, targetRect.y + targetRect.h)
+                point: Vec2.of(x, targetRect.y + targetRect.h),
             });
         }
         return new Path(startPoint, result);
@@ -206,7 +206,8 @@ export default class BackgroundComponent extends AbstractComponent {
         const clip = this.backgroundType === BackgroundType.Grid;
         const contentBBox = this.getFullBoundingBox(visibleRect);
         canvas.startObject(contentBBox, clip);
-        if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
+        if (this.backgroundType === BackgroundType.SolidColor ||
+            this.backgroundType === BackgroundType.Grid) {
             // If the rectangle for this region contains the visible rect,
             // we can fill the entire visible rectangle (which may be more efficient than
             // filling the entire region for this.)
@@ -228,7 +229,7 @@ export default class BackgroundComponent extends AbstractComponent {
             }
             const style = {
                 fill: Color4.transparent,
-                stroke: { width: this.gridStrokeWidth, color: gridColor }
+                stroke: { width: this.gridStrokeWidth, color: gridColor },
             };
             canvas.drawPath(pathToRenderable(this.generateGridPath(visibleRect), style));
         }
@@ -245,7 +246,7 @@ export default class BackgroundComponent extends AbstractComponent {
         canvas.endObject(this.getLoadSaveData(), classNames);
     }
     intersects(lineSegment) {
-        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+        return this.contentBBox.getEdges().some((edge) => edge.intersects(lineSegment));
     }
     isSelectable() {
         return false;
@@ -296,8 +297,9 @@ export default class BackgroundComponent extends AbstractComponent {
         }
         let backgroundType;
         const jsonBackgroundType = json.backgroundType;
-        if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
-            || jsonBackgroundType === BackgroundType.SolidColor) {
+        if (jsonBackgroundType === BackgroundType.None ||
+            jsonBackgroundType === BackgroundType.Grid ||
+            jsonBackgroundType === BackgroundType.SolidColor) {
             backgroundType = jsonBackgroundType;
         }
         else {

package/dist/mjs/components/ImageComponent.mjs

@@ -13,7 +13,10 @@ export default class ImageComponent extends AbstractComponent {
         super('image-component');
         this.image = {
             ...image,
-            label: image.label ?? image.image.getAttribute('alt') ?? image.image.getAttribute('aria-label') ?? undefined,
+            label: image.label ??
+                image.image.getAttribute('alt') ??
+                image.image.getAttribute('aria-label') ??
+                undefined,
         };
         const isHTMLImageElem = (elem) => {
             return elem.getAttribute('src') !== undefined;
@@ -39,8 +42,10 @@ export default class ImageComponent extends AbstractComponent {
     static async fromImage(elem, transform) {
         await waitForImageLoaded(elem);
         let width, height;
-        if (typeof elem.width === 'number' && typeof elem.height === 'number'
-            && elem.width !== 0 && elem.height !== 0) {
+        if (typeof elem.width === 'number' &&
+            typeof elem.height === 'number' &&
+            elem.width !== 0 &&
+            elem.height !== 0) {
             width = elem.width;
             height = elem.height;
         }
@@ -86,7 +91,7 @@ export default class ImageComponent extends AbstractComponent {
     }
     intersects(lineSegment) {
         const rect = this.getImageRect();
-        const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+        const edges = rect.getEdges().map((edge) => edge.transformedBy(this.image.transform));
         for (const edge of edges) {
             if (edge.intersects(lineSegment)) {
                 return true;
@@ -99,7 +104,9 @@ export default class ImageComponent extends AbstractComponent {
         this.recomputeBBox();
     }
     description(localizationTable) {
-        return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+        return this.image.label
+            ? localizationTable.imageNode(this.image.label)
+            : localizationTable.unlabeledImageNode;
     }
     getAltText() {
         return this.image.label;

package/dist/mjs/components/RestylableComponent.mjs

@@ -1,7 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
 import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
-import  { textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
+import  { textStyleFromJSON, textStyleToJSON, }  from '../rendering/TextRenderingStyle.mjs';
 const serializeComponentStyle = (style) => {
     const result = {};
     if (style.color) {
@@ -73,7 +73,7 @@ class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
         const newStyle = deserializeComponentStyle(json.newStyle);
         const id = json.id;
         if (typeof json.id !== 'string') {
-            throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
+            throw new Error(`json.id is of type ${typeof json.id}, not string.`);
         }
         return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
     });

package/dist/mjs/components/SVGGlobalAttributesObject.mjs

@@ -33,8 +33,7 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     intersects(_lineSegment) {
         return false;
     }
-    applyTransformation(_affineTransfm) {
-    }
+    applyTransformation(_affineTransfm) { }
     isSelectable() {
         return false;
     }