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

@@ -6,7 +6,7 @@ export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
         super('stroke');
-        this.parts = parts.map(section => {
+        this.parts = parts.map((section) => {
             const path = Path.fromRenderable(section);
             const pathBBox = this.bboxForPart(path.bbox, section.style);
             if (!this.contentBBox) {
@@ -17,7 +17,6 @@ export default class Stroke extends AbstractComponent {
             }
             return {
                 path,
-                bbox: pathBBox,
                 // To implement RenderablePathSpec
                 startPoint: path.startPoint,
                 style: section.style,
@@ -37,10 +36,17 @@ export default class Stroke extends AbstractComponent {
     render(canvas, visibleRect) {
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {
-            const bbox = part.bbox;
-            if (!visibleRect || bbox.intersects(visibleRect)) {
-                canvas.drawPath(part);
+            const bbox = this.bboxForPart(part.path.bbox, part.style);
+            if (visibleRect) {
+                if (!bbox.intersects(visibleRect)) {
+                    continue;
+                }
+                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+                if (muchBiggerThanVisible && !part.path.closedRoughlyIntersects(visibleRect)) {
+                    continue;
+                }
             }
+            canvas.drawPath(part);
         }
         canvas.endObject(this.getLoadSaveData());
     }
@@ -67,7 +73,6 @@ export default class Stroke extends AbstractComponent {
             }
             return {
                 path: newPath,
-                bbox: newBBox,
                 startPoint: newPath.startPoint,
                 commands: newPath.parts,
                 style: part.style,

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

@@ -7,9 +7,9 @@ import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, viewport) => {
     // Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
-    // less than ± 2 px from the curve.
+    // less than ±1 px from the curve.
     const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
-    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
+    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
     return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
@@ -136,7 +136,7 @@ export default class FreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return;
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
+            const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |
@@ -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 = {
@@ -362,7 +362,7 @@ export default class FreehandLineBuilder {
             for (const point of this.buffer) {
                 const proj = Vec2.ofXY(curve.project(point.xy));
                 const dist = proj.minus(point).magnitude();
-                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 2, this.minFitAllowed);
+                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
                 if (dist > minFit || dist > this.maxFitAllowed) {
                     return false;
                 }
@@ -370,7 +370,7 @@ export default class FreehandLineBuilder {
             return true;
         };
         const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
+        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

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 {
@@ -15,6 +16,9 @@ export default class LineSegment2 {
     get p2(): Point2;
     get(t: number): Point2;
     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

@@ -97,6 +97,9 @@ export default class LineSegment2 {
             t: resultT,
         };
     }
+    intersects(other) {
+        return this.intersection(other) !== null;
+    }
     // Returns the closest point on this to [target]
     closestPointTo(target) {
         // Distance from P1 along this' direction.
@@ -113,4 +116,10 @@ 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/math/Path.d.ts

@@ -39,18 +39,22 @@ interface IntersectionResult {
 export default class Path {
     readonly startPoint: Point2;
     readonly parts: PathCommand[];
-    private cachedGeometry;
     readonly bbox: Rect2;
     constructor(startPoint: Point2, parts: PathCommand[]);
+    private cachedGeometry;
     get geometry(): Array<LineSegment2 | Bezier>;
+    private cachedPolylineApproximation;
+    polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
     intersection(line: LineSegment2): IntersectionResult[];
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
+    closedRoughlyIntersects(rect: Rect2): boolean;
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
+    private cachedStringVersion;
     toString(): string;
     serialize(): string;
     static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;

package/dist/src/math/Path.js

@@ -15,6 +15,8 @@ export default class Path {
         this.startPoint = startPoint;
         this.parts = parts;
         this.cachedGeometry = null;
+        this.cachedPolylineApproximation = null;
+        this.cachedStringVersion = null;
         // Initial bounding box contains one point: the start point.
         this.bbox = Rect2.bboxOf([startPoint]);
         // Convert into a representation of the geometry (cache for faster intersection
@@ -52,6 +54,34 @@ export default class Path {
         this.cachedGeometry = geometry;
         return this.cachedGeometry;
     }
+    // Approximates this path with a group of line segments.
+    polylineApproximation() {
+        if (this.cachedPolylineApproximation) {
+            return this.cachedPolylineApproximation;
+        }
+        const points = [];
+        for (const part of this.parts) {
+            switch (part.kind) {
+                case PathCommandType.CubicBezierTo:
+                    points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+                    break;
+                case PathCommandType.QuadraticBezierTo:
+                    points.push(part.controlPoint, part.endPoint);
+                    break;
+                case PathCommandType.MoveTo:
+                case PathCommandType.LineTo:
+                    points.push(part.point);
+                    break;
+            }
+        }
+        const result = [];
+        let prevPoint = this.startPoint;
+        for (const point of points) {
+            result.push(new LineSegment2(prevPoint, point));
+            prevPoint = point;
+        }
+        return result;
+    }
     static computeBBoxForSegment(startPoint, part) {
         const points = [startPoint];
         let exhaustivenessCheck;
@@ -73,6 +103,9 @@ export default class Path {
         return Rect2.bboxOf(points);
     }
     intersection(line) {
+        if (!line.bbox.intersects(this.bbox)) {
+            return [];
+        }
         const result = [];
         for (const part of this.geometry) {
             if (part instanceof LineSegment2) {
@@ -162,6 +195,47 @@ export default class Path {
             ...other.parts,
         ]);
     }
+    // Treats this as a closed path and returns true if part of `rect` is roughly within
+    // this path's interior.
+    //
+    // Note: Assumes that this is a closed, non-self-intersecting path.
+    closedRoughlyIntersects(rect) {
+        if (rect.containsRect(this.bbox)) {
+            return true;
+        }
+        // Choose a point outside of the path.
+        const startPt = this.bbox.topLeft.minus(Vec2.of(1, 1));
+        const testPts = rect.corners;
+        const polygon = this.polylineApproximation();
+        for (const point of testPts) {
+            const testLine = new LineSegment2(point, startPt);
+            let intersectionCount = 0;
+            for (const line of polygon) {
+                if (line.intersects(testLine)) {
+                    intersectionCount++;
+                }
+            }
+            // Odd? The point is within the polygon!
+            if (intersectionCount % 2 === 1) {
+                return true;
+            }
+        }
+        // Grow the rectangle for possible additional precision.
+        const grownRect = rect.grownBy(Math.min(rect.size.x, rect.size.y));
+        const edges = [];
+        for (const subrect of grownRect.divideIntoGrid(4, 4)) {
+            edges.push(...subrect.getEdges());
+        }
+        for (const edge of edges) {
+            for (const line of polygon) {
+                if (edge.intersects(line)) {
+                    return true;
+                }
+            }
+        }
+        // Even? Probably no intersection.
+        return false;
+    }
     // Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
     // the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
     // that traces [rect].
@@ -195,6 +269,9 @@ export default class Path {
         return new Path(startPoint, commands);
     }
     static fromRenderable(renderable) {
+        if (renderable.path) {
+            return renderable.path;
+        }
         return new Path(renderable.startPoint, renderable.commands);
     }
     toRenderable(fill) {
@@ -202,22 +279,25 @@ export default class Path {
             startPoint: this.startPoint,
             style: fill,
             commands: this.parts,
+            path: this,
         };
     }
     toString() {
+        if (this.cachedStringVersion) {
+            return this.cachedStringVersion;
+        }
         // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-        //            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
-        //            it also probably isn't worth it.
-        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
-            && Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
-        return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+        const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        this.cachedStringVersion = result;
+        return result;
     }
     serialize() {
         return this.toString();
     }
     // @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
     //   conversions can lead to smaller output strings, but also take time.
-    static toString(startPoint, parts, onlyAbsCommands = true) {
+    static toString(startPoint, parts, onlyAbsCommands) {
         const result = [];
         let prevPoint;
         const addCommand = (command, ...points) => {
@@ -452,7 +532,9 @@ export default class Path {
                 lastPos = allArgs[allArgs.length - 1];
             }
         }
-        return new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
+        const result = new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
+        result.cachedStringVersion = pathString;
+        return result;
     }
 }
 Path.empty = new Path(Vec2.zero, []);

package/dist/src/math/Rect2.js

@@ -1,6 +1,6 @@
 import LineSegment2 from './LineSegment2';
 import { Vec2 } from './Vec2';
-// invariant: w > 0, h > 0.
+// invariant: w ≥ 0, h ≥ 0.
 export default class Rect2 {
     constructor(x, y, w, h) {
         this.x = x;

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

@@ -0,0 +1,11 @@
+import Mat33 from './Mat33';
+import Vec3 from './Vec3';
+export default class Triangle {
+    readonly vertex1: Vec3;
+    readonly vertex2: Vec3;
+    readonly vertex3: Vec3;
+    constructor(vertex1: Vec3, vertex2: Vec3, vertex3: Vec3);
+    map(mapping: (vertex: Vec3) => Vec3): Triangle;
+    transformed2DBy(affineTransform: Mat33): Triangle;
+    transformedBy(linearTransform: Mat33): Triangle;
+}

package/dist/src/math/Triangle.js

@@ -0,0 +1,19 @@
+export default class Triangle {
+    constructor(vertex1, vertex2, vertex3) {
+        this.vertex1 = vertex1;
+        this.vertex2 = vertex2;
+        this.vertex3 = vertex3;
+    }
+    map(mapping) {
+        return new Triangle(mapping(this.vertex1), mapping(this.vertex2), mapping(this.vertex3));
+    }
+    // Transform, treating this as composed of 2D points.
+    transformed2DBy(affineTransform) {
+        return this.map(affineTransform.transformVec2);
+    }
+    // Transforms this by a linear transform --- verticies are treated as
+    // 3D points.
+    transformedBy(linearTransform) {
+        return this.map(linearTransform.transformVec3);
+    }
+}

package/dist/src/rendering/Display.js

@@ -71,9 +71,9 @@ export default class Display {
                 return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
             },
             blockResolution: cacheBlockResolution,
-            cacheSize: 600 * 600 * 4 * 120,
+            cacheSize: 600 * 600 * 4 * 90,
             maxScale: 1.4,
-            minComponentsPerCache: 45,
+            minComponentsPerCache: 20,
             minComponentsToUseCache: 105,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {

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