js-draw 0.23.1 → 0.24.1

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

@@ -0,0 +1,33 @@
+import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
+import Rect2 from '../../math/shapes/Rect2';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+import RenderingStyle from '../../rendering/RenderingStyle';
+export declare const makeFreehandLineBuilder: ComponentBuilderFactory;
+export default class FreehandLineBuilder implements ComponentBuilder {
+    private startPoint;
+    private minFitAllowed;
+    private viewport;
+    private isFirstSegment;
+    private parts;
+    private curveFitter;
+    private bbox;
+    private averageWidth;
+    private widthAverageNumSamples;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
+    getBBox(): Rect2;
+    protected getRenderingStyle(): RenderingStyle;
+    protected previewCurrentPath(): RenderablePathSpec | null;
+    protected previewFullPath(): RenderablePathSpec[] | null;
+    private previewStroke;
+    preview(renderer: AbstractRenderer): void;
+    build(): Stroke;
+    private getMinFit;
+    private roundPoint;
+    private roundDistance;
+    private curveToPathCommands;
+    private addCurve;
+    addPoint(newPoint: StrokeDataPoint): void;
+}

package/dist/mjs/components/builders/FreehandLineBuilder.mjs

@@ -0,0 +1,179 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+import  { PathCommandType }  from '../../math/shapes/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
+import  Color4  from '../../Color4.mjs';
+export var makeFreehandLineBuilder = function (initialPoint, viewport) {
+    // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
+    // less than ±1 px from the curve.
+    var maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
+    var minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
+    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
+};
+// Handles stroke smoothing and creates Strokes from user/stylus input.
+var FreehandLineBuilder = /** @class */ (function () {
+    function FreehandLineBuilder(startPoint, minFitAllowed, maxFitAllowed, viewport) {
+        var _this = this;
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.viewport = viewport;
+        this.isFirstSegment = true;
+        this.parts = [];
+        this.widthAverageNumSamples = 1;
+        this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, function (curve) { return _this.addCurve(curve); });
+        this.averageWidth = startPoint.width;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    FreehandLineBuilder.prototype.getBBox = function () {
+        return this.bbox;
+    };
+    FreehandLineBuilder.prototype.getRenderingStyle = function () {
+        return {
+            fill: Color4.transparent,
+            stroke: {
+                color: this.startPoint.color,
+                width: this.roundDistance(this.averageWidth),
+            }
+        };
+    };
+    FreehandLineBuilder.prototype.previewCurrentPath = function () {
+        var path = this.parts.slice();
+        var commands = __spreadArray(__spreadArray([], path, true), this.curveToPathCommands(this.curveFitter.preview()), true);
+        var startPoint = this.startPoint.pos;
+        return {
+            startPoint: startPoint,
+            commands: commands,
+            style: this.getRenderingStyle(),
+        };
+    };
+    FreehandLineBuilder.prototype.previewFullPath = function () {
+        var preview = this.previewCurrentPath();
+        if (preview) {
+            return [preview];
+        }
+        return null;
+    };
+    FreehandLineBuilder.prototype.previewStroke = function () {
+        var pathPreview = this.previewFullPath();
+        if (pathPreview) {
+            return new Stroke(pathPreview);
+        }
+        return null;
+    };
+    FreehandLineBuilder.prototype.preview = function (renderer) {
+        var paths = this.previewFullPath();
+        if (paths) {
+            var approxBBox = this.viewport.visibleRect;
+            renderer.startObject(approxBBox);
+            for (var _i = 0, paths_1 = paths; _i < paths_1.length; _i++) {
+                var path = paths_1[_i];
+                renderer.drawPath(path);
+            }
+            renderer.endObject();
+        }
+    };
+    FreehandLineBuilder.prototype.build = function () {
+        this.curveFitter.finalizeCurrentCurve();
+        return this.previewStroke();
+    };
+    FreehandLineBuilder.prototype.getMinFit = function () {
+        var minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
+        if (minFit < 1e-10) {
+            minFit = this.minFitAllowed;
+        }
+        return minFit;
+    };
+    FreehandLineBuilder.prototype.roundPoint = function (point) {
+        var minFit = this.getMinFit();
+        return Viewport.roundPoint(point, minFit);
+    };
+    FreehandLineBuilder.prototype.roundDistance = function (dist) {
+        var minFit = this.getMinFit();
+        return Viewport.roundPoint(dist, minFit);
+    };
+    FreehandLineBuilder.prototype.curveToPathCommands = function (curve) {
+        // Case where no points have been added
+        if (!curve) {
+            // Don't create a circle around the initial point if the stroke has more than one point.
+            if (!this.isFirstSegment) {
+                return [];
+            }
+            // Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
+            var width = Viewport.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
+            var center = this.roundPoint(this.startPoint.pos);
+            // Start on the right, cycle clockwise:
+            //    |
+            //  ----- ←
+            //    |
+            // Draw a circle-ish shape around the start point
+            return [
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(width, width)),
+                    // Bottom of the circle
+                    //    |
+                    //  -----
+                    //    |
+                    //    ↑
+                    endPoint: center.plus(Vec2.of(0, width)),
+                },
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(-width, width)),
+                    endPoint: center.plus(Vec2.of(-width, 0)),
+                },
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(-width, -width)),
+                    endPoint: center.plus(Vec2.of(0, -width)),
+                },
+                {
+                    kind: PathCommandType.QuadraticBezierTo,
+                    controlPoint: center.plus(Vec2.of(width, -width)),
+                    endPoint: center.plus(Vec2.of(width, 0)),
+                }
+            ];
+        }
+        var result = [];
+        if (this.isFirstSegment) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: this.roundPoint(curve.startPoint),
+            });
+        }
+        result.push({
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint: this.roundPoint(curve.controlPoint),
+            endPoint: this.roundPoint(curve.endPoint),
+        });
+        return result;
+    };
+    FreehandLineBuilder.prototype.addCurve = function (curve) {
+        var _a;
+        var parts = this.curveToPathCommands(curve);
+        (_a = this.parts).push.apply(_a, parts);
+        if (this.isFirstSegment) {
+            this.isFirstSegment = false;
+        }
+    };
+    FreehandLineBuilder.prototype.addPoint = function (newPoint) {
+        this.curveFitter.addPoint(newPoint);
+        this.widthAverageNumSamples++;
+        this.averageWidth =
+            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
+                + newPoint.width / this.widthAverageNumSamples;
+    };
+    return FreehandLineBuilder;
+}());
+export default FreehandLineBuilder;

package/dist/mjs/components/builders/FreehandLineBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+import Rect2 from '../../math/shapes/Rect2';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeLineBuilder: ComponentBuilderFactory;
+export default class LineBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private readonly viewport;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

package/dist/mjs/components/builders/LineBuilder.mjs

@@ -0,0 +1,61 @@
+import  Path, { PathCommandType }  from '../../math/shapes/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+export var makeLineBuilder = function (initialPoint, viewport) {
+    return new LineBuilder(initialPoint, viewport);
+};
+var LineBuilder = /** @class */ (function () {
+    function LineBuilder(startPoint, viewport) {
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.endPoint = startPoint;
+    }
+    LineBuilder.prototype.getBBox = function () {
+        var preview = this.buildPreview();
+        return preview.getBBox();
+    };
+    LineBuilder.prototype.buildPreview = function () {
+        var _this = this;
+        var startPoint = this.startPoint.pos;
+        var endPoint = this.endPoint.pos;
+        var toEnd = endPoint.minus(startPoint).normalized();
+        var startSize = this.startPoint.width / 2;
+        var endSize = this.endPoint.width / 2;
+        var lineNormal = toEnd.orthog();
+        var scaledStartNormal = lineNormal.times(startSize);
+        var scaledEndNormal = lineNormal.times(endSize);
+        var strokeStartPoint = startPoint.minus(scaledStartNormal);
+        var path = new Path(strokeStartPoint, [
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(scaledEndNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.minus(scaledEndNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.minus(scaledStartNormal),
+            },
+        ]).mapPoints(function (point) { return _this.viewport.roundPoint(point); });
+        var preview = new Stroke([
+            path.toRenderable({ fill: this.startPoint.color })
+        ]);
+        return preview;
+    };
+    LineBuilder.prototype.build = function () {
+        return this.buildPreview();
+    };
+    LineBuilder.prototype.preview = function (renderer) {
+        this.buildPreview().render(renderer);
+    };
+    LineBuilder.prototype.addPoint = function (point) {
+        this.endPoint = point;
+    };
+    return LineBuilder;
+}());
+export default LineBuilder;

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

@@ -0,0 +1,36 @@
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import Rect2 from '../../math/shapes/Rect2';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makePressureSensitiveFreehandLineBuilder: ComponentBuilderFactory;
+export default class PressureSensitiveFreehandLineBuilder implements ComponentBuilder {
+    private startPoint;
+    private minFitAllowed;
+    private viewport;
+    private isFirstSegment;
+    private pathStartConnector;
+    private mostRecentConnector;
+    private upperSegments;
+    private lowerSegments;
+    private lastUpperBezier;
+    private lastLowerBezier;
+    private parts;
+    private curveFitter;
+    private curveStartWidth;
+    private bbox;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
+    getBBox(): Rect2;
+    private getRenderingStyle;
+    private previewCurrentPath;
+    private previewFullPath;
+    private previewStroke;
+    preview(renderer: AbstractRenderer): void;
+    build(): Stroke;
+    private roundPoint;
+    private shouldStartNewSegment;
+    private addCurve;
+    private segmentToPath;
+    addPoint(newPoint: StrokeDataPoint): void;
+}

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

@@ -0,0 +1,347 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { Bezier } from 'bezier-js';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+import  { PathCommandType }  from '../../math/shapes/Path.mjs';
+import  Stroke  from '../Stroke.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
+export var makePressureSensitiveFreehandLineBuilder = function (initialPoint, viewport) {
+    // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
+    // less than ±1 px from the curve.
+    var maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
+    var minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
+    return new PressureSensitiveFreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
+};
+// Handles stroke smoothing and creates Strokes from user/stylus input.
+var PressureSensitiveFreehandLineBuilder = /** @class */ (function () {
+    function PressureSensitiveFreehandLineBuilder(startPoint, 
+    // Maximum distance from the actual curve (irrespective of stroke width)
+    // for which a point is considered 'part of the curve'.
+    // Note that the maximum will be smaller if the stroke width is less than
+    // [maxFitAllowed].
+    minFitAllowed, maxFitAllowed, viewport) {
+        var _this = this;
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.viewport = viewport;
+        this.isFirstSegment = true;
+        this.pathStartConnector = null;
+        this.mostRecentConnector = null;
+        this.lastUpperBezier = null;
+        this.lastLowerBezier = null;
+        this.parts = [];
+        this.upperSegments = [];
+        this.lowerSegments = [];
+        this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, function (curve) { return _this.addCurve(curve); });
+        this.curveStartWidth = startPoint.width;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    PressureSensitiveFreehandLineBuilder.prototype.getBBox = function () {
+        return this.bbox;
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.getRenderingStyle = function () {
+        var _a;
+        return {
+            fill: (_a = this.startPoint.color) !== null && _a !== void 0 ? _a : null,
+        };
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.previewCurrentPath = function () {
+        var _a;
+        var upperPath = this.upperSegments.slice();
+        var lowerPath = this.lowerSegments.slice();
+        var lowerToUpperCap;
+        var pathStartConnector;
+        var currentCurve = this.curveFitter.preview();
+        if (currentCurve) {
+            var _b = this.segmentToPath(currentCurve), upperCurveCommand = _b.upperCurveCommand, lowerToUpperConnector = _b.lowerToUpperConnector, upperToLowerConnector = _b.upperToLowerConnector, lowerCurveCommand = _b.lowerCurveCommand;
+            upperPath.push(upperCurveCommand);
+            lowerPath.push(lowerCurveCommand);
+            lowerToUpperCap = lowerToUpperConnector;
+            pathStartConnector = (_a = this.pathStartConnector) !== null && _a !== void 0 ? _a : upperToLowerConnector;
+        }
+        else {
+            if (this.mostRecentConnector === null || this.pathStartConnector === null) {
+                return null;
+            }
+            lowerToUpperCap = this.mostRecentConnector;
+            pathStartConnector = this.pathStartConnector;
+        }
+        var startPoint;
+        var lastLowerSegment = lowerPath[lowerPath.length - 1];
+        if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
+            startPoint = lastLowerSegment.point;
+        }
+        else {
+            startPoint = lastLowerSegment.endPoint;
+        }
+        return {
+            // Start at the end of the lower curve:
+            //    Start point
+            //     ↓
+            //  __/  __/ ← Most recent points on this end
+            // /___ /
+            //  ↑
+            //  Oldest points
+            startPoint: startPoint,
+            commands: __spreadArray(__spreadArray(__spreadArray([
+                // Move to the most recent point on the upperPath:
+                //     ----→•
+                //  __/  __/
+                // /___ /
+                lowerToUpperCap
+            ], upperPath.reverse(), true), [
+                // Move to the beginning of the lowerPath:
+                //  __/  __/
+                // /___ /
+                // •
+                pathStartConnector
+            ], false), lowerPath, true),
+            style: this.getRenderingStyle(),
+        };
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.previewFullPath = function () {
+        var preview = this.previewCurrentPath();
+        if (preview) {
+            return __spreadArray(__spreadArray([], this.parts, true), [preview], false);
+        }
+        return null;
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.previewStroke = function () {
+        var pathPreview = this.previewFullPath();
+        if (pathPreview) {
+            return new Stroke(pathPreview);
+        }
+        return null;
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.preview = function (renderer) {
+        var paths = this.previewFullPath();
+        if (paths) {
+            var approxBBox = this.viewport.visibleRect;
+            renderer.startObject(approxBBox);
+            for (var _i = 0, paths_1 = paths; _i < paths_1.length; _i++) {
+                var path = paths_1[_i];
+                renderer.drawPath(path);
+            }
+            renderer.endObject();
+        }
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.build = function () {
+        this.curveFitter.finalizeCurrentCurve();
+        if (this.isFirstSegment) {
+            // Ensure we have something.
+            this.addCurve(null);
+        }
+        return this.previewStroke();
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.roundPoint = function (point) {
+        var minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
+        if (minFit < 1e-10) {
+            minFit = this.minFitAllowed;
+        }
+        return Viewport.roundPoint(point, minFit);
+    };
+    // Returns true if, due to overlap with previous segments, a new RenderablePathSpec should be created.
+    PressureSensitiveFreehandLineBuilder.prototype.shouldStartNewSegment = function (lowerCurve, upperCurve) {
+        if (!this.lastLowerBezier || !this.lastUpperBezier) {
+            return false;
+        }
+        var getIntersection = function (curve1, curve2) {
+            var intersection = curve1.intersects(curve2);
+            if (!intersection || intersection.length === 0) {
+                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.
+            var firstTPair = intersection[0];
+            var match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
+            if (!match) {
+                throw new Error("Incorrect format returned by .intersects: ".concat(intersection, " should be array of \"number/number\"!"));
+            }
+            var t = parseFloat(match[1]);
+            return Vec2.ofXY(curve1.get(t));
+        };
+        var getExitDirection = function (curve) {
+            return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
+        };
+        var getEnterDirection = function (curve) {
+            return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
+        };
+        // Prevent
+        //         /
+        //       / /
+        //      /  /  /|
+        //    /    /   |
+        //  /          |
+        // 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
+            // Also handle if the curves exit/enter directions differ
+            || getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
+            || getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+            return true;
+        }
+        // Check whether the lower curve intersects the other wall:
+        //       /    / ← lower
+        //    / /   /
+        // /   / /
+        //   //
+        // / /
+        var lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
+        var upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
+        if (lowerIntersection || upperIntersection) {
+            return true;
+        }
+        return false;
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.addCurve = function (curve) {
+        // Case where no points have been added
+        if (!curve) {
+            // Don't create a circle around the initial point if the stroke has more than one point.
+            if (!this.isFirstSegment) {
+                return;
+            }
+            var width = Viewport.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            var center = this.roundPoint(this.startPoint.pos);
+            // Start on the right, cycle clockwise:
+            //    |
+            //  ----- ←
+            //    |
+            var startPoint = this.startPoint.pos.plus(Vec2.of(width, 0));
+            // Draw a circle-ish shape around the start point
+            this.lowerSegments.push({
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(width, width)),
+                // Bottom of the circle
+                //    |
+                //  -----
+                //    |
+                //    ↑
+                endPoint: center.plus(Vec2.of(0, width)),
+            }, {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(-width, width)),
+                endPoint: center.plus(Vec2.of(-width, 0)),
+            }, {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(-width, -width)),
+                endPoint: center.plus(Vec2.of(0, -width)),
+            }, {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(width, -width)),
+                endPoint: center.plus(Vec2.of(width, 0)),
+            });
+            this.pathStartConnector = {
+                kind: PathCommandType.LineTo,
+                point: startPoint,
+            };
+            this.mostRecentConnector = this.pathStartConnector;
+            return;
+        }
+        var _a = this.segmentToPath(curve), upperCurveCommand = _a.upperCurveCommand, lowerToUpperConnector = _a.lowerToUpperConnector, upperToLowerConnector = _a.upperToLowerConnector, lowerCurveCommand = _a.lowerCurveCommand, lowerCurve = _a.lowerCurve, upperCurve = _a.upperCurve;
+        var shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+        if (shouldStartNew) {
+            var part = this.previewCurrentPath();
+            if (part) {
+                this.parts.push(part);
+                this.upperSegments = [];
+                this.lowerSegments = [];
+            }
+        }
+        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.isFirstSegment = false;
+        }
+        // With the most recent connector, we're joining the end of the lowerPath to the most recent
+        // upperPath:
+        this.mostRecentConnector = lowerToUpperConnector;
+        this.lowerSegments.push(lowerCurveCommand);
+        this.upperSegments.push(upperCurveCommand);
+        this.lastLowerBezier = lowerCurve;
+        this.lastUpperBezier = upperCurve;
+        this.curveStartWidth = curve.startWidth;
+    };
+    // Returns [upper curve, connector, lower curve]
+    PressureSensitiveFreehandLineBuilder.prototype.segmentToPath = function (curve) {
+        var bezier = new Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
+        var startVec = Vec2.ofXY(bezier.normal(0)).normalized();
+        var endVec = Vec2.ofXY(bezier.normal(1)).normalized();
+        startVec = startVec.times(curve.startWidth / 2);
+        endVec = endVec.times(curve.endWidth / 2);
+        if (!isFinite(startVec.magnitude())) {
+            console.error('Warning: startVec is NaN or ∞', startVec, endVec, curve);
+            startVec = endVec;
+        }
+        var startPt = curve.startPoint;
+        var endPt = curve.endPoint;
+        var controlPoint = curve.controlPoint;
+        // Approximate the normal at the location of the control point
+        var projectionT = bezier.project(controlPoint.xy).t;
+        if (!projectionT) {
+            if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
+                projectionT = 0.1;
+            }
+            else {
+                projectionT = 0.9;
+            }
+        }
+        var halfVecT = projectionT;
+        var halfVec = Vec2.ofXY(bezier.normal(halfVecT))
+            .normalized().times(curve.startWidth / 2 * halfVecT
+            + curve.endWidth / 2 * (1 - halfVecT));
+        // Each starts at startPt ± startVec
+        var lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
+        var lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
+        var lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
+        var upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
+        var upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
+        var upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
+        var lowerCurveCommand = {
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint: lowerCurveControlPoint,
+            endPoint: lowerCurveEndPoint,
+        };
+        // From the end of the upperCurve to the start of the lowerCurve:
+        var upperToLowerConnector = {
+            kind: PathCommandType.LineTo,
+            point: lowerCurveStartPoint,
+        };
+        // From the end of lowerCurve to the start of upperCurve:
+        var lowerToUpperConnector = {
+            kind: PathCommandType.LineTo,
+            point: upperCurveStartPoint,
+        };
+        var upperCurveCommand = {
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint: upperCurveControlPoint,
+            endPoint: upperCurveEndPoint,
+        };
+        var upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        var lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        return {
+            upperCurveCommand: upperCurveCommand,
+            upperToLowerConnector: upperToLowerConnector,
+            lowerToUpperConnector: lowerToUpperConnector,
+            lowerCurveCommand: lowerCurveCommand,
+            upperCurve: upperCurve,
+            lowerCurve: lowerCurve,
+        };
+    };
+    PressureSensitiveFreehandLineBuilder.prototype.addPoint = function (newPoint) {
+        this.curveFitter.addPoint(newPoint);
+    };
+    return PressureSensitiveFreehandLineBuilder;
+}());
+export default PressureSensitiveFreehandLineBuilder;