js-draw 1.21.3 → 1.22.0

package/dist/mjs/components/builders/RectangleBuilder.mjs

@@ -2,9 +2,21 @@ import { Mat33, Rect2, Path } from '@js-draw/math';
 import  { pathToRenderable }  from '../../rendering/RenderablePathSpec.mjs';
 import  Stroke  from '../Stroke.mjs';
 import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+/**
+ * Creates filled rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export const makeFilledRectangleBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);
 });
+/**
+ * Creates outlined rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export const makeOutlinedRectangleBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, false, viewport);
 });
@@ -28,12 +40,14 @@ export default class RectangleBuilder {
         const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
         const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
         const rect = Rect2.fromCorners(startPoint, endPoint);
-        const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width)
+            .transformedBy(
         // Rotate the canvas rectangle so that its rotation matches the screen
-        rotationMat).mapPoints(point => this.viewport.roundPoint(point));
+        rotationMat)
+            .mapPoints((point) => this.viewport.roundPoint(point));
         const preview = new Stroke([
             pathToRenderable(path, {
-                fill: this.endPoint.color
+                fill: this.endPoint.color,
             }),
         ]);
         return preview;

package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.mjs

@@ -6,14 +6,11 @@ const makeShapeFitAutocorrect = (sourceFactory) => {
 };
 export default makeShapeFitAutocorrect;
 const makeLineTemplate = (startPoint, points, _bbox) => {
-    const templatePoints = [
-        startPoint,
-        points[points.length - 1],
-    ];
-    return { points: templatePoints, };
+    const templatePoints = [startPoint, points[points.length - 1]];
+    return { points: templatePoints };
 };
 const makeRectangleTemplate = (_startPoint, _points, bbox) => {
-    return { points: [...bbox.corners, bbox.corners[0]], };
+    return { points: [...bbox.corners, bbox.corners[0]] };
 };
 class ShapeFitBuilder {
     constructor(sourceFactory, startPoint, viewport) {
@@ -39,10 +36,10 @@ class ShapeFitBuilder {
     async autocorrectShape() {
         // Use screen points so that autocorrected shapes rotate with the screen.
         const startPoint = this.viewport.canvasToScreen(this.startPoint.pos);
-        const points = this.points.map(point => this.viewport.canvasToScreen(point.pos));
+        const points = this.points.map((point) => this.viewport.canvasToScreen(point.pos));
         const bbox = Rect2.bboxOf(points);
         const snappedStartPoint = this.viewport.canvasToScreen(this.viewport.snapToGrid(this.startPoint.pos));
-        const snappedPoints = this.points.map(point => this.viewport.canvasToScreen(this.viewport.snapToGrid(point.pos)));
+        const snappedPoints = this.points.map((point) => this.viewport.canvasToScreen(this.viewport.snapToGrid(point.pos)));
         const snappedBBox = Rect2.bboxOf(snappedPoints);
         // Only fit larger shapes
         if (bbox.maxDimension < 32) {

package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.mjs

@@ -35,7 +35,7 @@ class SnapToGridAutocompleteBuilder {
         // Use screen points so that snapped shapes rotate with the screen.
         const startPoint = snapToGrid(this.startPoint);
         const builder = this.sourceFactory(startPoint, this.viewport);
-        const points = this.points.map(point => snapToGrid(point));
+        const points = this.points.map((point) => snapToGrid(point));
         for (const point of points) {
             builder.addPoint(point);
         }

package/dist/mjs/components/builders/lib.d.ts

@@ -0,0 +1,7 @@
+export { makeFreehandLineBuilder } from './FreehandLineBuilder';
+export { makePolylineBuilder } from './PolylineBuilder';
+export { makePressureSensitiveFreehandLineBuilder } from './PressureSensitiveFreehandLineBuilder';
+export { makeOutlinedCircleBuilder } from './CircleBuilder';
+export { makeArrowBuilder } from './ArrowBuilder';
+export { makeLineBuilder } from './LineBuilder';
+export { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from './RectangleBuilder';

package/dist/mjs/components/builders/lib.mjs

@@ -0,0 +1,7 @@
+export  { makeFreehandLineBuilder }  from './FreehandLineBuilder.mjs';
+export  { makePolylineBuilder }  from './PolylineBuilder.mjs';
+export  { makePressureSensitiveFreehandLineBuilder }  from './PressureSensitiveFreehandLineBuilder.mjs';
+export  { makeOutlinedCircleBuilder }  from './CircleBuilder.mjs';
+export  { makeArrowBuilder }  from './ArrowBuilder.mjs';
+export  { makeLineBuilder }  from './LineBuilder.mjs';
+export  { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder }  from './RectangleBuilder.mjs';

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

@@ -1,8 +1,5 @@
 export * from './builders/types';
-export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
-export { makePolylineBuilder } from './builders/PolylineBuilder';
-export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
-export { makeOutlinedCircleBuilder } from './builders/CircleBuilder';
+export * from './builders/lib';
 export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/StrokeSmoother';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';

package/dist/mjs/components/lib.mjs

@@ -1,15 +1,12 @@
 export  *  from './builders/types.mjs';
-export  { makeFreehandLineBuilder }  from './builders/FreehandLineBuilder.mjs';
-export  { makePolylineBuilder }  from './builders/PolylineBuilder.mjs';
-export  { makePressureSensitiveFreehandLineBuilder }  from './builders/PressureSensitiveFreehandLineBuilder.mjs';
-export  { makeOutlinedCircleBuilder }  from './builders/CircleBuilder.mjs';
+export  *  from './builders/lib.mjs';
 export  { default as StrokeSmoother }  from './util/StrokeSmoother.mjs';
 export  *  from './AbstractComponent.mjs';
 export  { default as AbstractComponent }  from './AbstractComponent.mjs';
 import  Stroke  from './Stroke.mjs';
 import  TextComponent  from './TextComponent.mjs';
 import  ImageComponent  from './ImageComponent.mjs';
-import  { createRestyleComponentCommand, isRestylableComponent }  from './RestylableComponent.mjs';
+import  { createRestyleComponentCommand, isRestylableComponent, }  from './RestylableComponent.mjs';
 import  BackgroundComponent, { BackgroundType }  from './BackgroundComponent.mjs';
 export { Stroke, createRestyleComponentCommand, isRestylableComponent, TextComponent, 
 /** @deprecated use {@link TextComponent} */

package/dist/mjs/components/util/StrokeSmoother.mjs

@@ -53,9 +53,7 @@ export class StrokeSmoother {
         console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
         // Use the last two points to start a new curve (the last point isn't used
         // in the current curve and we want connected curves to share end points)
-        this.buffer = [
-            this.buffer[this.buffer.length - 2], lastPoint,
-        ];
+        this.buffer = [this.buffer[this.buffer.length - 2], lastPoint];
         this.currentCurve = null;
         this.isFirstSegment = false;
     }
@@ -96,8 +94,7 @@ export class StrokeSmoother {
                 return;
             }
             const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
-            const shouldSnapToInitial = this.startPoint.pos.distanceTo(newPoint.pos) < threshold
-                && this.isFirstSegment;
+            const shouldSnapToInitial = this.startPoint.pos.distanceTo(newPoint.pos) < threshold && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
             // at the starting point.
             // This allows us to create a circle/dot at the start of the stroke.
@@ -150,7 +147,9 @@ export class StrokeSmoother {
         const startEndDist = segmentEnd.distanceTo(segmentStart);
         const maxControlPointDist = maxRelativeLength * startEndDist;
         // Exit in cases where we would divide by zero
-        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
+        if (maxControlPointDist === 0 ||
+            exitingVec.magnitude() === 0 ||
+            !isFinite(exitingVec.magnitude())) {
             return;
         }
         console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');

package/dist/mjs/dialogs/makeAboutDialog.mjs

@@ -8,7 +8,7 @@ const makeAboutDialog = (editor, entries) => {
         const container = document.createElement(entry.minimized ? 'details' : 'div');
         container.classList.add('about-entry');
         const header = document.createElement(entry.minimized ? 'summary' : 'h2');
-        if (typeof (entry.heading) === 'string') {
+        if (typeof entry.heading === 'string') {
             header.innerText = entry.heading;
         }
         else {

package/dist/mjs/dialogs/makeMessageDialog.mjs

@@ -15,7 +15,7 @@ const makeAboutDialog = (editor, options) => {
     const scrollRegion = document.createElement('div');
     scrollRegion.classList.add('scroll');
     // Allow scrolling in the scrollable container -- don't forward wheel events.
-    scrollRegion.onwheel = evt => evt.stopPropagation();
+    scrollRegion.onwheel = (evt) => evt.stopPropagation();
     contentWrapper.replaceChildren(heading, scrollRegion, closeButton);
     dialog.replaceChildren(contentWrapper);
     overlay.replaceChildren(dialog);
@@ -27,7 +27,7 @@ const makeAboutDialog = (editor, options) => {
         dialog.close();
     };
     const addCloseListeners = () => {
-        dialog.addEventListener('pointerdown', event => {
+        dialog.addEventListener('pointerdown', (event) => {
             if (event.target === dialog) {
                 void closeDialog();
             }

package/dist/mjs/image/EditorImage.mjs

@@ -121,7 +121,7 @@ class EditorImage {
     getAllElements() {
         const leaves = this.root.getLeaves();
         sortLeavesByZIndex(leaves);
-        return leaves.map(leaf => leaf.getContent());
+        return leaves.map((leaf) => leaf.getContent());
     }
     /** Returns the number of elements added to this image. @internal */
     estimateNumElements() {
@@ -134,7 +134,7 @@ class EditorImage {
             leaves = leaves.concat(this.background.getLeavesIntersectingRegion(region));
         }
         sortLeavesByZIndex(leaves);
-        return leaves.map(leaf => leaf.getContent());
+        return leaves.map((leaf) => leaf.getContent());
     }
     /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem) {
@@ -474,8 +474,8 @@ export const computeFirstIndexToRender = (sortedLeaves, visibleRect) => {
         for (let i = sortedLeaves.length - 1; i >= 1; i--) {
             if (
             // Check for occlusion
-            sortedLeaves[i].getBBox().containsRect(visibleRect)
-                && sortedLeaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
+            sortedLeaves[i].getBBox().containsRect(visibleRect) &&
+                sortedLeaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
                 startIndex = i;
                 break;
             }
@@ -510,7 +510,7 @@ export class ImageNode {
     }
     // Override this to change how children are considered within a given region.
     getChildrenIntersectingRegion(region, isTooSmallFilter) {
-        return this.children.filter(child => {
+        return this.children.filter((child) => {
             const bbox = child.getBBox();
             return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
@@ -601,7 +601,7 @@ export class ImageNode {
             }
             return nodeForNewLeaf.addLeaf(leaf);
         }
-        const containingNodes = this.children.filter(child => child.getBBox().containsRect(leafBBox));
+        const containingNodes = this.children.filter((child) => child.getBBox().containsRect(leafBBox));
         // Does the leaf already fit within one of the children?
         if (containingNodes.length > 0 && this.children.length >= this.targetChildCount) {
             // Sort the containers in ascending order by area
@@ -639,7 +639,7 @@ export class ImageNode {
             this.bbox = this.content.getBBox();
         }
         else {
-            this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
+            this.bbox = Rect2.union(...this.children.map((child) => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
             if (this.bbox.containsRect(oldBBox)) {
@@ -674,7 +674,7 @@ export class ImageNode {
             const oldParent = this.parent;
             if (oldParent.parent !== null) {
                 const newParent = oldParent.parent;
-                newParent.children = newParent.children.filter(c => c !== oldParent);
+                newParent.children = newParent.children.filter((c) => c !== oldParent);
                 oldParent.parent = null;
                 oldParent.children = [];
                 this.parent = newParent;
@@ -746,11 +746,11 @@ export class ImageNode {
     removeChild(child) {
         this.checkRep();
         const oldChildCount = this.children.length;
-        this.children = this.children.filter(node => {
+        this.children = this.children.filter((node) => {
             return node !== child;
         });
         console.assert(this.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.children.length} after removing all nodes equal to ${child}. Nodes should only be removed once.`);
-        this.children.forEach(child => {
+        this.children.forEach((child) => {
             child.rebalance();
         });
         this.recomputeBBox(true);
@@ -799,7 +799,7 @@ export class ImageNode {
     render(renderer, visibleRect) {
         let leaves;
         if (visibleRect) {
-            leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+            leaves = this.getLeavesIntersectingRegion(visibleRect, (rect) => renderer.isTooSmallToRender(rect));
         }
         else {
             leaves = this.getLeaves();
@@ -909,10 +909,8 @@ export class RootImageNode extends ImageNode {
         };
         // Check whether the child is stored in the data/fullscreen
         // component arrays first.
-        this.dataComponents = this.dataComponents
-            .filter(checkTargetChild);
-        this.fullscreenChildren = this.fullscreenChildren
-            .filter(checkTargetChild);
+        this.dataComponents = this.dataComponents.filter(checkTargetChild);
+        this.fullscreenChildren = this.fullscreenChildren.filter(checkTargetChild);
         if (!removed) {
             super.removeChild(child);
         }

package/dist/mjs/image/export/editorImageToSVG.mjs

@@ -45,7 +45,7 @@ export const editorImageToSVGSync = (image, options) => {
     }, options);
 };
 export const editorImageToSVGAsync = (image, preRenderComponent, options) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         toSVGInternal(image, async (renderer, onComplete) => {
             await image.renderAllAsync(renderer, preRenderComponent);
             const result = onComplete();

package/dist/mjs/inputEvents.mjs

@@ -29,7 +29,7 @@ export const keyPressEventFromHTMLEvent = (event) => {
     return keyEventFromHTMLEvent(InputEvtType.KeyPressEvent, event);
 };
 export const isPointerEvt = (event) => {
-    return event.kind === InputEvtType.PointerDownEvt
-        || event.kind === InputEvtType.PointerMoveEvt
-        || event.kind === InputEvtType.PointerUpEvt;
+    return (event.kind === InputEvtType.PointerDownEvt ||
+        event.kind === InputEvtType.PointerMoveEvt ||
+        event.kind === InputEvtType.PointerUpEvt);
 };

package/dist/mjs/lib.d.ts

@@ -18,7 +18,7 @@ import Editor, { EditorSettings } from './Editor';
 export * from './image/lib';
 export * from './types';
 export * from './inputEvents';
-export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';
+export { default as getLocalizationTable, matchingLocalizationTable, } from './localizations/getLocalizationTable';
 export * from './localization';
 export { default as SVGLoader } from './SVGLoader/SVGLoader';
 export { default as Viewport } from './Viewport';
@@ -36,7 +36,7 @@ export { default as UndoRedoHistory } from './UndoRedoHistory';
 export * from './util/lib';
 export { default as __js_draw__version } from './version';
 import AbstractToolbar from './toolbar/AbstractToolbar';
-export { Editor, EditorSettings, AbstractToolbar, };
+export { Editor, EditorSettings, AbstractToolbar };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.

package/dist/mjs/lib.mjs

@@ -18,7 +18,7 @@ import  Editor  from './Editor.mjs';
 export  *  from './image/lib.mjs';
 export  *  from './types.mjs';
 export  *  from './inputEvents.mjs';
-export  { default as getLocalizationTable, matchingLocalizationTable }  from './localizations/getLocalizationTable.mjs';
+export  { default as getLocalizationTable, matchingLocalizationTable, }  from './localizations/getLocalizationTable.mjs';
 export  *  from './localization.mjs';
 export  { default as SVGLoader }  from './SVGLoader/SVGLoader.mjs';
 export  { default as Viewport }  from './Viewport.mjs';
@@ -37,7 +37,7 @@ export  *  from './util/lib.mjs';
 // @internal
 export  { default as __js_draw__version }  from './version.mjs';
 import  AbstractToolbar  from './toolbar/AbstractToolbar.mjs';
-export { Editor, AbstractToolbar, };
+export { Editor, AbstractToolbar };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.

package/dist/mjs/localization.mjs

@@ -1,6 +1,6 @@
 import  { defaultCommandLocalization }  from './commands/localization.mjs';
-import  { defaultComponentLocalization }  from './components/localization.mjs';
-import  { defaultTextRendererLocalization }  from './rendering/localization.mjs';
+import  { defaultComponentLocalization, }  from './components/localization.mjs';
+import  { defaultTextRendererLocalization, }  from './rendering/localization.mjs';
 import  { defaultToolbarLocalization }  from './toolbar/localization.mjs';
 import  { defaultToolLocalization }  from './tools/localization.mjs';
 export const defaultEditorLocalization = {

package/dist/mjs/localizations/de.mjs

@@ -89,11 +89,11 @@ const localization = {
     textNodeCount: (count) => `Es gibt ${count} sichtbare Text-Knotenpunkte.`,
     textNode: (content) => `Text: ${content}`,
     imageNodeCount: (nodeCount) => `Es gibt ${nodeCount} sichtbare Bild-Knoten.`,
-    imageNode: label => `Bild: ${label}`,
+    imageNode: (label) => `Bild: ${label}`,
     unlabeledImageNode: 'Bild ohne Label',
     rerenderAsText: 'Als Text darstellen',
     accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.',
-    loading: percentage => `Laden ${percentage}%...`,
+    loading: (percentage) => `Laden ${percentage}%...`,
     doneLoading: 'Laden fertig',
     imageEditor: 'Bild-Editor',
     undoAnnouncement: (commandDescription) => `${commandDescription} rückgängig gemacht`,

package/dist/mjs/localizations/es.mjs

@@ -46,9 +46,13 @@ const localization = {
     selectionMenu__duplicate: 'Duplicar',
     closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
     dropdownShown: (toolName) => `Menú por ${toolName} es visible`,
-    dropdownHidden: (toolName) => { return `Menú por ${toolName} fue ocultado`; },
+    dropdownHidden: (toolName) => {
+        return `Menú por ${toolName} fue ocultado`;
+    },
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
-    colorChangedAnnouncement: (color) => { return `Color fue cambiado a ${color}`; },
+    colorChangedAnnouncement: (color) => {
+        return `Color fue cambiado a ${color}`;
+    },
     imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
     imageLoadError: (message) => `Error cargando imagen: ${message}`,
     penTool: (penId) => `Lapiz ${penId}`,
@@ -65,7 +69,7 @@ const localization = {
     closeDialog: 'Cerrar',
     anyDevicePanning: 'Mover la pantalla con todo dispotivo',
     copied: (count) => `${count} cosas fueron copiados`,
-    pasted: (count) => count === 1 ? 'Pegado' : `${count} cosas fueron pegados`,
+    pasted: (count) => (count === 1 ? 'Pegado' : `${count} cosas fueron pegados`),
     toolEnabledAnnouncement: (toolName) => `${toolName} fue activado`,
     toolDisabledAnnouncement: (toolName) => `${toolName} fue desactivado`,
     resizeOutputCommand: (newSize) => `Tamaño de imagen fue cambiado a ${newSize.w}x${newSize.h}`,

package/dist/mjs/rendering/Display.mjs

@@ -79,7 +79,7 @@ export default class Display {
             // Require about 105 strokes with 4 parts each to use the cache at all.
             minProportionalRenderTimeToUseCache: 105 * 4,
         });
-        this.editor.notifier.on(EditorEventType.DisplayResized, event => {
+        this.editor.notifier.on(EditorEventType.DisplayResized, (event) => {
             if (event.kind !== EditorEventType.DisplayResized) {
                 throw new Error('Mismatched event.kinds!');
             }
@@ -117,10 +117,14 @@ export default class Display {
         }
         this.resizeSurfacesCallback = () => {
             const expectedWidth = (canvas) => {
-                return Math.ceil(canvas.clientWidth * this.devicePixelRatio);
+                const widthInPixels = Math.ceil(canvas.clientWidth * this.devicePixelRatio);
+                // Avoid setting the canvas width to zero -- doing so can cause errors when attempting
+                // to use the canvas:
+                return widthInPixels || canvas.width;
             };
             const expectedHeight = (canvas) => {
-                return Math.ceil(canvas.clientHeight * this.devicePixelRatio);
+                const heightInPixels = Math.ceil(canvas.clientHeight * this.devicePixelRatio);
+                return heightInPixels || canvas.height; // Zero-size canvases can cause errors.
             };
             const hasSizeMismatch = (canvas) => {
                 return expectedHeight(canvas) !== canvas.height || expectedWidth(canvas) !== canvas.width;

package/dist/mjs/rendering/RenderablePathSpec.mjs

@@ -37,15 +37,18 @@ const pathIncluded = (renderablePath, path) => {
  *
  * @internal
  */
-export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = { fastCheck: true, expensiveCheck: true }) => {
+export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = {
+    fastCheck: true,
+    expensiveCheck: true,
+}) => {
     const path = pathFromRenderable(renderablePath);
     const strokeWidth = renderablePath.style.stroke?.width ?? 0;
     const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
     const styledPathBBox = path.bbox.grownBy(strokeWidth);
     // Are we close enough to the path that it fills the entire screen?
-    const isOnlyStrokedAndCouldFillScreen = (onlyStroked
-        && strokeWidth > visibleRect.maxDimension
-        && styledPathBBox.containsRect(visibleRect));
+    const isOnlyStrokedAndCouldFillScreen = onlyStroked &&
+        strokeWidth > visibleRect.maxDimension &&
+        styledPathBBox.containsRect(visibleRect);
     if (options.fastCheck && isOnlyStrokedAndCouldFillScreen && renderablePath.style.stroke) {
         const strokeRadius = strokeWidth / 2;
         // Are we completely within the stroke?
@@ -55,7 +58,9 @@ export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, opt
             if (visibleRect.isWithinRadiusOf(strokeRadius, point)) {
                 return {
                     rectangle: visibleRect,
-                    path: pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                    path: pathToRenderable(Path.fromRect(visibleRect), {
+                        fill: renderablePath.style.stroke.color,
+                    }),
                     fullScreen: true,
                 };
             }
@@ -63,13 +68,16 @@ export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, opt
     }
     // Try filtering again, but with slightly more expensive checks
     if (options.expensiveCheck &&
-        isOnlyStrokedAndCouldFillScreen && renderablePath.style.stroke
-        && strokeWidth > visibleRect.maxDimension * 3) {
+        isOnlyStrokedAndCouldFillScreen &&
+        renderablePath.style.stroke &&
+        strokeWidth > visibleRect.maxDimension * 3) {
         const signedDist = path.signedDistance(visibleRect.center, strokeWidth / 2);
         const margin = strokeWidth / 6;
         if (signedDist < -visibleRect.maxDimension / 2 - margin) {
             return {
-                path: pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                path: pathToRenderable(Path.fromRect(visibleRect), {
+                    fill: renderablePath.style.stroke.color,
+                }),
                 rectangle: visibleRect,
                 fullScreen: true,
             };
@@ -92,12 +100,16 @@ export const visualEquivalent = (renderablePath, visibleRect) => {
     const strokeWidth = renderablePath.style.stroke?.width ?? 0;
     const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
     const styledPathBBox = path.bbox.grownBy(strokeWidth);
-    let rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, { fastCheck: true, expensiveCheck: false, });
+    let rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, {
+        fastCheck: true,
+        expensiveCheck: false,
+    });
     if (rectangleSimplification) {
         return rectangleSimplification.path;
     }
     // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
-    const expandedRect = visibleRect.grownBy(strokeWidth)
+    const expandedRect = visibleRect
+        .grownBy(strokeWidth)
         .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
     // TODO: Handle simplifying very small paths.
     if (expandedRect.containsRect(styledPathBBox)) {
@@ -138,7 +150,10 @@ export const visualEquivalent = (renderablePath, visibleRect) => {
     }
     const newPath = new Path(path.startPoint, parts);
     const newStyle = renderablePath.style;
-    rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, { fastCheck: false, expensiveCheck: true, });
+    rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, {
+        fastCheck: false,
+        expensiveCheck: true,
+    });
     if (rectangleSimplification) {
         return rectangleSimplification.path;
     }

package/dist/mjs/rendering/RenderingStyle.mjs

@@ -2,36 +2,43 @@ import { Color4 } from '@js-draw/math';
 export const cloneStyle = (style) => {
     return {
         fill: style.fill,
-        stroke: style.stroke ? {
-            ...style.stroke
-        } : undefined,
+        stroke: style.stroke
+            ? {
+                ...style.stroke,
+            }
+            : undefined,
     };
 };
 export const stylesEqual = (a, b) => {
-    const result = a === b || (a.fill.eq(b.fill)
-        && (a.stroke == undefined) === (b.stroke == undefined)
-        && (a.stroke?.color?.eq(b.stroke?.color) ?? true)
-        && a.stroke?.width === b.stroke?.width);
+    const result = a === b ||
+        (a.fill.eq(b.fill) &&
+            (a.stroke == undefined) === (b.stroke == undefined) &&
+            (a.stroke?.color?.eq(b.stroke?.color) ?? true) &&
+            a.stroke?.width === b.stroke?.width);
     // Map undefined/null -> false
     return result ?? false;
 };
 // Returns an object that can be converted to a JSON string with
 // JSON.stringify.
 export const styleToJSON = (style) => {
-    const stroke = !style.stroke ? undefined : {
-        color: style.stroke.color.toHexString(),
-        width: style.stroke.width,
-    };
+    const stroke = !style.stroke
+        ? undefined
+        : {
+            color: style.stroke.color.toHexString(),
+            width: style.stroke.width,
+        };
     return {
         fill: style.fill.toHexString(),
         stroke,
     };
 };
 export const styleFromJSON = (json) => {
-    const stroke = json.stroke ? {
-        color: Color4.fromHex(json.stroke.color),
-        width: json.stroke.width,
-    } : undefined;
+    const stroke = json.stroke
+        ? {
+            color: Color4.fromHex(json.stroke.color),
+            width: json.stroke.width,
+        }
+        : undefined;
     return {
         fill: Color4.fromHex(json.fill),
         stroke,

package/dist/mjs/rendering/TextRenderingStyle.mjs

@@ -10,7 +10,7 @@ export const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);
     }
-    if (typeof (json.fontFamily) !== 'string') {
+    if (typeof json.fontFamily !== 'string') {
         throw new Error('Serialized textStyle missing string fontFamily attribute!');
     }
     const style = {

package/dist/mjs/rendering/caching/CacheRecord.mjs

@@ -15,7 +15,7 @@ export default class CacheRecord {
     startRender() {
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         if (!this.allocd) {
-            throw new Error('Only alloc\'d canvases can be rendered to');
+            throw new Error("Only alloc'd canvases can be rendered to");
         }
         return this.renderer;
     }

package/dist/mjs/rendering/caching/CacheRecordManager.mjs

@@ -28,7 +28,7 @@ export class CacheRecordManager {
             lru.realloc(onDealloc);
             lru.setRenderingRegion(drawTo);
             if (this.cacheState.debugMode) {
-                console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
+                console.log("[Cache] Now re-alloc'd. Last used cycle: ", lru.getLastUsedCycle());
                 console.assert(lru['cacheState'] === this.cacheState, '[Cache] Unequal cache states! cacheState should be a shared object!');
             }
             return lru;

package/dist/mjs/rendering/caching/RenderingCache.mjs

@@ -30,7 +30,7 @@ export default class RenderingCache {
             this.rootNode = this.rootNode.generateParent();
         }
         this.rootNode = this.rootNode.smallestChildContaining(visibleRect) ?? this.rootNode;
-        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, (rect) => screenRenderer.isTooSmallToRender(rect));
         let approxVisibleRenderTime = 0;
         for (const leaf of visibleLeaves) {
             approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();