js-draw 0.7.1 → 0.8.0

package/dist/src/SVGLoader.js

@@ -177,6 +177,7 @@ export default class SVGLoader {
             else if (child.nodeType === Node.ELEMENT_NODE) {
                 const subElem = child;
                 if (subElem.tagName.toLowerCase() === 'tspan') {
+                    // FIXME: tspan's (x, y) components are absolute, not relative to the parent.
                     contentList.push(this.makeText(subElem));
                 }
                 else {

package/dist/src/components/Stroke.js

@@ -36,6 +36,7 @@ export default class Stroke extends AbstractComponent {
         return false;
     }
     render(canvas, visibleRect) {
+        var _a;
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {
             const bbox = this.bboxForPart(part.path.bbox, part.style);
@@ -44,7 +45,7 @@ export default class Stroke extends AbstractComponent {
                     continue;
                 }
                 const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
-                if (muchBiggerThanVisible && !part.path.closedRoughlyIntersects(visibleRect)) {
+                if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width)) {
                     continue;
                 }
             }
@@ -65,7 +66,13 @@ export default class Stroke extends AbstractComponent {
         // Update each part
         this.parts = this.parts.map((part) => {
             const newPath = part.path.transformedBy(affineTransfm);
-            const newBBox = this.bboxForPart(newPath.bbox, part.style);
+            const newStyle = Object.assign(Object.assign({}, part.style), { stroke: part.style.stroke ? Object.assign({}, part.style.stroke) : undefined });
+            // Approximate the scale factor.
+            if (newStyle.stroke) {
+                const scaleFactor = affineTransfm.getScaleFactor();
+                newStyle.stroke.width *= scaleFactor;
+            }
+            const newBBox = this.bboxForPart(newPath.bbox, newStyle);
             if (isFirstPart) {
                 this.contentBBox = newBBox;
                 isFirstPart = false;
@@ -77,7 +84,7 @@ export default class Stroke extends AbstractComponent {
                 path: newPath,
                 startPoint: newPath.startPoint,
                 commands: newPath.parts,
-                style: part.style,
+                style: newStyle,
             };
         });
     }

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

@@ -1,44 +1,31 @@
-import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import Rect2 from '../../math/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 maxFitAllowed;
     private viewport;
     private isFirstSegment;
-    private pathStartConnector;
-    private mostRecentConnector;
-    private upperSegments;
-    private lowerSegments;
-    private lastUpperBezier;
-    private lastLowerBezier;
     private parts;
-    private buffer;
-    private lastPoint;
-    private lastExitingVec;
-    private currentCurve;
-    private curveStartWidth;
-    private curveEndWidth;
-    private momentum;
+    private curveFitter;
     private bbox;
+    private averageWidth;
+    private widthAverageNumSamples;
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
     getBBox(): Rect2;
-    private getRenderingStyle;
-    private previewCurrentPath;
-    private previewFullPath;
+    protected getRenderingStyle(): RenderingStyle;
+    protected previewCurrentPath(): RenderablePathSpec | null;
+    protected previewFullPath(): RenderablePathSpec[] | null;
     private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;
-    private shouldStartNewSegment;
-    private approxCurrentCurveLength;
-    private finalizeCurrentCurve;
-    private currentSegmentToPath;
-    private computeExitingVec;
+    private curveToPathCommands;
+    private addCurve;
     addPoint(newPoint: StrokeDataPoint): void;
 }

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -1,10 +1,10 @@
-import { Bezier } from 'bezier-js';
 import { Vec2 } from '../../math/Vec2';
 import Rect2 from '../../math/Rect2';
 import { PathCommandType } from '../../math/Path';
-import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
+import { StrokeSmoother } from '../util/StrokeSmoother';
+import Color4 from '../../Color4';
 export const makeFreehandLineBuilder = (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.
@@ -14,108 +14,43 @@ export const makeFreehandLineBuilder = (initialPoint, viewport) => {
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder {
-    constructor(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) {
+    constructor(startPoint, minFitAllowed, maxFitAllowed, viewport) {
         this.startPoint = startPoint;
         this.minFitAllowed = minFitAllowed;
-        this.maxFitAllowed = maxFitAllowed;
         this.viewport = viewport;
         this.isFirstSegment = true;
-        this.pathStartConnector = null;
-        this.mostRecentConnector = null;
-        this.lastUpperBezier = null;
-        this.lastLowerBezier = null;
         this.parts = [];
-        this.lastExitingVec = null;
-        this.currentCurve = null;
-        this.lastPoint = this.startPoint;
-        this.upperSegments = [];
-        this.lowerSegments = [];
-        this.buffer = [this.startPoint.pos];
-        this.momentum = Vec2.zero;
-        this.currentCurve = null;
-        this.curveStartWidth = startPoint.width;
+        this.widthAverageNumSamples = 1;
+        this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, (curve) => this.addCurve(curve));
+        this.averageWidth = startPoint.width;
         this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
     }
     getBBox() {
         return this.bbox;
     }
     getRenderingStyle() {
-        var _a;
         return {
-            fill: (_a = this.lastPoint.color) !== null && _a !== void 0 ? _a : null,
+            fill: Color4.transparent,
+            stroke: {
+                color: this.startPoint.color,
+                width: this.averageWidth,
+            }
         };
     }
     previewCurrentPath() {
-        var _a;
-        const upperPath = this.upperSegments.slice();
-        const lowerPath = this.lowerSegments.slice();
-        let lowerToUpperCap;
-        let pathStartConnector;
-        if (this.currentCurve) {
-            const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand } = this.currentSegmentToPath();
-            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;
-        }
-        let startPoint;
-        const lastLowerSegment = lowerPath[lowerPath.length - 1];
-        if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
-            startPoint = lastLowerSegment.point;
-        }
-        else {
-            startPoint = lastLowerSegment.endPoint;
-        }
+        const path = this.parts.slice();
+        const commands = [...path, ...this.curveToPathCommands(this.curveFitter.preview())];
+        const startPoint = this.startPoint.pos;
         return {
-            // Start at the end of the lower curve:
-            //    Start point
-            //     ↓     
-            //  __/  __/ ← Most recent points on this end
-            // /___ /
-            //  ↑
-            //  Oldest points
             startPoint,
-            commands: [
-                // Move to the most recent point on the upperPath:
-                //     ----→•     
-                //  __/  __/
-                // /___ /
-                lowerToUpperCap,
-                // Move to the beginning of the upperPath:
-                //  __/  __/
-                // /___ /
-                //     • ←-
-                ...upperPath.reverse(),
-                // Move to the beginning of the lowerPath:
-                //  __/  __/
-                // /___ /
-                // •
-                pathStartConnector,
-                // Move back to the start point:
-                //     •
-                //  __/  __/
-                // /___ /
-                ...lowerPath,
-            ],
+            commands,
             style: this.getRenderingStyle(),
         };
     }
     previewFullPath() {
         const preview = this.previewCurrentPath();
         if (preview) {
-            return [...this.parts, preview];
+            return [preview];
         }
         return null;
     }
@@ -138,91 +73,22 @@ export default class FreehandLineBuilder {
         }
     }
     build() {
-        if (this.lastPoint) {
-            this.finalizeCurrentCurve();
-        }
+        this.curveFitter.finalizeCurrentCurve();
         return this.previewStroke();
     }
     roundPoint(point) {
-        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
         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.
-    shouldStartNewSegment(lowerCurve, upperCurve) {
-        if (!this.lastLowerBezier || !this.lastUpperBezier) {
-            return false;
-        }
-        const getIntersection = (curve1, curve2) => {
-            const 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.
-            const firstTPair = intersection[0];
-            const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
-            if (!match) {
-                throw new Error(`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`);
-            }
-            const t = parseFloat(match[1]);
-            return Vec2.ofXY(curve1.get(t));
-        };
-        const getExitDirection = (curve) => {
-            return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
-        };
-        const getEnterDirection = (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
-        //    / /   /
-        // /   / /
-        //   //
-        // / /
-        const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
-        const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
-        if (lowerIntersection || upperIntersection) {
-            return true;
-        }
-        return false;
-    }
-    // Returns the distance between the start, control, and end points of the curve.
-    approxCurrentCurveLength() {
-        if (!this.currentCurve) {
-            return 0;
-        }
-        const startPt = Vec2.ofXY(this.currentCurve.points[0]);
-        const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
-        const endPt = Vec2.ofXY(this.currentCurve.points[2]);
-        const toControlDist = startPt.minus(controlPt).length();
-        const toEndDist = endPt.minus(controlPt).length();
-        return toControlDist + toEndDist;
-    }
-    finalizeCurrentCurve() {
+    curveToPathCommands(curve) {
         // Case where no points have been added
-        if (!this.currentCurve) {
+        if (!curve) {
             // Don't create a circle around the initial point if the stroke has more than one point.
             if (!this.isFirstSegment) {
-                return;
+                return [];
             }
             const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
             const center = this.roundPoint(this.startPoint.pos);
@@ -230,253 +96,61 @@ export default class FreehandLineBuilder {
             //    |
             //  ----- ←
             //    |
-            const 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;
-        }
-        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, } = this.currentSegmentToPath();
-        const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
-        if (shouldStartNew) {
-            const 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;
-        const lastPoint = this.buffer[this.buffer.length - 1];
-        this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
-        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)
-        this.buffer = [
-            this.buffer[this.buffer.length - 2], lastPoint,
-        ];
-        this.currentCurve = null;
-    }
-    // Returns [upper curve, connector, lower curve]
-    currentSegmentToPath() {
-        if (this.currentCurve == null) {
-            throw new Error('Invalid State: currentCurve is null!');
-        }
-        let startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
-        let endVec = Vec2.ofXY(this.currentCurve.normal(1)).normalized();
-        startVec = startVec.times(this.curveStartWidth / 2);
-        endVec = endVec.times(this.curveEndWidth / 2);
-        if (!isFinite(startVec.magnitude())) {
-            console.error('Warning: startVec is NaN or ∞', startVec, endVec, this.currentCurve);
-            startVec = endVec;
+            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)),
+                }
+            ];
         }
-        const startPt = Vec2.ofXY(this.currentCurve.get(0));
-        const endPt = Vec2.ofXY(this.currentCurve.get(1));
-        const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
-        // Approximate the normal at the location of the control point
-        let projectionT = this.currentCurve.project(controlPoint.xy).t;
-        if (!projectionT) {
-            if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
-                projectionT = 0.1;
-            }
-            else {
-                projectionT = 0.9;
-            }
+        const result = [];
+        if (this.isFirstSegment) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: this.roundPoint(curve.startPoint),
+            });
         }
-        const halfVecT = projectionT;
-        const halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
-            .normalized().times(this.curveStartWidth / 2 * halfVecT
-            + this.curveEndWidth / 2 * (1 - halfVecT));
-        // Each starts at startPt ± startVec
-        const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
-        const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
-        const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
-        const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
-        const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
-        const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
-        const lowerCurveCommand = {
-            kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: lowerCurveControlPoint,
-            endPoint: lowerCurveEndPoint,
-        };
-        // From the end of the upperCurve to the start of the lowerCurve:
-        const upperToLowerConnector = {
-            kind: PathCommandType.LineTo,
-            point: lowerCurveStartPoint,
-        };
-        // From the end of lowerCurve to the start of upperCurve:
-        const lowerToUpperConnector = {
-            kind: PathCommandType.LineTo,
-            point: upperCurveStartPoint,
-        };
-        const upperCurveCommand = {
+        result.push({
             kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: upperCurveControlPoint,
-            endPoint: upperCurveEndPoint,
-        };
-        const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
-        const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
-        return {
-            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
-            upperCurve, lowerCurve,
-        };
+            controlPoint: this.roundPoint(curve.controlPoint),
+            endPoint: this.roundPoint(curve.endPoint),
+        });
+        return result;
     }
-    // Compute the direction of the velocity at the end of this.buffer
-    computeExitingVec() {
-        return this.momentum.normalized().times(this.lastPoint.width / 2);
-    }
-    addPoint(newPoint) {
-        var _a, _b;
-        if (this.lastPoint) {
-            // Ignore points that are identical
-            const fuzzEq = 1e-10;
-            const deltaTime = newPoint.time - this.lastPoint.time;
-            if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
-                return;
-            }
-            else if (isNaN(newPoint.pos.magnitude())) {
-                console.warn('Discarding NaN point.', newPoint);
-                return;
-            }
-            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
-            const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
-                && this.isFirstSegment;
-            // Snap to the starting point if the stroke is contained within a small ball centered
-            // at the starting point.
-            // This allows us to create a circle/dot at the start of the stroke.
-            if (shouldSnapToInitial) {
-                return;
-            }
-            const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
-            this.momentum = this.momentum.lerp(velocity, 0.9);
-        }
-        const lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
-        this.lastPoint = newPoint;
-        this.buffer.push(newPoint.pos);
-        const pointRadius = newPoint.width / 2;
-        const prevEndWidth = this.curveEndWidth;
-        this.curveEndWidth = pointRadius;
+    addCurve(curve) {
+        const parts = this.curveToPathCommands(curve);
+        this.parts.push(...parts);
         if (this.isFirstSegment) {
-            // The start of a curve often lacks accurate pressure information. Update it.
-            this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-        }
-        // recompute bbox
-        this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
-        if (this.currentCurve === null) {
-            const p1 = lastPoint.pos;
-            const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
-            const p3 = newPoint.pos;
-            // Quadratic Bézier curve
-            this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
-            this.curveStartWidth = lastPoint.width / 2;
-            console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
-        }
-        // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
-        let enteringVec = this.lastExitingVec;
-        if (!enteringVec) {
-            let sampleIdx = Math.ceil(this.buffer.length / 2);
-            if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
-                sampleIdx = this.buffer.length - 1;
-            }
-            enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
-        }
-        let exitingVec = this.computeExitingVec();
-        // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2;
-        const segmentStart = this.buffer[0];
-        const segmentEnd = newPoint.pos;
-        const startEndDist = segmentEnd.minus(segmentStart).magnitude();
-        const maxControlPointDist = maxRelativeLength * startEndDist;
-        // Exit in cases where we would divide by zero
-        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
-            return;
-        }
-        console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
-        enteringVec = enteringVec.normalized();
-        exitingVec = exitingVec.normalized();
-        console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
-        const lineFromStart = new LineSegment2(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
-        const lineFromEnd = new LineSegment2(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
-        const intersection = lineFromEnd.intersection(lineFromStart);
-        // Position the control point at this intersection
-        let controlPoint = null;
-        if (intersection) {
-            controlPoint = intersection.point;
-        }
-        // No intersection or the intersection is one of the end points?
-        if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
-            // Position the control point closer to the first -- the connecting
-            // segment will be roughly a line.
-            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
-        }
-        console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
-        console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
-        const prevCurve = this.currentCurve;
-        this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
-        if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
-            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) => {
-            for (const point of this.buffer) {
-                const proj = Vec2.ofXY(curve.project(point.xy));
-                const dist = proj.minus(point).magnitude();
-                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
-                if (dist > minFit || dist > this.maxFitAllowed) {
-                    return false;
-                }
-            }
-            return true;
-        };
-        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
-            if (!curveMatchesPoints(this.currentCurve)) {
-                // Use a curve that better fits the points
-                this.currentCurve = prevCurve;
-                this.curveEndWidth = prevEndWidth;
-                // Reset the last point -- the current point was not added to the curve.
-                this.lastPoint = lastPoint;
-                this.finalizeCurrentCurve();
-                return;
-            }
+            this.isFirstSegment = false;
         }
     }
+    addPoint(newPoint) {
+        this.curveFitter.addPoint(newPoint);
+        this.widthAverageNumSamples++;
+        this.averageWidth =
+            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
+                + newPoint.width / this.widthAverageNumSamples;
+    }
 }