js-draw 1.17.0 → 1.18.0

package/dist/cjs/Editor.d.ts

@@ -79,30 +79,28 @@ export interface EditorSettings {
      * Configures the default pen tools.
      *
      * **Example**:
-     * ```ts,runnable
-     * import { Editor, makePolylineBuilder } from 'js-draw';
-     *
-     * const editor = new Editor(document.body, {
-     *     pens: {
-     *         additionalPenTypes: [{
-     *             name: 'Polyline (For debugging)',
-     *             id: 'custom-polyline',
-     *             factory: makePolylineBuilder,
-     *
-     *             // The pen doesn't create fixed shapes (e.g. squares, rectangles, etc)
-     *             // and so should go under the "pens" section.
-     *             isShapeBuilder: false,
-     *         }],
-     *     },
-     * });
-     * editor.addToolbar();
-     * ```
+     * [[include:doc-pages/inline-examples/editor-settings-polyline-pen.md]]
      */
     pens: {
         /**
          * Additional pen types that can be selected in a toolbar.
          */
-        additionalPenTypes: readonly Readonly<PenTypeRecord>[];
+        additionalPenTypes?: readonly Readonly<PenTypeRecord>[];
+        /**
+         * Should return `true` if a pen type should be shown in the toolbar.
+         *
+         * @example
+         * ```ts,runnable
+         * import {Editor} from 'js-draw';
+         * const editor = new Editor(document.body, {
+         *   // Only allow selecting the polyline pen from the toolbar.
+         *   pens: { filterPenTypes: p => p.id === 'polyline-pen' },
+         * });
+         * editor.addToolbar();
+         * ```
+         * Notice that this setting only affects the toolbar GUI.
+         */
+        filterPenTypes?: (penType: PenTypeRecord) => boolean;
     } | null;
 }
 /**
@@ -123,7 +121,7 @@ export interface EditorSettings {
  * ```
  *
  * See also
- * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts).
+ * * [`examples.md`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md).
  */
 export declare class Editor {
     private container;

package/dist/cjs/Editor.js

@@ -76,7 +76,7 @@ const ClipboardHandler_1 = __importDefault(require("./util/ClipboardHandler"));
  * ```
  *
  * See also
- * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts).
+ * * [`examples.md`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md).
  */
 class Editor {
     /**
@@ -138,7 +138,10 @@ class Editor {
             iconProvider: settings.iconProvider ?? new IconProvider_1.default(),
             notices: [],
             appInfo: settings.appInfo ? { ...settings.appInfo } : null,
-            pens: { additionalPenTypes: settings.pens?.additionalPenTypes ?? [], },
+            pens: {
+                additionalPenTypes: settings.pens?.additionalPenTypes ?? [],
+                filterPenTypes: settings.pens?.filterPenTypes ?? (() => true)
+            },
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {

package/dist/cjs/components/AbstractComponent.d.ts

@@ -1,8 +1,9 @@
 import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../image/EditorImage';
-import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
+import { LineSegment2, Mat33, Path, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
+import Viewport from '../Viewport';
 export type LoadSaveData = (string[] | Record<symbol, string | number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
@@ -112,7 +113,9 @@ export default abstract class AbstractComponent {
      * this function.
      */
     intersectsRect(rect: Rect2): boolean;
-    protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
+    isSelectable(): boolean;
+    isBackground(): boolean;
+    getProportionalRenderingTime(): number;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     /**
      * Returns a command that, when applied, transforms this by [affineTransfm] and
@@ -131,9 +134,6 @@ export default abstract class AbstractComponent {
      *                         this command.
      */
     setZIndexAndTransformBy(affineTransfm: Mat33, newZIndex: number, originalZIndex?: number): SerializableCommand;
-    isSelectable(): boolean;
-    isBackground(): boolean;
-    getProportionalRenderingTime(): number;
     private static transformElementCommandId;
     private static TransformElementCommand;
     /**
@@ -143,6 +143,18 @@ export default abstract class AbstractComponent {
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;
     clone(): AbstractComponent;
+    /**
+     * **Optional method**: Divides this component into sections roughly along the given path,
+     * removing parts that are roughly within `shape`.
+     *
+     * **Notes**:
+     * - A default implementation may be provided for this method in the future. Until then,
+     *   this method is `undefined` if unsupported.
+     *
+     * `viewport` should be provided to determine how newly-added points should be rounded.
+     */
+    withRegionErased?(shape: Path, viewport: Viewport): AbstractComponent[];
+    protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     serialize(): {
         name: string;
         zIndex: number;

package/dist/cjs/components/AbstractComponent.js

@@ -142,6 +142,21 @@ class AbstractComponent {
         const testLines = rect.getEdges();
         return testLines.some(edge => this.intersects(edge));
     }
+    // @returns true iff this component can be selected (e.g. by the selection tool.)
+    isSelectable() {
+        return true;
+    }
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    isBackground() {
+        return false;
+    }
+    // @returns an approximation of the proportional time it takes to render this component.
+    // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+    // a renderingWeight approximately twice that of a stroke with one point.
+    getProportionalRenderingTime() {
+        return 1;
+    }
     /**
      * Returns a command that, when applied, transforms this by [affineTransfm] and
      * updates the editor.
@@ -166,21 +181,6 @@ class AbstractComponent {
     setZIndexAndTransformBy(affineTransfm, newZIndex, originalZIndex) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this, newZIndex, originalZIndex);
     }
-    // @returns true iff this component can be selected (e.g. by the selection tool.)
-    isSelectable() {
-        return true;
-    }
-    // @returns true iff this component should be added to the background, rather than the
-    // foreground of the image.
-    isBackground() {
-        return false;
-    }
-    // @returns an approximation of the proportional time it takes to render this component.
-    // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
-    // a renderingWeight approximately twice that of a stroke with one point.
-    getProportionalRenderingTime() {
-        return 1;
-    }
     // Returns a copy of this component.
     clone() {
         const clone = this.createClone();

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

@@ -44,8 +44,8 @@ class Stroke extends AbstractComponent_1.default {
      * ]);
      * ```
      */
-    constructor(parts) {
-        super('stroke');
+    constructor(parts, initialZIndex) {
+        super('stroke', initialZIndex);
         // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
@@ -123,6 +123,162 @@ class Stroke extends AbstractComponent_1.default {
             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 === math_1.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([(0, RenderablePathSpec_1.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(math_1.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 = (0, math_1.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/cjs/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/cjs/components/builders/PolylineBuilder.js

@@ -11,7 +11,6 @@ const makeShapeFitAutocorrect_1 = __importDefault(require("./autocorrect/makeSha
 /**
  * Creates strokes from line segments rather than Bézier curves.
  *
- * @beta Output behavior may change significantly between versions. For now, intended for debugging.
  */
 exports.makePolylineBuilder = (0, makeShapeFitAutocorrect_1.default)((initialPoint, viewport) => {
     const minFit = viewport.getSizeOfPixelOnCanvas();
@@ -23,6 +22,7 @@ class PolylineBuilder {
         this.viewport = viewport;
         this.parts = [];
         this.widthAverageNumSamples = 1;
+        this.lastLineSegment = null;
         this.averageWidth = startPoint.width;
         this.startPoint = {
             ...startPoint,
@@ -56,7 +56,7 @@ class PolylineBuilder {
         if (commands.length <= 1) {
             commands.push({
                 kind: math_1.PathCommandType.LineTo,
-                point: startPoint,
+                point: startPoint.plus(math_1.Vec2.of(this.averageWidth / 4, 0)),
             });
         }
         return {
@@ -104,11 +104,18 @@ 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: math_1.PathCommandType.LineTo,
                 point: this.roundPoint(newPoint.pos),
             });
             this.bbox = this.bbox.grownToPoint(roundedPoint);
+            this.lastLineSegment = new math_1.LineSegment2(this.lastPoint, roundedPoint);
+            this.lastPoint = roundedPoint;
         }
     }
 }

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

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makePressureSensitiveFreehandLineBuilder = void 0;
-const bezier_js_1 = require("bezier-js");
 const math_1 = require("@js-draw/math");
 const Stroke_1 = __importDefault(require("../Stroke"));
 const Viewport_1 = __importDefault(require("../../Viewport"));
@@ -31,6 +30,7 @@ class PressureSensitiveFreehandLineBuilder {
         this.isFirstSegment = true;
         this.pathStartConnector = null;
         this.mostRecentConnector = null;
+        this.nextCurveStartConnector = null;
         this.lastUpperBezier = null;
         this.lastLowerBezier = null;
         this.parts = [];
@@ -48,18 +48,18 @@ 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) {
@@ -100,7 +100,7 @@ class PressureSensitiveFreehandLineBuilder {
                 //  __/  __/
                 // /___ /
                 // •
-                pathStartConnector,
+                ...pathStartConnector,
                 // Move back to the start point:
                 //     •
                 //  __/  __/
@@ -117,13 +117,6 @@ class PressureSensitiveFreehandLineBuilder {
         }
         return null;
     }
-    previewStroke() {
-        const pathPreview = this.previewFullPath();
-        if (pathPreview) {
-            return new Stroke_1.default(pathPreview);
-        }
-        return null;
-    }
     preview(renderer) {
         const paths = this.previewFullPath();
         if (paths) {
@@ -141,7 +134,7 @@ class PressureSensitiveFreehandLineBuilder {
             // Ensure we have something.
             this.addCurve(null);
         }
-        return this.previewStroke();
+        return new Stroke_1.default(this.previewFullPath());
     }
     roundPoint(point) {
         let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
@@ -156,25 +149,16 @@ 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 math_1.Vec2.ofXY(curve1.get(t));
+            return intersections[0].point;
         };
         const getExitDirection = (curve) => {
-            return math_1.Vec2.ofXY(curve.points[2]).minus(math_1.Vec2.ofXY(curve.points[1])).normalized();
+            return curve.p2.minus(curve.p1).normalized();
         };
         const getEnterDirection = (curve) => {
-            return math_1.Vec2.ofXY(curve.points[1]).minus(math_1.Vec2.ofXY(curve.points[0])).normalized();
+            return curve.p1.minus(curve.p0).normalized();
         };
         // Prevent
         //         /
@@ -185,8 +169,8 @@ 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) {
@@ -242,32 +226,37 @@ class PressureSensitiveFreehandLineBuilder {
                 controlPoint: center.plus(math_1.Vec2.of(width, -width)),
                 endPoint: center.plus(math_1.Vec2.of(width, 0)),
             });
-            this.pathStartConnector = {
+            const connector = {
                 kind: math_1.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;
@@ -276,9 +265,9 @@ class PressureSensitiveFreehandLineBuilder {
     }
     // Returns [upper curve, connector, lower curve]
     segmentToPath(curve) {
-        const bezier = new bezier_js_1.Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
-        let startVec = math_1.Vec2.ofXY(bezier.normal(0)).normalized();
-        let endVec = math_1.Vec2.ofXY(bezier.normal(1)).normalized();
+        const bezier = new math_1.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())) {
@@ -289,18 +278,9 @@ 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 = math_1.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));
@@ -324,16 +304,29 @@ class PressureSensitiveFreehandLineBuilder {
             kind: math_1.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: math_1.PathCommandType.LineTo,
+                point: upperCurveStartPoint,
+            },
+            {
+                kind: math_1.PathCommandType.LineTo,
+                point: lowerCurveEndPoint,
+            },
+        ];
         const upperCurveCommand = {
             kind: math_1.PathCommandType.QuadraticBezierTo,
             controlPoint: upperCurveControlPoint,
             endPoint: upperCurveEndPoint,
         };
-        const upperCurve = new bezier_js_1.Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
-        const lowerCurve = new bezier_js_1.Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        const upperCurve = new math_1.QuadraticBezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new math_1.QuadraticBezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
         return {
             upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
             upperCurve, lowerCurve,
+            nextCurveStartConnector,
         };
     }
     addPoint(newPoint) {