js-draw 0.1.2 → 0.1.5

package/dist/src/Editor.d.ts

@@ -14,7 +14,7 @@ import { EditorLocalization } from './localization';
 export interface EditorSettings {
     renderingMode: RenderingMode;
     localization: Partial<EditorLocalization>;
-    wheelEventsEnabled: boolean;
+    wheelEventsEnabled: boolean | 'only-if-focused';
 }
 export declare class Editor {
     private container;
@@ -48,6 +48,7 @@ export declare class Editor {
     rerender(showImageBounds?: boolean): void;
     drawWetInk(...path: RenderablePathSpec[]): void;
     clearWetInk(): void;
+    focus(): void;
     createHTMLOverlay(overlay: HTMLElement): {
         remove: () => void;
     };

package/dist/src/Editor.js

@@ -183,13 +183,24 @@ export class Editor {
             })) {
                 evt.preventDefault();
             }
+            else if (evt.key === 'Escape') {
+                this.renderingRegion.blur();
+            }
         });
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
-            // Process wheel events if the ctrl key is down -- we do want to handle
+            // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
             // pinch-zooming.
-            if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
-                return;
+            if (!evt.ctrlKey) {
+                if (!this.settings.wheelEventsEnabled) {
+                    return;
+                }
+                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                    const focusedChild = this.container.querySelector(':focus');
+                    if (!focusedChild) {
+                        return;
+                    }
+                }
             }
             if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
                 delta = delta.times(15);
@@ -281,13 +292,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) {
@@ -298,6 +308,10 @@ export class Editor {
     clearWetInk() {
         this.display.getWetInkRenderer().clear();
     }
+    // Focuses the region used for text input
+    focus() {
+        this.renderingRegion.focus();
+    }
     createHTMLOverlay(overlay) {
         overlay.classList.add('overlay');
         this.container.appendChild(overlay);

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-serif',
+            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!`);
@@ -93,18 +93,18 @@ export class Viewport {
         if (isNaN(toMakeVisible.size.magnitude())) {
             throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
         }
-        // Try to move the selection within the center 2/3rds of the viewport.
+        // Try to move the selection within the center 3/4ths of the viewport.
         const recomputeTargetRect = () => {
             // transform transforms objects on the canvas. As such, we need to invert it
             // to transform the viewport.
             const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
-            return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+            return visibleRect.transformedBoundingBox(Mat33.scaling2D(3 / 4, visibleRect.center));
         };
         let targetRect = recomputeTargetRect();
         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) {
+        const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.25;
+        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,111 @@
+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;
+        // Quote the font family if necessary.
+        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+        ctx.font = [
+            ((_a = style.size) !== null && _a !== void 0 ? _a : 12) + 'px',
+            (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
+            `${fontFamily}`,
+            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/localization.d.ts

@@ -1,8 +1,9 @@
 import { CommandLocalization } from './commands/localization';
 import { ImageComponentLocalization } from './components/localization';
+import { TextRendererLocalization } from './rendering/localization';
 import { ToolbarLocalization } from './toolbar/localization';
 import { ToolLocalization } from './tools/localization';
-export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
     undoAnnouncement: (actionDescription: string) => string;
     redoAnnouncement: (actionDescription: string) => string;
     doneLoading: string;

package/dist/src/localization.js

@@ -1,5 +1,6 @@
 import { defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization } from './components/localization';
+import { defaultTextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization } from './tools/localization';
-export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/src/rendering/Display.d.ts

@@ -10,6 +10,7 @@ export default class Display {
     private parent;
     private dryInkRenderer;
     private wetInkRenderer;
+    private textRenderer;
     private cache;
     private resizeSurfacesCallback?;
     private flattenCallback?;
@@ -18,6 +19,7 @@ export default class Display {
     get height(): number;
     getCache(): RenderingCache;
     private initializeCanvasRendering;
+    private initializeTextRendering;
     startRerender(): AbstractRenderer;
     setDraftMode(draftMode: boolean): void;
     getDryInkRenderer(): AbstractRenderer;