js-draw 1.2.2 → 1.3.1

package/dist/mjs/SVGLoader.d.ts

@@ -4,22 +4,28 @@ export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
 export declare const svgLoaderAttributeContainerID = "svgContainerID";
+export declare const svgLoaderAutoresizeClassName = "js-draw--autoresize";
 export type SVGLoaderUnknownAttribute = [string, string];
 export type SVGLoaderUnknownStyleAttribute = {
     key: string;
     value: string;
     priority?: string;
 };
+export interface SVGLoaderOptions {
+    sanitize?: boolean;
+    disableUnknownObjectWarnings?: boolean;
+}
 export default class SVGLoader implements ImageLoader {
     private source;
-    private onFinish?;
-    private readonly storeUnknown;
+    private onFinish;
     private onAddComponent;
     private onProgress;
     private onDetermineExportRect;
     private processedCount;
     private totalToProcess;
     private rootViewBox;
+    private readonly storeUnknown;
+    private readonly disableUnknownObjectWarnings;
     private constructor();
     private getStyle;
     private strokeDataFromElem;
@@ -48,7 +54,7 @@ export default class SVGLoader implements ImageLoader {
      *
      * @see {@link Editor.loadFrom}
      * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
-     * @param sanitize - if `true`, don't store unknown attributes.
+     * @param options - if `true` or `false`, treated as the `sanitize` option -- don't store unknown attributes.
      */
-    static fromString(text: string, sanitize?: boolean): SVGLoader;
+    static fromString(text: string, options?: Partial<SVGLoaderOptions> | boolean): SVGLoader;
 }

package/dist/mjs/SVGLoader.mjs

@@ -15,13 +15,15 @@ export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 // Key that specifies the ID of an SVG element that contained a given node when the image
 // was first loaded.
 export const svgLoaderAttributeContainerID = 'svgContainerID';
+// If present in the exported SVG's class list, the image will be
+// autoresized when components are added/removed.
+export const svgLoaderAutoresizeClassName = 'js-draw--autoresize';
 const supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
 // Handles loading images from SVG.
 export default class SVGLoader {
-    constructor(source, onFinish, storeUnknown = true) {
+    constructor(source, onFinish, options) {
         this.source = source;
         this.onFinish = onFinish;
-        this.storeUnknown = storeUnknown;
         this.onAddComponent = null;
         this.onProgress = null;
         this.onDetermineExportRect = null;
@@ -29,6 +31,8 @@ export default class SVGLoader {
         this.totalToProcess = 0;
         this.containerGroupIDs = [];
         this.encounteredIDs = [];
+        this.storeUnknown = !(options.sanitize ?? false);
+        this.disableUnknownObjectWarnings = !!options.disableUnknownObjectWarnings;
     }
     // If [computedStyles] is given, it is preferred to directly accessing node's style object.
     getStyle(node, computedStyles) {
@@ -207,29 +211,44 @@ export default class SVGLoader {
     // 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) {
-        computedStyles ??= window.getComputedStyle(elem);
-        let transformProperty = computedStyles.transform;
-        if (transformProperty === '' || transformProperty === 'none') {
-            transformProperty = elem.style.transform || 'none';
-        }
-        // Prefer the actual .style.transform
-        // to the computed stylesheet -- in some browsers, the computedStyles version
-        // can have lower precision.
+        // If possible, load the js-draw specific transform attribute
+        const highpTransformAttribute = 'data-highp-transform';
+        const rawTransformData = elem.getAttribute(highpTransformAttribute);
         let transform;
-        try {
-            transform = Mat33.fromCSSMatrix(elem.style.transform);
-        }
-        catch (_e) {
-            transform = Mat33.fromCSSMatrix(transformProperty);
-        }
-        const elemX = elem.getAttribute('x');
-        const elemY = elem.getAttribute('y');
-        if (elemX || elemY) {
-            const x = parseFloat(elemX ?? '0');
-            const y = parseFloat(elemY ?? '0');
-            if (!isNaN(x) && !isNaN(y)) {
-                supportedAttrs?.push('x', 'y');
-                transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+        if (rawTransformData) {
+            try {
+                transform = Mat33.fromCSSMatrix(rawTransformData);
+                supportedAttrs?.push(highpTransformAttribute);
+            }
+            catch (e) {
+                console.warn(`Unable to parse raw transform data, ${rawTransformData}. Falling back to CSS data.`);
+            }
+        }
+        if (!transform) {
+            computedStyles ??= window.getComputedStyle(elem);
+            let transformProperty = computedStyles.transform;
+            if (transformProperty === '' || transformProperty === 'none') {
+                transformProperty = elem.style.transform || 'none';
+            }
+            // Prefer the actual .style.transform
+            // to the computed stylesheet -- in some browsers, the computedStyles version
+            // can have lower precision.
+            try {
+                transform = Mat33.fromCSSMatrix(elem.style.transform);
+            }
+            catch (_e) {
+                console.warn('matrix parse error', _e);
+                transform = Mat33.fromCSSMatrix(transformProperty);
+            }
+            const elemX = elem.getAttribute('x');
+            const elemY = elem.getAttribute('y');
+            if (elemX || elemY) {
+                const x = parseFloat(elemX ?? '0');
+                const y = parseFloat(elemY ?? '0');
+                if (!isNaN(x) && !isNaN(y)) {
+                    supportedAttrs?.push('x', 'y');
+                    transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+                }
             }
         }
         return transform;
@@ -395,8 +414,9 @@ export default class SVGLoader {
             console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
             return;
         }
+        const autoresize = node.classList.contains(svgLoaderAutoresizeClassName);
         this.rootViewBox = new Rect2(x, y, width, height);
-        this.onDetermineExportRect?.(this.rootViewBox);
+        this.onDetermineExportRect?.(this.rootViewBox, { autoresize });
     }
     async updateSVGAttrs(node) {
         if (this.storeUnknown) {
@@ -442,9 +462,11 @@ export default class SVGLoader {
                 await this.addUnknownNode(node);
                 break;
             default:
-                console.warn('Unknown SVG element,', node, node.tagName);
-                if (!(node instanceof SVGElement)) {
-                    console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
+                if (!this.disableUnknownObjectWarnings) {
+                    console.warn('Unknown SVG element,', node, node.tagName);
+                    if (!(node instanceof SVGElement)) {
+                        console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
+                    }
                 }
                 await this.addUnknownNode(node);
                 return;
@@ -488,9 +510,9 @@ export default class SVGLoader {
      *
      * @see {@link Editor.loadFrom}
      * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
-     * @param sanitize - if `true`, don't store unknown attributes.
+     * @param options - if `true` or `false`, treated as the `sanitize` option -- don't store unknown attributes.
      */
-    static fromString(text, sanitize = false) {
+    static fromString(text, options = false) {
         const sandbox = document.createElement('iframe');
         sandbox.src = 'about:blank';
         sandbox.setAttribute('sandbox', 'allow-same-origin');
@@ -528,9 +550,22 @@ export default class SVGLoader {
         const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svgElem.innerHTML = text;
         sandboxDoc.body.appendChild(svgElem);
+        // Handle options
+        let sanitize;
+        let disableUnknownObjectWarnings;
+        if (typeof options === 'boolean') {
+            sanitize = options;
+            disableUnknownObjectWarnings = false;
+        }
+        else {
+            sanitize = options.sanitize ?? false;
+            disableUnknownObjectWarnings = options.disableUnknownObjectWarnings ?? false;
+        }
         return new SVGLoader(svgElem, () => {
             svgElem.remove();
             sandbox.remove();
-        }, !sanitize);
+        }, {
+            sanitize, disableUnknownObjectWarnings,
+        });
     }
 }

package/dist/mjs/UndoRedoHistory.d.ts

@@ -11,8 +11,8 @@ declare class UndoRedoHistory {
     constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
     private fireUpdateEvent;
     push(command: Command, apply?: boolean): void;
-    undo(): void;
-    redo(): void;
+    undo(): void | Promise<void>;
+    redo(): void | Promise<void>;
     get undoStackSize(): number;
     get redoStackSize(): number;
 }

package/dist/mjs/UndoRedoHistory.mjs

@@ -58,26 +58,28 @@ class UndoRedoHistory {
         const command = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").pop();
         if (command) {
             __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").push(command);
-            command.unapply(this.editor);
+            const result = command.unapply(this.editor);
             this.announceUndoCallback(command);
             this.fireUpdateEvent(UndoEventType.CommandUndone, command);
             this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
                 kind: EditorEventType.CommandUndone,
                 command,
             });
+            return result;
         }
     }
     redo() {
         const command = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").pop();
         if (command) {
             __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
-            command.apply(this.editor);
+            const result = command.apply(this.editor);
             this.announceRedoCallback(command);
             this.fireUpdateEvent(UndoEventType.CommandRedone, command);
             this.editor.notifier.dispatch(EditorEventType.CommandDone, {
                 kind: EditorEventType.CommandDone,
                 command,
             });
+            return result;
         }
     }
     get undoStackSize() {

package/dist/mjs/Viewport.d.ts

@@ -18,6 +18,7 @@ export declare class Viewport {
      * useful when rendering with a temporarily different viewport.
      */
     getTemporaryClone(): Viewport;
+    /** Resizes the screen rect to the given size. @internal */
     updateScreenSize(screenSize: Vec2): void;
     /** Get the screen's visible region transformed into canvas space. */
     get visibleRect(): Rect2;
@@ -34,7 +35,7 @@ export declare class Viewport {
     resetTransform(newTransform?: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
-    /** @returns the size of the visible region in pixels. */
+    /** @returns the size of the visible region in pixels (screen units). */
     getScreenRectSize(): Vec2;
     /** Alias for `getScreenRectSize`. @deprecated */
     getResolution(): Vec3;

package/dist/mjs/Viewport.mjs

@@ -32,7 +32,7 @@ export class Viewport {
         result.screenRect = this.screenRect;
         return result;
     }
-    // @internal
+    /** Resizes the screen rect to the given size. @internal */
     updateScreenSize(screenSize) {
         this.screenRect = this.screenRect.resizedTo(screenSize);
     }
@@ -68,7 +68,7 @@ export class Viewport {
     get canvasToScreenTransform() {
         return this.transform;
     }
-    /** @returns the size of the visible region in pixels. */
+    /** @returns the size of the visible region in pixels (screen units). */
     getScreenRectSize() {
         return this.screenRect.size;
     }
@@ -150,8 +150,17 @@ export class Viewport {
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
     computeZoomToTransform(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
         let transform = Mat33.identity;
+        // Invalid size? (Would divide by zero)
         if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
-            throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
+            // Create a new rectangle with a valid size
+            let newSize = Math.max(toMakeVisible.w, toMakeVisible.h);
+            // Choose a reasonable default size, but don't zoom.
+            if (newSize === 0) {
+                newSize = 50;
+                allowZoomIn = false;
+                allowZoomOut = false;
+            }
+            toMakeVisible = new Rect2(toMakeVisible.x, toMakeVisible.y, newSize, newSize);
         }
         if (isNaN(toMakeVisible.size.magnitude())) {
             throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);

package/dist/mjs/commands/Command.d.ts

@@ -5,6 +5,7 @@ export declare abstract class Command {
     abstract unapply(editor: Editor): Promise<void> | void;
     onDrop(_editor: Editor): void;
     abstract description(editor: Editor, localizationTable: EditorLocalization): string;
+    /** @deprecated Use {@link uniteCommands} */
     static union(a: Command, b: Command): Command;
     static readonly empty: {
         description(_editor: Editor, _localizationTable: EditorLocalization): string;

package/dist/mjs/commands/Command.mjs

@@ -1,6 +1,7 @@
 export class Command {
     // Called when the command is being deleted
     onDrop(_editor) { }
+    /** @deprecated Use {@link uniteCommands} */
     static union(a, b) {
         return new class extends Command {
             apply(editor) {

package/dist/mjs/commands/Erase.mjs

@@ -32,8 +32,8 @@ class Erase extends SerializableCommand {
         for (const part of this.toRemove) {
             const parent = editor.image.findParent(part);
             if (parent) {
-                editor.image.onDestroyElement(part);
                 parent.remove();
+                editor.image.onDestroyElement(part);
             }
         }
         this.applied = true;

package/dist/mjs/commands/SerializableCommand.d.ts

@@ -2,7 +2,7 @@ import Editor from '../Editor';
 import Command from './Command';
 export type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
 export default abstract class SerializableCommand extends Command {
-    private commandTypeId;
+    #private;
     constructor(commandTypeId: string);
     protected abstract serializeToJSON(): string | Record<string, any> | any[];
     private static deserializationCallbacks;

package/dist/mjs/commands/SerializableCommand.mjs

@@ -1,11 +1,24 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SerializableCommand_commandTypeId;
 import  Command  from './Command.mjs';
 class SerializableCommand extends Command {
     constructor(commandTypeId) {
         super();
-        this.commandTypeId = commandTypeId;
+        _SerializableCommand_commandTypeId.set(this, void 0);
         if (!(commandTypeId in SerializableCommand.deserializationCallbacks)) {
             throw new Error(`Command ${commandTypeId} must have a registered deserialization callback. To do this, call SerializableCommand.register.`);
         }
+        __classPrivateFieldSet(this, _SerializableCommand_commandTypeId, commandTypeId, "f");
     }
     // Convert this command to an object that can be passed to `JSON.stringify`.
     //
@@ -14,7 +27,7 @@ class SerializableCommand extends Command {
     serialize() {
         return {
             data: this.serializeToJSON(),
-            commandType: this.commandTypeId,
+            commandType: __classPrivateFieldGet(this, _SerializableCommand_commandTypeId, "f"),
         };
     }
     // Convert a `string` containing JSON data (or the output of `JSON.parse`) into a
@@ -33,5 +46,6 @@ class SerializableCommand extends Command {
         SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
     }
 }
+_SerializableCommand_commandTypeId = new WeakMap();
 SerializableCommand.deserializationCallbacks = {};
 export default SerializableCommand;

package/dist/mjs/commands/localization.d.ts

@@ -13,6 +13,8 @@ export interface CommandLocalization {
     updatedViewport: string;
     transformedElements: (elemCount: number) => string;
     resizeOutputCommand: (newSize: Rect2) => string;
+    enabledAutoresizeOutputCommand: string;
+    disabledAutoresizeOutputCommand: string;
     addElementAction: (elemDescription: string) => string;
     eraseAction: (elemDescription: string, numElems: number) => string;
     duplicateAction: (elemDescription: string, count: number) => string;

package/dist/mjs/commands/localization.mjs

@@ -2,6 +2,8 @@ export const defaultCommandLocalization = {
     updatedViewport: 'Transformed Viewport',
     transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
     resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
+    enabledAutoresizeOutputCommand: 'Enabled output autoresize',
+    disabledAutoresizeOutputCommand: 'Disabled output autoresize',
     addElementAction: (componentDescription) => `Added ${componentDescription}`,
     eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
     duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,

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

@@ -6,12 +6,41 @@ import { ImageComponentLocalization } from './localization';
 export type LoadSaveData = (string[] | Record<symbol, string | number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
+export declare enum ComponentSizingMode {
+    /** The default. The compnent gets its size from its bounding box. */
+    BoundingBox = 0,
+    /** Causes the component to fill the entire visible region of the screen */
+    FillScreen = 1,
+    /**
+     * Displays the component anywhere (arbitrary location) on the
+     * canvas. (Ignoring the bounding box).
+     *
+     * These components may be ignored unless a full render is done.
+     *
+     * Intended for compnents that need to be rendered on a full export,
+     * but won't be visible to the user.
+     *
+     * For example, a metadata component.
+     */
+    Anywhere = 2
+}
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
  */
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;
+    /**
+     * The bounding box of this component.
+     * {@link getBBox}, by default, returns `contentBBox`.
+     * This must be set by components.
+     *
+     * If this changes, {@link EditorImage.queueRerenderOf} should be called for
+     * this object (provided that this object has been added to the editor.)
+     *
+     * **Note**: This value is ignored if {@link getSizingMode} returns `FillScreen`
+     * or `FillImage`.
+     */
     protected abstract contentBBox: Rect2;
     private zIndex;
     private id;
@@ -39,6 +68,15 @@ export default abstract class AbstractComponent {
      * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
      */
     getExactBBox(): Rect2;
+    /**
+     * Returns information about how this component should be displayed
+     * (e.g. fill the screen or get its size from {@link getBBox}).
+     *
+     * {@link EditorImage.queueRerenderOf} must be called to apply changes to
+     * the output of this method if this component has already been added to an
+     * {@link EditorImage}.
+     */
+    getSizingMode(): ComponentSizingMode;
     /** Called when this component is added to the given image. */
     onAddToImage(_image: EditorImage): void;
     onRemoveFromImage(): void;

package/dist/mjs/components/AbstractComponent.mjs

@@ -7,6 +7,25 @@ import  SerializableCommand  from '../commands/SerializableCommand.mjs';
 import  EditorImage  from '../EditorImage.mjs';
 import { Mat33 } from '@js-draw/math';
 import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
+export var ComponentSizingMode;
+(function (ComponentSizingMode) {
+    /** The default. The compnent gets its size from its bounding box. */
+    ComponentSizingMode[ComponentSizingMode["BoundingBox"] = 0] = "BoundingBox";
+    /** Causes the component to fill the entire visible region of the screen */
+    ComponentSizingMode[ComponentSizingMode["FillScreen"] = 1] = "FillScreen";
+    /**
+     * Displays the component anywhere (arbitrary location) on the
+     * canvas. (Ignoring the bounding box).
+     *
+     * These components may be ignored unless a full render is done.
+     *
+     * Intended for compnents that need to be rendered on a full export,
+     * but won't be visible to the user.
+     *
+     * For example, a metadata component.
+     */
+    ComponentSizingMode[ComponentSizingMode["Anywhere"] = 2] = "Anywhere";
+})(ComponentSizingMode || (ComponentSizingMode = {}));
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
  */
@@ -72,6 +91,17 @@ class AbstractComponent {
     getExactBBox() {
         return this.getBBox();
     }
+    /**
+     * Returns information about how this component should be displayed
+     * (e.g. fill the screen or get its size from {@link getBBox}).
+     *
+     * {@link EditorImage.queueRerenderOf} must be called to apply changes to
+     * the output of this method if this component has already been added to an
+     * {@link EditorImage}.
+     */
+    getSizingMode() {
+        return ComponentSizingMode.BoundingBox;
+    }
     /** Called when this component is added to the given image. */
     onAddToImage(_image) { }
     onRemoveFromImage() { }

package/dist/mjs/components/BackgroundComponent.d.ts

@@ -3,7 +3,7 @@ import EditorImage from '../EditorImage';
 import SerializableCommand from '../commands/SerializableCommand';
 import { LineSegment2, Mat33, Rect2, Color4 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import AbstractComponent from './AbstractComponent';
+import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
 export declare enum BackgroundType {
@@ -24,6 +24,8 @@ export default class BackgroundComponent extends AbstractComponent implements Re
     private mainColor;
     protected contentBBox: Rect2;
     private viewportSizeChangeListener;
+    private autoresizeChangedListener;
+    private fillsScreen;
     private gridSize;
     private gridStrokeWidth;
     private secondaryColor;
@@ -41,10 +43,17 @@ export default class BackgroundComponent extends AbstractComponent implements Re
     onRemoveFromImage(): void;
     private recomputeBBox;
     private generateGridPath;
+    /**
+     * @returns this background's bounding box if the screen size is taken into
+     * account (which may be necessary if this component is configured to fill the
+     * entire screen).
+     */
+    private getFullBoundingBox;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     isSelectable(): boolean;
     isBackground(): boolean;
+    getSizingMode(): ComponentSizingMode;
     protected serializeToJSON(): {
         mainColor: string;
         secondaryColor: string | undefined;

package/dist/mjs/components/BackgroundComponent.mjs

@@ -1,6 +1,6 @@
 import  { EditorImageEventType }  from '../EditorImage.mjs';
 import { Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2 } from '@js-draw/math';
-import  AbstractComponent  from './AbstractComponent.mjs';
+import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
 import  Viewport  from '../Viewport.mjs';
 import  { pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
@@ -28,6 +28,10 @@ export default class BackgroundComponent extends AbstractComponent {
         this.backgroundType = backgroundType;
         this.mainColor = mainColor;
         this.viewportSizeChangeListener = null;
+        this.autoresizeChangedListener = null;
+        // Whether the background should grow/shrink to match the screen size,
+        // rather than being clipped to the image boundaries.
+        this.fillsScreen = false;
         this.gridSize = Viewport.getGridSize(2);
         this.gridStrokeWidth = 0.7;
         this.secondaryColor = null;
@@ -102,22 +106,38 @@ export default class BackgroundComponent extends AbstractComponent {
         this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
             this.recomputeBBox(image);
         });
+        this.autoresizeChangedListener = image.notifier.on(EditorImageEventType.AutoresizeModeChanged, () => {
+            this.recomputeBBox(image);
+        });
         this.recomputeBBox(image);
     }
     onRemoveFromImage() {
         this.viewportSizeChangeListener?.remove();
+        this.autoresizeChangedListener?.remove();
         this.viewportSizeChangeListener = null;
+        this.autoresizeChangedListener = null;
     }
     recomputeBBox(image) {
         const importExportRect = image.getImportExportViewport().visibleRect;
+        let needsRerender = false;
         if (!this.contentBBox.eq(importExportRect)) {
             this.contentBBox = importExportRect;
-            // Re-render this if already added to the EditorImage.
+            needsRerender = true;
+        }
+        const imageAutoresizes = image.getAutoresizeEnabled();
+        if (imageAutoresizes !== this.fillsScreen) {
+            this.fillsScreen = imageAutoresizes;
+            needsRerender = true;
+        }
+        if (needsRerender) {
+            // Re-renders this if already added to the EditorImage.
             image.queueRerenderOf(this);
         }
     }
     generateGridPath(visibleRect) {
-        const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(this.contentBBox) ?? this.contentBBox;
+        const contentBBox = this.getFullBoundingBox(visibleRect);
+        // .grownBy acts on all sides, so we need only grow by strokeWidth / 2 (1 * the stroke radius)
+        const targetRect = (visibleRect?.intersection(contentBBox) ?? contentBBox).grownBy(this.gridStrokeWidth / 2);
         const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
         const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
         const startY = roundUpToGrid(targetRect.y);
@@ -158,24 +178,33 @@ export default class BackgroundComponent extends AbstractComponent {
         }
         return new Path(startPoint, result);
     }
+    /**
+     * @returns this background's bounding box if the screen size is taken into
+     * account (which may be necessary if this component is configured to fill the
+     * entire screen).
+     */
+    getFullBoundingBox(visibleRect) {
+        return (this.fillsScreen ? visibleRect : this.contentBBox) ?? this.contentBBox;
+    }
     render(canvas, visibleRect) {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
         const clip = this.backgroundType === BackgroundType.Grid;
-        canvas.startObject(this.contentBBox, clip);
+        const contentBBox = this.getFullBoundingBox(visibleRect);
+        canvas.startObject(contentBBox, clip);
         if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
             // 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);
+                const intersection = visibleRect.intersection(contentBBox);
                 if (intersection) {
                     canvas.fillRect(intersection, this.mainColor);
                 }
             }
             else {
-                canvas.fillRect(this.contentBBox, this.mainColor);
+                canvas.fillRect(contentBBox, this.mainColor);
             }
         }
         if (this.backgroundType === BackgroundType.Grid) {
@@ -213,6 +242,9 @@ export default class BackgroundComponent extends AbstractComponent {
     isBackground() {
         return true;
     }
+    getSizingMode() {
+        return this.fillsScreen ? ComponentSizingMode.FillScreen : ComponentSizingMode.BoundingBox;
+    }
     serializeToJSON() {
         return {
             mainColor: this.mainColor.toHexString(),