js-draw 0.1.2 → 0.1.3

package/dist/src/Editor.js

@@ -281,13 +281,12 @@ export class Editor {
         this.display.startRerender();
         // Draw a rectangle around the region that will be visible on save
         const renderer = this.display.getDryInkRenderer();
+        this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
         if (showImageBounds) {
             const exportRectFill = { fill: Color4.fromHex('#44444455') };
-            const exportRectStrokeWidth = 12;
+            const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
             renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
         }
-        //this.image.render(renderer, this.viewport);
-        this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
         this.rerenderQueued = false;
     }
     drawWetInk(...path) {

package/dist/src/SVGLoader.d.ts

@@ -2,7 +2,13 @@ import Rect2 from './geometry/Rect2';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
+export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
 export declare type SVGLoaderUnknownAttribute = [string, string];
+export declare type SVGLoaderUnknownStyleAttribute = {
+    key: string;
+    value: string;
+    priority?: string;
+};
 export default class SVGLoader implements ImageLoader {
     private source;
     private onFinish?;
@@ -17,6 +23,8 @@ export default class SVGLoader implements ImageLoader {
     private strokeDataFromElem;
     private attachUnrecognisedAttrs;
     private addPath;
+    private makeText;
+    private addText;
     private addUnknownNode;
     private updateViewBox;
     private updateSVGAttrs;

package/dist/src/SVGLoader.js

@@ -10,13 +10,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import Color4 from './Color4';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
+import Text from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
+import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
+import { Vec2 } from './geometry/Vec2';
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
 export const svgAttributesDataKey = 'svgAttrs';
+export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 export default class SVGLoader {
     constructor(source, onFinish) {
         this.source = source;
@@ -83,13 +87,29 @@ export default class SVGLoader {
         }
         return result;
     }
-    attachUnrecognisedAttrs(elem, node, supportedAttrs) {
+    attachUnrecognisedAttrs(elem, node, supportedAttrs, supportedStyleAttrs) {
         for (const attr of node.getAttributeNames()) {
-            if (supportedAttrs.has(attr)) {
+            if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
                 continue;
             }
             elem.attachLoadSaveData(svgAttributesDataKey, [attr, node.getAttribute(attr)]);
         }
+        if (supportedStyleAttrs) {
+            for (const attr of node.style) {
+                if (attr === '' || !attr) {
+                    continue;
+                }
+                if (supportedStyleAttrs.has(attr)) {
+                    continue;
+                }
+                // TODO: Do we need special logic for !important properties?
+                elem.attachLoadSaveData(svgStyleAttributesDataKey, {
+                    key: attr,
+                    value: node.style.getPropertyValue(attr),
+                    priority: node.style.getPropertyPriority(attr)
+                });
+            }
+        }
     }
     // Adds a stroke with a single path
     addPath(node) {
@@ -98,7 +118,8 @@ export default class SVGLoader {
         try {
             const strokeData = this.strokeDataFromElem(node);
             elem = new Stroke(strokeData);
-            this.attachUnrecognisedAttrs(elem, node, new Set(['stroke', 'fill', 'stroke-width', 'd']));
+            const supportedStyleAttrs = ['stroke', 'fill', 'stroke-width'];
+            this.attachUnrecognisedAttrs(elem, node, new Set([...supportedStyleAttrs, 'd']), new Set(supportedStyleAttrs));
         }
         catch (e) {
             console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
@@ -106,6 +127,74 @@ export default class SVGLoader {
         }
         (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem);
     }
+    makeText(elem) {
+        var _a;
+        const contentList = [];
+        for (const child of elem.childNodes) {
+            if (child.nodeType === Node.TEXT_NODE) {
+                contentList.push((_a = child.nodeValue) !== null && _a !== void 0 ? _a : '');
+            }
+            else if (child.nodeType === Node.ELEMENT_NODE) {
+                const subElem = child;
+                if (subElem.tagName.toLowerCase() === 'tspan') {
+                    contentList.push(this.makeText(subElem));
+                }
+                else {
+                    throw new Error(`Unrecognized text child element: ${subElem}`);
+                }
+            }
+            else {
+                throw new Error(`Unrecognized text child node: ${child}.`);
+            }
+        }
+        // Compute styles.
+        const computedStyles = window.getComputedStyle(elem);
+        const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+        const supportedStyleAttrs = [
+            'fontFamily',
+            'fill',
+            'transform'
+        ];
+        let fontSize = 12;
+        if (fontSizeMatch) {
+            supportedStyleAttrs.push('fontSize');
+            fontSize = parseFloat(fontSizeMatch[1]);
+        }
+        const style = {
+            size: fontSize,
+            fontFamily: computedStyles.fontFamily || 'sans',
+            renderingStyle: {
+                fill: Color4.fromString(computedStyles.fill)
+            },
+        };
+        // Compute transform matrix
+        let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+        const supportedAttrs = [];
+        const elemX = elem.getAttribute('x');
+        const elemY = elem.getAttribute('y');
+        if (elemX && elemY) {
+            const x = parseFloat(elemX);
+            const y = parseFloat(elemY);
+            if (!isNaN(x) && !isNaN(y)) {
+                supportedAttrs.push('x', 'y');
+                transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+            }
+        }
+        const result = new Text(contentList, transform, style);
+        this.attachUnrecognisedAttrs(result, elem, new Set(supportedAttrs), new Set(supportedStyleAttrs));
+        return result;
+    }
+    addText(elem) {
+        var _a;
+        try {
+            const textElem = this.makeText(elem);
+            (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, textElem);
+        }
+        catch (e) {
+            console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+            this.addUnknownNode(elem);
+        }
+    }
     addUnknownNode(node) {
         var _a;
         const component = new UnknownSVGObject(node);
@@ -117,12 +206,13 @@ export default class SVGLoader {
         if (this.rootViewBox || !viewBoxAttr) {
             return;
         }
-        const components = viewBoxAttr.split(/[ \t,]/);
+        const components = viewBoxAttr.split(/[ \t\n,]+/);
         const x = parseFloat(components[0]);
         const y = parseFloat(components[1]);
         const width = parseFloat(components[2]);
         const height = parseFloat(components[3]);
         if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+            console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
             return;
         }
         this.rootViewBox = new Rect2(x, y, width, height);
@@ -136,6 +226,7 @@ export default class SVGLoader {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.totalToProcess += node.childElementCount;
+            let visitChildren = true;
             switch (node.tagName.toLowerCase()) {
                 case 'g':
                     // Continue -- visit the node's children.
@@ -143,6 +234,10 @@ export default class SVGLoader {
                 case 'path':
                     this.addPath(node);
                     break;
+                case 'text':
+                    this.addText(node);
+                    visitChildren = false;
+                    break;
                 case 'svg':
                     this.updateViewBox(node);
                     this.updateSVGAttrs(node);
@@ -155,8 +250,10 @@ export default class SVGLoader {
                     this.addUnknownNode(node);
                     return;
             }
-            for (const child of node.children) {
-                yield this.visit(child);
+            if (visitChildren) {
+                for (const child of node.children) {
+                    yield this.visit(child);
+                }
             }
             this.processedCount++;
             yield ((_a = this.onProgress) === null || _a === void 0 ? void 0 : _a.call(this, this.processedCount, this.totalToProcess));
@@ -223,7 +320,9 @@ export default class SVGLoader {
         sandboxDoc.close();
         const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svgElem.innerHTML = text;
+        sandboxDoc.body.appendChild(svgElem);
         return new SVGLoader(svgElem, () => {
+            svgElem.remove();
             sandbox.remove();
         });
     }

package/dist/src/Viewport.d.ts

@@ -35,7 +35,7 @@ export declare class Viewport {
     getRotationAngle(): number;
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
     roundPoint(point: Point2): Point2;
-    zoomTo(toMakeVisible: Rect2): Command;
+    zoomTo(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Command;
 }
 export declare namespace Viewport {
     type ViewportTransform = typeof Viewport.ViewportTransform.prototype;

package/dist/src/Viewport.js

@@ -85,7 +85,7 @@ export class Viewport {
     // Returns a Command that transforms the view such that [rect] is visible, and perhaps
     // centered in the viewport.
     // Returns null if no transformation is necessary
-    zoomTo(toMakeVisible) {
+    zoomTo(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
         let transform = Mat33.identity;
         if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
             throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
@@ -104,7 +104,7 @@ export class Viewport {
         const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
         // Ensure that toMakeVisible is at least 1/8th of the visible region.
         const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
-        if (largerThanTarget || muchSmallerThanTarget) {
+        if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
             // If larger than the target, ensure that the longest axis is visible.
             // If smaller, shrink the visible rectangle as much as possible
             const multiplier = (largerThanTarget ? Math.max : Math.min)(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -13,7 +13,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
             // Don't draw unrenderable objects if we can't
             return;
         }
-        console.log('Rendering to SVG.', this.attrs);
         for (const [attr, value] of this.attrs) {
             canvas.setRootSVGAttribute(attr, value);
         }

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

@@ -0,0 +1,30 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+export interface TextStyle {
+    size: number;
+    fontFamily: string;
+    fontWeight?: string;
+    fontVariant?: string;
+    renderingStyle: RenderingStyle;
+}
+export default class Text extends AbstractComponent {
+    protected textObjects: Array<string | Text>;
+    private transform;
+    private style;
+    protected contentBBox: Rect2;
+    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle);
+    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
+    private static textMeasuringCtx;
+    private static getTextDimens;
+    private computeBBoxOfPart;
+    private recomputeBBox;
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    intersects(lineSegment: LineSegment2): boolean;
+    protected applyTransformation(affineTransfm: Mat33): void;
+    private getText;
+    description(localizationTable: ImageComponentLocalization): string;
+}

package/dist/src/components/Text.js

@@ -0,0 +1,109 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Rect2 from '../geometry/Rect2';
+import AbstractComponent from './AbstractComponent';
+export default class Text extends AbstractComponent {
+    constructor(textObjects, transform, style) {
+        super();
+        this.textObjects = textObjects;
+        this.transform = transform;
+        this.style = style;
+        this.recomputeBBox();
+    }
+    static applyTextStyles(ctx, style) {
+        var _a, _b;
+        ctx.font = [
+            ((_a = style.size) !== null && _a !== void 0 ? _a : 12) + 'px',
+            (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
+            `"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+            style.fontWeight
+        ].join(' ');
+        ctx.textAlign = 'left';
+    }
+    static getTextDimens(text, style) {
+        var _a;
+        (_a = Text.textMeasuringCtx) !== null && _a !== void 0 ? _a : (Text.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
+        const ctx = Text.textMeasuringCtx;
+        Text.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;
+        const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+        return new Rect2(0, textY, measure.width, textHeight);
+    }
+    computeBBoxOfPart(part) {
+        if (typeof part === 'string') {
+            const textBBox = Text.getTextDimens(part, this.style);
+            return textBBox.transformedBoundingBox(this.transform);
+        }
+        else {
+            const bbox = part.contentBBox.transformedBoundingBox(this.transform);
+            return bbox;
+        }
+    }
+    recomputeBBox() {
+        let bbox = null;
+        for (const textObject of this.textObjects) {
+            const currentBBox = this.computeBBoxOfPart(textObject);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = currentBBox);
+            bbox = bbox.union(currentBBox);
+        }
+        this.contentBBox = bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
+    }
+    render(canvas, _visibleRect) {
+        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);
+                canvas.popTransform();
+            }
+        }
+        canvas.endObject(this.getLoadSaveData());
+    }
+    intersects(lineSegment) {
+        // Convert canvas space to internal space.
+        const invTransform = this.transform.inverse();
+        const p1InThisSpace = invTransform.transformVec2(lineSegment.p1);
+        const p2InThisSpace = invTransform.transformVec2(lineSegment.p2);
+        lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
+        for (const subObject of this.textObjects) {
+            if (typeof subObject === 'string') {
+                const textBBox = Text.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)) {
+                    return true;
+                }
+            }
+            else {
+                if (subObject.intersects(lineSegment)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    applyTransformation(affineTransfm) {
+        this.transform = affineTransfm.rightMul(this.transform);
+        this.recomputeBBox();
+    }
+    getText() {
+        const result = [];
+        for (const textObject of this.textObjects) {
+            if (typeof textObject === 'string') {
+                result.push(textObject);
+            }
+            else {
+                result.push(textObject.getText());
+            }
+        }
+        return result.join(' ');
+    }
+    description(localizationTable) {
+        return localizationTable.text(this.getText());
+    }
+}

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

@@ -1,4 +1,5 @@
 export interface ImageComponentLocalization {
+    text: (text: string) => string;
     stroke: string;
     svgObject: string;
 }

package/dist/src/components/localization.js

@@ -1,4 +1,5 @@
 export const defaultComponentLocalization = {
     stroke: 'Stroke',
     svgObject: 'SVG Object',
+    text: (text) => `Text object: ${text}`,
 };

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

@@ -28,4 +28,5 @@ export default class Mat33 {
     static translation(amount: Vec2): Mat33;
     static zRotation(radians: number, center?: Point2): Mat33;
     static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
+    static fromCSSMatrix(cssString: string): Mat33;
 }

package/dist/src/geometry/Mat33.js

@@ -186,5 +186,35 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
+    // Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+    static fromCSSMatrix(cssString) {
+        if (cssString === '' || cssString === 'none') {
+            return Mat33.identity;
+        }
+        const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
+        const numberSepExp = '[, \\t\\n]';
+        const regExpSource = `^\\s*matrix\\s*\\(${[
+            // According to MDN, matrix(a,b,c,d,e,f) has form:
+            // 		⎡ a c e ⎤
+            // 		⎢ b d f ⎥
+            // 		⎣ 0 0 1 ⎦
+            numberExp, numberExp, numberExp,
+            numberExp, numberExp, numberExp, // b, d, f
+        ].join(`${numberSepExp}+`)}${numberSepExp}*\\)\\s*$`;
+        const matrixExp = new RegExp(regExpSource, 'i');
+        const match = matrixExp.exec(cssString);
+        if (!match) {
+            throw new Error(`Unsupported transformation: ${cssString}`);
+        }
+        const matrixData = match.slice(1).map(entry => parseFloat(entry));
+        const a = matrixData[0];
+        const b = matrixData[1];
+        const c = matrixData[2];
+        const d = matrixData[3];
+        const e = matrixData[4];
+        const f = matrixData[5];
+        const transform = new Mat33(a, c, e, b, d, f, 0, 0, 1);
+        return transform;
+    }
 }
 Mat33.identity = new Mat33(1, 0, 0, 0, 1, 0, 0, 0, 1);

package/dist/src/geometry/Path.js

@@ -220,6 +220,7 @@ export default class Path {
                 const lastDigit = parseInt(text.charAt(text.length - 1), 10);
                 const postDecimal = parseInt(roundingDownMatch[3], 10);
                 const preDecimal = parseInt(roundingDownMatch[2], 10);
+                const origPostDecimalString = roundingDownMatch[3];
                 let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
                 let carry = 0;
                 if (newPostDecimal.length > postDecimal.toString().length) {
@@ -227,11 +228,17 @@ export default class Path {
                     newPostDecimal = newPostDecimal.substring(1);
                     carry = 1;
                 }
+                // parseInt(...).toString() removes leading zeroes. Add them back.
+                while (newPostDecimal.length < origPostDecimalString.length) {
+                    newPostDecimal = carry.toString(10) + newPostDecimal;
+                    carry = 0;
+                }
                 text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
             }
             text = text.replace(fixRoundingUpExp, '$1');
             // Remove trailing zeroes
-            text = text.replace(/([.][^0]*)0+$/, '$1');
+            text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+            text = text.replace(/[.]0+$/, '.');
             // Remove trailing period
             return text.replace(/[.]$/, '');
         };

package/dist/src/geometry/Rect2.d.ts

@@ -34,6 +34,8 @@ export default class Rect2 {
     get maxDimension(): number;
     get topRight(): import("./Vec3").default;
     get bottomLeft(): import("./Vec3").default;
+    get width(): number;
+    get height(): number;
     getEdges(): LineSegment2[];
     transformedBoundingBox(affineTransform: Mat33): Rect2;
     /** @return true iff this is equal to [other] ± fuzz */

package/dist/src/geometry/Rect2.js

@@ -126,6 +126,12 @@ export default class Rect2 {
     get bottomLeft() {
         return this.topLeft.plus(Vec2.of(0, this.h));
     }
+    get width() {
+        return this.w;
+    }
+    get height() {
+        return this.h;
+    }
     // Returns edges in the order
     // [ rightEdge, topEdge, leftEdge, bottomEdge ]
     getEdges() {

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

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import { PathCommand } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -20,6 +21,7 @@ export interface RenderablePathSpec {
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
+    private transformStack;
     protected constructor(viewport: Viewport);
     protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
@@ -30,6 +32,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;
@@ -44,6 +47,8 @@ export default abstract class AbstractRenderer {
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
     setTransform(transform: Mat33 | null): void;
+    pushTransform(transform: Mat33): void;
+    popTransform(): void;
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;

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

@@ -11,6 +11,7 @@ export default class AbstractRenderer {
         this.viewport = viewport;
         // If null, this' transformation is linked to the Viewport
         this.selfTransform = null;
+        this.transformStack = [];
         this.objectLevel = 0;
         this.currentPaths = null;
     }
@@ -104,6 +105,17 @@ export default class AbstractRenderer {
     setTransform(transform) {
         this.selfTransform = transform;
     }
+    pushTransform(transform) {
+        this.transformStack.push(this.selfTransform);
+        this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+    }
+    popTransform() {
+        var _a;
+        if (this.transformStack.length === 0) {
+            throw new Error('Unable to pop more transforms than have been pushed!');
+        }
+        this.setTransform((_a = this.transformStack.pop()) !== null && _a !== void 0 ? _a : null);
+    }
     // Get the matrix that transforms a vector on the canvas to a vector on this'
     // rendering target.
     getCanvasToScreenTransform() {

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

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -12,6 +13,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    private transformBy;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
@@ -24,6 +26,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

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

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text from '../../components/Text';
 import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -10,6 +11,16 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.clipLevels = [];
         this.setDraftMode(false);
     }
+    transformBy(transformBy) {
+        // From MDN, transform(a,b,c,d,e,f)
+        // takes input such that
+        // ⎡ a c e ⎤
+        // ⎢ b d f ⎥ transforms content drawn to [ctx].
+        // ⎣ 0 0 1 ⎦
+        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
+        transformBy.a2, transformBy.b2, // c, d
+        transformBy.a3, transformBy.b3);
+    }
     canRenderFromWithoutDataLoss(other) {
         return other instanceof CanvasRenderer;
     }
@@ -19,14 +30,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
         this.ctx.save();
-        // From MDN, transform(a,b,c,d,e,f)
-        // takes input such that
-        // ⎡ a c e ⎤
-        // ⎢ b d f ⎥ transforms content drawn to [ctx].
-        // ⎣ 0 0 1 ⎦
-        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
-        transformBy.a2, transformBy.b2, // c, d
-        transformBy.a3, transformBy.b3);
+        this.transformBy(transformBy);
         this.ctx.drawImage(other.ctx.canvas, 0, 0);
         this.ctx.restore();
     }
@@ -105,6 +109,22 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         super.drawPath(path);
     }
+    drawText(text, transform, style) {
+        this.ctx.save();
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        this.transformBy(transform);
+        Text.applyTextStyles(this.ctx, style);
+        if (style.renderingStyle.fill.a !== 0) {
+            this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
+            this.ctx.fillText(text, 0, 0);
+        }
+        if (style.renderingStyle.stroke) {
+            this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
+            this.ctx.lineWidth = style.renderingStyle.stroke.width;
+            this.ctx.strokeText(text, 0, 0);
+        }
+        this.ctx.restore();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();