js-draw 0.19.0 → 0.21.0

package/dist/cjs/src/components/BackgroundComponent.js

@@ -0,0 +1,309 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backgroundTypeToClassNameMap = exports.imageBackgroundNonAutomaticSecondaryColorCSSClassName = exports.imageBackgroundGridSizeCSSPrefix = exports.imageBackgroundCSSClassName = exports.BackgroundType = void 0;
+const Color4_1 = __importDefault(require("../Color4"));
+const EditorImage_1 = require("../EditorImage");
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const RestylableComponent_1 = require("./RestylableComponent");
+const Path_1 = __importStar(require("../math/Path"));
+const Vec2_1 = require("../math/Vec2");
+const Viewport_1 = __importDefault(require("../Viewport"));
+const rounding_1 = require("../math/rounding");
+var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["Grid"] = 1] = "Grid";
+    BackgroundType[BackgroundType["None"] = 2] = "None";
+})(BackgroundType = exports.BackgroundType || (exports.BackgroundType = {}));
+exports.imageBackgroundCSSClassName = 'js-draw-image-background';
+// Class name prefix indicating the size of the background's grid cells (if present).
+exports.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.
+exports.imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
+exports.backgroundTypeToClassNameMap = {
+    [BackgroundType.Grid]: 'js-draw-image-background-grid',
+    [BackgroundType.SolidColor]: exports.imageBackgroundCSSClassName,
+    [BackgroundType.None]: '',
+};
+// Represents the background of the editor's canvas.
+class BackgroundComponent extends AbstractComponent_1.default {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        this.gridSize = Viewport_1.default.getGridSize(2);
+        this.gridStrokeWidth = 0.7;
+        this.secondaryColor = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2_1.default.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 (0, RestylableComponent_1.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_1.default.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(EditorImage_1.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_1.default.empty;
+        }
+        const startPoint = Vec2_1.Vec2.of(targetRect.x, startY);
+        for (let y = startY; y <= endY; y += this.gridSize) {
+            result.push({
+                kind: Path_1.PathCommandType.MoveTo,
+                point: Vec2_1.Vec2.of(targetRect.x, y),
+            });
+            result.push({
+                kind: Path_1.PathCommandType.LineTo,
+                point: Vec2_1.Vec2.of(targetRect.x + targetRect.w, y),
+            });
+        }
+        for (let x = startX; x <= endX; x += this.gridSize) {
+            result.push({
+                kind: Path_1.PathCommandType.MoveTo,
+                point: Vec2_1.Vec2.of(x, targetRect.y),
+            });
+            result.push({
+                kind: Path_1.PathCommandType.LineTo,
+                point: Vec2_1.Vec2.of(x, targetRect.y + targetRect.h)
+            });
+        }
+        return new Path_1.default(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_1.default.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_1.default.ofRGBA(0.5, 0.5, 0.5, 0.2);
+            }
+            const style = {
+                fill: Color4_1.default.transparent,
+                stroke: { width: this.gridStrokeWidth, color: gridColor }
+            };
+            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+        }
+        const backgroundTypeCSSClass = exports.backgroundTypeToClassNameMap[this.backgroundType];
+        const classNames = [exports.imageBackgroundCSSClassName];
+        if (backgroundTypeCSSClass !== exports.imageBackgroundCSSClassName) {
+            classNames.push(backgroundTypeCSSClass);
+            const gridSizeStr = (0, rounding_1.toRoundedString)(this.gridSize).replace(/[.]/g, 'p');
+            classNames.push(exports.imageBackgroundGridSizeCSSPrefix + gridSizeStr);
+        }
+        if (this.secondaryColor !== null) {
+            classNames.push(exports.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_1.default.fromHex(json.mainColor);
+        const secondaryColor = json.secondaryColor ? Color4_1.default.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;
+    }
+}
+exports.default = BackgroundComponent;
+AbstractComponent_1.default.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

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

@@ -114,8 +114,11 @@ class Stroke extends AbstractComponent_1.default {
         }
     }
     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;
             }
         }
@@ -130,7 +133,7 @@ class Stroke extends AbstractComponent_1.default {
                 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;
                 }
@@ -149,6 +152,16 @@ class Stroke extends AbstractComponent_1.default {
         }
         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_1.default.empty;
+    }
     applyTransformation(affineTransfm) {
         this.contentBBox = Rect2_1.default.empty;
         let isFirstPart = true;

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

@@ -163,7 +163,7 @@ class TextComponent extends AbstractComponent_1.default {
             editor.queueRerender();
         }
     }
-    // See this.getStyle
+    // See {@link getStyle}
     getTextStyle() {
         return (0, TextRenderingStyle_1.cloneTextStyle)(this.style);
     }

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

@@ -39,5 +39,5 @@ exports.ImageComponent = ImageComponent_1.default;
 const RestylableComponent_1 = require("./RestylableComponent");
 Object.defineProperty(exports, "createRestyleComponentCommand", { enumerable: true, get: function () { return RestylableComponent_1.createRestyleComponentCommand; } });
 Object.defineProperty(exports, "isRestylableComponent", { enumerable: true, get: function () { return RestylableComponent_1.isRestylableComponent; } });
-const ImageBackground_1 = __importDefault(require("./ImageBackground"));
-exports.BackgroundComponent = ImageBackground_1.default;
+const BackgroundComponent_1 = __importDefault(require("./BackgroundComponent"));
+exports.BackgroundComponent = BackgroundComponent_1.default;

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

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StrokeSmoother = void 0;
-const bezier_js_1 = require("bezier-js");
 const Vec2_1 = require("../../math/Vec2");
 const Rect2_1 = __importDefault(require("../../math/Rect2"));
 const LineSegment2_1 = __importDefault(require("../../math/LineSegment2"));
+const QuadraticBezier_1 = __importDefault(require("../../math/polynomial/QuadraticBezier"));
 // Handles stroke smoothing
 class StrokeSmoother {
     constructor(startPoint, 
@@ -44,9 +44,9 @@ class StrokeSmoother {
         if (!this.currentCurve) {
             return 0;
         }
-        const startPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[0]);
-        const controlPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[1]);
-        const endPt = Vec2_1.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;
@@ -58,7 +58,7 @@ class StrokeSmoother {
         }
         this.onCurveAdded(this.currentSegmentToPath());
         const lastPoint = this.buffer[this.buffer.length - 1];
-        this.lastExitingVec = Vec2_1.Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2_1.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)
@@ -73,13 +73,13 @@ class StrokeSmoother {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
         }
-        const startVec = Vec2_1.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_1.Vec2.ofXY(this.currentCurve.get(0));
-        const endPt = Vec2_1.Vec2.ofXY(this.currentCurve.get(1));
-        const controlPoint = Vec2_1.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,
@@ -131,7 +131,7 @@ class StrokeSmoother {
             const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2_1.Vec2.unitX);
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
-            this.currentCurve = new bezier_js_1.Bezier(p1.xy, p2.xy, p3.xy);
+            this.currentCurve = new QuadraticBezier_1.default(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.
@@ -152,7 +152,7 @@ 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();
@@ -182,20 +182,28 @@ 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_js_1.Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
-        if (isNaN(Vec2_1.Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+        this.currentCurve = new QuadraticBezier_1.default(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_1.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/cjs/src/localizations/de.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const localization_1 = require("../localization");
 // German localization
-const localization = Object.assign(Object.assign({}, localization_1.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({}, localization_1.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}` });
 exports.default = localization;

package/dist/cjs/src/localizations/es.js

@@ -8,7 +8,7 @@ const localization = Object.assign(Object.assign({}, localization_1.defaultEdito
     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/cjs/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/cjs/src/math/LineSegment2.js

@@ -121,6 +121,10 @@ 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/cjs/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;