js-draw 0.6.0 → 0.7.1

package/dist/src/Editor.d.ts

@@ -93,7 +93,6 @@ export declare class Editor {
     readonly toolController: ToolController;
     /**
      * Global event dispatcher/subscriber.
-     * @see {@link types.EditorEventType}
      */
     readonly notifier: EditorNotifier;
     private loadingWarning;

package/dist/src/Editor.js

@@ -42,6 +42,7 @@ import Pointer from './Pointer';
 import Mat33 from './math/Mat33';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
+import { toRoundedString } from './math/rounding';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -638,9 +639,9 @@ export class Editor {
         importExportViewport.resetTransform(origTransform);
         // Just show the main region
         const rect = importExportViewport.visibleRect;
-        result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
-        result.setAttribute('width', `${rect.w}`);
-        result.setAttribute('height', `${rect.h}`);
+        result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
+        result.setAttribute('width', toRoundedString(rect.w));
+        result.setAttribute('height', toRoundedString(rect.h));
         // Ensure the image can be identified as an SVG if downloaded.
         // See https://jwatt.org/svg/authoring/
         result.setAttribute('version', '1.1');

package/dist/src/SVGLoader.js

@@ -11,7 +11,7 @@ import Color4 from './Color4';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import Text from './components/Text';
+import TextComponent from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';
@@ -209,7 +209,7 @@ export default class SVGLoader {
         };
         const supportedAttrs = [];
         const transform = this.getTransform(elem, supportedAttrs, computedStyles);
-        const result = new Text(contentList, transform, style);
+        const result = new TextComponent(contentList, transform, style);
         this.attachUnrecognisedAttrs(result, elem, new Set(supportedAttrs), new Set(supportedStyleAttrs));
         return result;
     }

package/dist/src/components/Stroke.js

@@ -3,6 +3,7 @@ import Rect2 from '../math/Rect2';
 import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 export default class Stroke extends AbstractComponent {
+    // Creates a `Stroke` from the given `parts`.
     constructor(parts) {
         var _a;
         super('stroke');

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

@@ -12,24 +12,29 @@ export interface TextStyle {
     fontVariant?: string;
     renderingStyle: RenderingStyle;
 }
-export default class Text extends AbstractComponent {
-    protected readonly textObjects: Array<string | Text>;
+export default class TextComponent extends AbstractComponent {
+    protected readonly textObjects: Array<string | TextComponent>;
     private transform;
-    private readonly style;
+    private style;
     protected contentBBox: Rect2;
-    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle);
+    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextStyle);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
     private static textMeasuringCtx;
     private static estimateTextDimens;
     private static getTextDimens;
     private computeBBoxOfPart;
     private recomputeBBox;
+    private renderInternal;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
+    getBaselinePos(): import("../lib").Vec3;
+    getTextStyle(): TextStyle;
+    getTransform(): Mat33;
     protected applyTransformation(affineTransfm: Mat33): void;
     protected createClone(): AbstractComponent;
     getText(): string;
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
-    static deserializeFromString(json: any): Text;
+    static deserializeFromString(json: any): TextComponent;
+    static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent;
 }

package/dist/src/components/Text.js

@@ -1,16 +1,23 @@
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import { Vec2 } from '../math/Vec2';
 import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 const componentTypeId = 'text';
-export default class Text extends AbstractComponent {
+export default class TextComponent extends AbstractComponent {
     constructor(textObjects, transform, style) {
         super(componentTypeId);
         this.textObjects = textObjects;
         this.transform = transform;
         this.style = style;
         this.recomputeBBox();
+        // If this has no direct children, choose a style representative of this' content
+        // (useful for estimating the style of the TextComponent).
+        const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
+        if (!hasDirectContent && textObjects.length > 0) {
+            this.style = textObjects[0].getTextStyle();
+        }
     }
     static applyTextStyles(ctx, style) {
         var _a, _b;
@@ -35,12 +42,12 @@ export default class Text extends AbstractComponent {
     // Returns the bounding box of `text`. This is approximate if no Canvas is available.
     static getTextDimens(text, style) {
         var _a, _b;
-        (_a = Text.textMeasuringCtx) !== null && _a !== void 0 ? _a : (Text.textMeasuringCtx = (_b = document.createElement('canvas').getContext('2d')) !== null && _b !== void 0 ? _b : null);
-        if (!Text.textMeasuringCtx) {
+        (_a = TextComponent.textMeasuringCtx) !== null && _a !== void 0 ? _a : (TextComponent.textMeasuringCtx = (_b = document.createElement('canvas').getContext('2d')) !== null && _b !== void 0 ? _b : null);
+        if (!TextComponent.textMeasuringCtx) {
             return this.estimateTextDimens(text, style);
         }
-        const ctx = Text.textMeasuringCtx;
-        Text.applyTextStyles(ctx, style);
+        const ctx = TextComponent.textMeasuringCtx;
+        TextComponent.applyTextStyles(ctx, style);
         const measure = ctx.measureText(text);
         // Text is drawn with (0,0) at the bottom left of the baseline.
         const textY = -measure.actualBoundingBoxAscent;
@@ -49,7 +56,7 @@ export default class Text extends AbstractComponent {
     }
     computeBBoxOfPart(part) {
         if (typeof part === 'string') {
-            const textBBox = Text.getTextDimens(part, this.style);
+            const textBBox = TextComponent.getTextDimens(part, this.style);
             return textBBox.transformedBoundingBox(this.transform);
         }
         else {
@@ -66,19 +73,22 @@ export default class Text extends AbstractComponent {
         }
         this.contentBBox = bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
     }
-    render(canvas, _visibleRect) {
+    renderInternal(canvas) {
         const cursor = this.transform;
-        canvas.startObject(this.contentBBox);
         for (const textObject of this.textObjects) {
             if (typeof textObject === 'string') {
                 canvas.drawText(textObject, cursor, this.style);
             }
             else {
                 canvas.pushTransform(cursor);
-                textObject.render(canvas);
+                textObject.renderInternal(canvas);
                 canvas.popTransform();
             }
         }
+    }
+    render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
+        this.renderInternal(canvas);
         canvas.endObject(this.getLoadSaveData());
     }
     intersects(lineSegment) {
@@ -89,7 +99,7 @@ export default class Text extends AbstractComponent {
         lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
         for (const subObject of this.textObjects) {
             if (typeof subObject === 'string') {
-                const textBBox = Text.getTextDimens(subObject, this.style);
+                const textBBox = TextComponent.getTextDimens(subObject, this.style);
                 // TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
                 // use pixel-testing to check for intersection with its contour.
                 if (textBBox.getEdges().some(edge => lineSegment.intersection(edge) !== null)) {
@@ -104,12 +114,21 @@ export default class Text extends AbstractComponent {
         }
         return false;
     }
+    getBaselinePos() {
+        return this.transform.transformVec2(Vec2.zero);
+    }
+    getTextStyle() {
+        return this.style;
+    }
+    getTransform() {
+        return this.transform;
+    }
     applyTransformation(affineTransfm) {
         this.transform = affineTransfm.rightMul(this.transform);
         this.recomputeBBox();
     }
     createClone() {
-        return new Text(this.textObjects, this.transform, this.style);
+        return new TextComponent(this.textObjects, this.transform, this.style);
     }
     getText() {
         const result = [];
@@ -159,7 +178,7 @@ export default class Text extends AbstractComponent {
             if (((_a = data.text) !== null && _a !== void 0 ? _a : null) !== null) {
                 return data.text;
             }
-            return Text.deserializeFromString(data.json);
+            return TextComponent.deserializeFromString(data.json);
         });
         json.transform = json.transform.filter((elem) => typeof elem === 'number');
         if (json.transform.length !== 9) {
@@ -167,8 +186,23 @@ export default class Text extends AbstractComponent {
         }
         const transformData = json.transform;
         const transform = new Mat33(...transformData);
-        return new Text(textObjects, transform, style);
+        return new TextComponent(textObjects, transform, style);
+    }
+    static fromLines(lines, transform, style) {
+        let lastComponent = null;
+        const components = [];
+        for (const line of lines) {
+            let position = Vec2.zero;
+            if (lastComponent) {
+                const lineMargin = Math.floor(style.size);
+                position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+            }
+            const component = new TextComponent([line], Mat33.translation(position), style);
+            components.push(component);
+            lastComponent = component;
+        }
+        return new TextComponent(components, transform, style);
     }
 }
-Text.textMeasuringCtx = null;
-AbstractComponent.registerComponent(componentTypeId, (data) => Text.deserializeFromString(data));
+TextComponent.textMeasuringCtx = null;
+AbstractComponent.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

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

@@ -1,6 +1,7 @@
 import AbstractRenderer 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';
 export declare const makeFreehandLineBuilder: ComponentBuilderFactory;
@@ -8,11 +9,15 @@ 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;
@@ -21,14 +26,16 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private curveEndWidth;
     private momentum;
     private bbox;
-    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number);
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
     getBBox(): Rect2;
     private getRenderingStyle;
-    private previewPath;
+    private previewCurrentPath;
+    private previewFullPath;
     private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;
+    private shouldStartNewSegment;
     private approxCurrentCurveLength;
     private finalizeCurrentCurve;
     private currentSegmentToPath;

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

@@ -6,11 +6,11 @@ import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, viewport) => {
-    // Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
+    // 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() * 7;
+    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
     const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
-    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
+    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder {
@@ -19,13 +19,17 @@ export default class FreehandLineBuilder {
     // 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) {
+    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;
@@ -46,16 +50,16 @@ export default class FreehandLineBuilder {
             fill: (_a = this.lastPoint.color) !== null && _a !== void 0 ? _a : null,
         };
     }
-    previewPath() {
+    previewCurrentPath() {
         var _a;
-        let upperPath;
-        let lowerPath;
+        const upperPath = this.upperSegments.slice();
+        const lowerPath = this.lowerSegments.slice();
         let lowerToUpperCap;
         let pathStartConnector;
         if (this.currentCurve) {
-            const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
-            upperPath = this.upperSegments.concat(upperCurve);
-            lowerPath = this.lowerSegments.concat(lowerCurve);
+            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;
         }
@@ -63,12 +67,17 @@ export default class FreehandLineBuilder {
             if (this.mostRecentConnector === null || this.pathStartConnector === null) {
                 return null;
             }
-            upperPath = this.upperSegments.slice();
-            lowerPath = this.lowerSegments.slice();
             lowerToUpperCap = this.mostRecentConnector;
             pathStartConnector = this.pathStartConnector;
         }
-        const startPoint = lowerPath[lowerPath.length - 1].endPoint;
+        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
@@ -103,21 +112,33 @@ export default class FreehandLineBuilder {
             style: this.getRenderingStyle(),
         };
     }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
+        if (preview) {
+            return [...this.parts, preview];
+        }
+        return null;
+    }
     previewStroke() {
-        const pathPreview = this.previewPath();
+        const pathPreview = this.previewFullPath();
         if (pathPreview) {
-            return new Stroke([pathPreview]);
+            return new Stroke(pathPreview);
         }
         return null;
     }
     preview(renderer) {
-        const path = this.previewPath();
-        if (path) {
-            renderer.drawPath(path);
+        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() {
-        if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
+        if (this.lastPoint) {
             this.finalizeCurrentCurve();
         }
         return this.previewStroke();
@@ -129,6 +150,61 @@ export default class FreehandLineBuilder {
         }
         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) {
@@ -185,8 +261,17 @@ export default class FreehandLineBuilder {
             this.mostRecentConnector = this.pathStartConnector;
             return;
         }
-        const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
-        if (this.isFirstSegment) {
+        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;
@@ -195,8 +280,10 @@ export default class FreehandLineBuilder {
         // With the most recent connector, we're joining the end of the lowerPath to the most recent
         // upperPath:
         this.mostRecentConnector = lowerToUpperConnector;
-        this.upperSegments.push(upperCurve);
-        this.lowerSegments.push(lowerCurve);
+        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!');
@@ -238,11 +325,13 @@ export default class FreehandLineBuilder {
             .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 lowerCurve = {
+        const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
+        const lowerCurveCommand = {
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint: lowerCurveControlPoint,
             endPoint: lowerCurveEndPoint,
@@ -250,19 +339,24 @@ export default class FreehandLineBuilder {
         // From the end of the upperCurve to the start of the lowerCurve:
         const upperToLowerConnector = {
             kind: PathCommandType.LineTo,
-            point: this.roundPoint(startPt.plus(startVec)),
+            point: lowerCurveStartPoint,
         };
         // From the end of lowerCurve to the start of upperCurve:
         const lowerToUpperConnector = {
             kind: PathCommandType.LineTo,
             point: upperCurveStartPoint,
         };
-        const upperCurve = {
+        const upperCurveCommand = {
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint: upperCurveControlPoint,
-            endPoint: this.roundPoint(startPt.minus(startVec)),
+            endPoint: upperCurveEndPoint,
+        };
+        const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        return {
+            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
+            upperCurve, lowerCurve,
         };
-        return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
     }
     // Compute the direction of the velocity at the end of this.buffer
     computeExitingVec() {
@@ -299,6 +393,10 @@ export default class FreehandLineBuilder {
         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) {
@@ -310,6 +408,7 @@ export default class FreehandLineBuilder {
             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);

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

@@ -3,6 +3,6 @@ export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import Text from './Text';
+import TextComponent from './Text';
 import ImageComponent from './ImageComponent';
-export { Stroke, Text, Text as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -3,6 +3,6 @@ export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import Text from './Text';
+import TextComponent from './Text';
 import ImageComponent from './ImageComponent';
-export { Stroke, Text, Text as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import Text from '../../components/Text';
+import TextComponent from '../../components/Text';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -113,7 +113,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.save();
         transform = this.getCanvasToScreenTransform().rightMul(transform);
         this.transformBy(transform);
-        Text.applyTextStyles(this.ctx, style);
+        TextComponent.applyTextStyles(this.ctx, style);
         if (style.renderingStyle.fill.a !== 0) {
             this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
             this.ctx.fillText(text, 0, 0);

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -20,6 +20,8 @@ export default class SVGRenderer extends AbstractRenderer {
     private addPathToSVG;
     drawPath(pathSpec: RenderablePathSpec): void;
     private transformFrom;
+    private textContainer;
+    private textContainerTransform;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;