js-draw 0.1.1 → 0.1.4

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

@@ -115,6 +115,10 @@ export class Editor {
         // 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;
@@ -179,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);
@@ -277,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) {
@@ -294,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/EditorImage.js

@@ -62,6 +62,9 @@ EditorImage.AddElementCommand = (_a = class {
             _applyByFlattening.set(this, false);
             __classPrivateFieldSet(this, _element, element, "f");
             __classPrivateFieldSet(this, _applyByFlattening, applyByFlattening, "f");
+            if (isNaN(__classPrivateFieldGet(this, _element, "f").getBBox().area)) {
+                throw new Error('Elements in the image cannot have NaN bounding boxes');
+            }
         }
         apply(editor) {
             editor.image.addElement(__classPrivateFieldGet(this, _element, "f"));

package/dist/src/Pointer.d.ts

@@ -4,8 +4,9 @@ export declare enum PointerDevice {
     Pen = 0,
     Eraser = 1,
     Touch = 2,
-    Mouse = 3,
-    Other = 4
+    PrimaryButtonMouse = 3,
+    RightButtonMouse = 4,
+    Other = 5
 }
 export default class Pointer {
     readonly screenPos: Point2;

package/dist/src/Pointer.js

@@ -4,8 +4,9 @@ export var PointerDevice;
     PointerDevice[PointerDevice["Pen"] = 0] = "Pen";
     PointerDevice[PointerDevice["Eraser"] = 1] = "Eraser";
     PointerDevice[PointerDevice["Touch"] = 2] = "Touch";
-    PointerDevice[PointerDevice["Mouse"] = 3] = "Mouse";
-    PointerDevice[PointerDevice["Other"] = 4] = "Other";
+    PointerDevice[PointerDevice["PrimaryButtonMouse"] = 3] = "PrimaryButtonMouse";
+    PointerDevice[PointerDevice["RightButtonMouse"] = 4] = "RightButtonMouse";
+    PointerDevice[PointerDevice["Other"] = 5] = "Other";
 })(PointerDevice || (PointerDevice = {}));
 // Provides a snapshot containing information about a pointer. A Pointer
 // object is immutable --- it will not be updated when the pointer's information changes.
@@ -34,7 +35,7 @@ export default class Pointer {
         var _a, _b;
         const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
         const pointerTypeToDevice = {
-            'mouse': PointerDevice.Mouse,
+            'mouse': PointerDevice.PrimaryButtonMouse,
             'pen': PointerDevice.Pen,
             'touch': PointerDevice.Touch,
         };
@@ -45,6 +46,14 @@ export default class Pointer {
         }
         const timeStamp = (new Date()).getTime();
         const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
+        if (device === PointerDevice.PrimaryButtonMouse) {
+            if (evt.buttons & 0x2) {
+                device = PointerDevice.RightButtonMouse;
+            }
+            else if (!(evt.buttons & 0x1)) {
+                device = PointerDevice.Other;
+            }
+        }
         return new Pointer(screenPos, canvasPos, (_b = evt.pressure) !== null && _b !== void 0 ? _b : null, evt.isPrimary, isDown, device, evt.pointerId, timeStamp);
     }
     // Create a new Pointer from a point on the canvas.

package/dist/src/SVGLoader.d.ts

@@ -1,6 +1,14 @@
 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?;
@@ -13,7 +21,10 @@ export default class SVGLoader implements ImageLoader {
     private constructor();
     private getStyle;
     private strokeDataFromElem;
+    private attachUnrecognisedAttrs;
     private addPath;
+    private makeText;
+    private addText;
     private addUnknownNode;
     private updateViewBox;
     private updateSVGAttrs;

package/dist/src/SVGLoader.js

@@ -10,11 +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;
@@ -81,6 +87,30 @@ export default class SVGLoader {
         }
         return result;
     }
+    attachUnrecognisedAttrs(elem, node, supportedAttrs, supportedStyleAttrs) {
+        for (const attr of node.getAttributeNames()) {
+            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) {
         var _a;
@@ -88,6 +118,8 @@ export default class SVGLoader {
         try {
             const strokeData = this.strokeDataFromElem(node);
             elem = new Stroke(strokeData);
+            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.');
@@ -95,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);
@@ -106,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);
@@ -125,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.
@@ -132,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);
@@ -144,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));
@@ -189,7 +297,6 @@ export default class SVGLoader {
             sandbox.remove();
             throw new Error('SVG loading iframe is not sandboxed.');
         }
-        // Try running JavaScript within the iframe
         const sandboxDoc = (_b = (_a = sandbox.contentWindow) === null || _a === void 0 ? void 0 : _a.document) !== null && _b !== void 0 ? _b : sandbox.contentDocument;
         if (sandboxDoc == null)
             throw new Error('Unable to open a sandboxed iframe!');
@@ -213,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,8 +85,14 @@ 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!`);
+        }
+        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.
         const recomputeTargetRect = () => {
             // transform transforms objects on the canvas. As such, we need to invert it
@@ -98,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);
@@ -115,6 +121,10 @@ export class Viewport {
             const viewportContentTransform = visibleRectTransform.inverse();
             transform = transform.rightMul(viewportContentTransform);
         }
+        if (!transform.invertable()) {
+            console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
+            transform = Mat33.identity;
+        }
         return new Viewport.ViewportTransform(transform);
     }
 }

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

@@ -4,12 +4,17 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
+declare type LoadSaveData = unknown;
+export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export default abstract class AbstractComponent {
     protected lastChangedTime: number;
     protected abstract contentBBox: Rect2;
     private zIndex;
     private static zIndexCounter;
     protected constructor();
+    private loadSaveData;
+    attachLoadSaveData(key: string, data: LoadSaveData): void;
+    getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
@@ -18,3 +23,4 @@ export default abstract class AbstractComponent {
     transformBy(affineTransfm: Mat33): Command;
     abstract description(localizationTable: ImageComponentLocalization): string;
 }
+export {};

package/dist/src/components/AbstractComponent.js

@@ -1,9 +1,20 @@
 import EditorImage from '../EditorImage';
 export default class AbstractComponent {
     constructor() {
+        // Get and manage data attached by a loader.
+        this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
         this.zIndex = AbstractComponent.zIndexCounter++;
     }
+    attachLoadSaveData(key, data) {
+        if (!this.loadSaveData[key]) {
+            this.loadSaveData[key] = [];
+        }
+        this.loadSaveData[key].push(data);
+    }
+    getLoadSaveData() {
+        return this.loadSaveData;
+    }
     getZIndex() {
         return this.zIndex;
     }

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/Stroke.js

@@ -41,7 +41,7 @@ export default class Stroke extends AbstractComponent {
                 canvas.drawPath(part);
             }
         }
-        canvas.endObject();
+        canvas.endObject(this.getLoadSaveData());
     }
     // Grows the bounding box for a given stroke part based on that part's style.
     bboxForPart(origBBox, style) {

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;
 }