js-draw 0.7.2 → 0.9.0

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

@@ -0,0 +1,339 @@
+import { Bezier } from 'bezier-js';
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import { PathCommandType } from '../../math/Path';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeSmoother } from '../util/StrokeSmoother';
+export const makePressureSensitiveFreehandLineBuilder = (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.
+    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
+    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
+    return new PressureSensitiveFreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
+};
+// Handles stroke smoothing and creates Strokes from user/stylus input.
+export default class PressureSensitiveFreehandLineBuilder {
+    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) {
+        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, curve => this.addCurve(curve));
+        this.curveStartWidth = 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.startPoint.color) !== null && _a !== void 0 ? _a : null,
+        };
+    }
+    previewCurrentPath() {
+        var _a;
+        const upperPath = this.upperSegments.slice();
+        const lowerPath = this.lowerSegments.slice();
+        let lowerToUpperCap;
+        let pathStartConnector;
+        const currentCurve = this.curveFitter.preview();
+        if (currentCurve) {
+            const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand } = this.segmentToPath(currentCurve);
+            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;
+        }
+        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,
+            ],
+            style: this.getRenderingStyle(),
+        };
+    }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
+        if (preview) {
+            return [...this.parts, preview];
+        }
+        return null;
+    }
+    previewStroke() {
+        const pathPreview = this.previewFullPath();
+        if (pathPreview) {
+            return new Stroke(pathPreview);
+        }
+        return null;
+    }
+    preview(renderer) {
+        const paths = this.previewFullPath();
+        if (paths) {
+            const approxBBox = this.viewport.visibleRect;
+            renderer.startObject(approxBBox);
+            for (const path of paths) {
+                renderer.drawPath(path);
+            }
+            renderer.endObject();
+        }
+    }
+    build() {
+        this.curveFitter.finalizeCurrentCurve();
+        if (this.isFirstSegment) {
+            // Ensure we have something.
+            this.addCurve(null);
+        }
+        return this.previewStroke();
+    }
+    roundPoint(point) {
+        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 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;
+    }
+    addCurve(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;
+            }
+            const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            const center = this.roundPoint(this.startPoint.pos);
+            // Start on the right, cycle clockwise:
+            //    |
+            //  ----- ←
+            //    |
+            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.segmentToPath(curve);
+        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;
+        this.curveStartWidth = curve.startWidth;
+    }
+    // Returns [upper curve, connector, lower curve]
+    segmentToPath(curve) {
+        const bezier = new Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
+        let startVec = Vec2.ofXY(bezier.normal(0)).normalized();
+        let 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;
+        }
+        const startPt = curve.startPoint;
+        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.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
+                projectionT = 0.1;
+            }
+            else {
+                projectionT = 0.9;
+            }
+        }
+        const halfVecT = projectionT;
+        const halfVec = Vec2.ofXY(bezier.normal(halfVecT))
+            .normalized().times(curve.startWidth / 2 * halfVecT
+            + curve.endWidth / 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 = {
+            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,
+        };
+    }
+    addPoint(newPoint) {
+        this.curveFitter.addPoint(newPoint);
+    }
+}

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

@@ -1,5 +1,7 @@
 export * from './builders/types';
 export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
+export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/StrokeSmoother';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';

package/dist/src/components/lib.js

@@ -1,5 +1,7 @@
 export * from './builders/types';
 export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
+export { default as StrokeSmoother } from './util/StrokeSmoother';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';

package/dist/src/components/util/StrokeSmoother.d.ts

@@ -0,0 +1,35 @@
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import { StrokeDataPoint } from '../../types';
+export interface Curve {
+    startPoint: Vec2;
+    startWidth: number;
+    controlPoint: Vec2;
+    endWidth: number;
+    endPoint: Vec2;
+}
+declare type OnCurveAddedCallback = (curve: Curve | null) => void;
+export declare class StrokeSmoother {
+    private startPoint;
+    private minFitAllowed;
+    private maxFitAllowed;
+    private onCurveAdded;
+    private isFirstSegment;
+    private buffer;
+    private lastPoint;
+    private lastExitingVec;
+    private currentCurve;
+    private curveStartWidth;
+    private curveEndWidth;
+    private momentum;
+    private bbox;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, onCurveAdded: OnCurveAddedCallback);
+    getBBox(): Rect2;
+    preview(): Curve | null;
+    private approxCurrentCurveLength;
+    finalizeCurrentCurve(): void;
+    private currentSegmentToPath;
+    private computeExitingVec;
+    addPoint(newPoint: StrokeDataPoint): void;
+}
+export default StrokeSmoother;

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

@@ -0,0 +1,206 @@
+import { Bezier } from 'bezier-js';
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import LineSegment2 from '../../math/LineSegment2';
+// Handles stroke smoothing
+export class StrokeSmoother {
+    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, onCurveAdded) {
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.maxFitAllowed = maxFitAllowed;
+        this.onCurveAdded = onCurveAdded;
+        this.isFirstSegment = true;
+        this.lastExitingVec = null;
+        this.currentCurve = null;
+        this.lastPoint = this.startPoint;
+        this.buffer = [this.startPoint.pos];
+        this.momentum = Vec2.zero;
+        this.currentCurve = null;
+        this.curveStartWidth = startPoint.width;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    preview() {
+        if (!this.currentCurve) {
+            return null;
+        }
+        return this.currentSegmentToPath();
+    }
+    // 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() {
+        // Case where no points have been added
+        if (!this.currentCurve) {
+            return;
+        }
+        this.onCurveAdded(this.currentSegmentToPath());
+        const lastPoint = this.buffer[this.buffer.length - 1];
+        this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
+        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!');
+        }
+        const startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+        if (!isFinite(startVec.magnitude())) {
+            throw new Error(`startVec(${startVec}) is NaN or ∞`);
+        }
+        const startPt = Vec2.ofXY(this.currentCurve.get(0));
+        const endPt = Vec2.ofXY(this.currentCurve.get(1));
+        const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+        return {
+            startPoint: startPt,
+            controlPoint,
+            endPoint: endPt,
+            startWidth: this.curveStartWidth,
+            endWidth: this.curveEndWidth,
+        };
+    }
+    // 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;
+        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.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 / 3));
+        }
+        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;
+            }
+        }
+    }
+}
+export default StrokeSmoother;

package/dist/src/math/Mat33.d.ts

@@ -94,6 +94,8 @@ export default class Mat33 {
      * ```
      */
     mapEntries(mapping: (component: number) => number): Mat33;
+    /** Estimate the scale factor of this matrix (based on the first row). */
+    getScaleFactor(): number;
     /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount: Vec2): Mat33;
     static zRotation(radians: number, center?: Point2): Mat33;

package/dist/src/math/Mat33.js

@@ -199,6 +199,10 @@ export default class Mat33 {
     mapEntries(mapping) {
         return new Mat33(mapping(this.a1), mapping(this.a2), mapping(this.a3), mapping(this.b1), mapping(this.b2), mapping(this.b3), mapping(this.c1), mapping(this.c2), mapping(this.c3));
     }
+    /** Estimate the scale factor of this matrix (based on the first row). */
+    getScaleFactor() {
+        return Math.hypot(this.a1, this.a2);
+    }
     /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount) {
         // When transforming Vec2s by a 3x3 matrix, we give the input

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

@@ -50,6 +50,8 @@ export default class Path {
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
+    private getEndPoint;
+    roughlyIntersects(rect: Rect2, strokeWidth?: number): boolean;
     closedRoughlyIntersects(rect: Rect2): boolean;
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
     static fromRenderable(renderable: RenderablePathSpec): Path;