js-draw 1.17.0 → 1.19.1

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

@@ -6,6 +6,7 @@ import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
 import RenderablePathSpec, { RenderablePathSpecWithPath } from '../rendering/RenderablePathSpec';
+import Viewport from '../Viewport';
 /**
  * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
  *
@@ -46,10 +47,12 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
      * ]);
      * ```
      */
-    constructor(parts: RenderablePathSpec[]);
+    constructor(parts: RenderablePathSpec[], initialZIndex?: number);
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    /** @beta -- May fail for concave `path`s */
+    withRegionErased(eraserPath: Path, viewport: Viewport): Stroke[];
     intersects(line: LineSegment2): boolean;
     intersectsRect(rect: Rect2): boolean;
     private simplifiedPath;

package/dist/mjs/components/Stroke.mjs

@@ -1,4 +1,4 @@
-import { Path, Rect2 } from '@js-draw/math';
+import { Path, Rect2, PathCommandType, comparePathIndices, stepPathIndexBy } from '@js-draw/math';
 import  { styleFromJSON, styleToJSON }  from '../rendering/RenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
@@ -39,8 +39,8 @@ export default class Stroke extends AbstractComponent {
      * ]);
      * ```
      */
-    constructor(parts) {
-        super('stroke');
+    constructor(parts, initialZIndex) {
+        super('stroke', initialZIndex);
         // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
@@ -118,6 +118,162 @@ export default class Stroke extends AbstractComponent {
             editor.queueRerender();
         }
     }
+    /** @beta -- May fail for concave `path`s */
+    withRegionErased(eraserPath, viewport) {
+        const polyline = eraserPath.polylineApproximation();
+        const isPointInsideEraser = (point) => {
+            return eraserPath.closedContainsPoint(point);
+        };
+        const newStrokes = [];
+        let failedAssertions = false;
+        for (const part of this.parts) {
+            const path = part.path;
+            const makeStroke = (path) => {
+                if (part.style.fill.a > 0) {
+                    // Remove visually empty paths.
+                    if (path.parts.length < 1 || (path.parts.length === 1 && path.parts[0].kind === PathCommandType.LineTo)) {
+                        // TODO: If this isn't present, a very large number of strokes are created while erasing.
+                        return null;
+                    }
+                    else {
+                        // Filled paths must be closed (allows for optimizations elsewhere)
+                        path = path.asClosed();
+                    }
+                }
+                if (isNaN(path.getExactBBox().area)) {
+                    console.warn('Prevented creating a stroke with NaN area');
+                    failedAssertions = true;
+                    return null;
+                }
+                return new Stroke([pathToRenderable(path, part.style)], this.getZIndex());
+            };
+            const intersectionPoints = [];
+            // If stroked, finds intersections with the middle of the stroke.
+            // If filled, finds intersections with the edge of the stroke.
+            for (const segment of polyline) {
+                intersectionPoints.push(...path.intersection(segment));
+            }
+            // When stroked, if the stroke width is significantly larger than the eraser,
+            // it can't intersect both the edge of the stroke and its middle at the same time
+            // (generally, erasing is triggered by the eraser touching the edge of this stroke).
+            //
+            // As such, we also look for intersections along the edge of this, if none with the
+            // center were found, but only within a certain range of sizes because:
+            // 1. Intersection testing with stroked paths is generally much slower than with
+            //    non-stroked paths.
+            // 2. If zoomed in significantly, it's unlikely that the user wants to erase a large
+            //    part of the stroke.
+            let isErasingFromEdge = false;
+            if (intersectionPoints.length === 0
+                && part.style.stroke
+                && part.style.stroke.width > eraserPath.bbox.minDimension * 0.3
+                && part.style.stroke.width < eraserPath.bbox.maxDimension * 30) {
+                for (const segment of polyline) {
+                    intersectionPoints.push(...path.intersection(segment, part.style.stroke.width / 2));
+                }
+                isErasingFromEdge = true;
+            }
+            // Sort first by curve index, then by parameter value
+            intersectionPoints.sort(comparePathIndices);
+            const isInsideJustBeforeFirst = (() => {
+                if (intersectionPoints.length === 0) {
+                    return false;
+                }
+                // The eraser may not be near the center of the curve -- approximate.
+                if (isErasingFromEdge) {
+                    return intersectionPoints[0].curveIndex === 0 && intersectionPoints[0].parameterValue <= 0;
+                }
+                const justBeforeFirstIntersection = stepPathIndexBy(intersectionPoints[0], -1e-10);
+                return isPointInsideEraser(path.at(justBeforeFirstIntersection));
+            })();
+            let intersectionCount = isInsideJustBeforeFirst ? 1 : 0;
+            const addNewPath = (path, knownToBeInside) => {
+                const component = makeStroke(path);
+                let isInside = intersectionCount % 2 === 1;
+                intersectionCount++;
+                if (knownToBeInside !== undefined) {
+                    isInside = knownToBeInside;
+                }
+                // Here, we work around bugs in the underlying Bezier curve library
+                // (including https://github.com/Pomax/bezierjs/issues/179).
+                // Even if not all intersections are returned correctly, we still want
+                // isInside to be roughly correct.
+                if (knownToBeInside === undefined && !isInside && eraserPath.closedContainsPoint(path.getExactBBox().center)) {
+                    isInside = !isInside;
+                }
+                if (!component) {
+                    return;
+                }
+                // Assertion: Avoid deleting sections that are much larger than the eraser.
+                failedAssertions ||= isInside && path.getExactBBox().maxDimension > eraserPath.getExactBBox().maxDimension * 2;
+                if (!isInside) {
+                    newStrokes.push(component);
+                }
+            };
+            if (part.style.fill.a === 0) { // Not filled?
+                // An additional case where we erase completely -- without the padding of the stroke,
+                // the path is smaller than the eraser (allows us to erase dots completely).
+                const shouldEraseCompletely = eraserPath.getExactBBox().maxDimension / 10 > path.getExactBBox().maxDimension;
+                if (!shouldEraseCompletely) {
+                    const split = path.splitAt(intersectionPoints, { mapNewPoint: p => viewport.roundPoint(p) });
+                    for (const splitPart of split) {
+                        addNewPath(splitPart);
+                    }
+                }
+            }
+            else if (intersectionPoints.length >= 2 && intersectionPoints.length % 2 === 0) {
+                // TODO: Support subtractive erasing on small scales -- see https://github.com/personalizedrefrigerator/js-draw/pull/63/commits/568686e2384219ad0bb07617ea4efff1540aed00
+                //       for a broken implementation.
+                //
+                // We currently assume that a 4-point intersection means that the intersection
+                // looks similar to this:
+                //   -----------
+                //  |   STROKE  |
+                //  |           |
+                //%%x-----------x%%%%%%%
+                //%                    %
+                //%      ERASER        %
+                //%                    %
+                //%%x-----------x%%%%%%%
+                //  |   STROKE  |
+                //   -----------
+                //
+                // Our goal is to separate STROKE into the contiguous parts outside
+                // of the eraser (as shown above).
+                //
+                // To do this, we split STROKE at each intersection:
+                //   3 3 3 3 3 3
+                //  3   STROKE  3
+                //  3           3
+                //  x           x
+                //  2           4
+                //  2   STROKE  4
+                //  2           4
+                //  x           x
+                //  1   STROKE  5
+                //   . 5 5 5 5 5
+                //   ^
+                // Start
+                //
+                // The difficulty here is correctly pairing edges to create the the output
+                // strokes, particularly because we don't know the order of intersection points.
+                const parts = path.splitAt(intersectionPoints, { mapNewPoint: p => viewport.roundPoint(p) });
+                for (let i = 0; i < Math.floor(parts.length / 2); i++) {
+                    addNewPath(parts[i].union(parts[parts.length - i - 1]).asClosed());
+                }
+                if (parts.length % 2 !== 0) {
+                    addNewPath(parts[Math.floor(parts.length / 2)].asClosed());
+                }
+            }
+            else {
+                addNewPath(path, false);
+            }
+        }
+        if (failedAssertions) {
+            return [this];
+        }
+        return newStrokes;
+    }
     intersects(line) {
         for (const part of this.parts) {
             const strokeWidth = part.style.stroke?.width;

package/dist/mjs/components/TextComponent.mjs

@@ -83,7 +83,9 @@ class TextComponent extends AbstractComponent {
     }
     static applyTextStyles(ctx, style) {
         // Quote the font family if necessary.
-        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+        const hasSpaces = style.fontFamily.match(/\s/);
+        const isQuoted = style.fontFamily.match(/^".*"$/);
+        const fontFamily = hasSpaces && !isQuoted ? `"${style.fontFamily.replace(/["]/g, '\\"')}"` : style.fontFamily;
         ctx.font = [
             style.fontStyle ?? '',
             style.fontWeight ?? '',

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

@@ -9,7 +9,6 @@ import RenderingStyle from '../../rendering/RenderingStyle';
 /**
  * Creates strokes from line segments rather than Bézier curves.
  *
- * @beta Output behavior may change significantly between versions. For now, intended for debugging.
  */
 export declare const makePolylineBuilder: ComponentBuilderFactory;
 export default class PolylineBuilder implements ComponentBuilder {
@@ -21,6 +20,7 @@ export default class PolylineBuilder implements ComponentBuilder {
     private widthAverageNumSamples;
     private lastPoint;
     private startPoint;
+    private lastLineSegment;
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, viewport: Viewport);
     getBBox(): Rect2;
     protected getRenderingStyle(): RenderingStyle;

package/dist/mjs/components/builders/PolylineBuilder.mjs

@@ -1,11 +1,10 @@
-import { Rect2, Color4, PathCommandType } from '@js-draw/math';
+import { Rect2, Color4, PathCommandType, Vec2, LineSegment2 } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs';
 /**
  * Creates strokes from line segments rather than Bézier curves.
  *
- * @beta Output behavior may change significantly between versions. For now, intended for debugging.
  */
 export const makePolylineBuilder = makeShapeFitAutocorrect((initialPoint, viewport) => {
     const minFit = viewport.getSizeOfPixelOnCanvas();
@@ -17,6 +16,7 @@ export default class PolylineBuilder {
         this.viewport = viewport;
         this.parts = [];
         this.widthAverageNumSamples = 1;
+        this.lastLineSegment = null;
         this.averageWidth = startPoint.width;
         this.startPoint = {
             ...startPoint,
@@ -50,7 +50,7 @@ export default class PolylineBuilder {
         if (commands.length <= 1) {
             commands.push({
                 kind: PathCommandType.LineTo,
-                point: startPoint,
+                point: startPoint.plus(Vec2.of(this.averageWidth / 4, 0)),
             });
         }
         return {
@@ -98,11 +98,18 @@ export default class PolylineBuilder {
                 + 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) {
+                this.parts.pop();
+                this.lastPoint = this.lastLineSegment.p1;
+            }
             this.parts.push({
                 kind: PathCommandType.LineTo,
                 point: this.roundPoint(newPoint.pos),
             });
             this.bbox = this.bbox.grownToPoint(roundedPoint);
+            this.lastLineSegment = new LineSegment2(this.lastPoint, roundedPoint);
+            this.lastPoint = roundedPoint;
         }
     }
 }

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

@@ -12,6 +12,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
     private isFirstSegment;
     private pathStartConnector;
     private mostRecentConnector;
+    private nextCurveStartConnector;
     private upperSegments;
     private lowerSegments;
     private lastUpperBezier;
@@ -25,7 +26,6 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
     private getRenderingStyle;
     private previewCurrentPath;
     private previewFullPath;
-    private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs

@@ -1,5 +1,4 @@
-import { Bezier } from 'bezier-js';
-import { Vec2, Rect2, PathCommandType } from '@js-draw/math';
+import { Vec2, Rect2, PathCommandType, QuadraticBezier } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
@@ -25,6 +24,7 @@ export default class PressureSensitiveFreehandLineBuilder {
         this.isFirstSegment = true;
         this.pathStartConnector = null;
         this.mostRecentConnector = null;
+        this.nextCurveStartConnector = null;
         this.lastUpperBezier = null;
         this.lastLowerBezier = null;
         this.parts = [];
@@ -42,18 +42,18 @@ export default class PressureSensitiveFreehandLineBuilder {
             fill: this.startPoint.color ?? null,
         };
     }
-    previewCurrentPath() {
+    previewCurrentPath(extendWithLatest = true) {
         const upperPath = this.upperSegments.slice();
         const lowerPath = this.lowerSegments.slice();
         let lowerToUpperCap;
         let pathStartConnector;
         const currentCurve = this.curveFitter.preview();
-        if (currentCurve) {
+        if (currentCurve && extendWithLatest) {
             const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand } = this.segmentToPath(currentCurve);
             upperPath.push(upperCurveCommand);
             lowerPath.push(lowerCurveCommand);
             lowerToUpperCap = lowerToUpperConnector;
-            pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
+            pathStartConnector = this.pathStartConnector ?? [upperToLowerConnector];
         }
         else {
             if (this.mostRecentConnector === null || this.pathStartConnector === null) {
@@ -94,7 +94,7 @@ export default class PressureSensitiveFreehandLineBuilder {
                 //  __/  __/
                 // /___ /
                 // •
-                pathStartConnector,
+                ...pathStartConnector,
                 // Move back to the start point:
                 //     •
                 //  __/  __/
@@ -111,13 +111,6 @@ export default class PressureSensitiveFreehandLineBuilder {
         }
         return null;
     }
-    previewStroke() {
-        const pathPreview = this.previewFullPath();
-        if (pathPreview) {
-            return new Stroke(pathPreview);
-        }
-        return null;
-    }
     preview(renderer) {
         const paths = this.previewFullPath();
         if (paths) {
@@ -135,7 +128,7 @@ export default class PressureSensitiveFreehandLineBuilder {
             // Ensure we have something.
             this.addCurve(null);
         }
-        return this.previewStroke();
+        return new Stroke(this.previewFullPath());
     }
     roundPoint(point) {
         let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
@@ -150,25 +143,16 @@ export default class PressureSensitiveFreehandLineBuilder {
             return false;
         }
         const getIntersection = (curve1, curve2) => {
-            const intersection = curve1.intersects(curve2);
-            if (!intersection || intersection.length === 0) {
+            const intersections = curve1.intersectsBezier(curve2);
+            if (!intersections.length)
                 return null;
-            }
-            // From http://pomax.github.io/bezierjs/#intersect-curve,
-            // .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
-            const firstTPair = intersection[0];
-            const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
-            if (!match) {
-                throw new Error(`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`);
-            }
-            const t = parseFloat(match[1]);
-            return Vec2.ofXY(curve1.get(t));
+            return intersections[0].point;
         };
         const getExitDirection = (curve) => {
-            return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
+            return curve.p2.minus(curve.p1).normalized();
         };
         const getEnterDirection = (curve) => {
-            return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
+            return curve.p1.minus(curve.p0).normalized();
         };
         // Prevent
         //         /
@@ -179,8 +163,8 @@ export default 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.3
-            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
+        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) {
@@ -236,32 +220,37 @@ export default class PressureSensitiveFreehandLineBuilder {
                 controlPoint: center.plus(Vec2.of(width, -width)),
                 endPoint: center.plus(Vec2.of(width, 0)),
             });
-            this.pathStartConnector = {
+            const connector = {
                 kind: PathCommandType.LineTo,
                 point: startPoint,
             };
-            this.mostRecentConnector = this.pathStartConnector;
+            this.pathStartConnector = [connector];
+            this.mostRecentConnector = connector;
             return;
         }
-        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, } = this.segmentToPath(curve);
-        const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, nextCurveStartConnector, } = this.segmentToPath(curve);
+        let shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
         if (shouldStartNew) {
-            const part = this.previewCurrentPath();
+            const part = this.previewCurrentPath(false);
             if (part) {
                 this.parts.push(part);
                 this.upperSegments = [];
                 this.lowerSegments = [];
             }
+            else {
+                shouldStartNew = false;
+            }
         }
         if (this.isFirstSegment || shouldStartNew) {
             // We draw the upper path (reversed), then the lower path, so we need the
             // upperToLowerConnector to join the two paths.
-            this.pathStartConnector = upperToLowerConnector;
+            this.pathStartConnector = this.nextCurveStartConnector ?? [upperToLowerConnector];
             this.isFirstSegment = false;
         }
         // With the most recent connector, we're joining the end of the lowerPath to the most recent
         // upperPath:
         this.mostRecentConnector = lowerToUpperConnector;
+        this.nextCurveStartConnector = nextCurveStartConnector;
         this.lowerSegments.push(lowerCurveCommand);
         this.upperSegments.push(upperCurveCommand);
         this.lastLowerBezier = lowerCurve;
@@ -270,9 +259,9 @@ export default class PressureSensitiveFreehandLineBuilder {
     }
     // Returns [upper curve, connector, lower curve]
     segmentToPath(curve) {
-        const bezier = new Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
-        let startVec = Vec2.ofXY(bezier.normal(0)).normalized();
-        let endVec = Vec2.ofXY(bezier.normal(1)).normalized();
+        const bezier = new QuadraticBezier(curve.startPoint, curve.controlPoint, curve.endPoint);
+        let startVec = bezier.normal(0);
+        let endVec = bezier.normal(1);
         startVec = startVec.times(curve.startWidth / 2);
         endVec = endVec.times(curve.endWidth / 2);
         if (!isFinite(startVec.magnitude())) {
@@ -283,18 +272,9 @@ export default class PressureSensitiveFreehandLineBuilder {
         const endPt = curve.endPoint;
         const controlPoint = curve.controlPoint;
         // Approximate the normal at the location of the control point
-        let projectionT = bezier.project(controlPoint.xy).t;
-        if (!projectionT) {
-            if (startPt.squareDistanceTo(controlPoint) < endPt.squareDistanceTo(controlPoint)) {
-                projectionT = 0.1;
-            }
-            else {
-                projectionT = 0.9;
-            }
-        }
+        const projectionT = bezier.nearestPointTo(controlPoint).parameterValue;
         const halfVecT = projectionT;
-        const halfVec = Vec2.ofXY(bezier.normal(halfVecT))
-            .normalized().times(curve.startWidth / 2 * 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));
@@ -318,16 +298,29 @@ export default class PressureSensitiveFreehandLineBuilder {
             kind: PathCommandType.LineTo,
             point: upperCurveStartPoint,
         };
+        // The segment to be used to start the next path (to insert to connect the start of its
+        // lower and the end of its upper).
+        const nextCurveStartConnector = [
+            {
+                kind: PathCommandType.LineTo,
+                point: upperCurveStartPoint,
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: lowerCurveEndPoint,
+            },
+        ];
         const upperCurveCommand = {
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint: upperCurveControlPoint,
             endPoint: upperCurveEndPoint,
         };
-        const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
-        const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        const upperCurve = new QuadraticBezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new QuadraticBezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
         return {
             upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
             upperCurve, lowerCurve,
+            nextCurveStartConnector,
         };
     }
     addPoint(newPoint) {

package/dist/mjs/image/EditorImage.mjs

@@ -629,7 +629,7 @@ export class ImageNode {
             this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            if (!this.bbox.containsRect(oldBBox)) {
+            if (this.bbox.containsRect(oldBBox)) {
                 this.parent?.unionBBoxWith(this.bbox);
             }
             else {

package/dist/mjs/localizations/de.mjs

@@ -27,7 +27,7 @@ const localization = {
     selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.',
     touchPanning: 'Ansicht mit Touchscreen verschieben',
     anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
-    selectPenTip: 'Objekt-Typ: ',
+    selectPenType: 'Objekt-Typ: ',
     roundedTipPen: 'Freihand',
     flatTipPen: 'Stift (druckempfindlich)',
     arrowPen: 'Pfeil',

package/dist/mjs/localizations/es.mjs

@@ -22,7 +22,7 @@ const localization = {
     save: 'Guardar',
     undo: 'Deshace',
     redo: 'Rehace',
-    selectPenTip: 'Punta',
+    selectPenType: 'Punta',
     selectShape: 'Forma',
     pickColorFromScreen: 'Selecciona un color de la pantalla',
     clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',

package/dist/mjs/rendering/caching/RenderingCacheNode.mjs

@@ -139,24 +139,29 @@ export default class RenderingCacheNode {
             || items.length === 0) {
             return;
         }
-        const newItems = [];
-        // Divide [items] until nodes are leaves or smaller than this
-        for (const item of items) {
-            const bbox = item.getBBox();
-            if (!bbox.intersects(this.region)) {
-                continue;
-            }
-            if (bbox.maxDimension >= this.region.maxDimension) {
-                newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
-            }
-            else {
-                newItems.push(item);
+        // Divide [items] until nodes are smaller than this, or are leaves.
+        const divideUntilSmallerThanThis = (itemsToDivide) => {
+            const newItems = [];
+            for (const item of itemsToDivide) {
+                const bbox = item.getBBox();
+                if (!bbox.intersects(this.region)) {
+                    continue;
+                }
+                if (bbox.maxDimension >= this.region.maxDimension) {
+                    newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
+                }
+                else {
+                    newItems.push(item);
+                }
             }
-        }
-        items = newItems;
+            return newItems;
+        };
+        items = divideUntilSmallerThanThis(items);
         // Can we cache at all?
         if (!this.cacheState.props.isOfCorrectType(screenRenderer)) {
-            items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
+            for (const item of items) {
+                item.render(screenRenderer, viewport.visibleRect);
+            }
             return;
         }
         if (this.cacheState.debugMode) {

package/dist/mjs/testing/createEditor.d.ts

@@ -1,4 +1,4 @@
-import Editor from '../Editor';
+import Editor, { EditorSettings } from '../Editor';
 /** Creates an editor. Should only be used in test files. */
-declare const _default: () => Editor;
+declare const _default: (settings?: Partial<EditorSettings>) => Editor;
 export default _default;

package/dist/mjs/testing/createEditor.mjs

@@ -1,9 +1,9 @@
 import  { RenderingMode }  from '../rendering/Display.mjs';
 import  Editor  from '../Editor.mjs';
 /** Creates an editor. Should only be used in test files. */
-export default () => {
+export default (settings) => {
     if (jest === undefined) {
         throw new Error('Files in the testing/ folder should only be used in tests!');
     }
-    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer, ...settings });
 };

package/dist/mjs/testing/findNodeWithText.d.ts

@@ -0,0 +1,3 @@
+/** Returns the first node or element with `textContent` matching `expectedText`. */
+declare const findNodeWithText: (expectedText: string, parent: Node) => Node | null;
+export default findNodeWithText;

package/dist/mjs/testing/findNodeWithText.mjs

@@ -0,0 +1,14 @@
+/** Returns the first node or element with `textContent` matching `expectedText`. */
+const findNodeWithText = (expectedText, parent) => {
+    if (parent.textContent === expectedText) {
+        return parent;
+    }
+    for (const child of parent.childNodes) {
+        const results = findNodeWithText(expectedText, child);
+        if (results) {
+            return results;
+        }
+    }
+    return null;
+};
+export default findNodeWithText;

package/dist/mjs/testing/firstElementAncestorOfNode.d.ts

@@ -0,0 +1,3 @@
+/** Returns the first ancestor of the given node that is an HTMLElement */
+declare const firstElementAncestorOfNode: (node: Node | null) => HTMLElement | null;
+export default firstElementAncestorOfNode;

package/dist/mjs/testing/firstElementAncestorOfNode.mjs

@@ -0,0 +1,11 @@
+/** Returns the first ancestor of the given node that is an HTMLElement */
+const firstElementAncestorOfNode = (node) => {
+    if (node instanceof HTMLElement) {
+        return node;
+    }
+    else if (node?.parentNode) {
+        return firstElementAncestorOfNode(node.parentNode);
+    }
+    return null;
+};
+export default firstElementAncestorOfNode;

package/dist/mjs/testing/sendKeyPressRelease.d.ts

@@ -0,0 +1,3 @@
+import type Editor from '../Editor';
+declare const sendKeyPressRelease: (editor: Editor, key: string) => void;
+export default sendKeyPressRelease;