js-draw 1.2.1 → 1.3.0

package/dist/mjs/EditorImage.d.ts

@@ -5,9 +5,11 @@ import { Rect2 } from '@js-draw/math';
 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
+    ExportViewportChanged = 0,
+    AutoresizeModeChanged = 1
 }
 export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
     image: EditorImage;
@@ -19,6 +21,7 @@ export default class EditorImage {
     private componentCount;
     /** Viewport for the exported/imported image. */
     private importExportViewport;
+    private shouldAutoresizeExportViewport;
     readonly notifier: EditorImageNotifier;
     constructor();
     getBackgroundComponents(): AbstractComponent[];
@@ -35,14 +38,20 @@ export default class EditorImage {
     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. */
+    /**
+     * @returns all elements in the image, sorted by z-index. This can be slow for large images.
+     *
+     * Does not include background elements. See {@link getBackgroundComponents}.
+     */
     getAllElements(): AbstractComponent[];
     /** Returns the number of elements added to this image. @internal */
     estimateNumElements(): number;
     /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
-    getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
-    /** Called whenever an element is completely removed. @internal */
+    getElementsIntersectingRegion(region: Rect2, includeBackground?: boolean): AbstractComponent[];
+    /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem: AbstractComponent): void;
+    /** Called just after an element is added. @internal */
+    private onElementAdded;
     /**
      * @returns the AbstractComponent with `id`, if it exists.
      *
@@ -66,11 +75,40 @@ export default class EditorImage {
      * @returns a `Viewport` for rendering the image when importing/exporting.
      */
     getImportExportViewport(): Viewport;
+    /**
+     * @see {@link setImportExportRect}
+     */
+    getImportExportRect(): Rect2;
+    /**
+     * Sets the import/export rectangle to the given `imageRect`. Disables
+     * autoresize (if it was previously enabled).
+     */
     setImportExportRect(imageRect: Rect2): SerializableCommand;
+    getAutoresizeEnabled(): boolean;
+    /** Returns a `Command` that sets whether the image should autoresize. */
+    setAutoresizeEnabled(autoresize: boolean): Command;
+    private setAutoresizeEnabledDirectly;
+    /** Updates the size/position of the viewport */
+    private autoresizeExportViewport;
+    private settingExportRect;
+    /**
+     * Sets the import/export viewport directly, without returning a `Command`.
+     * As such, this is not undoable.
+     *
+     * See setImportExportRect
+     *
+     * Returns true if changes to the viewport were made (and thus
+     * ExportViewportChanged was fired.)
+     */
+    private setExportRectDirectly;
+    private onExportViewportChanged;
     private static SetImportExportRectCommand;
 }
 type TooSmallToRenderCheck = (rect: Rect2) => boolean;
-/** Part of the Editor's image. @internal */
+/**
+ * Part of the Editor's image. Does not handle fullscreen/invisible components.
+ * @internal
+ */
 export declare class ImageNode {
     private parent;
     private content;
@@ -84,17 +122,31 @@ export declare class ImageNode {
     onContentChange(): void;
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
-    private getChildrenIntersectingRegion;
+    protected getChildrenIntersectingRegion(region: Rect2, isTooSmallFilter?: TooSmallToRenderCheck): ImageNode[];
     getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
     getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getChildWithContent(target: AbstractComponent): ImageNode | null;
     getLeaves(): ImageNode[];
     addLeaf(leaf: AbstractComponent): ImageNode;
+    protected static createLeafNode(parent: ImageNode, content: AbstractComponent): ImageNode;
     getBBox(): Rect2;
     recomputeBBox(bubbleUp: boolean): void;
+    private unionBBoxWith;
     private updateParents;
     private rebalance;
+    protected removeChild(child: ImageNode): void;
     remove(): void;
     render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
+    renderDebugBoundingBoxes(renderer: AbstractRenderer, visibleRect: Rect2, depth?: number): void;
+}
+/** An `ImageNode` that can properly handle fullscreen/data components. @internal */
+export declare class RootImageNode extends ImageNode {
+    private fullscreenChildren;
+    private dataComponents;
+    protected getChildrenIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getLeaves(): ImageNode[];
+    removeChild(child: ImageNode): void;
+    getChildWithContent(target: AbstractComponent): ImageNode | null;
+    addLeaf(leafContent: AbstractComponent): ImageNode;
 }
 export {};

package/dist/mjs/EditorImage.mjs

@@ -4,11 +4,12 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 var _a, _b, _c;
 import  Viewport  from './Viewport.mjs';
-import  AbstractComponent  from './components/AbstractComponent.mjs';
-import { Rect2, Vec2, Mat33 } from '@js-draw/math';
+import  AbstractComponent, { ComponentSizingMode }  from './components/AbstractComponent.mjs';
+import { Rect2, Vec2, Mat33, Color4 } from '@js-draw/math';
 import  SerializableCommand  from './commands/SerializableCommand.mjs';
 import  EventDispatcher  from './EventDispatcher.mjs';
-import  { assertIsNumber, assertIsNumberArray }  from './util/assertions.mjs';
+import  { assertIsBoolean, assertIsNumber, assertIsNumberArray }  from './util/assertions.mjs';
+import  Command  from './commands/Command.mjs';
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
@@ -16,23 +17,25 @@ export const sortLeavesByZIndex = (leaves) => {
 export var EditorImageEventType;
 (function (EditorImageEventType) {
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
+    EditorImageEventType[EditorImageEventType["AutoresizeModeChanged"] = 1] = "AutoresizeModeChanged";
 })(EditorImageEventType || (EditorImageEventType = {}));
+const debugMode = false;
 // Handles lookup/storage of elements in the image
 class EditorImage {
     // @internal
     constructor() {
         this.componentCount = 0;
-        this.root = new ImageNode();
-        this.background = new ImageNode();
+        this.settingExportRect = false;
+        this.root = new RootImageNode();
+        this.background = new RootImageNode();
         this.componentsById = {};
         this.notifier = new EventDispatcher();
         this.importExportViewport = new Viewport(() => {
-            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
-                image: this,
-            });
+            this.onExportViewportChanged();
         });
         // Default to a 500x500 image
         this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
+        this.shouldAutoresizeExportViewport = false;
     }
     // Returns all components that make up the background of this image. These
     // components are rendered below all other components.
@@ -66,7 +69,13 @@ class EditorImage {
     /** @internal */
     renderWithCache(screenRenderer, cache, viewport) {
         this.background.render(screenRenderer, viewport.visibleRect);
-        cache.render(screenRenderer, this.root, viewport);
+        // If in debug mode, avoid rendering with cache to show additional debug information
+        if (!debugMode) {
+            cache.render(screenRenderer, this.root, viewport);
+        }
+        else {
+            this.root.render(screenRenderer, viewport.visibleRect);
+        }
     }
     /**
      * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
@@ -82,7 +91,11 @@ class EditorImage {
     renderAll(renderer) {
         this.render(renderer, null);
     }
-    /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+    /**
+     * @returns all elements in the image, sorted by z-index. This can be slow for large images.
+     *
+     * Does not include background elements. See {@link getBackgroundComponents}.
+     */
     getAllElements() {
         const leaves = this.root.getLeaves();
         sortLeavesByZIndex(leaves);
@@ -93,15 +106,25 @@ class EditorImage {
         return this.componentCount;
     }
     /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
-    getElementsIntersectingRegion(region) {
-        const leaves = this.root.getLeavesIntersectingRegion(region);
+    getElementsIntersectingRegion(region, includeBackground = false) {
+        let leaves = this.root.getLeavesIntersectingRegion(region);
+        if (includeBackground) {
+            leaves = leaves.concat(this.background.getLeavesIntersectingRegion(region));
+        }
         sortLeavesByZIndex(leaves);
         return leaves.map(leaf => leaf.getContent());
     }
-    /** Called whenever an element is completely removed. @internal */
+    /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem) {
         this.componentCount--;
         delete this.componentsById[elem.getId()];
+        this.autoresizeExportViewport();
+    }
+    /** Called just after an element is added. @internal */
+    onElementAdded(elem) {
+        this.componentCount++;
+        this.componentsById[elem.getId()] = elem;
+        this.autoresizeExportViewport();
     }
     /**
      * @returns the AbstractComponent with `id`, if it exists.
@@ -112,13 +135,15 @@ class EditorImage {
         return this.componentsById[id] ?? null;
     }
     addElementDirectly(elem) {
+        // Because onAddToImage can affect the element's bounding box,
+        // this needs to be called before parentTree.addLeaf.
         elem.onAddToImage(this);
-        this.componentCount++;
-        this.componentsById[elem.getId()] = 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);
+        const result = parentTree.addLeaf(elem);
+        this.onElementAdded(elem);
+        return result;
     }
     removeElementDirectly(element) {
         const container = this.findParent(element);
@@ -149,11 +174,82 @@ class EditorImage {
     getImportExportViewport() {
         return this.importExportViewport;
     }
+    /**
+     * @see {@link setImportExportRect}
+     */
+    getImportExportRect() {
+        return this.getImportExportViewport().visibleRect;
+    }
+    /**
+     * Sets the import/export rectangle to the given `imageRect`. Disables
+     * autoresize (if it was previously enabled).
+     */
     setImportExportRect(imageRect) {
-        const importExportViewport = this.getImportExportViewport();
-        const origSize = importExportViewport.visibleRect.size;
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+        return EditorImage.SetImportExportRectCommand.of(this, imageRect, false);
+    }
+    getAutoresizeEnabled() {
+        return this.shouldAutoresizeExportViewport;
+    }
+    /** Returns a `Command` that sets whether the image should autoresize. */
+    setAutoresizeEnabled(autoresize) {
+        if (autoresize === this.shouldAutoresizeExportViewport) {
+            return Command.empty;
+        }
+        const newBBox = this.root.getBBox();
+        return EditorImage.SetImportExportRectCommand.of(this, newBBox, autoresize);
+    }
+    setAutoresizeEnabledDirectly(shouldAutoresize) {
+        if (shouldAutoresize !== this.shouldAutoresizeExportViewport) {
+            this.shouldAutoresizeExportViewport = shouldAutoresize;
+            this.notifier.dispatch(EditorImageEventType.AutoresizeModeChanged, {
+                image: this,
+            });
+        }
+    }
+    /** Updates the size/position of the viewport */
+    autoresizeExportViewport() {
+        // Only autoresize if in autoresize mode -- otherwise resizing the image
+        // should be done with undoable commands.
+        if (this.shouldAutoresizeExportViewport) {
+            this.setExportRectDirectly(this.root.getBBox());
+        }
+    }
+    /**
+     * Sets the import/export viewport directly, without returning a `Command`.
+     * As such, this is not undoable.
+     *
+     * See setImportExportRect
+     *
+     * Returns true if changes to the viewport were made (and thus
+     * ExportViewportChanged was fired.)
+     */
+    setExportRectDirectly(newRect) {
+        const viewport = this.getImportExportViewport();
+        const lastSize = viewport.getScreenRectSize();
+        const lastTransform = viewport.canvasToScreenTransform;
+        const newTransform = Mat33.translation(newRect.topLeft.times(-1));
+        if (!lastSize.eq(newRect.size) || !lastTransform.eq(newTransform)) {
+            // Prevent the ExportViewportChanged event from being fired
+            // multiple times for the same viewport change: Set settingExportRect
+            // to true.
+            this.settingExportRect = true;
+            viewport.updateScreenSize(newRect.size);
+            viewport.resetTransform(newTransform);
+            this.settingExportRect = false;
+            this.onExportViewportChanged();
+            return true;
+        }
+        return false;
+    }
+    onExportViewportChanged() {
+        // Prevent firing duplicate events -- changes
+        // made by exportViewport.resetTransform may cause this method to be
+        // called.
+        if (!this.settingExportRect) {
+            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+                image: this,
+            });
+        }
     }
 }
 _a = EditorImage;
@@ -214,37 +310,57 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
     _b);
 // Handles resizing the background import/export region of the image.
 EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand {
-        constructor(originalSize, originalTransform, finalRect) {
+        constructor(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize) {
             super(EditorImage.SetImportExportRectCommand.commandId);
             this.originalSize = originalSize;
             this.originalTransform = originalTransform;
-            this.finalRect = finalRect;
+            this.originalAutoresize = originalAutoresize;
+            this.newExportRect = newExportRect;
+            this.newAutoresize = newAutoresize;
+        }
+        // Uses `image` to store the original size/transform
+        static of(image, newExportRect, newAutoresize) {
+            const importExportViewport = image.getImportExportViewport();
+            const originalSize = importExportViewport.visibleRect.size;
+            const originalTransform = importExportViewport.canvasToScreenTransform;
+            const originalAutoresize = image.getAutoresizeEnabled();
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize);
         }
         apply(editor) {
-            const viewport = editor.image.getImportExportViewport();
-            viewport.updateScreenSize(this.finalRect.size);
-            viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
+            editor.image.setAutoresizeEnabledDirectly(this.newAutoresize);
+            editor.image.setExportRectDirectly(this.newExportRect);
             editor.queueRerender();
         }
         unapply(editor) {
             const viewport = editor.image.getImportExportViewport();
+            editor.image.setAutoresizeEnabledDirectly(this.originalAutoresize);
             viewport.updateScreenSize(this.originalSize);
             viewport.resetTransform(this.originalTransform);
             editor.queueRerender();
         }
         description(_editor, localization) {
-            return localization.resizeOutputCommand(this.finalRect);
+            if (this.newAutoresize !== this.originalAutoresize) {
+                if (this.newAutoresize) {
+                    return localization.enabledAutoresizeOutputCommand;
+                }
+                else {
+                    return localization.disabledAutoresizeOutputCommand;
+                }
+            }
+            return localization.resizeOutputCommand(this.newExportRect);
         }
         serializeToJSON() {
             return {
                 originalSize: this.originalSize.xy,
                 originalTransform: this.originalTransform.toArray(),
                 newRegion: {
-                    x: this.finalRect.x,
-                    y: this.finalRect.y,
-                    w: this.finalRect.w,
-                    h: this.finalRect.h,
+                    x: this.newExportRect.x,
+                    y: this.newExportRect.y,
+                    w: this.newExportRect.w,
+                    h: this.newExportRect.h,
                 },
+                autoresize: this.newAutoresize,
+                originalAutoresize: this.originalAutoresize,
             };
         }
     },
@@ -262,15 +378,22 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
                 json.newRegion.w,
                 json.newRegion.h,
             ]);
+            assertIsBoolean(json.autoresize ?? false);
+            assertIsBoolean(json.originalAutoresize ?? false);
             const originalSize = Vec2.ofXY(json.originalSize);
             const originalTransform = new Mat33(...json.originalTransform);
             const finalRect = new Rect2(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
-            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, finalRect);
+            const autoresize = json.autoresize ?? false;
+            const originalAutoresize = json.originalAutoresize ?? false;
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, finalRect, autoresize);
         });
     })(),
     _c);
 export default EditorImage;
-/** Part of the Editor's image. @internal */
+/**
+ * Part of the Editor's image. Does not handle fullscreen/invisible components.
+ * @internal
+ */
 export class ImageNode {
     constructor(parent = null) {
         this.parent = parent;
@@ -292,9 +415,11 @@ export class ImageNode {
     getParent() {
         return this.parent;
     }
-    getChildrenIntersectingRegion(region) {
+    // Override this to change how children are considered within a given region.
+    getChildrenIntersectingRegion(region, isTooSmallFilter) {
         return this.children.filter(child => {
-            return child.getBBox().intersects(region);
+            const bbox = child.getBBox();
+            return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
     }
     getChildrenOrSelfIntersectingRegion(region) {
@@ -304,29 +429,25 @@ export class ImageNode {
         return this.getChildrenIntersectingRegion(region);
     }
     // Returns a list of `ImageNode`s with content (and thus no children).
+    // Override getChildrenIntersectingRegion to customize how this method
+    // determines whether/which children are in `region`.
     getLeavesIntersectingRegion(region, isTooSmall) {
         const result = [];
-        let current;
         const workList = [];
         workList.push(this);
-        const toNext = () => {
-            current = undefined;
-            const next = workList.pop();
-            if (next && !isTooSmall?.(next.bbox)) {
-                current = next;
-                if (current.content !== null && current.getBBox().intersection(region)) {
-                    result.push(current);
-                }
-                workList.push(...current.getChildrenIntersectingRegion(region));
-            }
-        };
         while (workList.length > 0) {
-            toNext();
+            const current = workList.pop();
+            if (current.content !== null) {
+                result.push(current);
+            }
+            workList.push(...current.getChildrenIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
     // Returns the child of this with the target content or `null` if no
     // such child exists.
+    //
+    // Note: Relies on all children to have valid bounding boxes.
     getChildWithContent(target) {
         const candidates = this.getLeavesIntersectingRegion(target.getBBox());
         for (const candidate of candidates) {
@@ -390,12 +511,19 @@ export class ImageNode {
             result.rebalance();
             return result;
         }
-        const newNode = new ImageNode(this);
+        const newNode = ImageNode.createLeafNode(this, leaf);
         this.children.push(newNode);
-        newNode.content = leaf;
         newNode.recomputeBBox(true);
         return newNode;
     }
+    // Creates a new leaf node with the given content.
+    // This only establishes the parent-child linking in one direction. Callers
+    // must add the resultant node to the list of children manually.
+    static createLeafNode(parent, content) {
+        const newNode = new ImageNode(parent);
+        newNode.content = content;
+        return newNode;
+    }
     getBBox() {
         return this.bbox;
     }
@@ -411,9 +539,20 @@ export class ImageNode {
             this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            this.parent?.recomputeBBox(true);
+            if (!this.bbox.containsRect(oldBBox)) {
+                this.parent?.unionBBoxWith(this.bbox);
+            }
+            else {
+                this.parent?.recomputeBBox(true);
+            }
         }
     }
+    // Grows this' bounding box to also include `other`.
+    // Always bubbles up.
+    unionBBoxWith(other) {
+        this.bbox = this.bbox.union(other);
+        this.parent?.unionBBoxWith(other);
+    }
     updateParents(recursive = false) {
         for (const child of this.children) {
             child.parent = this;
@@ -444,6 +583,19 @@ export class ImageNode {
             }
         }
     }
+    // Removes the parent-to-child link.
+    // Called internally by `.remove`
+    removeChild(child) {
+        const oldChildCount = this.children.length;
+        this.children = this.children.filter(node => {
+            return node !== child;
+        });
+        console.assert(this.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.children.length} after removing all nodes equal to ${child}. Nodes should only be removed once.`);
+        this.children.forEach(child => {
+            child.rebalance();
+        });
+        this.recomputeBBox(true);
+    }
     // Remove this node and all of its children
     remove() {
         this.content?.onRemoveFromImage();
@@ -452,18 +604,10 @@ export class ImageNode {
             this.children = [];
             return;
         }
-        const oldChildCount = this.parent.children.length;
-        this.parent.children = this.parent.children.filter(node => {
-            return node !== this;
-        });
-        console.assert(this.parent.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`);
-        this.parent.children.forEach(child => {
-            child.rebalance();
-        });
-        this.parent.recomputeBBox(true);
-        // Invalidate/disconnect this.
-        this.content = null;
+        this.parent.removeChild(this);
+        // Remove the child-to-parent link and invalid this
         this.parent = null;
+        this.content = null;
         this.children = [];
     }
     render(renderer, visibleRect) {
@@ -479,6 +623,114 @@ export class ImageNode {
             // Leaves by definition have content
             leaf.getContent().render(renderer, visibleRect);
         }
+        // Show debug information
+        if (debugMode && visibleRect) {
+            this.renderDebugBoundingBoxes(renderer, visibleRect);
+        }
+    }
+    // Debug only: Shows bounding boxes of this and all children.
+    renderDebugBoundingBoxes(renderer, visibleRect, depth = 0) {
+        const bbox = this.getBBox();
+        const pixelSize = 1 / (renderer.getSizeOfCanvasPixelOnScreen() || 1);
+        if (bbox.maxDimension < 3 * pixelSize || !bbox.intersects(visibleRect)) {
+            return;
+        }
+        // Render debug information for this
+        renderer.startObject(bbox);
+        // Different styling for leaf nodes
+        const isLeaf = !!this.content;
+        const fill = isLeaf ? Color4.ofRGBA(1, 0, 1, 0.4) : Color4.ofRGBA(0, 1, Math.sin(depth), 0.6);
+        const lineWidth = isLeaf ? 1 * pixelSize : 2 * pixelSize;
+        renderer.drawRect(bbox.intersection(visibleRect), lineWidth, { fill });
+        renderer.endObject();
+        // Render debug information for children
+        for (const child of this.children) {
+            child.renderDebugBoundingBoxes(renderer, visibleRect, depth + 1);
+        }
     }
 }
 ImageNode.idCounter = 0;
+/** An `ImageNode` that can properly handle fullscreen/data components. @internal */
+export class RootImageNode extends ImageNode {
+    constructor() {
+        super(...arguments);
+        // Nodes that will always take up the entire screen
+        this.fullscreenChildren = [];
+        // Nodes that will never be visible unless a full render is done.
+        this.dataComponents = [];
+    }
+    getChildrenIntersectingRegion(region, _isTooSmall) {
+        const result = super.getChildrenIntersectingRegion(region);
+        for (const node of this.fullscreenChildren) {
+            result.push(node);
+        }
+        return result;
+    }
+    getLeaves() {
+        const leaves = super.getLeaves();
+        // Add fullscreen/data components — this method should
+        // return *all* leaves.
+        return this.dataComponents.concat(this.fullscreenChildren, leaves);
+    }
+    removeChild(child) {
+        let removed = false;
+        const checkTargetChild = (component) => {
+            const isTarget = component === child;
+            removed ||= isTarget;
+            return !isTarget;
+        };
+        // Check whether the child is stored in the data/fullscreen
+        // component arrays first.
+        this.dataComponents = this.dataComponents
+            .filter(checkTargetChild);
+        this.fullscreenChildren = this.fullscreenChildren
+            .filter(checkTargetChild);
+        if (!removed) {
+            super.removeChild(child);
+        }
+    }
+    getChildWithContent(target) {
+        const searchExtendedChildren = () => {
+            // Search through all extended children
+            const candidates = this.fullscreenChildren.concat(this.dataComponents);
+            for (const candidate of candidates) {
+                if (candidate.getContent() === target) {
+                    return candidate;
+                }
+            }
+            return null;
+        };
+        // If positioned as if a standard child, search using the superclass first.
+        // Because it could be mislabeled, also search the extended children if the superclass
+        // search fails.
+        if (target.getSizingMode() === ComponentSizingMode.BoundingBox) {
+            return super.getChildWithContent(target) ?? searchExtendedChildren();
+        }
+        // Fall back to the superclass -- it's possible that the component has
+        // changed labels.
+        return super.getChildWithContent(target) ?? searchExtendedChildren();
+    }
+    addLeaf(leafContent) {
+        const sizingMode = leafContent.getSizingMode();
+        if (sizingMode === ComponentSizingMode.BoundingBox) {
+            return super.addLeaf(leafContent);
+        }
+        else if (sizingMode === ComponentSizingMode.FillScreen) {
+            this.onContentChange();
+            const newNode = ImageNode.createLeafNode(this, leafContent);
+            this.fullscreenChildren.push(newNode);
+            return newNode;
+        }
+        else if (sizingMode === ComponentSizingMode.Anywhere) {
+            this.onContentChange();
+            const newNode = ImageNode.createLeafNode(this, leafContent);
+            this.dataComponents.push(newNode);
+            return newNode;
+        }
+        else {
+            const exhaustivenessCheck = sizingMode;
+            throw new Error(`Invalid sizing mode, ${sizingMode}`);
+            return exhaustivenessCheck;
+        }
+    }
+}