js-draw 0.15.1 → 0.16.0

package/dist/src/Color4.d.ts

@@ -5,7 +5,7 @@ export default class Color4 {
     readonly g: number;
     /** Blue component. `b` ∈ [0, 1] */
     readonly b: number;
-    /** Alpha/transparent component. `a` ∈ [0, 1] */
+    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
     readonly a: number;
     private constructor();
     /**

package/dist/src/Color4.js

@@ -6,7 +6,7 @@ export default class Color4 {
     g, 
     /** Blue component. `b` ∈ [0, 1] */
     b, 
-    /** Alpha/transparent component. `a` ∈ [0, 1] */
+    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
     a) {
         this.r = r;
         this.g = g;
@@ -103,6 +103,10 @@ export default class Color4 {
         if (other == null) {
             return false;
         }
+        // If both completely transparent,
+        if (this.a === 0 && other.a === 0) {
+            return true;
+        }
         return this.toHexString() === other.toHexString();
     }
     /**

package/dist/src/Editor.d.ts

@@ -8,6 +8,7 @@ import { Point2 } from './math/Vec2';
 import HTMLToolbar from './toolbar/HTMLToolbar';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
+import Color4 from './Color4';
 import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
@@ -84,8 +85,6 @@ export declare class Editor {
      * ```
      */
     readonly image: EditorImage;
-    /** Viewport for the exported/imported image. */
-    private importExportViewport;
     /**
      * Allows transforming the view and querying information about
      * what is currently visible.
@@ -224,7 +223,17 @@ export declare class Editor {
     addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
+    /**
+     * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
+     *
+     * @see loadFromSVG
+     */
     loadFrom(loader: ImageLoader): Promise<void>;
+    private getTopmostBackgroundComponent;
+    /**
+     * Set the background color of the image.
+     */
+    setBackgroundColor(color: Color4): Command;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;
     /**

package/dist/src/Editor.js

@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
 import { InputEvtType, EditorEventType } from './types';
-import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import EventDispatcher from './EventDispatcher';
@@ -31,6 +30,8 @@ import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 import fileToBase64 from './util/fileToBase64';
 import uniteCommands from './commands/uniteCommands';
 import SelectionTool from './tools/SelectionTool/SelectionTool';
+import Erase from './commands/Erase';
+import ImageBackground, { BackgroundType } from './components/ImageBackground';
 /**
  * The main entrypoint for the full editor.
  *
@@ -119,15 +120,18 @@ export class Editor {
         this.renderingRegion.setAttribute('tabIndex', '0');
         this.renderingRegion.setAttribute('alt', '');
         this.notifier = new EventDispatcher();
-        this.importExportViewport = new Viewport(this.notifier);
-        this.viewport = new Viewport(this.notifier);
+        this.viewport = new Viewport((oldTransform, newTransform) => {
+            this.notifier.dispatch(EditorEventType.ViewportChanged, {
+                kind: EditorEventType.ViewportChanged,
+                newTransform,
+                oldTransform,
+            });
+        });
         this.display = new Display(this, this.settings.renderingMode, this.renderingRegion);
         this.image = new EditorImage();
         this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
         this.toolController = new ToolController(this, this.localization);
         parent.appendChild(this.container);
-        // Default to a 500x500 image
-        this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
         this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
         this.registerListeners();
         this.queueRerender();
@@ -231,14 +235,21 @@ export class Editor {
         });
         this.notifier.on(EditorEventType.DisplayResized, _event => {
             this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
+            this.queueRerender();
         });
-        window.addEventListener('resize', () => {
+        const handleResize = () => {
             this.notifier.dispatch(EditorEventType.DisplayResized, {
                 kind: EditorEventType.DisplayResized,
                 newSize: Vec2.of(this.display.width, this.display.height),
             });
-            this.queueRerender();
-        });
+        };
+        if ('ResizeObserver' in window) {
+            const resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(this.container);
+        }
+        else {
+            addEventListener('resize', handleResize);
+        }
         this.accessibilityControlArea.addEventListener('input', () => {
             this.accessibilityControlArea.value = '';
         });
@@ -582,7 +593,7 @@ export class Editor {
         if (showImageBounds) {
             const exportRectFill = { fill: Color4.fromHex('#44444455') };
             const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
-            renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
+            renderer.drawRect(this.getImportExportRect(), exportRectStrokeWidth, exportRectFill);
         }
         this.rerenderQueued = false;
         this.nextRerenderListeners.forEach(listener => listener());
@@ -693,21 +704,22 @@ export class Editor {
     // The export resolution is the same as the size of the drawing canvas.
     toDataURL(format = 'image/png') {
         const canvas = document.createElement('canvas');
-        const resolution = this.importExportViewport.getScreenRectSize();
+        const importExportViewport = this.image.getImportExportViewport();
+        const resolution = importExportViewport.getScreenRectSize();
         canvas.width = resolution.x;
         canvas.height = resolution.y;
         const ctx = canvas.getContext('2d');
-        const renderer = new CanvasRenderer(ctx, this.importExportViewport);
+        const renderer = new CanvasRenderer(ctx, importExportViewport);
         this.image.renderAll(renderer);
         const dataURL = canvas.toDataURL(format);
         return dataURL;
     }
     toSVG() {
-        const importExportViewport = this.importExportViewport;
+        const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
         const renderer = new SVGRenderer(result, importExportViewport);
-        const origTransform = this.importExportViewport.canvasToScreenTransform;
+        const origTransform = importExportViewport.canvasToScreenTransform;
         // Render with (0,0) at (0,0) — we'll handle translation with
         // the viewBox property.
         importExportViewport.resetTransform(Mat33.identity);
@@ -725,10 +737,17 @@ export class Editor {
         result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
+    /**
+     * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
+     *
+     * @see loadFromSVG
+     */
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);
             this.display.setDraftMode(true);
+            const originalBackgrounds = this.image.getBackgroundComponents();
+            const eraseBackgroundCommand = new Erase(originalBackgrounds);
             yield loader.start((component) => __awaiter(this, void 0, void 0, function* () {
                 yield this.dispatchNoAnnounce(EditorImage.addElement(component));
             }), (countProcessed, totalToProcess) => {
@@ -742,36 +761,50 @@ export class Editor {
                 this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
                 this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
             });
+            // Ensure that we don't have multiple overlapping BackgroundComponents. Remove
+            // old BackgroundComponents.
+            // Overlapping BackgroundComponents may cause changing the background color to
+            // not work properly.
+            if (this.image.getBackgroundComponents().length !== originalBackgrounds.length) {
+                yield this.dispatchNoAnnounce(eraseBackgroundCommand);
+            }
             this.hideLoadingWarning();
             this.display.setDraftMode(false);
             this.queueRerender();
         });
     }
+    getTopmostBackgroundComponent() {
+        let background = null;
+        // Find a background component, if one exists.
+        // Use the last (topmost) background component if there are multiple.
+        for (const component of this.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                background = component;
+            }
+        }
+        return background;
+    }
+    /**
+     * Set the background color of the image.
+     */
+    setBackgroundColor(color) {
+        let background = this.getTopmostBackgroundComponent();
+        if (!background) {
+            const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+            background = new ImageBackground(backgroundType, color);
+            return this.image.addElement(background);
+        }
+        else {
+            return background.updateStyle({ color });
+        }
+    }
     // Returns the size of the visible region of the output SVG
     getImportExportRect() {
-        return this.importExportViewport.visibleRect;
+        return this.image.getImportExportViewport().visibleRect;
     }
     // Resize the output SVG to match `imageRect`.
     setImportExportRect(imageRect) {
-        const origSize = this.importExportViewport.visibleRect.size;
-        const origTransform = this.importExportViewport.canvasToScreenTransform;
-        return new class extends Command {
-            apply(editor) {
-                const viewport = editor.importExportViewport;
-                viewport.updateScreenSize(imageRect.size);
-                viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
-                editor.queueRerender();
-            }
-            unapply(editor) {
-                const viewport = editor.importExportViewport;
-                viewport.updateScreenSize(origSize);
-                viewport.resetTransform(origTransform);
-                editor.queueRerender();
-            }
-            description(_editor, localizationTable) {
-                return localizationTable.resizeOutputCommand(imageRect);
-            }
-        };
+        return this.image.setImportExportRect(imageRect);
     }
     /**
      * Alias for loadFrom(SVGLoader.fromString).

package/dist/src/EditorImage.d.ts

@@ -4,17 +4,38 @@ import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
+import EventDispatcher from './EventDispatcher';
+import Command from './commands/Command';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
+export declare enum EditorImageEventType {
+    ExportViewportChanged = 0
+}
+export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
+    image: EditorImage;
+}>;
 export default class EditorImage {
     private root;
+    private background;
     private componentsById;
+    /** Viewport for the exported/imported image. */
+    private importExportViewport;
+    readonly notifier: EditorImageNotifier;
     constructor();
+    /**
+     * @returns a `Viewport` for rendering the image when importing/exporting.
+     */
+    getImportExportViewport(): Viewport;
+    setImportExportRect(imageRect: Rect2): Command;
+    getBackgroundComponents(): AbstractComponent[];
     findParent(elem: AbstractComponent): ImageNode | null;
     queueRerenderOf(elem: AbstractComponent): void;
     /** @internal */
     renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
-    /** @internal */
-    render(renderer: AbstractRenderer, viewport: Viewport): void;
+    /**
+     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
+     * @internal
+     */
+    render(renderer: AbstractRenderer, viewport: Viewport | null): void;
     /** Renders all nodes, even ones not within the viewport. @internal */
     renderAll(renderer: AbstractRenderer): void;
     /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
@@ -30,6 +51,7 @@ export default class EditorImage {
      */
     lookupElement(id: string): AbstractComponent | null;
     private addElementDirectly;
+    private removeElementDirectly;
     /**
      * Returns a command that adds the given element to the `EditorImage`.
      * If `applyByFlattening` is true, the content of the wet ink renderer is
@@ -38,6 +60,8 @@ export default class EditorImage {
      * @see {@link Display.flatten}
      */
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
+    /** @see EditorImage.addElement */
+    addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
 }
 type TooSmallToRenderCheck = (rect: Rect2) => boolean;
@@ -58,6 +82,7 @@ export declare class ImageNode {
     private getChildrenIntersectingRegion;
     getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
     getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getChildWithContent(target: AbstractComponent): ImageNode | null;
     getLeaves(): ImageNode[];
     addLeaf(leaf: AbstractComponent): ImageNode;
     getBBox(): Rect2;
@@ -65,6 +90,6 @@ export declare class ImageNode {
     private updateParents;
     private rebalance;
     remove(): void;
-    render(renderer: AbstractRenderer, visibleRect: Rect2): void;
+    render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
 }
 export {};

package/dist/src/EditorImage.js

@@ -1,27 +1,82 @@
 var _a;
+import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
 import SerializableCommand from './commands/SerializableCommand';
+import EventDispatcher from './EventDispatcher';
+import { Vec2 } from './math/Vec2';
+import Command from './commands/Command';
+import Mat33 from './math/Mat33';
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
 };
+export var EditorImageEventType;
+(function (EditorImageEventType) {
+    EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
+})(EditorImageEventType || (EditorImageEventType = {}));
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
     // @internal
     constructor() {
         this.root = new ImageNode();
+        this.background = new ImageNode();
         this.componentsById = {};
+        this.notifier = new EventDispatcher();
+        this.importExportViewport = new Viewport(() => {
+            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+                image: this,
+            });
+        });
+        // Default to a 500x500 image
+        this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
     }
-    // Returns the parent of the given element, if it exists.
-    findParent(elem) {
-        const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
-        for (const candidate of candidates) {
-            if (candidate.getContent() === elem) {
-                return candidate;
+    /**
+     * @returns a `Viewport` for rendering the image when importing/exporting.
+     */
+    getImportExportViewport() {
+        return this.importExportViewport;
+    }
+    setImportExportRect(imageRect) {
+        const importExportViewport = this.getImportExportViewport();
+        const origSize = importExportViewport.visibleRect.size;
+        const origTransform = importExportViewport.canvasToScreenTransform;
+        return new class extends Command {
+            apply(editor) {
+                const viewport = editor.image.getImportExportViewport();
+                viewport.updateScreenSize(imageRect.size);
+                viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
+                editor.queueRerender();
+            }
+            unapply(editor) {
+                const viewport = editor.image.getImportExportViewport();
+                viewport.updateScreenSize(origSize);
+                viewport.resetTransform(origTransform);
+                editor.queueRerender();
+            }
+            description(_editor, localizationTable) {
+                return localizationTable.resizeOutputCommand(imageRect);
+            }
+        };
+    }
+    // Returns all components that make up the background of this image. These
+    // components are rendered below all other components.
+    getBackgroundComponents() {
+        const result = [];
+        const leaves = this.background.getLeaves();
+        sortLeavesByZIndex(leaves);
+        for (const leaf of leaves) {
+            const content = leaf.getContent();
+            if (content) {
+                result.push(content);
             }
         }
-        return null;
+        return result;
+    }
+    // Returns the parent of the given element, if it exists.
+    findParent(elem) {
+        var _a;
+        return (_a = this.background.getChildWithContent(elem)) !== null && _a !== void 0 ? _a : this.root.getChildWithContent(elem);
     }
     // Forces a re-render of `elem` when the image is next re-rendered as a whole.
     // Does nothing if `elem` is not in this.
@@ -36,19 +91,20 @@ export default class EditorImage {
     }
     /** @internal */
     renderWithCache(screenRenderer, cache, viewport) {
+        this.background.render(screenRenderer, viewport.visibleRect);
         cache.render(screenRenderer, this.root, viewport);
     }
-    /** @internal */
+    /**
+     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
+     * @internal
+     */
     render(renderer, viewport) {
-        this.root.render(renderer, viewport.visibleRect);
+        this.background.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
+        this.root.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
     }
     /** Renders all nodes, even ones not within the viewport. @internal */
     renderAll(renderer) {
-        const leaves = this.root.getLeaves();
-        sortLeavesByZIndex(leaves);
-        for (const leaf of leaves) {
-            leaf.getContent().render(renderer, leaf.getBBox());
-        }
+        this.render(renderer, null);
     }
     /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
     getAllElements() {
@@ -76,8 +132,21 @@ export default class EditorImage {
         return (_a = this.componentsById[id]) !== null && _a !== void 0 ? _a : null;
     }
     addElementDirectly(elem) {
+        elem.onAddToImage(this);
         this.componentsById[elem.getId()] = elem;
-        return this.root.addLeaf(elem);
+        // If a background component, add to the background. Else,
+        // add to the normal component tree.
+        const parentTree = elem.isBackground() ? this.background : this.root;
+        return parentTree.addLeaf(elem);
+    }
+    removeElementDirectly(element) {
+        const container = this.findParent(element);
+        container === null || container === void 0 ? void 0 : container.remove();
+        if (container) {
+            this.onDestroyElement(element);
+            return true;
+        }
+        return false;
     }
     /**
      * Returns a command that adds the given element to the `EditorImage`.
@@ -89,6 +158,10 @@ export default class EditorImage {
     static addElement(elem, applyByFlattening = false) {
         return new EditorImage.AddElementCommand(elem, applyByFlattening);
     }
+    /** @see EditorImage.addElement */
+    addElement(elem, applyByFlattening) {
+        return EditorImage.addElement(elem, applyByFlattening);
+    }
 }
 // A Command that can access private [EditorImage] functionality
 EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
@@ -117,8 +190,7 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             }
         }
         unapply(editor) {
-            const container = editor.image.findParent(this.element);
-            container === null || container === void 0 ? void 0 : container.remove();
+            editor.image.removeElementDirectly(this.element);
             editor.queueRerender();
         }
         description(_editor, localization) {
@@ -194,6 +266,17 @@ export class ImageNode {
         }
         return result;
     }
+    // Returns the child of this with the target content or `null` if no
+    // such child exists.
+    getChildWithContent(target) {
+        const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+        for (const candidate of candidates) {
+            if (candidate.getContent() === target) {
+                return candidate;
+            }
+        }
+        return null;
+    }
     // Returns a list of leaves with this as an ancestor.
     // Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
     getLeaves() {
@@ -305,6 +388,8 @@ export class ImageNode {
     }
     // Remove this node and all of its children
     remove() {
+        var _a;
+        (_a = this.content) === null || _a === void 0 ? void 0 : _a.onRemoveFromImage();
         if (!this.parent) {
             this.content = null;
             this.children = [];
@@ -325,7 +410,13 @@ export class ImageNode {
         this.children = [];
     }
     render(renderer, visibleRect) {
-        const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        let leaves;
+        if (visibleRect) {
+            leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        }
+        else {
+            leaves = this.getLeaves();
+        }
         sortLeavesByZIndex(leaves);
         for (const leaf of leaves) {
             // Leaves by definition have content

package/dist/src/EventDispatcher.d.ts

@@ -16,13 +16,14 @@
  * @packageDocumentation
  */
 type CallbackHandler<EventType> = (data: EventType) => void;
+export interface DispatcherEventListener {
+    remove: () => void;
+}
 export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
     private listeners;
     constructor();
     dispatch(eventName: EventKeyType, event: EventMessageType): void;
-    on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): {
-        remove: () => boolean;
-    };
+    on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): DispatcherEventListener;
     /** Removes an event listener. This is equivalent to calling `.remove()` on the object returned by `.on`. */
     off(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): void;
 }

package/dist/src/SVGLoader.d.ts

@@ -24,6 +24,7 @@ export default class SVGLoader implements ImageLoader {
     private strokeDataFromElem;
     private attachUnrecognisedAttrs;
     private addPath;
+    private addBackground;
     private getTransform;
     private makeText;
     private addText;

package/dist/src/SVGLoader.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import Color4 from './Color4';
+import ImageBackground, { BackgroundType, imageBackgroundCSSClassName } from './components/ImageBackground';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
@@ -145,6 +146,14 @@ export default class SVGLoader {
             yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
         });
     }
+    addBackground(node) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            const fill = Color4.fromString((_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill) !== null && _b !== void 0 ? _b : 'black');
+            const elem = new ImageBackground(BackgroundType.SolidColor, fill);
+            yield ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, elem));
+        });
+    }
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
     // to prevent storing duplicate transform information when saving the component.
     getTransform(elem, supportedAttrs, computedStyles) {
@@ -307,7 +316,12 @@ export default class SVGLoader {
                     // Continue -- visit the node's children.
                     break;
                 case 'path':
-                    yield this.addPath(node);
+                    if (node.classList.contains(imageBackgroundCSSClassName)) {
+                        yield this.addBackground(node);
+                    }
+                    else {
+                        yield this.addPath(node);
+                    }
                     break;
                 case 'text':
                     yield this.addText(node);

package/dist/src/Viewport.d.ts

@@ -4,18 +4,23 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
 import { StrokeDataPoint } from './types';
-import { EditorNotifier } from './types';
 type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare abstract class ViewportTransform extends Command {
     abstract readonly transform: Mat33;
 }
+type TransformChangeCallback = (oldTransform: Mat33, newTransform: Mat33) => void;
 export declare class Viewport {
-    private notifier;
+    private onTransformChangeCallback;
     private static ViewportTransform;
     private transform;
     private inverseTransform;
     private screenRect;
-    constructor(notifier: EditorNotifier);
+    constructor(onTransformChangeCallback: TransformChangeCallback);
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone(): Viewport;
     updateScreenSize(screenSize: Vec2): void;
     /** Get the screen's visible region transformed into canvas space. */
     get visibleRect(): Rect2;

package/dist/src/Viewport.js

@@ -15,16 +15,26 @@ import Mat33 from './math/Mat33';
 import Rect2 from './math/Rect2';
 import { Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
-import { EditorEventType } from './types';
 export class ViewportTransform extends Command {
 }
 export class Viewport {
     // @internal
-    constructor(notifier) {
-        this.notifier = notifier;
+    constructor(onTransformChangeCallback) {
+        this.onTransformChangeCallback = onTransformChangeCallback;
         this.resetTransform(Mat33.identity);
         this.screenRect = Rect2.empty;
     }
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone() {
+        const result = new Viewport(() => { });
+        result.transform = this.transform;
+        result.inverseTransform = this.inverseTransform;
+        result.screenRect = this.screenRect;
+        return result;
+    }
     // @internal
     updateScreenSize(screenSize) {
         this.screenRect = this.screenRect.resizedTo(screenSize);
@@ -50,14 +60,11 @@ export class Viewport {
      * @param newTransform - should map from canvas coordinates to screen coordinates.
      */
     resetTransform(newTransform = Mat33.identity) {
+        var _a;
         const oldTransform = this.transform;
         this.transform = newTransform;
         this.inverseTransform = newTransform.inverse();
-        this.notifier.dispatch(EditorEventType.ViewportChanged, {
-            kind: EditorEventType.ViewportChanged,
-            newTransform,
-            oldTransform,
-        });
+        (_a = this.onTransformChangeCallback) === null || _a === void 0 ? void 0 : _a.call(this, oldTransform, newTransform);
     }
     get screenToCanvasTransform() {
         return this.inverseTransform;