js-draw 0.19.0 → 0.21.0

package/dist/mjs/src/components/BackgroundComponent.mjs

@@ -0,0 +1,279 @@
+import  Color4  from '../Color4.mjs';
+import  { EditorImageEventType }  from '../EditorImage.mjs';
+import  Rect2  from '../math/Rect2.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+import  Path, { PathCommandType }  from '../math/Path.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  Viewport  from '../Viewport.mjs';
+import  { toRoundedString }  from '../math/rounding.mjs';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["Grid"] = 1] = "Grid";
+    BackgroundType[BackgroundType["None"] = 2] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+// Class name prefix indicating the size of the background's grid cells (if present).
+export const imageBackgroundGridSizeCSSPrefix = 'js-draw-image-background-grid-';
+// Flag included in rendered SVGs (etc) that indicates that the secondary color of the
+// background has been manually set.
+export const imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
+export const backgroundTypeToClassNameMap = {
+    [BackgroundType.Grid]: 'js-draw-image-background-grid',
+    [BackgroundType.SolidColor]: imageBackgroundCSSClassName,
+    [BackgroundType.None]: '',
+};
+// Represents the background of the editor's canvas.
+export default class BackgroundComponent extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        this.gridSize = Viewport.getGridSize(2);
+        this.gridStrokeWidth = 0.7;
+        this.secondaryColor = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2.empty;
+    }
+    static ofGrid(backgroundColor, gridSize, gridColor, gridStrokeWidth) {
+        const background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
+        if (gridSize !== undefined) {
+            background.gridSize = gridSize;
+        }
+        if (gridColor !== undefined) {
+            background.secondaryColor = gridColor;
+        }
+        if (gridStrokeWidth !== undefined) {
+            background.gridStrokeWidth = gridStrokeWidth;
+        }
+        return background;
+    }
+    getBackgroundType() {
+        return this.backgroundType;
+    }
+    // @internal
+    getMainColor() {
+        return this.mainColor;
+    }
+    // @internal
+    getSecondaryColor() {
+        return this.secondaryColor;
+    }
+    // @internal
+    getGridSize() {
+        return this.gridSize;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    // @internal
+    forceStyle(style, editor) {
+        const fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        // A solid background and transparent fill is equivalent to no background.
+        if (fill.eq(Color4.transparent) && this.backgroundType === BackgroundType.SolidColor) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else if (this.backgroundType === BackgroundType.None) {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
+    onAddToImage(image) {
+        if (this.viewportSizeChangeListener) {
+            console.warn('onAddToImage called when background is already in an image');
+            this.onRemoveFromImage();
+        }
+        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    }
+    onRemoveFromImage() {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    }
+    recomputeBBox(image) {
+        const importExportRect = image.getImportExportViewport().visibleRect;
+        if (!this.contentBBox.eq(importExportRect)) {
+            this.contentBBox = importExportRect;
+            // Re-render this if already added to the EditorImage.
+            image.queueRerenderOf(this);
+        }
+    }
+    generateGridPath(visibleRect) {
+        var _a, _b;
+        const targetRect = (_b = (_a = visibleRect === null || visibleRect === void 0 ? void 0 : visibleRect.grownBy(this.gridStrokeWidth)) === null || _a === void 0 ? void 0 : _a.intersection(this.contentBBox)) !== null && _b !== void 0 ? _b : this.contentBBox;
+        const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
+        const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
+        const startY = roundUpToGrid(targetRect.y);
+        const endY = roundDownToGrid(targetRect.y + targetRect.h);
+        const startX = roundUpToGrid(targetRect.x);
+        const endX = roundDownToGrid(targetRect.x + targetRect.w);
+        const result = [];
+        // Don't generate grids with a huge number of rows/columns -- such grids
+        // take a long time to render and are likely invisible due to the number of
+        // cells.
+        const rowCount = (endY - startY) / this.gridSize;
+        const colCount = (endX - startX) / this.gridSize;
+        const maxGridCols = 1000;
+        const maxGridRows = 1000;
+        if (rowCount > maxGridRows || colCount > maxGridCols) {
+            return Path.empty;
+        }
+        const startPoint = Vec2.of(targetRect.x, startY);
+        for (let y = startY; y <= endY; y += this.gridSize) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: Vec2.of(targetRect.x, y),
+            });
+            result.push({
+                kind: PathCommandType.LineTo,
+                point: Vec2.of(targetRect.x + targetRect.w, y),
+            });
+        }
+        for (let x = startX; x <= endX; x += this.gridSize) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: Vec2.of(x, targetRect.y),
+            });
+            result.push({
+                kind: PathCommandType.LineTo,
+                point: Vec2.of(x, targetRect.y + targetRect.h)
+            });
+        }
+        return new Path(startPoint, result);
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        const clip = true;
+        canvas.startObject(this.contentBBox, clip);
+        if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
+            // If the rectangle for this region contains the visible rect,
+            // we can fill the entire visible rectangle (which may be more efficient than
+            // filling the entire region for this.)
+            if (visibleRect) {
+                const intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        if (this.backgroundType === BackgroundType.Grid) {
+            let gridColor = this.secondaryColor;
+            gridColor !== null && gridColor !== void 0 ? gridColor : (gridColor = Color4.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2));
+            // If the background fill is completely transparent, ensure visibility on otherwise light
+            // and dark backgrounds.
+            if (this.mainColor.a === 0) {
+                gridColor = Color4.ofRGBA(0.5, 0.5, 0.5, 0.2);
+            }
+            const style = {
+                fill: Color4.transparent,
+                stroke: { width: this.gridStrokeWidth, color: gridColor }
+            };
+            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+        }
+        const backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];
+        const classNames = [imageBackgroundCSSClassName];
+        if (backgroundTypeCSSClass !== imageBackgroundCSSClassName) {
+            classNames.push(backgroundTypeCSSClass);
+            const gridSizeStr = toRoundedString(this.gridSize).replace(/[.]/g, 'p');
+            classNames.push(imageBackgroundGridSizeCSSPrefix + gridSizeStr);
+        }
+        if (this.secondaryColor !== null) {
+            classNames.push(imageBackgroundNonAutomaticSecondaryColorCSSClassName);
+        }
+        canvas.endObject(this.getLoadSaveData(), classNames);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    isBackground() {
+        return true;
+    }
+    serializeToJSON() {
+        var _a;
+        return {
+            mainColor: this.mainColor.toHexString(),
+            secondaryColor: (_a = this.secondaryColor) === null || _a === void 0 ? void 0 : _a.toHexString(),
+            backgroundType: this.backgroundType,
+            gridSize: this.gridSize,
+            gridStrokeWidth: this.gridStrokeWidth,
+        };
+    }
+    applyTransformation(_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    }
+    description(localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else {
+            return localizationTable.emptyBackground;
+        }
+    }
+    createClone() {
+        return new BackgroundComponent(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    static deserializeFromJSON(json) {
+        var _a, _b;
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        let backgroundType;
+        const jsonBackgroundType = json.backgroundType;
+        if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
+            || jsonBackgroundType === BackgroundType.SolidColor) {
+            backgroundType = jsonBackgroundType;
+        }
+        else {
+            const exhaustivenessCheck = jsonBackgroundType;
+            return exhaustivenessCheck;
+        }
+        const mainColor = Color4.fromHex(json.mainColor);
+        const secondaryColor = json.secondaryColor ? Color4.fromHex(json.secondaryColor) : null;
+        const gridSize = (_a = json.gridSize) !== null && _a !== void 0 ? _a : undefined;
+        const gridStrokeWidth = (_b = json.gridStrokeWidth) !== null && _b !== void 0 ? _b : undefined;
+        const result = new BackgroundComponent(backgroundType, mainColor);
+        result.secondaryColor = secondaryColor;
+        if (gridSize) {
+            result.gridSize = gridSize;
+        }
+        if (gridStrokeWidth) {
+            result.gridStrokeWidth = gridStrokeWidth;
+        }
+        return result;
+    }
+}
+AbstractComponent.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

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

@@ -53,6 +53,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     private bboxForPart;
+    getExactBBox(): Rect2;
     protected applyTransformation(affineTransfm: Mat33): void;
     /**
      * @returns the {@link Path.union} of all paths that make up this stroke.

package/dist/mjs/src/components/Stroke.mjs

@@ -109,8 +109,11 @@ export default class Stroke extends AbstractComponent {
         }
     }
     intersects(line) {
+        var _a;
         for (const part of this.parts) {
-            if (part.path.intersection(line).length > 0) {
+            const strokeWidth = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width;
+            const strokeRadius = strokeWidth ? strokeWidth / 2 : undefined;
+            if (part.path.intersection(line, strokeRadius).length > 0) {
                 return true;
             }
         }
@@ -125,7 +128,7 @@ export default class Stroke extends AbstractComponent {
                 if (!bbox.intersects(visibleRect)) {
                     continue;
                 }
-                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 3 || bbox.size.y > visibleRect.size.y * 3;
                 if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_b = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0)) {
                     continue;
                 }
@@ -144,6 +147,16 @@ export default class Stroke extends AbstractComponent {
         }
         return origBBox.grownBy(style.stroke.width / 2);
     }
+    getExactBBox() {
+        let bbox = null;
+        for (const { path, style } of this.parts) {
+            // Paths' default .bbox can be
+            const partBBox = this.bboxForPart(path.getExactBBox(), style);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = partBBox);
+            bbox = bbox.union(partBBox);
+        }
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
+    }
     applyTransformation(affineTransfm) {
         this.contentBBox = Rect2.empty;
         let isFirstPart = true;

package/dist/mjs/src/components/TextComponent.d.ts

@@ -36,19 +36,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
-    getTextStyle(): {
-        renderingStyle: {
-            fill: import("../Color4").default;
-            stroke: {
-                color: import("../Color4").default;
-                width: number;
-            } | undefined;
-        };
-        size: number;
-        fontFamily: string;
-        fontWeight?: string | undefined;
-        fontVariant?: string | undefined;
-    };
+    getTextStyle(): TextRenderingStyle;
     getBaselinePos(): import("../lib").Vec3;
     getTransform(): Mat33;
     protected applyTransformation(affineTransfm: Mat33): void;

package/dist/mjs/src/components/TextComponent.mjs

@@ -158,7 +158,7 @@ export default class TextComponent extends AbstractComponent {
             editor.queueRerender();
         }
     }
-    // See this.getStyle
+    // See {@link getStyle}
     getTextStyle() {
         return cloneTextStyle(this.style);
     }

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

@@ -9,5 +9,5 @@ import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent from './RestylableComponent';
 import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
-import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+import BackgroundComponent from './BackgroundComponent';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/src/components/lib.mjs

@@ -8,5 +8,5 @@ import  Stroke  from './Stroke.mjs';
 import  TextComponent  from './TextComponent.mjs';
 import  ImageComponent  from './ImageComponent.mjs';
 import  { createRestyleComponentCommand, isRestylableComponent }  from './RestylableComponent.mjs';
-import  ImageBackground  from './ImageBackground.mjs';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+import  BackgroundComponent  from './BackgroundComponent.mjs';
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

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

@@ -1,7 +1,7 @@
-import { Bezier } from 'bezier-js';
 import  { Vec2 }  from '../../math/Vec2.mjs';
 import  Rect2  from '../../math/Rect2.mjs';
 import  LineSegment2  from '../../math/LineSegment2.mjs';
+import  QuadraticBezier  from '../../math/polynomial/QuadraticBezier.mjs';
 // Handles stroke smoothing
 export class StrokeSmoother {
     constructor(startPoint, 
@@ -38,9 +38,9 @@ export class StrokeSmoother {
         if (!this.currentCurve) {
             return 0;
         }
-        const startPt = Vec2.ofXY(this.currentCurve.points[0]);
-        const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
-        const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+        const startPt = this.currentCurve.p0;
+        const controlPt = this.currentCurve.p1;
+        const endPt = this.currentCurve.p2;
         const toControlDist = startPt.minus(controlPt).length();
         const toEndDist = endPt.minus(controlPt).length();
         return toControlDist + toEndDist;
@@ -52,7 +52,7 @@ export class StrokeSmoother {
         }
         this.onCurveAdded(this.currentSegmentToPath());
         const lastPoint = this.buffer[this.buffer.length - 1];
-        this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
+        this.lastExitingVec = this.currentCurve.p2.minus(this.currentCurve.p1);
         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)
@@ -67,13 +67,13 @@ export class StrokeSmoother {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
         }
-        const startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+        const startVec = this.currentCurve.normal(0).normalized();
         if (!isFinite(startVec.magnitude())) {
             throw new Error(`startVec(${startVec}) is NaN or ∞`);
         }
-        const startPt = Vec2.ofXY(this.currentCurve.get(0));
-        const endPt = Vec2.ofXY(this.currentCurve.get(1));
-        const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+        const startPt = this.currentCurve.at(0);
+        const endPt = this.currentCurve.at(1);
+        const controlPoint = this.currentCurve.p1;
         return {
             startPoint: startPt,
             controlPoint,
@@ -125,7 +125,7 @@ export class StrokeSmoother {
             const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
-            this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
+            this.currentCurve = new QuadraticBezier(p1, p2, p3);
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
             if (this.isFirstSegment) {
                 // The start of a curve often lacks accurate pressure information. Update it.
@@ -146,7 +146,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.2;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -176,20 +176,28 @@ export class StrokeSmoother {
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
         const prevCurve = this.currentCurve;
-        this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
-        if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+        this.currentCurve = new QuadraticBezier(segmentStart, controlPoint, segmentEnd);
+        if (isNaN(this.currentCurve.normal(0).magnitude())) {
             console.error('NaN normal at 0. Curve:', this.currentCurve);
             this.currentCurve = prevCurve;
         }
         // Should we start making a new curve? Check whether all buffer points are within
         // ±strokeWidth of the curve.
         const curveMatchesPoints = (curve) => {
+            const minFit = Math.min(Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 4, this.minFitAllowed), this.maxFitAllowed);
+            // The sum of distances greater than minFit must not exceed this:
+            const maxNonMatchingDistSum = minFit;
+            // Sum of distances greater than minFit.
+            let nonMatchingDistSum = 0;
             for (const point of this.buffer) {
-                const proj = Vec2.ofXY(curve.project(point.xy));
-                const dist = proj.minus(point).magnitude();
-                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
-                if (dist > minFit || dist > this.maxFitAllowed) {
-                    return false;
+                let dist = curve.approximateDistance(point);
+                if (dist > minFit) {
+                    // Use the more accurate distance function
+                    dist = curve.distance(point);
+                    nonMatchingDistSum += Math.max(0, dist - minFit);
+                    if (nonMatchingDistSum > maxNonMatchingDistSum) {
+                        return false; // false: Curve doesn't match points well enough.
+                    }
                 }
             }
             return true;

package/dist/mjs/src/localizations/de.mjs

@@ -1,4 +1,4 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
 // German localization
-const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', 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', selectObjectType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, 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: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
+const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', 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', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, 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: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
 export default localization;

package/dist/mjs/src/localizations/es.mjs

@@ -6,7 +6,7 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
     loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`, undo: 'Deshace', redo: 'Rehace', 
     // Strings for the toolbar
     // (see src/toolbar/localization.ts)
-    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown(toolName) {
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectPenType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown(toolName) {
         return `Menú por ${toolName} es visible`;
     }, dropdownHidden: function (toolName) {
         return `Menú por ${toolName} fue ocultado`;

package/dist/mjs/src/math/LineSegment2.d.ts

@@ -18,6 +18,8 @@ export default class LineSegment2 {
     intersection(other: LineSegment2): IntersectionResult | null;
     intersects(other: LineSegment2): boolean;
     closestPointTo(target: Point2): import("./Vec3").default;
+    /** Returns the distance from this line segment to `target`. */
+    distance(target: Point2): number;
     transformedBy(affineTransfm: Mat33): LineSegment2;
     toString(): string;
 }

package/dist/mjs/src/math/LineSegment2.mjs

@@ -116,6 +116,10 @@ export default class LineSegment2 {
             return this.p1;
         }
     }
+    /** Returns the distance from this line segment to `target`. */
+    distance(target) {
+        return this.closestPointTo(target).minus(target).magnitude();
+    }
     transformedBy(affineTransfm) {
         return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));
     }

package/dist/mjs/src/math/Path.d.ts

@@ -32,21 +32,42 @@ export interface MoveToPathCommand {
 }
 export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
-    curve: LineSegment2 | Bezier;
+    curve: LineSegment2 | Bezier | Point2;
     parameterValue: number;
     point: Point2;
 }
+type GeometryType = LineSegment2 | Bezier | Point2;
+type GeometryArrayType = Array<GeometryType>;
 export default class Path {
     readonly startPoint: Point2;
     readonly parts: PathCommand[];
+    /**
+     * A rough estimate of the bounding box of the path.
+     * A slight overestimate.
+     * See {@link getExactBBox}
+     */
     readonly bbox: Rect2;
     constructor(startPoint: Point2, parts: PathCommand[]);
+    getExactBBox(): Rect2;
     private cachedGeometry;
-    get geometry(): Array<LineSegment2 | Bezier>;
+    get geometry(): GeometryArrayType;
     private cachedPolylineApproximation;
     polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
-    intersection(line: LineSegment2): IntersectionResult[];
+    /**
+     * Let `S` be a closed path a distance `strokeRadius` from this path.
+     *
+     * @returns Approximate intersections of `line` with `S` using ray marching, starting from
+     * 	        both end points of `line` and each point in `additionalRaymarchStartPoints`.
+     */
+    private raymarchIntersectionWith;
+    /**
+     * Returns a list of intersections with this path. If `strokeRadius` is given,
+     * intersections are approximated with the surface `strokeRadius` away from this.
+     *
+     * If `strokeRadius > 0`, the resultant `parameterValue` has no defined value.
+     */
+    intersection(line: LineSegment2, strokeRadius?: number): IntersectionResult[];
     private static mapPathCommand;
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;