js-draw 0.3.1 → 0.3.2

package/dist/src/components/AbstractComponent.js

@@ -113,9 +113,45 @@ export default class AbstractComponent {
 // Topmost z-index
 AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
+AbstractComponent.transformElementCommandId = 'transform-element';
+AbstractComponent.UnresolvedTransformElementCommand = class extends SerializableCommand {
+    constructor(affineTransfm, componentID) {
+        super(AbstractComponent.transformElementCommandId);
+        this.affineTransfm = affineTransfm;
+        this.componentID = componentID;
+        this.command = null;
+    }
+    resolveCommand(editor) {
+        if (this.command) {
+            return;
+        }
+        const component = editor.image.lookupElement(this.componentID);
+        if (!component) {
+            throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+        }
+        this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component);
+    }
+    apply(editor) {
+        this.resolveCommand(editor);
+        this.command.apply(editor);
+    }
+    unapply(editor) {
+        this.resolveCommand(editor);
+        this.command.unapply(editor);
+    }
+    description(_editor, localizationTable) {
+        return localizationTable.transformedElements(1);
+    }
+    serializeToJSON() {
+        return {
+            id: this.componentID,
+            transfm: this.affineTransfm.toArray(),
+        };
+    }
+};
 AbstractComponent.TransformElementCommand = (_a = class extends SerializableCommand {
         constructor(affineTransfm, component) {
-            super('transform-element');
+            super(AbstractComponent.transformElementCommandId);
             this.affineTransfm = affineTransfm;
             this.component = component;
             this.origZIndex = component.zIndex;
@@ -155,13 +191,13 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
         }
     },
     (() => {
-        SerializableCommand.register('transform-element', (json, editor) => {
+        SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
             const elem = editor.image.lookupElement(json.id);
+            const transform = new Mat33(...json.transfm);
             if (!elem) {
-                throw new Error(`Unable to retrieve non-existent element, ${elem}`);
+                return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);
             }
-            const transform = json.transfm;
-            return new AbstractComponent.TransformElementCommand(new Mat33(...transform), elem);
+            return new AbstractComponent.TransformElementCommand(transform, elem);
         });
     })(),
     _a);

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

@@ -0,0 +1,27 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+export default class ImageComponent extends AbstractComponent {
+    protected contentBBox: Rect2;
+    private image;
+    constructor(image: RenderableImage);
+    private getImageRect;
+    private recomputeBBox;
+    static fromImage(elem: HTMLImageElement, transform: Mat33): Promise<ImageComponent>;
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    intersects(lineSegment: LineSegment2): boolean;
+    protected serializeToJSON(): {
+        src: string;
+        label: string | undefined;
+        width: number;
+        height: number;
+        transform: number[];
+    };
+    protected applyTransformation(affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    static deserializeFromJSON(data: any): ImageComponent;
+}

package/dist/src/components/ImageComponent.js

@@ -0,0 +1,129 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractComponent from './AbstractComponent';
+// Represents a raster image.
+export default class ImageComponent extends AbstractComponent {
+    constructor(image) {
+        var _a, _b, _c;
+        super('image-component');
+        this.image = Object.assign(Object.assign({}, image), { label: (_c = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('alt')) !== null && _b !== void 0 ? _b : image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : undefined });
+        const isHTMLImageElem = (elem) => {
+            return elem.getAttribute('src') !== undefined;
+        };
+        if (isHTMLImageElem(image.image) && !image.image.complete) {
+            image.image.onload = () => this.recomputeBBox();
+        }
+        this.recomputeBBox();
+    }
+    getImageRect() {
+        return new Rect2(0, 0, this.image.image.width, this.image.image.height);
+    }
+    recomputeBBox() {
+        this.contentBBox = this.getImageRect();
+        this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
+    }
+    // Load from an image. Waits for the image to load if incomplete.
+    static fromImage(elem, transform) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!elem.complete) {
+                yield new Promise((resolve, reject) => {
+                    elem.onload = resolve;
+                    elem.onerror = reject;
+                    elem.onabort = reject;
+                });
+            }
+            let width, height;
+            if (typeof elem.width === 'number' && typeof elem.height === 'number'
+                && elem.width !== 0 && elem.height !== 0) {
+                width = elem.width;
+                height = elem.height;
+            }
+            else {
+                width = elem.clientWidth;
+                height = elem.clientHeight;
+            }
+            let image;
+            let url = (_a = elem.src) !== null && _a !== void 0 ? _a : '';
+            if (!url.startsWith('data:image/')) {
+                // Convert to a data URL:
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+                url = canvas.toDataURL();
+                image = canvas;
+            }
+            else {
+                image = new Image();
+                image.src = url;
+                image.width = width;
+                image.height = height;
+            }
+            return new ImageComponent({
+                image,
+                base64Url: url,
+                transform: transform,
+            });
+        });
+    }
+    render(canvas, _visibleRect) {
+        canvas.drawImage(this.image);
+    }
+    intersects(lineSegment) {
+        const rect = this.getImageRect();
+        const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+        for (const edge of edges) {
+            if (edge.intersects(lineSegment)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    serializeToJSON() {
+        return {
+            src: this.image.base64Url,
+            label: this.image.label,
+            // Store the width and height for bounding box computations while the image is loading.
+            width: this.image.image.width,
+            height: this.image.image.height,
+            transform: this.image.transform.toArray(),
+        };
+    }
+    applyTransformation(affineTransfm) {
+        this.image.transform = affineTransfm.rightMul(this.image.transform);
+        this.recomputeBBox();
+    }
+    description(localizationTable) {
+        return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+    }
+    createClone() {
+        return new ImageComponent(Object.assign({}, this.image));
+    }
+    static deserializeFromJSON(data) {
+        if (!(typeof data.src === 'string')) {
+            throw new Error(`${data} has invalid format! Expected src property.`);
+        }
+        const image = new Image();
+        image.src = data.src;
+        image.width = data.width;
+        image.height = data.height;
+        return new ImageComponent({
+            image: image,
+            base64Url: image.src,
+            label: data.label,
+            transform: new Mat33(...data.transform),
+        });
+    }
+}
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

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

@@ -237,9 +237,9 @@ export default class FreehandLineBuilder {
             const lowerBoundary = computeBoundaryCurve(-1, halfVec);
             return upperBoundary.intersects(lowerBoundary).length > 0;
         };
-        // If the boundaries have two intersections, increasing the half vector's length could fix this.
+        // If the boundaries have intersections, increasing the half vector's length could fix this.
         if (boundariesIntersect()) {
-            halfVec = halfVec.times(2);
+            halfVec = halfVec.times(1.1);
         }
         // Each starts at startPt ± startVec
         const lowerCurve = {

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

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

package/dist/src/components/lib.js

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

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

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

package/dist/src/components/localization.js

@@ -1,5 +1,7 @@
 export const defaultComponentLocalization = {
+    unlabeledImageNode: 'Unlabeled image node',
     stroke: 'Stroke',
     svgObject: 'SVG Object',
     text: (text) => `Text object: ${text}`,
+    imageNode: (description) => `Image: ${description}`,
 };

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

@@ -1,3 +1,4 @@
+import Mat33 from './Mat33';
 import Rect2 from './Rect2';
 import { Vec2, Point2 } from './Vec2';
 interface IntersectionResult {
@@ -17,6 +18,7 @@ export default class LineSegment2 {
     intersection(other: LineSegment2): IntersectionResult | null;
     intersects(other: LineSegment2): boolean;
     closestPointTo(target: Point2): import("./Vec3").default;
+    transformedBy(affineTransfm: Mat33): LineSegment2;
     toString(): string;
 }
 export {};

package/dist/src/math/LineSegment2.js

@@ -116,6 +116,9 @@ export default class LineSegment2 {
             return this.p1;
         }
     }
+    transformedBy(affineTransfm) {
+        return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));
+    }
     toString() {
         return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
     }

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

@@ -1,7 +1,10 @@
 export interface TextRendererLocalization {
     pathNodeCount(pathCount: number): string;
     textNodeCount(nodeCount: number): string;
+    imageNodeCount(nodeCount: number): string;
     textNode(content: string): string;
+    unlabeledImageNode: string;
+    imageNode(label: string): string;
     rerenderAsText: string;
 }
 export declare const defaultTextRendererLocalization: TextRendererLocalization;

package/dist/src/rendering/localization.js

@@ -1,6 +1,9 @@
 export const defaultTextRendererLocalization = {
     pathNodeCount: (count) => `There are ${count} visible path objects.`,
     textNodeCount: (count) => `There are ${count} visible text nodes.`,
+    imageNodeCount: (nodeCount) => `There are ${nodeCount} visible image nodes.`,
     textNode: (content) => `Text: ${content}`,
+    imageNode: (label) => `Image: ${label}`,
+    unlabeledImageNode: 'Unlabeled image',
     rerenderAsText: 'Re-render as text',
 };

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

@@ -12,6 +12,12 @@ export interface RenderablePathSpec {
     style: RenderingStyle;
     path?: Path;
 }
+export interface RenderableImage {
+    transform: Mat33;
+    image: HTMLImageElement | HTMLCanvasElement;
+    base64Url: string;
+    label?: string;
+}
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
@@ -27,6 +33,7 @@ export default abstract class AbstractRenderer {
     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 drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;

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

@@ -5,7 +5,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
@@ -28,6 +28,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

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

@@ -125,6 +125,13 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         this.ctx.restore();
     }
+    drawImage(image) {
+        this.ctx.save();
+        const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+        this.transformBy(transform);
+        this.ctx.drawImage(image.image, 0, 0);
+        this.ctx.restore();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();

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

@@ -5,7 +5,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
     renderedPathCount: number;
@@ -13,6 +13,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastPoint: Point2 | null;
     objectNestingLevel: number;
     lastText: string | null;
+    lastImage: RenderableImage | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -25,6 +26,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
     drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

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

@@ -11,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastPoint = null;
         this.objectNestingLevel = 0;
         this.lastText = null;
+        this.lastImage = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -30,6 +31,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.renderedPathCount = 0;
         this.pointBuffer = [];
         this.lastText = null;
+        this.lastImage = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -73,6 +75,9 @@ export default class DummyRenderer extends AbstractRenderer {
     drawText(text, _transform, _style) {
         this.lastText = text;
     }
+    drawImage(image) {
+        this.lastImage = image;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;

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

@@ -5,20 +5,23 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
+    private sanitize;
     private lastPathStyle;
     private lastPathString;
     private objectElems;
     private overwrittenAttrs;
-    constructor(elem: SVGSVGElement, viewport: Viewport);
+    constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
     private addPathToSVG;
     drawPath(pathSpec: RenderablePathSpec): void;
+    private transformFrom;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable): void;
     private unimplementedMessage;

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

@@ -6,9 +6,11 @@ import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
-    constructor(elem, viewport) {
+    // Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+    constructor(elem, viewport, sanitize = false) {
         super(viewport);
         this.elem = elem;
+        this.sanitize = sanitize;
         this.lastPathStyle = null;
         this.lastPathString = [];
         this.objectElems = null;
@@ -17,6 +19,9 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Sets an attribute on the root SVG element.
     setRootSVGAttribute(name, value) {
+        if (this.sanitize) {
+            return;
+        }
         // Make the original value of the attribute restorable on clear
         if (!(name in this.overwrittenAttrs)) {
             this.overwrittenAttrs[name] = this.elem.getAttribute(name);
@@ -32,18 +37,20 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        // Restore all alltributes
-        for (const attrName in this.overwrittenAttrs) {
-            const value = this.overwrittenAttrs[attrName];
-            if (value) {
-                this.elem.setAttribute(attrName, value);
-            }
-            else {
-                this.elem.removeAttribute(attrName);
+        this.lastPathString = [];
+        if (!this.sanitize) {
+            // Restore all all attributes
+            for (const attrName in this.overwrittenAttrs) {
+                const value = this.overwrittenAttrs[attrName];
+                if (value) {
+                    this.elem.setAttribute(attrName, value);
+                }
+                else {
+                    this.elem.removeAttribute(attrName);
+                }
             }
+            this.overwrittenAttrs = {};
         }
-        this.overwrittenAttrs = {};
-        this.lastPathString = [];
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
@@ -74,25 +81,29 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         this.lastPathString.push(path.toString());
     }
-    drawText(text, transform, style) {
-        var _a, _b, _c;
-        transform = this.getCanvasToScreenTransform().rightMul(transform);
+    // Apply [elemTransform] to [elem].
+    transformFrom(elemTransform, elem) {
+        let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
         const translation = transform.transformVec2(Vec2.zero);
         transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        const textElem = document.createElementNS(svgNameSpace, 'text');
-        textElem.appendChild(document.createTextNode(text));
-        textElem.style.transform = `matrix(
+        elem.style.transform = `matrix(
 			${transform.a1}, ${transform.b1},
 			${transform.a2}, ${transform.b2},
 			${transform.a3}, ${transform.b3}
 		)`;
+        elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+        elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+    }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        this.transformFrom(transform, textElem);
         textElem.style.fontFamily = style.fontFamily;
         textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
         textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
         textElem.style.fontSize = style.size + 'px';
         textElem.style.fill = style.renderingStyle.fill.toHexString();
-        textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
-        textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
         if (style.renderingStyle.stroke) {
             const strokeStyle = style.renderingStyle.stroke;
             textElem.style.stroke = strokeStyle.color.toHexString();
@@ -101,6 +112,17 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(textElem);
         (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
+    drawImage(image) {
+        var _a, _b, _c, _d, _e;
+        const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+        svgImgElem.setAttribute('href', image.base64Url);
+        svgImgElem.setAttribute('width', (_a = image.image.getAttribute('width')) !== null && _a !== void 0 ? _a : '');
+        svgImgElem.setAttribute('height', (_b = image.image.getAttribute('height')) !== null && _b !== void 0 ? _b : '');
+        svgImgElem.setAttribute('aria-label', (_d = (_c = image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : image.image.getAttribute('alt')) !== null && _d !== void 0 ? _d : '');
+        this.transformFrom(image.transform, svgImgElem);
+        this.elem.appendChild(svgImgElem);
+        (_e = this.objectElems) === null || _e === void 0 ? void 0 : _e.push(svgImgElem);
+    }
     startObject(boundingBox) {
         super.startObject(boundingBox);
         // Only accumulate a path within an object
@@ -113,7 +135,7 @@ export default class SVGRenderer extends AbstractRenderer {
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
-        if (loaderData) {
+        if (loaderData && !this.sanitize) {
             // Restore any attributes unsupported by the app.
             for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
                 const attrs = loaderData[svgAttributesDataKey];
@@ -150,6 +172,9 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Renders a **copy** of the given element.
     drawSVGElem(elem) {
+        if (this.sanitize) {
+            return;
+        }
         this.elem.appendChild(elem.cloneNode(true));
     }
     isTooSmallToRender(_rect) {

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

@@ -5,12 +5,13 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
     private descriptionBuilder;
     private pathCount;
     private textNodeCount;
+    private imageNodeCount;
     constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
     displaySize(): Vec3;
     clear(): void;
@@ -22,6 +23,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
     protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
     drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     isTooSmallToRender(rect: Rect2): boolean;
     drawPoints(..._points: Vec3[]): void;
 }

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

@@ -8,6 +8,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         this.descriptionBuilder = [];
         this.pathCount = 0;
         this.textNodeCount = 0;
+        this.imageNodeCount = 0;
     }
     displaySize() {
         // We don't have a graphical display, export a reasonable size.
@@ -21,7 +22,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     getDescription() {
         return [
             this.localizationTable.pathNodeCount(this.pathCount),
-            this.localizationTable.textNodeCount(this.textNodeCount),
+            ...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
+            ...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
             ...this.descriptionBuilder
         ].join('\n');
     }
@@ -42,6 +44,11 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         this.descriptionBuilder.push(this.localizationTable.textNode(text));
         this.textNodeCount++;
     }
+    drawImage(image) {
+        const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+        this.descriptionBuilder.push(label);
+        this.imageNodeCount++;
+    }
     isTooSmallToRender(rect) {
         return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
     }

package/dist/src/tools/BaseTool.d.ts

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
 import ToolEnabledGroup from './ToolEnabledGroup';
 export default abstract class BaseTool implements PointerEvtListener {
     private notifier;
@@ -11,6 +11,8 @@ export default abstract class BaseTool implements PointerEvtListener {
     onGestureCancel(): void;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
+    onCopy(_event: CopyEvent): boolean;
+    onPaste(_event: PasteEvent): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
     onKeyUp(_event: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;