js-draw 1.3.1 → 1.4.0

package/dist/cjs/tools/SelectionTool/SelectionHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleSize = exports.HandleShape = void 0;
+exports.handleSize = exports.HandleAction = void 0;
 const assertions_1 = require("../../util/assertions");
 const math_1 = require("@js-draw/math");
 const SelectionTool_1 = require("./SelectionTool");
@@ -8,12 +8,18 @@ var HandleShape;
 (function (HandleShape) {
     HandleShape[HandleShape["Circle"] = 0] = "Circle";
     HandleShape[HandleShape["Square"] = 1] = "Square";
-})(HandleShape || (exports.HandleShape = HandleShape = {}));
+})(HandleShape || (HandleShape = {}));
+var HandleAction;
+(function (HandleAction) {
+    HandleAction["ResizeXY"] = "resize-xy";
+    HandleAction["Rotate"] = "rotate";
+    HandleAction["ResizeX"] = "resize-x";
+    HandleAction["ResizeY"] = "resize-y";
+})(HandleAction || (exports.HandleAction = HandleAction = {}));
 exports.handleSize = 30;
 class SelectionHandle {
-    constructor(shape, parentSide, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
-        this.shape = shape;
-        this.parentSide = parentSide;
+    constructor(presentation, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
+        this.presentation = presentation;
         this.parent = parent;
         this.viewport = viewport;
         this.onDragStart = onDragStart;
@@ -21,8 +27,20 @@ class SelectionHandle {
         this.onDragEnd = onDragEnd;
         this.dragLastPos = null;
         this.element = document.createElement('div');
-        this.element.classList.add(`${SelectionTool_1.cssPrefix}handle`);
-        switch (shape) {
+        this.element.classList.add(`${SelectionTool_1.cssPrefix}handle`, `${SelectionTool_1.cssPrefix}${presentation.action}`);
+        this.parentSide = presentation.side;
+        const icon = presentation.icon;
+        if (icon) {
+            this.element.appendChild(icon);
+            icon.classList.add('icon');
+        }
+        if (presentation.action === HandleAction.Rotate) {
+            this.shape = HandleShape.Circle;
+        }
+        else {
+            this.shape = HandleShape.Square;
+        }
+        switch (this.shape) {
             case HandleShape.Circle:
                 this.element.classList.add(`${SelectionTool_1.cssPrefix}circle`);
                 break;
@@ -30,7 +48,7 @@ class SelectionHandle {
                 this.element.classList.add(`${SelectionTool_1.cssPrefix}square`);
                 break;
             default:
-                (0, assertions_1.assertUnreachable)(shape);
+                (0, assertions_1.assertUnreachable)(this.shape);
         }
         this.updatePosition();
     }

package/dist/cjs/tools/SelectionTool/SelectionTool.js

@@ -33,6 +33,11 @@ class SelectionTool extends BaseTool_1.default {
             // The selection box could be using the wet ink display if its transformation
             // hasn't been finalized yet. Clear before updating the UI.
             this.editor.clearWetInk();
+            // If not currently selecting, ensure that the selection box
+            // is large enough.
+            if (!this.expandingSelectionBox) {
+                this.selectionBox?.padRegion();
+            }
             this.selectionBox?.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);

package/dist/cjs/tools/SoundUITool.d.ts

@@ -14,6 +14,7 @@ export default class SoundUITool extends BaseTool {
     private toggleButton;
     private toggleButtonContainer;
     constructor(editor: Editor, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
     private updateToggleButtonText;
     setEnabled(enabled: boolean): void;
     onKeyPress(event: KeyPressEvent): boolean;

package/dist/cjs/tools/SoundUITool.js

@@ -105,6 +105,9 @@ class SoundUITool extends BaseTool_1.default {
         this.updateToggleButtonText();
         editor.createHTMLOverlay(this.toggleButtonContainer);
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     updateToggleButtonText() {
         const containerEnabledClass = 'sound-ui-tool-enabled';
         if (this.isEnabled()) {
@@ -118,7 +121,7 @@ class SoundUITool extends BaseTool_1.default {
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
-        if (!enabled) {
+        if (!this.isEnabled()) {
             this.soundFeedback?.close();
             this.soundFeedback = null;
         }

package/dist/cjs/tools/TextTool.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextComponent_1 = __importDefault(require("../components/TextComponent"));
-const EditorImage_1 = __importDefault(require("../EditorImage"));
+const EditorImage_1 = __importDefault(require("../image/EditorImage"));
 const math_1 = require("@js-draw/math");
 const Pointer_1 = require("../Pointer");
 const types_1 = require("../types");
@@ -193,7 +193,7 @@ class TextTool extends BaseTool_1.default {
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
-        if (!enabled) {
+        if (!this.isEnabled()) {
             this.flushInput();
         }
         this.textEditOverlay.style.display = enabled ? 'block' : 'none';

package/dist/cjs/tools/ToolController.d.ts

@@ -9,6 +9,7 @@ export default class ToolController implements InputEventListener {
     private activeTool;
     private primaryToolGroup;
     private inputPipeline;
+    private isEditorReadOnly;
     /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
@@ -29,4 +30,5 @@ export default class ToolController implements InputEventListener {
      */
     addInputMapper(mapper: InputMapper): void;
     getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
+    onEditorDestroyed(): void;
 }

package/dist/cjs/tools/ToolController.js

@@ -51,6 +51,7 @@ class ToolController {
     /** @internal */
     constructor(editor, localization) {
         this.activeTool = null;
+        this.isEditorReadOnly = editor.isReadOnlyReactiveValue();
         this.inputPipeline = new InputPipeline_1.default();
         this.inputPipeline.setEmitListener(event => this.onEventInternal(event));
         const primaryToolGroup = new ToolEnabledGroup_1.default();
@@ -135,6 +136,10 @@ class ToolController {
     }
     // @internal use `dispatchEvent` rather than calling `onEvent` directly.
     onEventInternal(event) {
+        const isEditorReadOnly = this.isEditorReadOnly.get();
+        const canToolReceiveInput = (tool) => {
+            return tool.isEnabled() && (!isEditorReadOnly || tool.canReceiveInputInReadOnlyEditor());
+        };
         let handled = false;
         if (event.kind === inputEvents_1.InputEvtType.PointerDownEvt) {
             let canOnlySendToActiveTool = false;
@@ -145,7 +150,7 @@ class ToolController {
                 if (canOnlySendToActiveTool && tool !== this.activeTool) {
                     continue;
                 }
-                if (tool.isEnabled() && tool.onEvent(event)) {
+                if (canToolReceiveInput(tool) && tool.onEvent(event)) {
                     if (this.activeTool !== tool) {
                         this.activeTool?.onEvent({ kind: inputEvents_1.InputEvtType.GestureCancelEvt });
                     }
@@ -179,7 +184,7 @@ class ToolController {
         }
         else {
             for (const tool of this.tools) {
-                if (!tool.isEnabled()) {
+                if (!canToolReceiveInput(tool)) {
                     continue;
                 }
                 handled = tool.onEvent(event);
@@ -213,5 +218,11 @@ class ToolController {
     getMatchingTools(type) {
         return this.tools.filter(tool => tool instanceof type);
     }
+    // @internal
+    onEditorDestroyed() {
+        for (const tool of this.tools) {
+            tool.onDestroy();
+        }
+    }
 }
 exports.default = ToolController;

package/dist/cjs/tools/ToolSwitcherShortcut.d.ts

@@ -12,5 +12,6 @@ import BaseTool from './BaseTool';
 export default class ToolSwitcherShortcut extends BaseTool {
     private editor;
     constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
     onKeyPress({ key }: KeyPressEvent): boolean;
 }

package/dist/cjs/tools/ToolSwitcherShortcut.js

@@ -17,6 +17,9 @@ class ToolSwitcherShortcut extends BaseTool_1.default {
         super(editor.notifier, editor.localization.changeTool);
         this.editor = editor;
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     // @internal
     onKeyPress({ key }) {
         const toolController = this.editor.toolController;

package/dist/cjs/types.d.ts

@@ -16,12 +16,13 @@ export declare enum EditorEventType {
     ViewportChanged = 7,
     DisplayResized = 8,
     SelectionUpdated = 9,
+    ReadOnlyModeToggled = 10,
     /** @internal */
-    ColorPickerToggled = 10,
+    ColorPickerToggled = 11,
     /** @internal */
-    ColorPickerColorSelected = 11,
+    ColorPickerColorSelected = 12,
     /** @deprecated @internal */
-    ToolbarDropdownShown = 12
+    ToolbarDropdownShown = 13
 }
 export declare enum UndoEventType {
     CommandDone = 0,
@@ -66,6 +67,10 @@ export interface SelectionUpdated {
     readonly selectedComponents: AbstractComponent[];
     readonly tool: BaseTool;
 }
+export interface ReadOnlyToggled {
+    readonly kind: EditorEventType.ReadOnlyModeToggled;
+    readonly editorIsReadOnly: boolean;
+}
 export interface ColorPickerToggled {
     readonly kind: EditorEventType.ColorPickerToggled;
     readonly open: boolean;
@@ -79,7 +84,7 @@ export interface ToolbarDropdownShownEvent {
     readonly fromToplevelDropdown: boolean;
     readonly layoutManager: WidgetContentLayoutManager;
 }
-export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ReadOnlyToggled | 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, options?: {

package/dist/cjs/types.js

@@ -14,12 +14,13 @@ var EditorEventType;
     EditorEventType[EditorEventType["ViewportChanged"] = 7] = "ViewportChanged";
     EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
     EditorEventType[EditorEventType["SelectionUpdated"] = 9] = "SelectionUpdated";
+    EditorEventType[EditorEventType["ReadOnlyModeToggled"] = 10] = "ReadOnlyModeToggled";
     /** @internal */
-    EditorEventType[EditorEventType["ColorPickerToggled"] = 10] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 11] = "ColorPickerToggled";
     /** @internal */
-    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 11] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 12] = "ColorPickerColorSelected";
     /** @deprecated @internal */
-    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 12] = "ToolbarDropdownShown";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 13] = "ToolbarDropdownShown";
 })(EditorEventType || (exports.EditorEventType = EditorEventType = {}));
 // Types of `EditorUndoStackUpdated` events.
 var UndoEventType;

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

@@ -55,7 +55,7 @@ export declare abstract class ReactiveValue<T> {
 }
 export declare abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
     /**
-     * Changes the value of this and fires all update listeners.
+     * Changes the value of this and, if different, fires all update listeners.
      *
      * @see {@link onUpdate}
      */

package/dist/cjs/util/ReactiveValue.js

@@ -59,7 +59,7 @@ class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef ? new WeakRef(result) : { deref: () => result };
+        const resultRef = window.WeakRef ? new window.WeakRef(result) : { deref: () => result };
         for (const value of sourceValues) {
             const listener = value.onUpdate(() => {
                 // Use resultRef to allow `result` to be garbage collected
@@ -98,7 +98,7 @@ exports.ReactiveValue = ReactiveValue;
 class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {
         const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
-        const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
+        const childRef = window.WeakRef ? new window.WeakRef(child) : { deref: () => child };
         // When the source is updated...
         const sourceListener = sourceValue.onUpdate(newValue => {
             const childValue = childRef.deref();

package/dist/cjs/version.js

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

package/dist/mjs/Editor.d.ts

@@ -1,4 +1,4 @@
-import EditorImage from './EditorImage';
+import EditorImage from './image/EditorImage';
 import ToolController from './tools/ToolController';
 import { EditorNotifier, ImageLoader } from './types';
 import { HTMLPointerEventFilter, InputEvtType } from './inputEvents';
@@ -16,6 +16,7 @@ import KeyBinding from './shortcuts/KeyBinding';
 import AbstractToolbar from './toolbar/AbstractToolbar';
 import RenderablePathSpec from './rendering/RenderablePathSpec';
 import { AboutDialogEntry } from './dialogs/makeAboutDialog';
+import ReactiveValue, { MutableReactiveValue } from './util/ReactiveValue';
 /**
  * Provides settings to an instance of an editor. See the Editor {@link Editor.constructor}.
  *
@@ -152,6 +153,7 @@ export declare class Editor {
     private accessibilityAnnounceArea;
     private accessibilityControlArea;
     private eventListenerTargets;
+    private readOnly;
     private settings;
     /**
      * @example
@@ -269,6 +271,13 @@ export declare class Editor {
      * passed to the editor.
      */
     handleKeyEventsFrom(elem: HTMLElement, filter?: (event: KeyboardEvent) => boolean): void;
+    /**
+     * Attempts to prevent **user-triggered** events from modifying
+     * the content of the image.
+     */
+    setReadOnly(readOnly: boolean): void;
+    isReadOnlyReactiveValue(): ReactiveValue<boolean>;
+    isReadOnly(): MutableReactiveValue<boolean>;
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command: Command, addToHistory?: boolean): void | Promise<void>;
     /**
@@ -386,10 +395,31 @@ export declare class Editor {
     /**
      * Converts the editor's content into an SVG image.
      *
+     * If the output SVG has width or height less than `options.minDimension`, its size
+     * will be increased.
+     *
      * @see
      * {@link SVGRenderer}
      */
-    toSVG(): SVGElement;
+    toSVG(options?: {
+        minDimension?: number;
+    }): SVGElement;
+    /**
+     * Converts the editor's content into an SVG image in an asynchronous,
+     * but **potentially lossy** way.
+     *
+     * **Warning**: If the image is being edited during an async rendering, edited components
+     * may not be rendered.
+     *
+     * Like {@link toSVG}, but can be configured to briefly pause after processing every
+     * `pauseAfterCount` items. This can prevent the editor from becoming unresponsive
+     * when saving very large images.
+     */
+    toSVGAsync(options?: {
+        minDimension?: number;
+        pauseAfterCount?: number;
+        onProgress?: (processedCountInLayer: number, totalToProcessInLayer: number) => Promise<void | boolean>;
+    }): Promise<SVGElement>;
     /**
      * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
      *
@@ -435,7 +465,10 @@ export declare class Editor {
      * Shows an information dialog with legal notices.
      */
     showAboutDialog(): void;
-    /** Removes and destroys the editor */
+    /**
+     * Removes and **destroys** the editor. The editor cannot be added to a parent
+     * again after calling this method.
+     */
     remove(): void;
 }
 export default Editor;

package/dist/mjs/Editor.mjs

@@ -1,14 +1,13 @@
-import  EditorImage  from './EditorImage.mjs';
+import  EditorImage  from './image/EditorImage.mjs';
 import  ToolController  from './tools/ToolController.mjs';
 import  { EditorEventType }  from './types.mjs';
 import  { InputEvtType, keyUpEventFromHTMLEvent, keyPressEventFromHTMLEvent }  from './inputEvents.mjs';
 import  UndoRedoHistory  from './UndoRedoHistory.mjs';
 import  Viewport  from './Viewport.mjs';
 import  EventDispatcher  from './EventDispatcher.mjs';
-import { Vec2, Vec3, Color4, Mat33, toRoundedString } from '@js-draw/math';
+import { Vec2, Vec3, Color4, Mat33 } from '@js-draw/math';
 import  Display, { RenderingMode }  from './rendering/Display.mjs';
-import  SVGRenderer  from './rendering/renderers/SVGRenderer.mjs';
-import  SVGLoader, { svgLoaderAutoresizeClassName }  from './SVGLoader.mjs';
+import  SVGLoader  from './SVGLoader.mjs';
 import  Pointer  from './Pointer.mjs';
 import  getLocalizationTable  from './localizations/getLocalizationTable.mjs';
 import  IconProvider  from './toolbar/IconProvider.mjs';
@@ -26,6 +25,8 @@ import  StrokeKeyboardControl  from './tools/InputFilter/StrokeKeyboardControl.m
 import  guessKeyCodeFromKey  from './util/guessKeyCodeFromKey.mjs';
 import  makeAboutDialog  from './dialogs/makeAboutDialog.mjs';
 import  version  from './version.mjs';
+import  { editorImageToSVGSync, editorImageToSVGAsync }  from './image/export/editorImageToSVG.mjs';
+import  { MutableReactiveValue }  from './util/ReactiveValue.mjs';
 /**
  * The main entrypoint for the full editor.
  *
@@ -110,6 +111,7 @@ export class Editor {
         if (this.settings.minZoom > this.settings.maxZoom) {
             throw new Error('Minimum zoom must be lesser than maximum zoom!');
         }
+        this.readOnly = MutableReactiveValue.fromInitialValue(false);
         this.icons = this.settings.iconProvider;
         this.shortcuts = new KeyboardShortcutManager(this.settings.keyboardShortcutOverrides);
         this.container = document.createElement('div');
@@ -660,6 +662,26 @@ export class Editor {
         };
         this.eventListenerTargets.push(elem);
     }
+    /**
+     * Attempts to prevent **user-triggered** events from modifying
+     * the content of the image.
+     */
+    setReadOnly(readOnly) {
+        if (readOnly !== this.readOnly.get()) {
+            this.readOnly.set(readOnly);
+            this.notifier.dispatch(EditorEventType.ReadOnlyModeToggled, {
+                kind: EditorEventType.ReadOnlyModeToggled,
+                editorIsReadOnly: readOnly,
+            });
+        }
+    }
+    // @internal
+    isReadOnlyReactiveValue() {
+        return this.readOnly;
+    }
+    isReadOnly() {
+        return this.readOnly;
+    }
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
         const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
@@ -938,31 +960,42 @@ export class Editor {
     /**
      * Converts the editor's content into an SVG image.
      *
+     * If the output SVG has width or height less than `options.minDimension`, its size
+     * will be increased.
+     *
      * @see
      * {@link SVGRenderer}
      */
-    toSVG() {
-        const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
-        const sanitize = false;
-        const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, sanitize);
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        // Render with (0,0) at (0,0) — we'll handle translation with
-        // the viewBox property.
-        importExportViewport.resetTransform(Mat33.identity);
-        this.image.renderAll(renderer);
-        importExportViewport.resetTransform(origTransform);
-        // Just show the main region
-        const rect = importExportViewport.visibleRect;
-        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;
+    toSVG(options) {
+        return editorImageToSVGSync(this.image, options ?? {});
+    }
+    /**
+     * Converts the editor's content into an SVG image in an asynchronous,
+     * but **potentially lossy** way.
+     *
+     * **Warning**: If the image is being edited during an async rendering, edited components
+     * may not be rendered.
+     *
+     * Like {@link toSVG}, but can be configured to briefly pause after processing every
+     * `pauseAfterCount` items. This can prevent the editor from becoming unresponsive
+     * when saving very large images.
+     */
+    async toSVGAsync(options = {}) {
+        const pauseAfterCount = options.pauseAfterCount ?? 100;
+        return await editorImageToSVGAsync(this.image, async (_component, processedCount, totalComponents) => {
+            if (options.onProgress) {
+                const shouldContinue = await options.onProgress(processedCount, totalComponents);
+                if (shouldContinue === false) {
+                    return false;
+                }
+            }
+            if (processedCount % pauseAfterCount === 0) {
+                await untilNextAnimationFrame();
+            }
+            return true;
+        }, {
+            minDimension: options.minDimension,
+        });
     }
     /**
      * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
@@ -1114,10 +1147,14 @@ export class Editor {
         this.closeAboutDialog?.();
         this.closeAboutDialog = makeAboutDialog(this, notices).close;
     }
-    /** Removes and destroys the editor */
+    /**
+     * Removes and **destroys** the editor. The editor cannot be added to a parent
+     * again after calling this method.
+     */
     remove() {
         this.container.remove();
         // TODO: Is additional cleanup necessary here?
+        this.toolController.onEditorDestroyed();
     }
 }
 export default Editor;

package/dist/mjs/Editor.toSVGAsync.test.d.ts

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

package/dist/mjs/commands/Erase.mjs

@@ -1,5 +1,5 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
-import  EditorImage  from '../EditorImage.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
 /**
  * Removes the given {@link AbstractComponent}s from the image.

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

@@ -1,4 +1,4 @@
-import EditorImage from '../EditorImage';
+import EditorImage from '../image/EditorImage';
 import AbstractComponent from '../components/AbstractComponent';
 import SerializableCommand from './SerializableCommand';
 export type ResolveFromComponentCallback = () => SerializableCommand;

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

@@ -1,5 +1,5 @@
 import SerializableCommand from '../commands/SerializableCommand';
-import EditorImage from '../EditorImage';
+import EditorImage from '../image/EditorImage';
 import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';

package/dist/mjs/components/AbstractComponent.mjs

@@ -4,7 +4,7 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 var _a;
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
-import  EditorImage  from '../EditorImage.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
 import { Mat33 } from '@js-draw/math';
 import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
 export var ComponentSizingMode;

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

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import EditorImage from '../EditorImage';
+import EditorImage from '../image/EditorImage';
 import SerializableCommand from '../commands/SerializableCommand';
 import { LineSegment2, Mat33, Rect2, Color4 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';

package/dist/mjs/components/BackgroundComponent.mjs

@@ -1,4 +1,4 @@
-import  { EditorImageEventType }  from '../EditorImage.mjs';
+import  { EditorImageEventType }  from '../image/EditorImage.mjs';
 import { Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2 } from '@js-draw/math';
 import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';

package/dist/mjs/{EditorImage.d.ts → image/EditorImage.d.ts}

@@ -1,11 +1,11 @@
-import AbstractRenderer from './rendering/renderers/AbstractRenderer';
-import Viewport from './Viewport';
-import AbstractComponent from './components/AbstractComponent';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import Viewport from '../Viewport';
+import AbstractComponent from '../components/AbstractComponent';
 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';
+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,
@@ -14,6 +14,13 @@ export declare enum EditorImageEventType {
 export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
     image: EditorImage;
 }>;
+/**
+ * A callback used to
+ * 1. pause the render process
+ * 2. observe progress through `componentsProcessed` and `totalComponents`
+ * 3. stop the render process early by returning `false`.
+ */
+export type PreRenderComponentCallback = (component: AbstractComponent, componentsProcessed: number, totalComponents: number) => Promise<boolean>;
 export default class EditorImage {
     private root;
     private background;
@@ -36,7 +43,21 @@ export default class EditorImage {
      * the viewport used by the `renderer` (if any).
      */
     render(renderer: AbstractRenderer, viewport: Viewport | null): void;
-    /** Renders all nodes, even ones not within the viewport. @internal */
+    /**
+     * Like {@link renderAll}, but can be stopped early and paused.
+     *
+     * **Note**: If the image is being edited during an async rendering, there is no
+     * guarantee that all nodes will be rendered correctly (some may be missing).
+     *
+     * @internal
+     */
+    renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
+    /**
+     * Renders all nodes, even ones not within the viewport.
+     *
+     * This can be slow for large images
+     * @internal
+     */
     renderAll(renderer: AbstractRenderer): void;
     /**
      * @returns all elements in the image, sorted by z-index. This can be slow for large images.
@@ -136,6 +157,7 @@ export declare class ImageNode {
     private rebalance;
     protected removeChild(child: ImageNode): void;
     remove(): void;
+    renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
     render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
     renderDebugBoundingBoxes(renderer: AbstractRenderer, visibleRect: Rect2, depth?: number): void;
 }