js-draw 1.2.2 → 1.3.1

package/dist/cjs/tools/ScrollbarTool.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+class ScrollbarTool extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, 'scrollbar');
+        this.editor = editor;
+        this.fadeOutTimeout = null;
+        this.scrollbarOverlay = document.createElement('div');
+        this.scrollbarOverlay.classList.add('ScrollbarTool-overlay');
+        this.verticalScrollbar = document.createElement('div');
+        this.verticalScrollbar.classList.add('vertical-scrollbar');
+        this.horizontalScrollbar = document.createElement('div');
+        this.horizontalScrollbar.classList.add('horizontal-scrollbar');
+        this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
+        let overlay = null;
+        let viewportListener = null;
+        this.enabledValue().onUpdateAndNow(enabled => {
+            overlay?.remove();
+            viewportListener?.remove();
+            viewportListener = null;
+            overlay = null;
+            if (enabled) {
+                viewportListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, _event => {
+                    this.updateScrollbars();
+                });
+                this.updateScrollbars();
+                overlay = editor.createHTMLOverlay(this.scrollbarOverlay);
+            }
+        });
+    }
+    updateScrollbars() {
+        const viewport = this.editor.viewport;
+        const screenSize = viewport.getScreenRectSize();
+        const screenRect = new math_1.Rect2(0, 0, screenSize.x, screenSize.y);
+        const imageRect = this.editor.getImportExportRect()
+            // The scrollbars are positioned in screen coordinates, so the exportRect also needs
+            // to be in screen coordinates
+            .transformedBoundingBox(viewport.canvasToScreenTransform)
+            // If the screenRect is outside of the exportRect, expand the image rectangle
+            .union(screenRect);
+        const scrollbarWidth = screenRect.width / imageRect.width * screenSize.x;
+        const scrollbarHeight = screenRect.height / imageRect.height * screenSize.y;
+        const scrollbarX = (screenRect.x - imageRect.x) / imageRect.width * (screenSize.x);
+        const scrollbarY = (screenRect.y - imageRect.y) / imageRect.height * (screenSize.y);
+        this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
+        this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
+        this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;
+        this.verticalScrollbar.style.marginTop = `${scrollbarY}px`;
+        // Style the scrollbars differently when there's no scroll (all content visible)
+        const handleNoScrollStyling = (scrollbar, size, fillSize) => {
+            const fillsWindowClass = 'represents-no-scroll';
+            if (Math.abs(size - fillSize) < 1e-8) {
+                scrollbar.classList.add(fillsWindowClass);
+            }
+            else {
+                scrollbar.classList.remove(fillsWindowClass);
+            }
+        };
+        handleNoScrollStyling(this.horizontalScrollbar, scrollbarWidth, screenSize.x);
+        handleNoScrollStyling(this.verticalScrollbar, scrollbarHeight, screenSize.y);
+        // Fade out after a delay.
+        if (this.fadeOutTimeout !== null) {
+            clearTimeout(this.fadeOutTimeout);
+        }
+        const fadeOutDelay = 3000;
+        this.fadeOutTimeout = setTimeout(() => {
+            this.scrollbarOverlay.classList.remove('just-updated');
+        }, fadeOutDelay);
+        this.scrollbarOverlay.classList.add('just-updated');
+    }
+}
+exports.default = ScrollbarTool;

package/dist/cjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/ToolController.js

@@ -46,6 +46,7 @@ const SoundUITool_1 = __importDefault(require("./SoundUITool"));
 const inputEvents_1 = require("../inputEvents");
 const InputPipeline_1 = __importDefault(require("./InputFilter/InputPipeline"));
 const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
+const ScrollbarTool_1 = __importDefault(require("./ScrollbarTool"));
 class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -79,6 +80,7 @@ class ToolController {
         const soundExplorer = new SoundUITool_1.default(editor, localization.soundExplorer);
         soundExplorer.setEnabled(false);
         this.tools = [
+            new ScrollbarTool_1.default(editor),
             new PipetteTool_1.default(editor, localization.pipetteTool),
             soundExplorer,
             panZoomTool,

package/dist/cjs/types.d.ts

@@ -82,7 +82,9 @@ export interface ToolbarDropdownShownEvent {
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
 export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
-export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2, options?: {
+    autoresize: boolean;
+}) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

package/dist/cjs/util/assertions.d.ts

@@ -21,3 +21,7 @@ export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value i
  * Throws if any of `values` is not of type number.
  */
 export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+/**
+ * Throws an exception if `typeof value` is not a boolean.
+ */
+export declare const assertIsBoolean: (value: any) => value is boolean;

package/dist/cjs/util/assertions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable = void 0;
+exports.assertIsBoolean = exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable = void 0;
 /**
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
@@ -49,3 +49,14 @@ const assertIsNumberArray = (values, allowNaN = false) => {
     return true;
 };
 exports.assertIsNumberArray = assertIsNumberArray;
+/**
+ * Throws an exception if `typeof value` is not a boolean.
+ */
+const assertIsBoolean = (value) => {
+    if (typeof value !== 'boolean') {
+        throw new Error('Given value is not a boolean');
+        // return false;
+    }
+    return true;
+};
+exports.assertIsBoolean = assertIsBoolean;

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.2.2',
+    number: '1.3.1',
 };

package/dist/mjs/Editor.d.ts

@@ -16,7 +16,13 @@ import KeyBinding from './shortcuts/KeyBinding';
 import AbstractToolbar from './toolbar/AbstractToolbar';
 import RenderablePathSpec from './rendering/RenderablePathSpec';
 import { AboutDialogEntry } from './dialogs/makeAboutDialog';
-/** Provides settings to an instance of an editor. See the Editor {@link Editor.constructor}. */
+/**
+ * Provides settings to an instance of an editor. See the Editor {@link Editor.constructor}.
+ *
+ * ## Example
+ *
+ * [[include:doc-pages/inline-examples/settings-example-1.md]]
+ */
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -36,41 +42,21 @@ export interface EditorSettings {
      * Overrides for keyboard shortcuts. For example,
      * ```ts
      * {
-     * 	'some.shortcut.id': [ ShortcutManager.keyboardShortcutFromString('ctrl+a') ],
+     * 	'some.shortcut.id': [ KeyBinding.keyboardShortcutFromString('ctrl+a') ],
      * 	'another.shortcut.id': [ ]
      * }
      * ```
      * where shortcut IDs map to lists of associated keybindings.
+     *
+     * @see
+     * - {@link KeyBinding}
+     * - {@link KeyboardShortcutManager}
      */
     keyboardShortcutOverrides: Record<string, Array<KeyBinding>>;
     /**
      * Provides a set of icons for the editor.
      *
      * See, for example, the `@js-draw/material-icons` package.
-     *
-     * @example
-     * ```ts,runnable
-     * import * as jsdraw from 'js-draw';
-     * import MaterialIconProvider from '@js-draw/material-icons';
-     * import 'js-draw/styles';
-     *
-     * const settings: Partial<jsdraw.EditorSettings> = {
-     *   // Default to material icons
-     *   iconProvider: new MaterialIconProvider(),
-     *
-     *   // Only scroll the editor if it's focused.
-     *   wheelEventsEnabled: 'only-if-focused',
-     * };
-     *
-     * // Add an editor to the document, using the above settings
-     * const editor = new jsdraw.Editor(document.body, settings);
-     *
-     * // Add a toolbar to the editor
-     * const toolbar = jsdraw.makeEdgeToolbar(editor);
-     *
-     * // Add the default tool items
-     * toolbar.addDefaults();
-     * ```
      */
     iconProvider: IconProvider;
     /**
@@ -81,20 +67,22 @@ export interface EditorSettings {
 /**
  * The main entrypoint for the full editor.
  *
- * @example
+ * ## Example
  * To create an editor with a toolbar,
- * ```
+ * ```ts,runnable
+ * import { Editor } from 'js-draw';
+ *
  * const editor = new Editor(document.body);
  *
  * const toolbar = editor.addToolbar();
- * toolbar.addActionButton('Save', () => {
+ * toolbar.addSaveButton(() => {
  *   const saveData = editor.toSVG().outerHTML;
  *   // Do something with saveData...
  * });
  * ```
  *
  * See also
- * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts#L15).
+ * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts).
  */
 export declare class Editor {
     private container;
@@ -120,12 +108,13 @@ export declare class Editor {
      * Data structure for adding/removing/querying objects in the image.
      *
      * @example
-     * ```
+     * ```ts,runnable
+     * import { Editor, Stroke, Path, Color4, pathToRenderable } from 'js-draw';
      * const editor = new Editor(document.body);
      *
      * // Create a path.
      * const stroke = new Stroke([
-     *   Path.fromString('M0,0 L30,30 z').toRenderable({ fill: Color4.black }),
+     *   pathToRenderable(Path.fromString('M0,0 L100,100 L300,30 z'), { fill: Color4.red }),
      * ]);
      * const addElementCommand = editor.image.addElement(stroke);
      *
@@ -166,7 +155,9 @@ export declare class Editor {
     private settings;
     /**
      * @example
-     * ```
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     *
      * const container = document.body;
      *
      * // Create an editor
@@ -179,13 +170,16 @@ export declare class Editor {
      * // Add the default toolbar
      * const toolbar = editor.addToolbar();
      *
-     * // Add a save button
+     * const createCustomIcon = () => {
+     *   // Create/return an icon here.
+     * };
+     *
+     * // Add a custom button
      * toolbar.addActionButton({
-     *   label: 'Save'
-     *   icon: createSaveIcon(),
+     *   label: 'Custom Button'
+     *   icon: createCustomIcon(),
      * }, () => {
-     *   const saveData = editor.toSVG().outerHTML;
-     *   // Do something with saveData
+     *   // Do something here
      * });
      * ```
      */
@@ -330,6 +324,9 @@ export declare class Editor {
     /**
      * Clears the wet ink display.
      *
+     * The wet ink display can be used by the currently active tool to display a preview
+     * of an in-progress action.
+     *
      * @see {@link Display.getWetInkRenderer}
      */
     clearWetInk(): void;
@@ -341,12 +338,19 @@ export declare class Editor {
      * Creates an element that will be positioned on top of the dry/wet ink
      * renderers.
      *
+     * So as not to change the position of other overlays, `overlay` should either
+     * be styled to have 0 height or have `position: absolute`.
+     *
      * This is useful for displaying content on top of the rendered content
      * (e.g. a selection box).
      */
     createHTMLOverlay(overlay: HTMLElement): {
         remove: () => void;
     };
+    /**
+     * Creates a CSS stylesheet with `content` and applies it to the document
+     * (and thus, to this editor).
+     */
     addStyleSheet(content: string): HTMLStyleElement;
     /**
      * Dispatch a keyboard event to the currently selected tool.
@@ -370,7 +374,21 @@ export declare class Editor {
      */
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
+    /**
+     * Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+     * If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+     * case of `HTMLCanvasElement::toDataURL`).
+     *
+     * The export resolution is the same as the size of the drawing canvas, unless `outputSize`
+     * is given.
+     */
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp', outputSize?: Vec2): string;
+    /**
+     * Converts the editor's content into an SVG image.
+     *
+     * @see
+     * {@link SVGRenderer}
+     */
     toSVG(): SVGElement;
     /**
      * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
@@ -393,8 +411,23 @@ export declare class Editor {
     /**
      * Alias for `loadFrom(SVGLoader.fromString)`.
      *
-     * This is particularly useful when accessing a bundled version of the editor,
-     * where `SVGLoader.fromString` is unavailable.
+     * @example
+     * ```ts,runnable
+     * import {Editor} from 'js-draw';
+     * const editor = new Editor(document.body);
+     *
+     * ---visible---
+     * await editor.loadFromSVG(`
+     *   <svg viewBox="5 23 52 30" width="52" height="16" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+     *     <text style="
+     *       transform: matrix(0.181846, 0.1, 0, 0.181846, 11.4, 33.2);
+     *       font-family: serif;
+     *       font-size: 32px;
+     *       fill: rgb(100, 140, 61);
+     *     ">An SVG image!</text>
+     *   </svg>
+     * `);
+     * ```
      */
     loadFromSVG(svgData: string, sanitize?: boolean): Promise<void>;
     private closeAboutDialog;

package/dist/mjs/Editor.mjs

@@ -8,7 +8,7 @@ import  EventDispatcher  from './EventDispatcher.mjs';
 import { Vec2, Vec3, Color4, Mat33, toRoundedString } from '@js-draw/math';
 import  Display, { RenderingMode }  from './rendering/Display.mjs';
 import  SVGRenderer  from './rendering/renderers/SVGRenderer.mjs';
-import  SVGLoader  from './SVGLoader.mjs';
+import  SVGLoader, { svgLoaderAutoresizeClassName }  from './SVGLoader.mjs';
 import  Pointer  from './Pointer.mjs';
 import  getLocalizationTable  from './localizations/getLocalizationTable.mjs';
 import  IconProvider  from './toolbar/IconProvider.mjs';
@@ -29,25 +29,29 @@ import  version  from './version.mjs';
 /**
  * The main entrypoint for the full editor.
  *
- * @example
+ * ## Example
  * To create an editor with a toolbar,
- * ```
+ * ```ts,runnable
+ * import { Editor } from 'js-draw';
+ *
  * const editor = new Editor(document.body);
  *
  * const toolbar = editor.addToolbar();
- * toolbar.addActionButton('Save', () => {
+ * toolbar.addSaveButton(() => {
  *   const saveData = editor.toSVG().outerHTML;
  *   // Do something with saveData...
  * });
  * ```
  *
  * See also
- * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts#L15).
+ * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts).
  */
 export class Editor {
     /**
      * @example
-     * ```
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     *
      * const container = document.body;
      *
      * // Create an editor
@@ -60,13 +64,16 @@ export class Editor {
      * // Add the default toolbar
      * const toolbar = editor.addToolbar();
      *
-     * // Add a save button
+     * const createCustomIcon = () => {
+     *   // Create/return an icon here.
+     * };
+     *
+     * // Add a custom button
      * toolbar.addActionButton({
-     *   label: 'Save'
-     *   icon: createSaveIcon(),
+     *   label: 'Custom Button'
+     *   icon: createCustomIcon(),
      * }, () => {
-     *   const saveData = editor.toSVG().outerHTML;
-     *   // Do something with saveData
+     *   // Do something here
      * });
      * ```
      */
@@ -99,6 +106,10 @@ export class Editor {
             iconProvider: settings.iconProvider ?? new IconProvider(),
             notices: [],
         };
+        // Validate settings
+        if (this.settings.minZoom > this.settings.maxZoom) {
+            throw new Error('Minimum zoom must be lesser than maximum zoom!');
+        }
         this.icons = this.settings.iconProvider;
         this.shortcuts = new KeyboardShortcutManager(this.settings.keyboardShortcutOverrides);
         this.container = document.createElement('div');
@@ -153,6 +164,10 @@ export class Editor {
                     if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
                         resetTransform = evt.oldTransform;
                     }
+                    else {
+                        // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
+                        resetTransform = Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
+                    }
                     this.viewport.resetTransform(resetTransform);
                 }
             }
@@ -206,6 +221,7 @@ export class Editor {
     registerListeners() {
         this.handlePointerEventsFrom(this.renderingRegion);
         this.handleKeyEventsFrom(this.renderingRegion);
+        this.handlePointerEventsFrom(this.accessibilityAnnounceArea);
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
             // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
@@ -282,6 +298,8 @@ export class Editor {
         // still fill the screen.
         this.container.style.setProperty('--editor-current-width-px', `${this.container.clientWidth}px`);
         this.container.style.setProperty('--editor-current-height-px', `${this.container.clientHeight}px`);
+        this.container.style.setProperty('--editor-current-display-width-px', `${this.renderingRegion.clientWidth}px`);
+        this.container.style.setProperty('--editor-current-display-height-px', `${this.renderingRegion.clientHeight}px`);
     }
     getPointerList() {
         const nowTime = performance.now();
@@ -702,12 +720,12 @@ export class Editor {
         this.display.setDraftMode(false);
         this.hideLoadingWarning();
     }
-    // @see {@link #asyncApplyOrUnapplyCommands }
+    // @see {@link asyncApplyOrUnapplyCommands }
     asyncApplyCommands(commands, chunkSize) {
         return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
     }
     // If `unapplyInReverseOrder`, commands are reversed before unapplying.
-    // @see {@link #asyncApplyOrUnapplyCommands }
+    // @see {@link asyncApplyOrUnapplyCommands }
     asyncUnapplyCommands(commands, chunkSize, unapplyInReverseOrder = false) {
         if (unapplyInReverseOrder) {
             commands = [...commands]; // copy
@@ -754,8 +772,8 @@ export class Editor {
         }
         const renderer = this.display.getDryInkRenderer();
         this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
-        if (showImageBounds) {
-            // Draw a rectangle around the region that will be visible on save
+        // Draw a rectangle around the region that will be visible on save
+        if (showImageBounds && !this.image.getAutoresizeEnabled()) {
             const exportRectFill = { fill: Color4.fromHex('#44444455') };
             const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
             renderer.drawRect(this.getImportExportRect(), exportRectStrokeWidth, exportRectFill);
@@ -778,6 +796,9 @@ export class Editor {
     /**
      * Clears the wet ink display.
      *
+     * The wet ink display can be used by the currently active tool to display a preview
+     * of an in-progress action.
+     *
      * @see {@link Display.getWetInkRenderer}
      */
     clearWetInk() {
@@ -793,16 +814,23 @@ export class Editor {
      * Creates an element that will be positioned on top of the dry/wet ink
      * renderers.
      *
+     * So as not to change the position of other overlays, `overlay` should either
+     * be styled to have 0 height or have `position: absolute`.
+     *
      * This is useful for displaying content on top of the rendered content
      * (e.g. a selection box).
      */
     createHTMLOverlay(overlay) {
-        overlay.classList.add('overlay');
+        overlay.classList.add('overlay', 'js-draw-editor-overlay');
         this.container.appendChild(overlay);
         return {
             remove: () => overlay.remove(),
         };
     }
+    /**
+     * Creates a CSS stylesheet with `content` and applies it to the document
+     * (and thus, to this editor).
+     */
     addStyleSheet(content) {
         const styleSheet = document.createElement('style');
         styleSheet.innerText = content;
@@ -883,11 +911,14 @@ export class Editor {
             }
         }
     }
-    // Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
-    // If `format` is not `image/png`, a PNG image URL may still be returned (as in the
-    // case of `HTMLCanvasElement::toDataURL`).
-    //
-    // The export resolution is the same as the size of the drawing canvas.
+    /**
+     * Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+     * If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+     * case of `HTMLCanvasElement::toDataURL`).
+     *
+     * The export resolution is the same as the size of the drawing canvas, unless `outputSize`
+     * is given.
+     */
     toDataURL(format = 'image/png', outputSize) {
         const canvas = document.createElement('canvas');
         const importExportViewport = this.image.getImportExportViewport();
@@ -904,6 +935,12 @@ export class Editor {
         const dataURL = canvas.toDataURL(format);
         return dataURL;
     }
+    /**
+     * Converts the editor's content into an SVG image.
+     *
+     * @see
+     * {@link SVGRenderer}
+     */
     toSVG() {
         const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
         const sanitize = false;
@@ -919,6 +956,12 @@ export class Editor {
         result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
         result.setAttribute('width', toRoundedString(rect.w));
         result.setAttribute('height', toRoundedString(rect.h));
+        if (this.image.getAutoresizeEnabled()) {
+            result.classList.add(svgLoaderAutoresizeClassName);
+        }
+        else {
+            result.classList.remove(svgLoaderAutoresizeClassName);
+        }
         return result;
     }
     /**
@@ -931,6 +974,7 @@ export class Editor {
         this.display.setDraftMode(true);
         const originalBackgrounds = this.image.getBackgroundComponents();
         const eraseBackgroundCommand = new Erase(originalBackgrounds);
+        let autoresizeEnabled = false;
         await loader.start(async (component) => {
             await this.dispatchNoAnnounce(EditorImage.addElement(component));
         }, (countProcessed, totalToProcess) => {
@@ -940,10 +984,17 @@ export class Editor {
                 return untilNextAnimationFrame();
             }
             return null;
-        }, (importExportRect) => {
+        }, (importExportRect, options) => {
             this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
             this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
+            if (options) {
+                autoresizeEnabled = options.autoresize;
+            }
         });
+        // TODO: Move this call into the callback above. Currently, this would cause
+        //       decrease in performance as the main background would be repeatedly added
+        //       and removed from the editor every time another component is added.
+        this.dispatchNoAnnounce(this.image.setAutoresizeEnabled(autoresizeEnabled), false);
         // Ensure that we don't have multiple overlapping BackgroundComponents. Remove
         // old BackgroundComponents.
         // Overlapping BackgroundComponents may cause changing the background color to
@@ -1004,8 +1055,23 @@ export class Editor {
     /**
      * Alias for `loadFrom(SVGLoader.fromString)`.
      *
-     * This is particularly useful when accessing a bundled version of the editor,
-     * where `SVGLoader.fromString` is unavailable.
+     * @example
+     * ```ts,runnable
+     * import {Editor} from 'js-draw';
+     * const editor = new Editor(document.body);
+     *
+     * ---visible---
+     * await editor.loadFromSVG(`
+     *   <svg viewBox="5 23 52 30" width="52" height="16" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+     *     <text style="
+     *       transform: matrix(0.181846, 0.1, 0, 0.181846, 11.4, 33.2);
+     *       font-family: serif;
+     *       font-size: 32px;
+     *       fill: rgb(100, 140, 61);
+     *     ">An SVG image!</text>
+     *   </svg>
+     * `);
+     * ```
      */
     async loadFromSVG(svgData, sanitize = false) {
         const loader = SVGLoader.fromString(svgData, sanitize);