js-draw 1.2.2 → 1.3.0

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,37 @@ 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);
+        const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(contentBBox) ?? contentBBox;
         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 +177,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 +241,9 @@ export default class BackgroundComponent extends AbstractComponent {
     isBackground() {
         return true;
     }
+    getSizingMode() {
+        return this.fillsScreen ? ComponentSizingMode.FillScreen : ComponentSizingMode.BoundingBox;
+    }
     serializeToJSON() {
         return {
             mainColor: this.mainColor.toHexString(),

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

@@ -1,6 +1,6 @@
 import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import AbstractComponent from './AbstractComponent';
+import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
@@ -11,6 +11,7 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     intersects(_lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
     isSelectable(): boolean;
+    getSizingMode(): ComponentSizingMode;
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;

package/dist/mjs/components/SVGGlobalAttributesObject.mjs

@@ -6,7 +6,7 @@
 //
 import { Rect2 } from '@js-draw/math';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
-import  AbstractComponent  from './AbstractComponent.mjs';
+import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mjs';
 const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {
@@ -32,6 +32,12 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     isSelectable() {
         return false;
     }
+    getSizingMode() {
+        // This component can be shown anywhere (it won't be
+        // visible to the user, it just needs to be saved with
+        // the image).
+        return ComponentSizingMode.Anywhere;
+    }
     createClone() {
         return new SVGGlobalAttributesObject(this.attrs);
     }

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

@@ -48,6 +48,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
     intersects(line: LineSegment2): boolean;
+    intersectsRect(rect: Rect2): boolean;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     private bboxForPart;

package/dist/mjs/components/Stroke.mjs

@@ -122,6 +122,50 @@ export default class Stroke extends AbstractComponent {
         }
         return false;
     }
+    intersectsRect(rect) {
+        // AbstractComponent::intersectsRect can be inexact for strokes with non-zero
+        // stroke radius (has many false negatives). As such, additional checks are
+        // done here, before passing to the superclass.
+        if (!rect.intersects(this.getBBox())) {
+            return false;
+        }
+        // The following check only checks for the positive case:
+        // Sample a set of points that are known to be within each part of this
+        // stroke. For example, the points marked with an "x" below:
+        //   ___________________
+        //  /                   \
+        //  | x              x  |
+        //  \_____________      |
+        //                |  x  |
+        //                \_____/
+        //
+        // Because we don't want the following case to result in selection,
+        //   __________________
+        //  /.___.             \
+        //  || x |          x  |    <-  /* The
+        //  |·---·             |            .___.
+        //  \____________      |            |   |
+        //               |  x  |            ·---·
+        //               \_____/           denotes the input rectangle */
+        //
+        // we need to ensure that the rectangle intersects each point **and** the
+        // edge of the rectangle.
+        for (const part of this.parts) {
+            // As such, we need to shrink the input rectangle to verify that the original,
+            // unshrunken rectangle would have intersected the edge of the stroke if it
+            // intersects a point within the stroke.
+            const interiorRect = rect.grownBy(-(part.style.stroke?.width ?? 0));
+            if (interiorRect.area === 0) {
+                continue;
+            }
+            for (const point of part.path.startEndPoints()) {
+                if (interiorRect.containsPoint(point)) {
+                    return true;
+                }
+            }
+        }
+        return super.intersectsRect(rect);
+    }
     render(canvas, visibleRect) {
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {

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

@@ -1,6 +1,6 @@
 import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import AbstractComponent from './AbstractComponent';
+import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class UnknownSVGObject extends AbstractComponent {
     private svgObject;
@@ -10,6 +10,7 @@ export default class UnknownSVGObject extends AbstractComponent {
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
     isSelectable(): boolean;
+    getSizingMode(): ComponentSizingMode;
     protected createClone(): AbstractComponent;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;

package/dist/mjs/components/UnknownSVGObject.mjs

@@ -5,7 +5,7 @@
 //
 import { Rect2 } from '@js-draw/math';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
-import  AbstractComponent  from './AbstractComponent.mjs';
+import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mjs';
 const componentId = 'unknown-svg-object';
 export default class UnknownSVGObject extends AbstractComponent {
     constructor(svgObject) {
@@ -30,6 +30,12 @@ export default class UnknownSVGObject extends AbstractComponent {
     isSelectable() {
         return false;
     }
+    getSizingMode() {
+        // This component can be shown anywhere (it won't be
+        // visible to the user, it just needs to be saved with
+        // the image).
+        return ComponentSizingMode.Anywhere;
+    }
     createClone() {
         return new UnknownSVGObject(this.svgObject.cloneNode(true));
     }

package/dist/mjs/lib.d.ts

@@ -2,52 +2,9 @@
  * The main entrypoint for the NPM package. Everything exported by this file
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
- * @example
- * ```ts,runnable
- * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
+ * ## Example
  *
- * // Use the Material Icon pack.
- * import { MaterialIconProvider } from '@js-draw/material-icons';
- *
- * // Apply js-draw CSS
- * import 'js-draw/styles';
- * // If your bundler doesn't support the above, try
- * // import 'js-draw/bundledStyles';
- *
- * (async () => {
- *   const editor = new Editor(document.body, {
- *     iconProvider: new MaterialIconProvider(),
- *   });
- *   const toolbar = editor.addToolbar();
- *
- *   // Increases the minimum height of the editor
- *   editor.getRootElement().style.height = '600px';
- *
- *   // Loads from SVG data
- *   await editor.loadFromSVG(`
- *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
- *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
- *       </svg>
- *   `);
- *
- *   // Adding tags to a toolbar button allows different styles to be applied.
- *   // Also see addActionButton.
- *   const buttonLabels = [ ToolbarWidgetTag.Save ];
- *
- *   toolbar.addSaveButton(() => {
- *     const saveData = editor.toSVG().outerHTML;
- *
- *     // Do something with saveData
- *   });
- *
- *   toolbar.addExitButton(() => {
- *     // Save/confirm exiting here?
- *     editor.remove();
- *   });
- * })();
- * ```
+ * [[include:doc-pages/inline-examples/main-js-draw-example.md]]
  *
  * @see
  * - {@link Editor}