js-draw 0.3.2 → 0.4.1

package/dist/src/Editor.d.ts

@@ -28,6 +28,8 @@ import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
+declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -140,8 +142,16 @@ export declare class Editor {
      */
     addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
+    private pointers;
+    private getPointerList;
+    /**
+     * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
+     * as the content of the editor.
+     */
+    handleHTMLPointerEvent(eventType: 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel', evt: PointerEvent): boolean;
     private isEventSink;
     private handlePaste;
+    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): void;
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */
@@ -183,6 +193,7 @@ export declare class Editor {
         remove: () => void;
     };
     addStyleSheet(content: string): HTMLStyleElement;
+    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;

package/dist/src/Editor.js

@@ -70,6 +70,7 @@ export class Editor {
         var _a, _b, _c, _d;
         this.eventListenerTargets = [];
         this.previousAccessibilityAnnouncement = '';
+        this.pointers = {};
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
         };
@@ -182,81 +183,7 @@ export class Editor {
         return toolbar;
     }
     registerListeners() {
-        const pointers = {};
-        const getPointerList = () => {
-            const nowTime = (new Date()).getTime();
-            const res = [];
-            for (const id in pointers) {
-                const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
-                if (pointers[id] && (nowTime - pointers[id].timeStamp) < maxUnupdatedTime) {
-                    res.push(pointers[id]);
-                }
-            }
-            return res;
-        };
-        // May be required to prevent text selection on iOS/Safari:
-        // See https://stackoverflow.com/a/70992717/17055750
-        this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
-        this.renderingRegion.addEventListener('contextmenu', evt => {
-            // Don't show a context menu
-            evt.preventDefault();
-        });
-        this.renderingRegion.addEventListener('pointerdown', evt => {
-            const pointer = Pointer.ofEvent(evt, true, this.viewport);
-            pointers[pointer.id] = pointer;
-            this.renderingRegion.setPointerCapture(pointer.id);
-            const event = {
-                kind: InputEvtType.PointerDownEvt,
-                current: pointer,
-                allPointers: getPointerList(),
-            };
-            this.toolController.dispatchInputEvent(event);
-            return true;
-        });
-        this.renderingRegion.addEventListener('pointermove', evt => {
-            var _a, _b;
-            const pointer = Pointer.ofEvent(evt, (_b = (_a = pointers[evt.pointerId]) === null || _a === void 0 ? void 0 : _a.down) !== null && _b !== void 0 ? _b : false, this.viewport);
-            if (pointer.down) {
-                const prevData = pointers[pointer.id];
-                if (prevData) {
-                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
-                    // If the pointer moved less than two pixels, don't send a new event.
-                    if (distanceMoved < 2) {
-                        return;
-                    }
-                }
-                pointers[pointer.id] = pointer;
-                if (this.toolController.dispatchInputEvent({
-                    kind: InputEvtType.PointerMoveEvt,
-                    current: pointer,
-                    allPointers: getPointerList(),
-                })) {
-                    evt.preventDefault();
-                }
-            }
-        });
-        const pointerEnd = (evt) => {
-            const pointer = Pointer.ofEvent(evt, false, this.viewport);
-            if (!pointers[pointer.id]) {
-                return;
-            }
-            pointers[pointer.id] = pointer;
-            this.renderingRegion.releasePointerCapture(pointer.id);
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.PointerUpEvt,
-                current: pointer,
-                allPointers: getPointerList(),
-            })) {
-                evt.preventDefault();
-            }
-            delete pointers[pointer.id];
-        };
-        this.renderingRegion.addEventListener('pointerup', evt => {
-            pointerEnd(evt);
-        });
-        this.renderingRegion.addEventListener('pointercancel', evt => {
-            pointerEnd(evt);
-        });
+        this.handlePointerEventsFrom(this.renderingRegion);
         this.handleKeyEventsFrom(this.renderingRegion);
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
@@ -282,7 +209,9 @@ export class Editor {
             if (evt.ctrlKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
-            const pos = Vec2.of(evt.offsetX, evt.offsetY);
+            // Ensure that `pos` is relative to `this.container`
+            const bbox = this.container.getBoundingClientRect();
+            const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
                 delta,
@@ -324,6 +253,78 @@ export class Editor {
             this.handlePaste(evt);
         });
     }
+    getPointerList() {
+        const nowTime = (new Date()).getTime();
+        const res = [];
+        for (const id in this.pointers) {
+            const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
+            if (this.pointers[id] && (nowTime - this.pointers[id].timeStamp) < maxUnupdatedTime) {
+                res.push(this.pointers[id]);
+            }
+        }
+        return res;
+    }
+    /**
+     * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
+     * as the content of the editor.
+     */
+    handleHTMLPointerEvent(eventType, evt) {
+        var _a, _b, _c;
+        const eventsRelativeTo = this.renderingRegion;
+        const eventTarget = (_a = evt.target) !== null && _a !== void 0 ? _a : this.renderingRegion;
+        if (eventType === 'pointerdown') {
+            const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+            this.pointers[pointer.id] = pointer;
+            eventTarget.setPointerCapture(pointer.id);
+            const event = {
+                kind: InputEvtType.PointerDownEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            };
+            this.toolController.dispatchInputEvent(event);
+            return true;
+        }
+        else if (eventType === 'pointermove') {
+            const pointer = Pointer.ofEvent(evt, (_c = (_b = this.pointers[evt.pointerId]) === null || _b === void 0 ? void 0 : _b.down) !== null && _c !== void 0 ? _c : false, this.viewport, eventsRelativeTo);
+            if (pointer.down) {
+                const prevData = this.pointers[pointer.id];
+                if (prevData) {
+                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+                    // If the pointer moved less than two pixels, don't send a new event.
+                    if (distanceMoved < 2) {
+                        return false;
+                    }
+                }
+                this.pointers[pointer.id] = pointer;
+                if (this.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PointerMoveEvt,
+                    current: pointer,
+                    allPointers: this.getPointerList(),
+                })) {
+                    evt.preventDefault();
+                }
+            }
+            return true;
+        }
+        else if (eventType === 'pointercancel' || eventType === 'pointerup') {
+            const pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+            if (!this.pointers[pointer.id]) {
+                return false;
+            }
+            this.pointers[pointer.id] = pointer;
+            eventTarget.releasePointerCapture(pointer.id);
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.PointerUpEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            })) {
+                evt.preventDefault();
+            }
+            delete this.pointers[pointer.id];
+            return true;
+        }
+        return eventType;
+    }
     isEventSink(evtTarget) {
         let currentElem = evtTarget;
         while (currentElem !== null) {
@@ -411,6 +412,24 @@ export class Editor {
             }
         });
     }
+    handlePointerEventsFrom(elem, filter) {
+        // May be required to prevent text selection on iOS/Safari:
+        // See https://stackoverflow.com/a/70992717/17055750
+        elem.addEventListener('touchstart', evt => evt.preventDefault());
+        elem.addEventListener('contextmenu', evt => {
+            // Don't show a context menu
+            evt.preventDefault();
+        });
+        const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        for (const eventName of eventNames) {
+            elem.addEventListener(eventName, evt => {
+                if (filter && !filter(eventName, evt)) {
+                    return true;
+                }
+                return this.handleHTMLPointerEvent(eventName, evt);
+            });
+        }
+    }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {
         elem.addEventListener('keydown', evt => {
@@ -577,9 +596,20 @@ export class Editor {
         this.container.appendChild(styleSheet);
         return styleSheet;
     }
+    // Dispatch a keyboard event to the currently selected tool.
+    // Intended for unit testing
+    sendKeyboardEvent(eventType, key, ctrlKey = false) {
+        this.toolController.dispatchInputEvent({
+            kind: eventType,
+            key,
+            ctrlKey
+        });
+    }
     // Dispatch a pen event to the currently selected tool.
     // Intended primarially for unit tests.
-    sendPenEvent(eventType, point, allPointers) {
+    sendPenEvent(eventType, point, 
+    // @deprecated
+    allPointers) {
         const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, this.viewport);
         this.toolController.dispatchInputEvent({
             kind: eventType,

package/dist/src/Pointer.d.ts

@@ -18,6 +18,6 @@ export default class Pointer {
     readonly id: number;
     readonly timeStamp: number;
     private constructor();
-    static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport): Pointer;
+    static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
     static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
 }

package/dist/src/Pointer.js

@@ -31,10 +31,15 @@ export default class Pointer {
         this.id = id;
         this.timeStamp = timeStamp;
     }
-    // Creates a Pointer from a DOM event.
-    static ofEvent(evt, isDown, viewport) {
+    // Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
+    // considered the top left of `relativeTo`.
+    static ofEvent(evt, isDown, viewport, relativeTo) {
         var _a, _b;
-        const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
+        let screenPos = Vec2.of(evt.clientX, evt.clientY);
+        if (relativeTo) {
+            const bbox = relativeTo.getBoundingClientRect();
+            screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
+        }
         const pointerTypeToDevice = {
             'mouse': PointerDevice.PrimaryButtonMouse,
             'pen': PointerDevice.Pen,

package/dist/src/Viewport.d.ts

@@ -29,6 +29,7 @@ export declare class Viewport {
     getRotationAngle(): number;
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
     roundPoint(point: Point2): Point2;
+    static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;
     computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;
     zoomTo(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Command;
 }

package/dist/src/Viewport.js

@@ -73,7 +73,8 @@ export class Viewport {
     getSizeOfPixelOnCanvas() {
         return 1 / this.getScaleFactor();
     }
-    // Returns the angle of the canvas in radians
+    // Returns the angle of the canvas in radians.
+    // This is the angle by which the canvas is rotated relative to the screen.
     getRotationAngle() {
         return this.transform.transformVec3(Vec3.unitX).angle();
     }
@@ -94,6 +95,18 @@ export class Viewport {
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }
+    // `roundAmount`: An integer >= 0, larger numbers cause less rounding. Smaller numbers cause more
+    // (as such `roundAmount = 0` does the most rounding).
+    static roundScaleRatio(scaleRatio, roundAmount = 1) {
+        if (Math.abs(scaleRatio) <= 1e-12) {
+            return 0;
+        }
+        // Represent as k 10ⁿ for some n, k ∈ ℤ.
+        const decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
+        const roundAnountFactor = Math.pow(2, roundAmount);
+        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+        return scaleRatio;
+    }
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
     computeZoomToTransform(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
         let transform = Mat33.identity;

package/dist/src/components/AbstractComponent.js

@@ -48,6 +48,7 @@ export default class AbstractComponent {
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this);
     }
+    // Returns a copy of this component.
     clone() {
         const clone = this.createClone();
         for (const attachmentKey in this.loadSaveData) {

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

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -18,7 +18,7 @@ export default class ImageComponent extends AbstractComponent {
         label: string | undefined;
         width: number;
         height: number;
-        transform: number[];
+        transform: Mat33Array;
     };
     protected applyTransformation(affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;

package/dist/src/components/Stroke.js

@@ -6,7 +6,8 @@ export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
         super('stroke');
-        this.parts = parts.map((section) => {
+        this.parts = [];
+        for (const section of parts) {
             const path = Path.fromRenderable(section);
             const pathBBox = this.bboxForPart(path.bbox, section.style);
             if (!this.contentBBox) {
@@ -15,14 +16,14 @@ export default class Stroke extends AbstractComponent {
             else {
                 this.contentBBox = this.contentBBox.union(pathBBox);
             }
-            return {
+            this.parts.push({
                 path,
                 // To implement RenderablePathSpec
                 startPoint: path.startPoint,
                 style: section.style,
                 commands: path.parts,
-            };
-        });
+            });
+        }
         (_a = this.contentBBox) !== null && _a !== void 0 ? _a : (this.contentBBox = Rect2.empty);
     }
     intersects(line) {
@@ -80,11 +81,16 @@ export default class Stroke extends AbstractComponent {
         });
     }
     getPath() {
-        var _a;
-        return (_a = this.parts.reduce((accumulator, current) => {
-            var _a;
-            return (_a = accumulator === null || accumulator === void 0 ? void 0 : accumulator.union(current.path)) !== null && _a !== void 0 ? _a : current.path;
-        }, null)) !== null && _a !== void 0 ? _a : Path.empty;
+        let result = null;
+        for (const part of this.parts) {
+            if (result) {
+                result = result.union(part.path);
+            }
+            else {
+                result !== null && result !== void 0 ? result : (result = part.path);
+            }
+        }
+        return result !== null && result !== void 0 ? result : Path.empty;
     }
     description(localization) {
         return localization.stroke;

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

@@ -29,7 +29,7 @@ export default class Text extends AbstractComponent {
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(affineTransfm: Mat33): void;
     protected createClone(): AbstractComponent;
-    private getText;
+    getText(): string;
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
     static deserializeFromString(json: any, getTextDimens?: GetTextDimensCallback): Text;

package/dist/src/components/Text.js

@@ -113,7 +113,7 @@ export default class Text extends AbstractComponent {
                 result.push(textObject.getText());
             }
         }
-        return result.join(' ');
+        return result.join('\n');
     }
     description(localizationTable) {
         return localizationTable.text(this.getText());

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

@@ -29,6 +29,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;
+    private approxCurrentCurveLength;
     private finalizeCurrentCurve;
     private currentSegmentToPath;
     private computeExitingVec;

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

@@ -117,7 +117,7 @@ export default class FreehandLineBuilder {
         }
     }
     build() {
-        if (this.lastPoint) {
+        if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
             this.finalizeCurrentCurve();
         }
         return this.previewStroke();
@@ -129,6 +129,18 @@ export default class FreehandLineBuilder {
         }
         return Viewport.roundPoint(point, minFit);
     }
+    // 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) {
@@ -204,10 +216,8 @@ export default class FreehandLineBuilder {
         let endVec = Vec2.ofXY(this.currentCurve.normal(1)).normalized();
         startVec = startVec.times(this.curveStartWidth / 2);
         endVec = endVec.times(this.curveEndWidth / 2);
-        if (isNaN(startVec.magnitude())) {
-            // TODO: This can happen when events are too close together. Find out why and
-            // 		 fix.
-            console.error('startVec is NaN', startVec, endVec, this.currentCurve);
+        if (!isFinite(startVec.magnitude())) {
+            console.error('Warning: startVec is NaN or ∞', startVec, endVec, this.currentCurve);
             startVec = endVec;
         }
         const startPt = Vec2.ofXY(this.currentCurve.get(0));
@@ -224,28 +234,18 @@ export default class FreehandLineBuilder {
             }
         }
         const halfVecT = projectionT;
-        let halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
+        const halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
             .normalized().times(this.curveStartWidth / 2 * halfVecT
             + this.curveEndWidth / 2 * (1 - halfVecT));
-        // Computes a boundary curve. [direction] should be either +1 or -1 (determines the side
-        // of the center curve to place the boundary).
-        const computeBoundaryCurve = (direction, halfVec) => {
-            return new Bezier(startPt.plus(startVec.times(direction)), controlPoint.plus(halfVec.times(direction)), endPt.plus(endVec.times(direction)));
-        };
-        const boundariesIntersect = () => {
-            const upperBoundary = computeBoundaryCurve(1, halfVec);
-            const lowerBoundary = computeBoundaryCurve(-1, halfVec);
-            return upperBoundary.intersects(lowerBoundary).length > 0;
-        };
-        // If the boundaries have intersections, increasing the half vector's length could fix this.
-        if (boundariesIntersect()) {
-            halfVec = halfVec.times(1.1);
-        }
         // Each starts at startPt ± 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 lowerCurve = {
             kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-            endPoint: this.roundPoint(endPt.plus(endVec)),
+            controlPoint: lowerCurveControlPoint,
+            endPoint: lowerCurveEndPoint,
         };
         // From the end of the upperCurve to the start of the lowerCurve:
         const upperToLowerConnector = {
@@ -255,11 +255,11 @@ export default class FreehandLineBuilder {
         // From the end of lowerCurve to the start of upperCurve:
         const lowerToUpperConnector = {
             kind: PathCommandType.LineTo,
-            point: this.roundPoint(endPt.minus(endVec))
+            point: upperCurveStartPoint,
         };
         const upperCurve = {
             kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+            controlPoint: upperCurveControlPoint,
             endPoint: this.roundPoint(startPt.minus(startVec)),
         };
         return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
@@ -275,7 +275,6 @@ export default class FreehandLineBuilder {
             const fuzzEq = 1e-10;
             const deltaTime = newPoint.time - this.lastPoint.time;
             if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
-                console.warn('Discarding identical point');
                 return;
             }
             else if (isNaN(newPoint.pos.magnitude())) {
@@ -321,35 +320,35 @@ export default class FreehandLineBuilder {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2;
+        const maxRelativeLength = 3;
         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 || isNaN(exitingVec.magnitude())) {
+        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
             return;
         }
-        console.assert(!isNaN(enteringVec.magnitude()));
+        console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
         enteringVec = enteringVec.normalized();
         exitingVec = exitingVec.normalized();
-        console.assert(!isNaN(enteringVec.magnitude()));
+        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;
+        let controlPoint = null;
         if (intersection) {
             controlPoint = intersection.point;
         }
-        else {
+        // 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));
         }
-        if (isNaN(controlPoint.magnitude()) || isNaN(segmentStart.magnitude())) {
-            console.error('controlPoint is NaN', intersection, 'Start:', segmentStart, 'End:', segmentEnd, 'in:', enteringVec, 'out:', exitingVec);
-        }
+        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())) {
@@ -369,8 +368,7 @@ export default class FreehandLineBuilder {
             }
             return true;
         };
-        const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
+        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

package/dist/src/language/assertions.d.ts

@@ -0,0 +1 @@
+export declare const assertUnreachable: (key: never) => never;

package/dist/src/language/assertions.js

@@ -0,0 +1,5 @@
+// Compile-time assertion that a branch of code is unreachable.
+// See https://stackoverflow.com/a/39419171/17055750
+export const assertUnreachable = (key) => {
+    throw new Error(`Should be unreachable. Key: ${key}.`);
+};

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

@@ -1,5 +1,16 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
+export declare type Mat33Array = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
 /**
  * Represents a three dimensional linear transformation or
  * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
@@ -68,11 +79,36 @@ export default class Mat33 {
      * ...
      * ```
      */
-    toArray(): number[];
+    toArray(): Mat33Array;
+    /**
+     * @example
+     * ```
+     * new Mat33(
+     *  1, 2, 3,
+     *  4, 5, 6,
+     *  7, 8, 9,
+     * ).mapEntries(component => component - 1);
+     * // → ⎡ 0, 1, 2 ⎤
+     * //   ⎢ 3, 4, 5 ⎥
+     * //   ⎣ 6, 7, 8 ⎦
+     * ```
+     */
+    mapEntries(mapping: (component: number) => number): Mat33;
     /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount: Vec2): Mat33;
     static zRotation(radians: number, center?: Point2): Mat33;
     static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
-    /** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+    /** @see {@link !fromCSSMatrix} */
+    toCSSMatrix(): string;
+    /**
+     * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
+     *
+     * Note that such a matrix has the form,
+     * ```
+     * ⎡ a c e ⎤
+     * ⎢ b d f ⎥
+     * ⎣ 0 0 1 ⎦
+     * ```
+     */
     static fromCSSMatrix(cssString: string): Mat33;
 }