js-draw 1.21.3 → 1.22.0

package/dist/cjs/components/builders/FreehandLineBuilder.js

@@ -9,6 +9,12 @@ const Stroke_1 = __importDefault(require("../Stroke"));
 const Viewport_1 = __importDefault(require("../../Viewport"));
 const StrokeSmoother_1 = require("../util/StrokeSmoother");
 const makeShapeFitAutocorrect_1 = __importDefault(require("./autocorrect/makeShapeFitAutocorrect"));
+/**
+ * Creates a stroke builder that draws freehand lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 exports.makeFreehandLineBuilder = (0, makeShapeFitAutocorrect_1.default)((initialPoint, viewport) => {
     // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
     // less than ±1 px from the curve.
@@ -38,7 +44,7 @@ class FreehandLineBuilder {
             stroke: {
                 color: this.startPoint.color,
                 width: this.roundDistance(this.averageWidth),
-            }
+            },
         };
     }
     previewCurrentPath() {
@@ -135,7 +141,7 @@ class FreehandLineBuilder {
                     kind: math_1.PathCommandType.QuadraticBezierTo,
                     controlPoint: center.plus(math_1.Vec2.of(width, -width)),
                     endPoint: center.plus(math_1.Vec2.of(width, 0)),
-                }
+                },
             ];
         }
         const result = [];
@@ -163,8 +169,8 @@ class FreehandLineBuilder {
         this.curveFitter.addPoint(newPoint);
         this.widthAverageNumSamples++;
         this.averageWidth =
-            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
-                + newPoint.width / this.widthAverageNumSamples;
+            (this.averageWidth * (this.widthAverageNumSamples - 1)) / this.widthAverageNumSamples +
+                newPoint.width / this.widthAverageNumSamples;
     }
 }
 exports.default = FreehandLineBuilder;

package/dist/cjs/components/builders/LineBuilder.d.ts

@@ -4,6 +4,12 @@ import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
+/**
+ * Creates a stroke builder that generates filled lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeLineBuilder: ComponentBuilderFactory;
 export default class LineBuilder implements ComponentBuilder {
     private readonly startPoint;

package/dist/cjs/components/builders/LineBuilder.js

@@ -8,6 +8,12 @@ const math_1 = require("@js-draw/math");
 const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
 const Stroke_1 = __importDefault(require("../Stroke"));
 const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+/**
+ * Creates a stroke builder that generates filled lines.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 exports.makeLineBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new LineBuilder(initialPoint, viewport);
 });
@@ -48,10 +54,8 @@ class LineBuilder {
                 kind: math_1.PathCommandType.LineTo,
                 point: startPoint.minus(scaledStartNormal),
             },
-        ]).mapPoints(point => this.viewport.roundPoint(point));
-        const preview = new Stroke_1.default([
-            (0, RenderablePathSpec_1.pathToRenderable)(path, { fill: this.startPoint.color })
-        ]);
+        ]).mapPoints((point) => this.viewport.roundPoint(point));
+        const preview = new Stroke_1.default([(0, RenderablePathSpec_1.pathToRenderable)(path, { fill: this.startPoint.color })]);
         return preview;
     }
     build() {

package/dist/cjs/components/builders/PolylineBuilder.d.ts

@@ -7,8 +7,11 @@ import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 import RenderingStyle from '../../rendering/RenderingStyle';
 /**
- * Creates strokes from line segments rather than Bézier curves.
+ * Creates a freehand line builder that creates strokes from line segments
+ * rather than Bézier curves.
  *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
  */
 export declare const makePolylineBuilder: ComponentBuilderFactory;
 export default class PolylineBuilder implements ComponentBuilder {

package/dist/cjs/components/builders/PolylineBuilder.js

@@ -9,8 +9,11 @@ const Stroke_1 = __importDefault(require("../Stroke"));
 const Viewport_1 = __importDefault(require("../../Viewport"));
 const makeShapeFitAutocorrect_1 = __importDefault(require("./autocorrect/makeShapeFitAutocorrect"));
 /**
- * Creates strokes from line segments rather than Bézier curves.
+ * Creates a freehand line builder that creates strokes from line segments
+ * rather than Bézier curves.
  *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
  */
 exports.makePolylineBuilder = (0, makeShapeFitAutocorrect_1.default)((initialPoint, viewport) => {
     // Fit to a value slightly smaller than the pixel size. A larger value can
@@ -48,7 +51,7 @@ class PolylineBuilder {
             stroke: {
                 color: this.startPoint.color,
                 width: this.roundDistance(this.averageWidth),
-            }
+            },
         };
     }
     previewCurrentPath() {
@@ -102,12 +105,13 @@ class PolylineBuilder {
     addPoint(newPoint) {
         this.widthAverageNumSamples++;
         this.averageWidth =
-            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
-                + newPoint.width / this.widthAverageNumSamples;
+            (this.averageWidth * (this.widthAverageNumSamples - 1)) / this.widthAverageNumSamples +
+                newPoint.width / this.widthAverageNumSamples;
         const roundedPoint = this.roundPoint(newPoint.pos);
         if (!roundedPoint.eq(this.lastPoint)) {
             // If almost exactly in the same line as the previous
-            if (this.lastLineSegment && this.lastLineSegment.direction.dot(roundedPoint.minus(this.lastPoint).normalized()) > 0.997) {
+            if (this.lastLineSegment &&
+                this.lastLineSegment.direction.dot(roundedPoint.minus(this.lastPoint).normalized()) > 0.997) {
                 this.parts.pop();
                 this.lastPoint = this.lastLineSegment.p1;
             }

package/dist/cjs/components/builders/PressureSensitiveFreehandLineBuilder.js

@@ -36,7 +36,7 @@ class PressureSensitiveFreehandLineBuilder {
         this.parts = [];
         this.upperSegments = [];
         this.lowerSegments = [];
-        this.curveFitter = new StrokeSmoother_1.StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, curve => this.addCurve(curve));
+        this.curveFitter = new StrokeSmoother_1.StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, (curve) => this.addCurve(curve));
         this.curveStartWidth = startPoint.width;
         this.bbox = new math_1.Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
     }
@@ -70,7 +70,8 @@ class PressureSensitiveFreehandLineBuilder {
         }
         let startPoint;
         const lastLowerSegment = lowerPath[lowerPath.length - 1];
-        if (lastLowerSegment.kind === math_1.PathCommandType.LineTo || lastLowerSegment.kind === math_1.PathCommandType.MoveTo) {
+        if (lastLowerSegment.kind === math_1.PathCommandType.LineTo ||
+            lastLowerSegment.kind === math_1.PathCommandType.MoveTo) {
             startPoint = lastLowerSegment.point;
         }
         else {
@@ -169,11 +170,11 @@ class PressureSensitiveFreehandLineBuilder {
         // where the next stroke and the previous stroke are in different directions.
         //
         // Are the exit/enter directions of the previous and current curves in different enough directions?
-        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.35
-            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.35
+        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.35 ||
+            getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.35 ||
             // Also handle if the curves exit/enter directions differ
-            || getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
-            || getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+            getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0 ||
+            getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
             return true;
         }
         // Check whether the lower curve intersects the other wall:
@@ -280,8 +281,9 @@ class PressureSensitiveFreehandLineBuilder {
         // Approximate the normal at the location of the control point
         const projectionT = bezier.nearestPointTo(controlPoint).parameterValue;
         const halfVecT = projectionT;
-        const halfVec = bezier.normal(halfVecT).times(curve.startWidth / 2 * halfVecT
-            + curve.endWidth / 2 * (1 - halfVecT));
+        const halfVec = bezier
+            .normal(halfVecT)
+            .times((curve.startWidth / 2) * halfVecT + (curve.endWidth / 2) * (1 - halfVecT));
         // Each starts at startPt ± startVec
         const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
         const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
@@ -324,8 +326,12 @@ class PressureSensitiveFreehandLineBuilder {
         const upperCurve = new math_1.QuadraticBezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
         const lowerCurve = new math_1.QuadraticBezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
         return {
-            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
-            upperCurve, lowerCurve,
+            upperCurveCommand,
+            upperToLowerConnector,
+            lowerToUpperConnector,
+            lowerCurveCommand,
+            upperCurve,
+            lowerCurve,
             nextCurveStartConnector,
         };
     }

package/dist/cjs/components/builders/RectangleBuilder.d.ts

@@ -4,7 +4,19 @@ import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
+/**
+ * Creates filled rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeFilledRectangleBuilder: ComponentBuilderFactory;
+/**
+ * Creates outlined rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 export declare const makeOutlinedRectangleBuilder: ComponentBuilderFactory;
 export default class RectangleBuilder implements ComponentBuilder {
     private readonly startPoint;

package/dist/cjs/components/builders/RectangleBuilder.js

@@ -8,9 +8,21 @@ const math_1 = require("@js-draw/math");
 const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
 const Stroke_1 = __importDefault(require("../Stroke"));
 const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+/**
+ * Creates filled rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 exports.makeFilledRectangleBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);
 });
+/**
+ * Creates outlined rectangles with sharp corners.
+ *
+ * Example:
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+ */
 exports.makeOutlinedRectangleBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, false, viewport);
 });
@@ -34,12 +46,14 @@ class RectangleBuilder {
         const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
         const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
         const rect = math_1.Rect2.fromCorners(startPoint, endPoint);
-        const path = math_1.Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        const path = math_1.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_1.default([
             (0, RenderablePathSpec_1.pathToRenderable)(path, {
-                fill: this.endPoint.color
+                fill: this.endPoint.color,
             }),
         ]);
         return preview;

package/dist/cjs/components/builders/autocorrect/makeShapeFitAutocorrect.js

@@ -8,14 +8,11 @@ const makeShapeFitAutocorrect = (sourceFactory) => {
 };
 exports.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) {
@@ -41,10 +38,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 = math_1.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 = math_1.Rect2.bboxOf(snappedPoints);
         // Only fit larger shapes
         if (bbox.maxDimension < 32) {

package/dist/cjs/components/builders/autocorrect/makeSnapToGridAutocorrect.js

@@ -37,7 +37,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/cjs/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/cjs/components/builders/lib.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeOutlinedRectangleBuilder = exports.makeFilledRectangleBuilder = exports.makeLineBuilder = exports.makeArrowBuilder = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makePolylineBuilder = exports.makeFreehandLineBuilder = void 0;
+var FreehandLineBuilder_1 = require("./FreehandLineBuilder");
+Object.defineProperty(exports, "makeFreehandLineBuilder", { enumerable: true, get: function () { return FreehandLineBuilder_1.makeFreehandLineBuilder; } });
+var PolylineBuilder_1 = require("./PolylineBuilder");
+Object.defineProperty(exports, "makePolylineBuilder", { enumerable: true, get: function () { return PolylineBuilder_1.makePolylineBuilder; } });
+var PressureSensitiveFreehandLineBuilder_1 = require("./PressureSensitiveFreehandLineBuilder");
+Object.defineProperty(exports, "makePressureSensitiveFreehandLineBuilder", { enumerable: true, get: function () { return PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder; } });
+var CircleBuilder_1 = require("./CircleBuilder");
+Object.defineProperty(exports, "makeOutlinedCircleBuilder", { enumerable: true, get: function () { return CircleBuilder_1.makeOutlinedCircleBuilder; } });
+var ArrowBuilder_1 = require("./ArrowBuilder");
+Object.defineProperty(exports, "makeArrowBuilder", { enumerable: true, get: function () { return ArrowBuilder_1.makeArrowBuilder; } });
+var LineBuilder_1 = require("./LineBuilder");
+Object.defineProperty(exports, "makeLineBuilder", { enumerable: true, get: function () { return LineBuilder_1.makeLineBuilder; } });
+var RectangleBuilder_1 = require("./RectangleBuilder");
+Object.defineProperty(exports, "makeFilledRectangleBuilder", { enumerable: true, get: function () { return RectangleBuilder_1.makeFilledRectangleBuilder; } });
+Object.defineProperty(exports, "makeOutlinedRectangleBuilder", { enumerable: true, get: function () { return RectangleBuilder_1.makeOutlinedRectangleBuilder; } });

package/dist/cjs/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/cjs/components/lib.js

@@ -29,16 +29,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageComponent = exports.BackgroundComponentBackgroundType = exports.BackgroundComponent = exports.StrokeComponent = exports.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makePolylineBuilder = exports.makeFreehandLineBuilder = void 0;
+exports.ImageComponent = exports.BackgroundComponentBackgroundType = exports.BackgroundComponent = exports.StrokeComponent = exports.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = void 0;
 __exportStar(require("./builders/types"), exports);
-var FreehandLineBuilder_1 = require("./builders/FreehandLineBuilder");
-Object.defineProperty(exports, "makeFreehandLineBuilder", { enumerable: true, get: function () { return FreehandLineBuilder_1.makeFreehandLineBuilder; } });
-var PolylineBuilder_1 = require("./builders/PolylineBuilder");
-Object.defineProperty(exports, "makePolylineBuilder", { enumerable: true, get: function () { return PolylineBuilder_1.makePolylineBuilder; } });
-var PressureSensitiveFreehandLineBuilder_1 = require("./builders/PressureSensitiveFreehandLineBuilder");
-Object.defineProperty(exports, "makePressureSensitiveFreehandLineBuilder", { enumerable: true, get: function () { return PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder; } });
-var CircleBuilder_1 = require("./builders/CircleBuilder");
-Object.defineProperty(exports, "makeOutlinedCircleBuilder", { enumerable: true, get: function () { return CircleBuilder_1.makeOutlinedCircleBuilder; } });
+__exportStar(require("./builders/lib"), exports);
 var StrokeSmoother_1 = require("./util/StrokeSmoother");
 Object.defineProperty(exports, "StrokeSmoother", { enumerable: true, get: function () { return __importDefault(StrokeSmoother_1).default; } });
 __exportStar(require("./AbstractComponent"), exports);

package/dist/cjs/components/util/StrokeSmoother.js

@@ -56,9 +56,7 @@ 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;
     }
@@ -99,8 +97,7 @@ 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.
@@ -153,7 +150,9 @@ 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/cjs/dialogs/makeAboutDialog.js

@@ -13,7 +13,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/cjs/dialogs/makeMessageDialog.js

@@ -20,7 +20,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);
@@ -32,7 +32,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/cjs/image/EditorImage.js

@@ -151,7 +151,7 @@ class EditorImage {
     getAllElements() {
         const leaves = this.root.getLeaves();
         (0, exports.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() {
@@ -164,7 +164,7 @@ class EditorImage {
             leaves = leaves.concat(this.background.getLeavesIntersectingRegion(region));
         }
         (0, exports.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) {
@@ -504,8 +504,8 @@ 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;
             }
@@ -541,7 +541,7 @@ 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);
         });
@@ -632,7 +632,7 @@ 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
@@ -670,7 +670,7 @@ class ImageNode {
             this.bbox = this.content.getBBox();
         }
         else {
-            this.bbox = math_1.Rect2.union(...this.children.map(child => child.getBBox()));
+            this.bbox = math_1.Rect2.union(...this.children.map((child) => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
             if (this.bbox.containsRect(oldBBox)) {
@@ -705,7 +705,7 @@ 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;
@@ -777,11 +777,11 @@ 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);
@@ -830,7 +830,7 @@ 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();
@@ -941,10 +941,8 @@ 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/cjs/image/export/editorImageToSVG.js

@@ -52,7 +52,7 @@ const editorImageToSVGSync = (image, options) => {
 };
 exports.editorImageToSVGSync = editorImageToSVGSync;
 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/cjs/inputEvents.js

@@ -34,8 +34,8 @@ const keyPressEventFromHTMLEvent = (event) => {
 };
 exports.keyPressEventFromHTMLEvent = keyPressEventFromHTMLEvent;
 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);
 };
 exports.isPointerEvt = isPointerEvt;

package/dist/cjs/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/cjs/localizations/de.js

@@ -91,11 +91,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/cjs/localizations/es.js

@@ -48,9 +48,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}`,
@@ -67,7 +71,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/cjs/rendering/Display.js

@@ -85,7 +85,7 @@ class Display {
             // Require about 105 strokes with 4 parts each to use the cache at all.
             minProportionalRenderTimeToUseCache: 105 * 4,
         });
-        this.editor.notifier.on(types_1.EditorEventType.DisplayResized, event => {
+        this.editor.notifier.on(types_1.EditorEventType.DisplayResized, (event) => {
             if (event.kind !== types_1.EditorEventType.DisplayResized) {
                 throw new Error('Mismatched event.kinds!');
             }
@@ -123,10 +123,14 @@ 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;