js-draw 0.0.10 → 0.1.2

package/dist/src/Editor.d.ts

@@ -6,8 +6,8 @@ import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import { Point2 } from './geometry/Vec2';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/AbstractRenderer';
-import Display, { RenderingMode } from './Display';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';

package/dist/src/Editor.js

@@ -16,8 +16,8 @@ import EventDispatcher from './EventDispatcher';
 import { Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import Display, { RenderingMode } from './Display';
-import SVGRenderer from './rendering/SVGRenderer';
+import Display, { RenderingMode } from './rendering/Display';
+import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
@@ -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;
@@ -282,7 +286,8 @@ export class Editor {
             const exportRectStrokeWidth = 12;
             renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
         }
-        this.image.render(renderer, this.viewport);
+        //this.image.render(renderer, this.viewport);
+        this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
         this.rerenderQueued = false;
     }
     drawWetInk(...path) {
@@ -344,20 +349,25 @@ export class Editor {
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);
-            const imageRect = yield loader.start((component) => {
+            this.display.setDraftMode(true);
+            yield loader.start((component) => {
                 (new EditorImage.AddElementCommand(component)).apply(this);
             }, (countProcessed, totalToProcess) => {
-                if (countProcessed % 100 === 0) {
+                if (countProcessed % 500 === 0) {
                     this.showLoadingWarning(countProcessed / totalToProcess);
-                    this.rerender(false);
+                    this.rerender();
                     return new Promise(resolve => {
                         requestAnimationFrame(() => resolve());
                     });
                 }
                 return null;
+            }, (importExportRect) => {
+                this.setImportExportRect(importExportRect).apply(this);
+                this.viewport.zoomTo(importExportRect).apply(this);
             });
             this.hideLoadingWarning();
-            this.setImportExportRect(imageRect).apply(this);
+            this.display.setDraftMode(false);
+            this.queueRerender();
         });
     }
     // Returns the size of the visible region of the output SVG

package/dist/src/EditorImage.d.ts

@@ -1,16 +1,18 @@
 import Editor from './Editor';
-import AbstractRenderer from './rendering/AbstractRenderer';
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
+import RenderingCache from './rendering/caching/RenderingCache';
+export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export default class EditorImage {
     private root;
     constructor();
     private addElement;
     findParent(elem: AbstractComponent): ImageNode | null;
-    private sortLeaves;
-    render(renderer: AbstractRenderer, viewport: Viewport, minFraction?: number): void;
+    renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
+    render(renderer: AbstractRenderer, viewport: Viewport): void;
     renderAll(renderer: AbstractRenderer): void;
     getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
     static AddElementCommand: {
@@ -24,23 +26,29 @@ export default class EditorImage {
     };
 }
 export declare type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 export declare class ImageNode {
     private parent;
     private content;
     private bbox;
     private children;
     private targetChildCount;
-    private minZIndex;
-    private maxZIndex;
+    private id;
+    private static idCounter;
     constructor(parent?: ImageNode | null);
+    getId(): number;
+    onContentChange(): void;
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
-    private getChildrenInRegion;
-    getLeavesInRegion(region: Rect2, minFractionOfRegion?: number): ImageNode[];
+    private getChildrenIntersectingRegion;
+    getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getLeaves(): ImageNode[];
     addLeaf(leaf: AbstractComponent): ImageNode;
     getBBox(): Rect2;
     recomputeBBox(bubbleUp: boolean): void;
     private rebalance;
     remove(): void;
+    render(renderer: AbstractRenderer, visibleRect: Rect2): void;
 }
+export {};

package/dist/src/EditorImage.js

@@ -11,6 +11,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _element, _applyByFlattening, _a;
 import Rect2 from './geometry/Rect2';
+export const sortLeavesByZIndex = (leaves) => {
+    leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
+};
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
     constructor() {
@@ -21,7 +24,7 @@ export default class EditorImage {
     }
     // Returns the parent of the given element, if it exists.
     findParent(elem) {
-        const candidates = this.root.getLeavesInRegion(elem.getBBox());
+        const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
         for (const candidate of candidates) {
             if (candidate.getContent() === elem) {
                 return candidate;
@@ -29,29 +32,23 @@ export default class EditorImage {
         }
         return null;
     }
-    sortLeaves(leaves) {
-        leaves.sort((a, b) => a.getContent().zIndex - b.getContent().zIndex);
+    renderWithCache(screenRenderer, cache, viewport) {
+        cache.render(screenRenderer, this.root, viewport);
     }
-    render(renderer, viewport, minFraction = 0.001) {
-        // Don't render components that are < 0.1% of the viewport.
-        const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
-        this.sortLeaves(leaves);
-        for (const leaf of leaves) {
-            // Leaves by definition have content
-            leaf.getContent().render(renderer, viewport.visibleRect);
-        }
+    render(renderer, viewport) {
+        this.root.render(renderer, viewport.visibleRect);
     }
     // Renders all nodes, even ones not within the viewport
     renderAll(renderer) {
         const leaves = this.root.getLeaves();
-        this.sortLeaves(leaves);
+        sortLeavesByZIndex(leaves);
         for (const leaf of leaves) {
             leaf.getContent().render(renderer, leaf.getBBox());
         }
     }
     getElementsIntersectingRegion(region) {
-        const leaves = this.root.getLeavesInRegion(region);
-        this.sortLeaves(leaves);
+        const leaves = this.root.getLeavesIntersectingRegion(region);
+        sortLeavesByZIndex(leaves);
         return leaves.map(leaf => leaf.getContent());
     }
 }
@@ -65,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"));
@@ -88,6 +88,7 @@ EditorImage.AddElementCommand = (_a = class {
     _element = new WeakMap(),
     _applyByFlattening = new WeakMap(),
     _a);
+// TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
 export class ImageNode {
     constructor(parent = null) {
         this.parent = parent;
@@ -95,8 +96,13 @@ export class ImageNode {
         this.children = [];
         this.bbox = Rect2.empty;
         this.content = null;
-        this.minZIndex = null;
-        this.maxZIndex = null;
+        this.id = ImageNode.idCounter++;
+    }
+    getId() {
+        return this.id;
+    }
+    onContentChange() {
+        this.id = ImageNode.idCounter++;
     }
     getContent() {
         return this.content;
@@ -104,24 +110,30 @@ export class ImageNode {
     getParent() {
         return this.parent;
     }
-    getChildrenInRegion(region) {
+    getChildrenIntersectingRegion(region) {
         return this.children.filter(child => {
             return child.getBBox().intersects(region);
         });
     }
+    getChildrenOrSelfIntersectingRegion(region) {
+        if (this.content) {
+            return [this];
+        }
+        return this.getChildrenIntersectingRegion(region);
+    }
     // Returns a list of `ImageNode`s with content (and thus no children).
-    getLeavesInRegion(region, minFractionOfRegion = 0) {
+    getLeavesIntersectingRegion(region, isTooSmall) {
         const result = [];
         // Don't render if too small
-        if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+        if (isTooSmall === null || isTooSmall === void 0 ? void 0 : isTooSmall(this.bbox)) {
             return [];
         }
         if (this.content !== null && this.getBBox().intersects(region)) {
             result.push(this);
         }
-        const children = this.getChildrenInRegion(region);
+        const children = this.getChildrenIntersectingRegion(region);
         for (const child of children) {
-            result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+            result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
@@ -138,6 +150,7 @@ export class ImageNode {
         return result;
     }
     addLeaf(leaf) {
+        this.onContentChange();
         if (this.content === null && this.children.length === 0) {
             this.content = leaf;
             this.recomputeBBox(true);
@@ -186,17 +199,13 @@ export class ImageNode {
     // this' ancestors bounding boxes. This also re-computes this' bounding box
     // in the z-direction (z-indicies).
     recomputeBBox(bubbleUp) {
-        var _a, _b, _c;
+        var _a;
         const oldBBox = this.bbox;
         if (this.content !== null) {
             this.bbox = this.content.getBBox();
-            this.minZIndex = this.content.zIndex;
-            this.maxZIndex = this.content.zIndex;
         }
         else {
             this.bbox = Rect2.empty;
-            this.minZIndex = null;
-            this.maxZIndex = null;
             let isFirst = true;
             for (const child of this.children) {
                 if (isFirst) {
@@ -206,18 +215,10 @@ export class ImageNode {
                 else {
                     this.bbox = this.bbox.union(child.getBBox());
                 }
-                (_a = this.minZIndex) !== null && _a !== void 0 ? _a : (this.minZIndex = child.minZIndex);
-                (_b = this.maxZIndex) !== null && _b !== void 0 ? _b : (this.maxZIndex = child.maxZIndex);
-                if (child.minZIndex !== null && this.minZIndex !== null) {
-                    this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
-                }
-                if (child.maxZIndex !== null && this.maxZIndex !== null) {
-                    this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
-                }
             }
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            (_c = this.parent) === null || _c === void 0 ? void 0 : _c.recomputeBBox(true);
+            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);
         }
     }
     rebalance() {
@@ -243,8 +244,6 @@ export class ImageNode {
     }
     // Remove this node and all of its children
     remove() {
-        this.minZIndex = null;
-        this.maxZIndex = null;
         if (!this.parent) {
             this.content = null;
             this.children = [];
@@ -264,4 +263,14 @@ export class ImageNode {
         this.parent = null;
         this.children = [];
     }
+    render(renderer, visibleRect) {
+        // Don't render components that are < 0.1% of the viewport.
+        const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        sortLeavesByZIndex(leaves);
+        for (const leaf of leaves) {
+            // Leaves by definition have content
+            leaf.getContent().render(renderer, visibleRect);
+        }
+    }
 }
+ImageNode.idCounter = 0;

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,23 +1,27 @@
 import Rect2 from './geometry/Rect2';
-import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 export declare const defaultSVGViewRect: Rect2;
+export declare const svgAttributesDataKey = "svgAttrs";
+export declare type SVGLoaderUnknownAttribute = [string, string];
 export default class SVGLoader implements ImageLoader {
     private source;
     private onFinish?;
     private onAddComponent;
     private onProgress;
+    private onDetermineExportRect;
     private processedCount;
     private totalToProcess;
     private rootViewBox;
     private constructor();
     private getStyle;
     private strokeDataFromElem;
+    private attachUnrecognisedAttrs;
     private addPath;
     private addUnknownNode;
     private updateViewBox;
     private updateSVGAttrs;
     private visit;
     private getSourceAttrs;
-    start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener): Promise<Rect2>;
+    start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener | null): Promise<void>;
     static fromString(text: string): SVGLoader;
 }

package/dist/src/SVGLoader.js

@@ -15,12 +15,15 @@ import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
 // 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 default class SVGLoader {
     constructor(source, onFinish) {
         this.source = source;
         this.onFinish = onFinish;
         this.onAddComponent = null;
         this.onProgress = null;
+        this.onDetermineExportRect = null;
         this.processedCount = 0;
         this.totalToProcess = 0;
     }
@@ -80,6 +83,14 @@ export default class SVGLoader {
         }
         return result;
     }
+    attachUnrecognisedAttrs(elem, node, supportedAttrs) {
+        for (const attr of node.getAttributeNames()) {
+            if (supportedAttrs.has(attr)) {
+                continue;
+            }
+            elem.attachLoadSaveData(svgAttributesDataKey, [attr, node.getAttribute(attr)]);
+        }
+    }
     // Adds a stroke with a single path
     addPath(node) {
         var _a;
@@ -87,6 +98,7 @@ 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']));
         }
         catch (e) {
             console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
@@ -100,6 +112,7 @@ export default class SVGLoader {
         (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component);
     }
     updateViewBox(node) {
+        var _a;
         const viewBoxAttr = node.getAttribute('viewBox');
         if (this.rootViewBox || !viewBoxAttr) {
             return;
@@ -113,6 +126,7 @@ export default class SVGLoader {
             return;
         }
         this.rootViewBox = new Rect2(x, y, width, height);
+        (_a = this.onDetermineExportRect) === null || _a === void 0 ? void 0 : _a.call(this, this.rootViewBox);
     }
     updateSVGAttrs(node) {
         var _a;
@@ -154,23 +168,22 @@ export default class SVGLoader {
             return [attr, node.getAttribute(attr)];
         });
     }
-    start(onAddComponent, onProgress) {
-        var _a;
+    start(onAddComponent, onProgress, onDetermineExportRect = null) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             this.onAddComponent = onAddComponent;
             this.onProgress = onProgress;
+            this.onDetermineExportRect = onDetermineExportRect;
             // Estimate the number of tags to process.
             this.totalToProcess = this.source.childElementCount;
             this.processedCount = 0;
             this.rootViewBox = null;
             yield this.visit(this.source);
             const viewBox = this.rootViewBox;
-            let result = defaultSVGViewRect;
-            if (viewBox) {
-                result = Rect2.of(viewBox);
+            if (!viewBox) {
+                (_a = this.onDetermineExportRect) === null || _a === void 0 ? void 0 : _a.call(this, defaultSVGViewRect);
             }
-            (_a = this.onFinish) === null || _a === void 0 ? void 0 : _a.call(this);
-            return result;
+            (_b = this.onFinish) === null || _b === void 0 ? void 0 : _b.call(this);
         });
     }
     // TODO: Handling unsafe data! Tripple-check that this is secure!
@@ -187,7 +200,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!');

package/dist/src/Viewport.d.ts

@@ -1,3 +1,4 @@
+import Command from './commands/Command';
 import { CommandLocalization } from './commands/localization';
 import Editor from './Editor';
 import Mat33 from './geometry/Mat33';
@@ -28,10 +29,13 @@ export declare class Viewport {
     resetTransform(newTransform: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
+    getResolution(): Vec2;
     getScaleFactor(): number;
+    getSizeOfPixelOnCanvas(): number;
     getRotationAngle(): number;
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
     roundPoint(point: Point2): Point2;
+    zoomTo(toMakeVisible: Rect2): Command;
 }
 export declare namespace Viewport {
     type ViewportTransform = typeof Viewport.ViewportTransform.prototype;

package/dist/src/Viewport.js

@@ -50,11 +50,17 @@ export class Viewport {
     get canvasToScreenTransform() {
         return this.transform;
     }
+    getResolution() {
+        return this.screenRect.size;
+    }
     // Returns the amount a vector on the canvas is scaled to become a vector on the screen.
     getScaleFactor() {
         // Use transformVec3 to avoid translating the vector
         return this.transform.transformVec3(Vec3.unitX).magnitude();
     }
+    getSizeOfPixelOnCanvas() {
+        return 1 / this.getScaleFactor();
+    }
     // Returns the angle of the canvas in radians
     getRotationAngle() {
         return this.transform.transformVec3(Vec3.unitX).angle();
@@ -76,6 +82,51 @@ export class Viewport {
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }
+    // 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) {
+        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
+            // to transform the viewport.
+            const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+            return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, 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) {
+            // 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);
+            const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+            const viewportContentTransform = visibleRectTransform.inverse();
+            transform = transform.rightMul(viewportContentTransform);
+        }
+        targetRect = recomputeTargetRect();
+        // Ensure that the center of the region is visible
+        if (!targetRect.containsRect(toMakeVisible)) {
+            // target position - current position
+            const translation = toMakeVisible.center.minus(targetRect.center);
+            const visibleRectTransform = Mat33.translation(translation);
+            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);
+    }
 }
 // Command that translates/scales the viewport.
 Viewport.ViewportTransform = (_a = class {

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

@@ -2,14 +2,20 @@ import Command from '../commands/Command';
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+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;
-    zIndex: number;
+    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;
     abstract intersects(lineSegment: LineSegment2): boolean;
@@ -17,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,23 @@
 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;
+    }
     getBBox() {
         return this.contentBBox;
     }

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

@@ -1,7 +1,7 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class SVGGlobalAttributesObject extends AbstractComponent {

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -1,5 +1,5 @@
 import Rect2 from '../geometry/Rect2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {

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

@@ -1,7 +1,7 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderablePathSpec } from '../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class Stroke extends AbstractComponent {