js-draw 1.10.0 → 1.11.0

package/dist/cjs/commands/invertCommand.js

@@ -11,6 +11,11 @@ const invertCommand = (command) => {
     if (command instanceof SerializableCommand_1.default) {
         // SerializableCommand that does the inverse of [command]
         return new class extends SerializableCommand_1.default {
+            constructor() {
+                super(...arguments);
+                // For debugging
+                this._command = command;
+            }
             serializeToJSON() {
                 return command.serialize();
             }

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

@@ -116,6 +116,14 @@ export default abstract class AbstractComponent {
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
+    /**
+     * Combines {@link transformBy} and {@link setZIndex} into a single command.
+     *
+     * @param newZIndex - The z-index this component should have after applying this command.
+     * @param originalZIndex - @internal The z-index the component should revert to after unapplying
+     *                         this command.
+     */
+    setZIndexAndTransformBy(affineTransfm: Mat33, newZIndex: number, originalZIndex?: number): SerializableCommand;
     isSelectable(): boolean;
     isBackground(): boolean;
     getProportionalRenderingTime(): number;

package/dist/cjs/components/AbstractComponent.js

@@ -144,13 +144,25 @@ class AbstractComponent {
     }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
-    // This also increases the element's z-index so that it is on top.
+    //
+    // The transformed component is also moved to the top (use {@link setZIndexAndTransformBy} to
+    // avoid this behavior).
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
     }
     // Returns a command that updates this component's z-index.
     setZIndex(newZIndex) {
-        return new AbstractComponent.TransformElementCommand(math_1.Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
+        return new AbstractComponent.TransformElementCommand(math_1.Mat33.identity, this.getId(), this, newZIndex);
+    }
+    /**
+     * Combines {@link transformBy} and {@link setZIndex} into a single command.
+     *
+     * @param newZIndex - The z-index this component should have after applying this command.
+     * @param originalZIndex - @internal The z-index the component should revert to after unapplying
+     *                         this command.
+     */
+    setZIndexAndTransformBy(affineTransfm, newZIndex, originalZIndex) {
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this, newZIndex, originalZIndex);
     }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
@@ -221,8 +233,12 @@ class AbstractComponent {
             throw new Error(`Element with data ${json} cannot be deserialized.`);
         }
         const instance = this.deserializationCallbacks[json.name](json.data);
-        instance.zIndex = json.zIndex;
         instance.id = json.id;
+        if (isFinite(json.zIndex)) {
+            instance.zIndex = json.zIndex;
+            // Ensure that new components will be added on top.
+            AbstractComponent.zIndexCounter = Math.max(AbstractComponent.zIndexCounter, instance.zIndex + 1);
+        }
         // TODO: What should we do with json.loadSaveData?
         //       If we attach it to [instance], we create a potential security risk — loadSaveData
         //       is often used to store unrecognised attributes so they can be preserved on output.
@@ -231,6 +247,7 @@ class AbstractComponent {
     }
 }
 // Topmost z-index
+// TODO: Should be a property of the EditorImage.
 AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
 AbstractComponent.transformElementCommandId = 'transform-element';
@@ -258,7 +275,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
             super.resolveComponent(image);
             this.origZIndex ??= this.component.getZIndex();
         }
-        updateTransform(editor, newTransfm) {
+        updateTransform(editor, newTransfm, targetZIndex) {
             if (!this.component) {
                 throw new Error('this.component is undefined or null!');
             }
@@ -270,7 +287,12 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
                 hadParent = true;
             }
             this.component.applyTransformation(newTransfm);
+            this.component.zIndex = targetZIndex;
             this.component.lastChangedTime = (new Date()).getTime();
+            // Ensure that new components are automatically drawn above the current component.
+            if (targetZIndex >= AbstractComponent.zIndexCounter) {
+                AbstractComponent.zIndexCounter = targetZIndex + 1;
+            }
             // Add the element back to the document.
             if (hadParent) {
                 EditorImage_1.default.addElement(this.component).apply(editor);
@@ -278,14 +300,12 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
         }
         apply(editor) {
             this.resolveComponent(editor.image);
-            this.component.zIndex = this.targetZIndex;
-            this.updateTransform(editor, this.affineTransfm);
+            this.updateTransform(editor, this.affineTransfm, this.targetZIndex);
             editor.queueRerender();
         }
         unapply(editor) {
             this.resolveComponent(editor.image);
-            this.component.zIndex = this.origZIndex;
-            this.updateTransform(editor, this.affineTransfm.inverse());
+            this.updateTransform(editor, this.affineTransfm.inverse(), this.origZIndex);
             editor.queueRerender();
         }
         description(_editor, localizationTable) {

package/dist/cjs/components/builders/types.d.ts

@@ -7,6 +7,17 @@ export interface ComponentBuilder {
     getBBox(): Rect2;
     build(): AbstractComponent;
     preview(renderer: AbstractRenderer): void;
+    /**
+     * Called when the pen is stationary (or the user otherwise
+     * activates autocomplete). This might attempt to fit the user's
+     * drawing to a particular shape.
+     *
+     * The shape returned by this function may be ignored if it has
+     * an empty bounding box.
+     *
+     * Although this returns a Promise, it should return *as fast as
+     * possible*.
+     */
     autocorrectShape?: () => Promise<AbstractComponent | null>;
     addPoint(point: StrokeDataPoint): void;
 }

package/dist/cjs/toolbar/AbstractToolbar.d.ts

@@ -3,6 +3,7 @@ import { ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import BaseWidget, { ToolbarWidgetTag } from './widgets/BaseWidget';
 import { DispatcherEventListener } from '../EventDispatcher';
+import { BaseTool } from '../lib';
 export interface SpacerOptions {
     grow: number;
     minSize: string;
@@ -131,7 +132,7 @@ export default abstract class AbstractToolbar {
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is roughly equivalent to
+     * **Note**: This is *roughly* equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
@@ -154,9 +155,24 @@ export default abstract class AbstractToolbar {
      */
     addUndoRedoButtons(undoFirst?: boolean): void;
     /**
-     * Adds toolbar widgets based on the enabled tools.
+     * Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.
+     *
+     * If `filter` returns `false` for a tool, no widget is added for that tool.
+     * See {@link addDefaultToolWidgets}
+     */
+    addWidgetsForPrimaryTools(filter?: (tool: BaseTool) => boolean): void;
+    /**
+     * Adds toolbar widgets based on the enabled tools, and additional tool-like
+     * buttons (e.g. {@link DocumentPropertiesWidget} and {@link InsertImageWidget}).
      */
     addDefaultToolWidgets(): void;
+    /**
+     * Adds widgets that don't correspond to tools, but do allow the user to control
+     * the editor in some way.
+     *
+     * By default, this includes {@link DocumentPropertiesWidget} and {@link InsertImageWidget}.
+     */
+    addDefaultEditorControlWidgets(): void;
     addDefaultActionButtons(): void;
     /**
      * Adds both the default tool widgets and action buttons.

package/dist/cjs/toolbar/AbstractToolbar.js

@@ -35,6 +35,7 @@ const DocumentPropertiesWidget_1 = __importDefault(require("./widgets/DocumentPr
 const math_1 = require("@js-draw/math");
 const constants_1 = require("./constants");
 const SaveActionWidget_1 = __importDefault(require("./widgets/SaveActionWidget"));
+const ExitActionWidget_1 = __importDefault(require("./widgets/ExitActionWidget"));
 class AbstractToolbar {
     /** @internal */
     constructor(editor, localizationTable = localization_1.defaultToolbarLocalization) {
@@ -297,14 +298,13 @@ class AbstractToolbar {
      */
     addSaveButton(saveCallback, labelOverride = {}) {
         const widget = new SaveActionWidget_1.default(this.editor, this.localizationTable, saveCallback, labelOverride);
-        widget.setTags([BaseWidget_1.ToolbarWidgetTag.Save]);
         this.addWidget(widget);
         return widget;
     }
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is roughly equivalent to
+     * **Note**: This is *roughly* equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
@@ -321,15 +321,9 @@ class AbstractToolbar {
      * @final
      */
     addExitButton(exitCallback, labelOverride = {}) {
-        return this.addTaggedActionButton([BaseWidget_1.ToolbarWidgetTag.Exit], {
-            label: this.editor.localization.exit,
-            icon: this.editor.icons.makeCloseIcon(),
-            ...labelOverride,
-        }, () => {
-            exitCallback();
-        }, {
-            autoDisableInReadOnlyEditors: false,
-        });
+        const widget = new ExitActionWidget_1.default(this.editor, this.localizationTable, exitCallback, labelOverride);
+        this.addWidget(widget);
+        return widget;
     }
     /**
      * Adds undo and redo buttons that trigger the editor's built-in undo and redo
@@ -377,27 +371,49 @@ class AbstractToolbar {
         });
     }
     /**
-     * Adds toolbar widgets based on the enabled tools.
+     * Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.
+     *
+     * If `filter` returns `false` for a tool, no widget is added for that tool.
+     * See {@link addDefaultToolWidgets}
      */
-    addDefaultToolWidgets() {
-        const toolController = this.editor.toolController;
-        for (const tool of toolController.getMatchingTools(Pen_1.default)) {
-            const widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
-            this.addWidget(widget);
-        }
-        for (const tool of toolController.getMatchingTools(Eraser_1.default)) {
-            this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(SelectionTool_1.default)) {
-            this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(TextTool_1.default)) {
-            this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        const panZoomTool = toolController.getMatchingTools(PanZoom_1.default)[0];
-        if (panZoomTool) {
-            this.addWidget(new HandToolWidget_1.default(this.editor, panZoomTool, this.localizationTable));
+    addWidgetsForPrimaryTools(filter) {
+        for (const tool of this.editor.toolController.getPrimaryTools()) {
+            if (filter && !filter?.(tool)) {
+                continue;
+            }
+            if (tool instanceof Pen_1.default) {
+                const widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
+                this.addWidget(widget);
+            }
+            else if (tool instanceof Eraser_1.default) {
+                this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof SelectionTool_1.default) {
+                this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof TextTool_1.default) {
+                this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof PanZoom_1.default) {
+                this.addWidget(new HandToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
         }
+    }
+    /**
+     * Adds toolbar widgets based on the enabled tools, and additional tool-like
+     * buttons (e.g. {@link DocumentPropertiesWidget} and {@link InsertImageWidget}).
+     */
+    addDefaultToolWidgets() {
+        this.addWidgetsForPrimaryTools();
+        this.addDefaultEditorControlWidgets();
+    }
+    /**
+     * Adds widgets that don't correspond to tools, but do allow the user to control
+     * the editor in some way.
+     *
+     * By default, this includes {@link DocumentPropertiesWidget} and {@link InsertImageWidget}.
+     */
+    addDefaultEditorControlWidgets() {
         this.addWidget(new DocumentPropertiesWidget_1.default(this.editor, this.localizationTable));
         this.addWidget(new InsertImageWidget_1.default(this.editor, this.localizationTable));
     }

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -53,7 +53,7 @@ class BaseWidget {
         this.layoutManager = defaultLayoutManager;
         this.icon = null;
         this.container = document.createElement('div');
-        this.container.classList.add(`${constants_1.toolbarCSSPrefix}toolContainer`, `${constants_1.toolbarCSSPrefix}toolButtonContainer`);
+        this.container.classList.add(`${constants_1.toolbarCSSPrefix}toolContainer`, `${constants_1.toolbarCSSPrefix}toolButtonContainer`, `${constants_1.toolbarCSSPrefix}internalWidgetId--${id.replace(/[^a-zA-Z0-9_]/g, '-')}`);
         this.dropdownContent = document.createElement('div');
         __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
         this.button = document.createElement('div');

package/dist/cjs/toolbar/widgets/ExitActionWidget.d.ts

@@ -0,0 +1,12 @@
+import { KeyPressEvent } from '../../inputEvents';
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+import { ActionButtonIcon } from '../types';
+declare class ExitActionWidget extends ActionButtonWidget {
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
+    mustBeInToplevelMenu(): boolean;
+}
+export default ExitActionWidget;

package/dist/cjs/toolbar/widgets/ExitActionWidget.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
+const BaseWidget_1 = require("./BaseWidget");
+const keybindings_1 = require("./keybindings");
+class ExitActionWidget extends ActionButtonWidget_1.default {
+    constructor(editor, localization, saveCallback, labelOverride = {}) {
+        super(editor, 'exit-button', 
+        // Creates an icon
+        () => {
+            return labelOverride.icon ?? editor.icons.makeCloseIcon();
+        }, labelOverride.label ?? localization.exit, saveCallback);
+        this.setTags([BaseWidget_1.ToolbarWidgetTag.Exit]);
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(keybindings_1.exitKeyboardShortcut, event)) {
+            this.clickAction();
+            return true;
+        }
+        return super.onKeyPress(event);
+    }
+    mustBeInToplevelMenu() {
+        return true;
+    }
+}
+exports.default = ExitActionWidget;

package/dist/cjs/toolbar/widgets/HandToolWidget.d.ts

@@ -4,11 +4,12 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class HandToolWidget extends BaseToolWidget {
-    protected overridePanZoomTool: PanZoom;
     private allowTogglingBaseTool;
-    constructor(editor: Editor, overridePanZoomTool: PanZoom, localizationTable: ToolbarLocalization);
-    protected shouldAutoDisableInReadOnlyEditor(): boolean;
+    protected overridePanZoomTool: PanZoom;
+    constructor(editor: Editor, tool: PanZoom, localizationTable: ToolbarLocalization);
     private static getPrimaryHandTool;
+    private static getOverrideHandTool;
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
     protected handleClick(): void;

package/dist/cjs/toolbar/widgets/HandToolWidget.js

@@ -124,34 +124,45 @@ class HandModeWidget extends BaseWidget_1.default {
 }
 class HandToolWidget extends BaseToolWidget_1.default {
     constructor(editor, 
-    // Pan zoom tool that overrides all other tools (enabling this tool for a device
-    // causes that device to pan/zoom instead of interact with the primary tools)
-    overridePanZoomTool, localizationTable) {
-        const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
-        const tool = primaryHandTool ?? overridePanZoomTool;
-        super(editor, tool, 'hand-tool-widget', localizationTable);
-        this.overridePanZoomTool = overridePanZoomTool;
+    // Can either be the primary pan/zoom tool (in the primary tools list) or
+    // the override pan/zoom tool.
+    // If the override pan/zoom tool, the primary will be gotten from the editor's
+    // tool controller.
+    // If the primary, the override will be gotten from the editor's tool controller.
+    tool, localizationTable) {
+        const isGivenToolPrimary = editor.toolController.getPrimaryTools().includes(tool);
+        const primaryTool = (isGivenToolPrimary ? tool : HandToolWidget.getPrimaryHandTool(editor.toolController))
+            ?? tool;
+        super(editor, primaryTool, 'hand-tool-widget', localizationTable);
+        this.overridePanZoomTool =
+            (isGivenToolPrimary ? HandToolWidget.getOverrideHandTool(editor.toolController) : tool)
+                ?? tool;
         // Only allow toggling a hand tool if we're using the primary hand tool and not the override
         // hand tool for this button.
-        this.allowTogglingBaseTool = primaryHandTool !== null;
+        this.allowTogglingBaseTool = primaryTool !== null;
         // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
         if (!this.allowTogglingBaseTool) {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
         this.addSubWidget(touchPanningWidget);
         this.addSubWidget(rotationLockWidget);
     }
-    shouldAutoDisableInReadOnlyEditor() {
-        return false;
-    }
     static getPrimaryHandTool(toolController) {
         const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom_1.default);
         const primaryPanZoomTool = primaryPanZoomToolList[0];
         return primaryPanZoomTool;
     }
+    static getOverrideHandTool(toolController) {
+        const panZoomToolList = toolController.getMatchingTools(PanZoom_1.default);
+        const panZoomTool = panZoomToolList[0];
+        return panZoomTool;
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     getTitle() {
         return this.localizationTable.handTool;
     }

package/dist/cjs/toolbar/widgets/InsertImageWidget.js

@@ -174,7 +174,7 @@ class InsertImageWidget extends BaseWidget_1.default {
             this.image?.reset();
         };
         this.statusView.replaceChildren(sizeText);
-        const largeImageThreshold = 0.25; // MiB
+        const largeImageThreshold = 0.12; // MiB
         if (sizeInMiB > largeImageThreshold) {
             this.statusView.appendChild(decreaseSizeButton);
         }

package/dist/cjs/toolbar/widgets/keybindings.d.ts

@@ -1,3 +1,4 @@
 export declare const resizeImageToSelectionKeyboardShortcut = "jsdraw.toolbar.SelectionTool.resizeImageToSelection";
 export declare const selectStrokeTypeKeyboardShortcutIds: string[];
 export declare const saveKeyboardShortcut = "jsdraw.toolbar.SaveActionWidget.save";
+export declare const exitKeyboardShortcut = "jsdraw.toolbar.ExitActionWidget.exit";

package/dist/cjs/toolbar/widgets/keybindings.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveKeyboardShortcut = exports.selectStrokeTypeKeyboardShortcutIds = exports.resizeImageToSelectionKeyboardShortcut = void 0;
+exports.exitKeyboardShortcut = exports.saveKeyboardShortcut = exports.selectStrokeTypeKeyboardShortcutIds = exports.resizeImageToSelectionKeyboardShortcut = void 0;
 const KeyboardShortcutManager_1 = __importDefault(require("../../shortcuts/KeyboardShortcutManager"));
 // Selection
 exports.resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
@@ -17,3 +17,6 @@ for (let i = 0; i < exports.selectStrokeTypeKeyboardShortcutIds.length; i++) {
 // Save
 exports.saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';
 KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.saveKeyboardShortcut, ['ctrlOrMeta+KeyS'], 'Save');
+// Exit
+exports.exitKeyboardShortcut = 'jsdraw.toolbar.ExitActionWidget.exit';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.exitKeyboardShortcut, ['Alt+KeyQ'], 'Exit');

package/dist/cjs/toolbar/widgets/layout/types.d.ts

@@ -1,4 +1,4 @@
-import ReactiveValue from 'js-draw/src/util/ReactiveValue';
+import ReactiveValue from '../../../util/ReactiveValue';
 /**
  * A class that manages whether/what content is shown for a widget.
  *

package/dist/cjs/tools/Pen.js

@@ -192,6 +192,11 @@ class Pen extends BaseTool_1.default {
         if (!this.builder || !correctedShape) {
             return;
         }
+        // Don't complete to empty shapes.
+        const bboxArea = correctedShape.getBBox().area;
+        if (bboxArea === 0 || !isFinite(bboxArea)) {
+            return;
+        }
         this.autocorrectedShape = correctedShape;
         this.lastAutocorrectedShape = correctedShape;
         this.previewStroke();

package/dist/cjs/tools/SelectionTool/Selection.d.ts

@@ -2,6 +2,7 @@
  * @internal
  * @packageDocumentation
  */
+import SerializableCommand from '../../commands/SerializableCommand';
 import Editor from '../../Editor';
 import { Mat33, Rect2, Point2 } from '@js-draw/math';
 import Pointer from '../../Pointer';
@@ -36,7 +37,10 @@ export default class Selection {
     getScreenRegion(): Rect2;
     get screenRegionRotation(): number;
     setTransform(transform: Mat33, preview?: boolean): void;
+    private getDeltaZIndexToMoveSelectionToTop;
     finalizeTransform(): void | Promise<void>;
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack(): SerializableCommand | null;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
     resolveToObjects(): boolean;