js-draw 0.15.1 → 0.15.2

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

@@ -84,8 +84,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.

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';
@@ -119,15 +118,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();
@@ -582,7 +584,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 +695,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();
         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);
@@ -749,29 +752,11 @@ export class Editor {
     }
     // 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

@@ -1,14 +1,36 @@
+import Editor from './Editor';
 import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
+import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
+import EventDispatcher from './EventDispatcher';
 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 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): {
+        apply(editor: Editor): void;
+        unapply(editor: Editor): void;
+        description(_editor: Editor, localizationTable: EditorLocalization): string;
+        onDrop(_editor: Editor): void;
+    };
     findParent(elem: AbstractComponent): ImageNode | null;
     queueRerenderOf(elem: AbstractComponent): void;
     /** @internal */
@@ -30,6 +52,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 +61,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;

package/dist/src/EditorImage.js

@@ -1,17 +1,62 @@
 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.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 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 the parent of the given element, if it exists.
     findParent(elem) {
@@ -76,9 +121,14 @@ 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);
     }
+    removeElementDirectly(element) {
+        const container = this.findParent(element);
+        container === null || container === void 0 ? void 0 : container.remove();
+    }
     /**
      * Returns a command that adds the given element to the `EditorImage`.
      * If `applyByFlattening` is true, the content of the wet ink renderer is
@@ -89,6 +139,10 @@ export default class EditorImage {
     static addElement(elem, applyByFlattening = false) {
         return new EditorImage.AddElementCommand(elem, applyByFlattening);
     }
+    /** @see EditorImage.addElement */
+    addElement(elem, applyByFlattening = true) {
+        return EditorImage.addElement(elem, applyByFlattening);
+    }
 }
 // A Command that can access private [EditorImage] functionality
 EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
@@ -117,8 +171,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) {
@@ -305,11 +358,13 @@ export class ImageNode {
     }
     // Remove this node and all of its children
     remove() {
+        var _a;
         if (!this.parent) {
             this.content = null;
             this.children = [];
             return;
         }
+        (_a = this.content) === null || _a === void 0 ? void 0 : _a.onRemoveFromImage();
         const oldChildCount = this.parent.children.length;
         this.parent.children = this.parent.children.filter(node => {
             return node !== this;

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,18 @@ 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);
     updateScreenSize(screenSize: Vec2): void;
     /** Get the screen's visible region transformed into canvas space. */
     get visibleRect(): Rect2;

package/dist/src/Viewport.js

@@ -15,13 +15,12 @@ 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;
     }
@@ -50,14 +49,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;

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

@@ -1,4 +1,5 @@
 import SerializableCommand from '../commands/SerializableCommand';
+import EditorImage from '../EditorImage';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
@@ -17,7 +18,7 @@ export default abstract class AbstractComponent {
     private zIndex;
     private id;
     private static zIndexCounter;
-    protected constructor(componentKind: string);
+    protected constructor(componentKind: string, initialZIndex?: number);
     getId(): string;
     private static deserializationCallbacks;
     static registerComponent(componentKind: string, deserialize: DeserializeCallback | null): void;
@@ -33,6 +34,9 @@ export default abstract class AbstractComponent {
     getZIndex(): number;
     /** @returns the bounding box of  */
     getBBox(): Rect2;
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image: EditorImage): void;
+    onRemoveFromImage(): void;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     /** @return true if `lineSegment` intersects this component. */
     abstract intersects(lineSegment: LineSegment2): boolean;

package/dist/src/components/AbstractComponent.js

@@ -9,12 +9,17 @@ import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 export default class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
-    componentKind) {
+    componentKind, initialZIndex) {
         this.componentKind = componentKind;
         // Stores data attached by a loader.
         this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
-        this.zIndex = AbstractComponent.zIndexCounter++;
+        if (initialZIndex !== undefined) {
+            this.zIndex = initialZIndex;
+        }
+        else {
+            this.zIndex = AbstractComponent.zIndexCounter++;
+        }
         // Create a unique ID.
         this.id = `${new Date().getTime()}-${Math.random()}`;
         if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
@@ -54,6 +59,9 @@ export default class AbstractComponent {
     getBBox() {
         return this.contentBBox;
     }
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image) { }
+    onRemoveFromImage() { }
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.

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

@@ -0,0 +1,41 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+export declare enum BackgroundType {
+    SolidColor = 0,
+    None = 1
+}
+export declare const imageBackgroundCSSClassName = "js-draw-image-background";
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+    private backgroundType;
+    private mainColor;
+    protected contentBBox: Rect2;
+    private viewportSizeChangeListener;
+    readonly isRestylableComponent: true;
+    constructor(backgroundType: BackgroundType, mainColor: Color4);
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, _editor: Editor | null): void;
+    onAddToImage(image: EditorImage): void;
+    onRemoveFromImage(): void;
+    private recomputeBBox;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    intersects(lineSegment: LineSegment2): boolean;
+    isSelectable(): boolean;
+    protected serializeToJSON(): {
+        mainColor: string;
+        backgroundType: BackgroundType;
+    };
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    static deserializeFromJSON(json: any): ImageBackground;
+}

package/dist/src/components/ImageBackground.js

@@ -0,0 +1,132 @@
+import Color4 from '../Color4';
+import { EditorImageEventType } from '../EditorImage';
+import Rect2 from '../math/Rect2';
+import AbstractComponent from './AbstractComponent';
+import { createRestyleComponentCommand } from './RestylableComponent';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["None"] = 1] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2.empty;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    // @internal
+    forceStyle(style, _editor) {
+        const fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        if (fill.eq(Color4.transparent)) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+    }
+    onAddToImage(image) {
+        if (this.viewportSizeChangeListener) {
+            console.warn('onAddToImage called when background is already in an image');
+            this.onRemoveFromImage();
+        }
+        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    }
+    onRemoveFromImage() {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    }
+    recomputeBBox(image) {
+        const importExportRect = image.getImportExportViewport().visibleRect;
+        if (!this.contentBBox.eq(importExportRect)) {
+            this.contentBBox = importExportRect;
+            // Re-render this if already added to the EditorImage.
+            image.queueRerenderOf(this);
+        }
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        canvas.startObject(this.contentBBox);
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            // If the rectangle for this region contains the visible rect,
+            // we can fill the entire visible rectangle (which may be more efficient than
+            // filling the entire region for this.)
+            if (visibleRect) {
+                const intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        canvas.endObject(this.getLoadSaveData(), [imageBackgroundCSSClassName]);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    serializeToJSON() {
+        return {
+            mainColor: this.mainColor.toHexString(),
+            backgroundType: this.backgroundType,
+        };
+    }
+    applyTransformation(_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    }
+    description(localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else {
+            return localizationTable.emptyBackground;
+        }
+    }
+    createClone() {
+        return new ImageBackground(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    static deserializeFromJSON(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+        const mainColor = Color4.fromHex(json.mainColor);
+        return new ImageBackground(backgroundType, mainColor);
+    }
+}
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/dist/src/components/ImageComponent.js

@@ -80,7 +80,9 @@ export default class ImageComponent extends AbstractComponent {
         });
     }
     render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
         canvas.drawImage(this.image);
+        canvas.endObject(this.getLoadSaveData());
     }
     getProportionalRenderingTime() {
         // Estimate: Equivalent to a stroke with 10 segments.