js-draw 1.18.0 → 1.20.0

package/dist/cjs/toolbar/widgets/components/makeSnappedList.js

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../../../util/stopPropagationOfScrollingWheelEvents"));
+const ReactiveValue_1 = require("../../../util/ReactiveValue");
+/**
+ * Creates a list that snaps to each item and reports the selected item.
+ */
+const makeSnappedList = (itemsValue) => {
+    const container = document.createElement('div');
+    container.classList.add('toolbar-snapped-scroll-list');
+    const scroller = document.createElement('div');
+    scroller.classList.add('scroller');
+    const visibleIndex = ReactiveValue_1.MutableReactiveValue.fromInitialValue(0);
+    let observer = null;
+    const makePageMarkers = () => {
+        const markerContainer = document.createElement('div');
+        markerContainer.classList.add('page-markers');
+        // Keyboard focus should go to the main scrolling list.
+        // TODO: Does it make sense for the page marker list to be focusable?
+        markerContainer.setAttribute('tabindex', '-1');
+        const markers = [];
+        const pairedItems = ReactiveValue_1.ReactiveValue.union([visibleIndex, itemsValue]);
+        pairedItems.onUpdateAndNow(([currentVisibleIndex, items]) => {
+            let addedOrRemovedMarkers = false;
+            // Items may have been removed from the list of pages. Make the markers reflect that.
+            while (items.length < markers.length) {
+                markers.pop();
+                addedOrRemovedMarkers = true;
+            }
+            let activeMarker;
+            for (let i = 0; i < items.length; i++) {
+                let marker;
+                if (i >= markers.length) {
+                    marker = document.createElement('div');
+                    // Use a separate content element to increase the clickable size of
+                    // the marker.
+                    const content = document.createElement('div');
+                    content.classList.add('content');
+                    marker.replaceChildren(content);
+                    markers.push(marker);
+                    addedOrRemovedMarkers = true;
+                }
+                else {
+                    marker = markers[i];
+                }
+                marker.classList.add('marker');
+                if (i === currentVisibleIndex) {
+                    marker.classList.add('-active');
+                    activeMarker = marker;
+                }
+                else {
+                    marker.classList.remove('-active');
+                }
+                const markerIndex = i;
+                marker.onclick = () => {
+                    wrappedItems.get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                };
+            }
+            // Only call .replaceChildren when necessary -- doing so on every change would
+            // break transitions.
+            if (addedOrRemovedMarkers) {
+                markerContainer.replaceChildren(...markers);
+            }
+            // Handles the case where there are many markers and the current is offscreen
+            if (activeMarker && markerContainer.scrollHeight > container.clientHeight) {
+                activeMarker.scrollIntoView({ block: 'nearest' });
+            }
+            if (markers.length === 1) {
+                markerContainer.classList.add('-one-element');
+            }
+            else {
+                markerContainer.classList.remove('-one-element');
+            }
+        });
+        return markerContainer;
+    };
+    const createObserver = () => {
+        observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && entry.intersectionRatio > 0.7) {
+                    const indexString = entry.target.getAttribute('data-item-index');
+                    if (indexString === null)
+                        throw new Error('Could not find attribute data-item-index');
+                    const index = Number(indexString);
+                    visibleIndex.set(index);
+                    break;
+                }
+            }
+        }, {
+            // Element to use as the boudning box with which to intersect.
+            // See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+            root: scroller,
+            // Fraction of an element that must be visible to trigger the callback:
+            threshold: 0.9,
+        });
+    };
+    const destroyObserver = () => {
+        if (observer) {
+            observer.disconnect();
+            visibleIndex.set(0);
+            observer = null;
+        }
+    };
+    const wrappedItems = ReactiveValue_1.ReactiveValue.map(itemsValue, items => {
+        return items.map((item, index) => {
+            const wrapper = document.createElement('div');
+            if (item.element.parentElement)
+                item.element.remove();
+            wrapper.appendChild(item.element);
+            wrapper.classList.add('item');
+            wrapper.setAttribute('data-item-index', `${index}`);
+            return {
+                element: wrapper,
+                data: item.data,
+            };
+        });
+    });
+    const lastItems = [];
+    wrappedItems.onUpdateAndNow(items => {
+        visibleIndex.set(-1);
+        for (const item of lastItems) {
+            observer?.unobserve(item.element);
+        }
+        scroller.replaceChildren();
+        // An observer is only necessary if there are multiple items to scroll through.
+        if (items.length > 1) {
+            createObserver();
+        }
+        else {
+            destroyObserver();
+        }
+        // Different styling is applied when empty
+        if (items.length === 0) {
+            container.classList.add('-empty');
+        }
+        else {
+            container.classList.remove('-empty');
+        }
+        for (const item of items) {
+            scroller.appendChild(item.element);
+        }
+        visibleIndex.set(0);
+        if (observer) {
+            for (const item of items) {
+                observer.observe(item.element);
+            }
+        }
+    });
+    const visibleItem = ReactiveValue_1.ReactiveValue.map(visibleIndex, index => {
+        const values = itemsValue.get();
+        if (0 <= index && index < values.length) {
+            return values[index].data;
+        }
+        return null;
+    });
+    // makeSnappedList is generally shown within the toolbar. This allows users to
+    // scroll it with a touchpad.
+    (0, stopPropagationOfScrollingWheelEvents_1.default)(scroller);
+    container.replaceChildren(makePageMarkers(), scroller);
+    return {
+        container,
+        visibleItem,
+    };
+};
+exports.default = makeSnappedList;

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

@@ -1,4 +1,4 @@
-import { KeyPressEvent, PointerEvt } from '../inputEvents';
+import { GestureCancelEvt, KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
 import { MutableReactiveValue } from '../util/ReactiveValue';
@@ -22,6 +22,11 @@ export default class Eraser extends BaseTool {
     private eraseCommands;
     private addCommands;
     constructor(editor: Editor, description: string, options?: InitialEraserOptions);
+    /**
+     * @returns a tool that briefly enables the eraser when a physical eraser is used.
+     * This tool should be added to the tool list after the primary tools.
+     */
+    makeEraserSwitcherTool(): BaseTool;
     private clearPreview;
     private getSizeOnCanvas;
     private drawPreviewAt;
@@ -36,7 +41,7 @@ export default class Eraser extends BaseTool {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
+    onGestureCancel(_event: GestureCancelEvt): void;
     onKeyPress(event: KeyPressEvent): boolean;
     /** Returns the side-length of the tip of this eraser. */
     getThickness(): number;

package/dist/cjs/tools/Eraser.js

@@ -19,12 +19,59 @@ var EraserMode;
     EraserMode["PartialStroke"] = "partial-stroke";
     EraserMode["FullStroke"] = "full-stroke";
 })(EraserMode || (exports.EraserMode = EraserMode = {}));
+/** Handles switching from other primary tools to the eraser and back */
+class EraserSwitcher extends BaseTool_1.default {
+    constructor(editor, eraser) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+        this.eraser = eraser;
+    }
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 && event.current.device === Pointer_1.PointerDevice.Eraser) {
+            const toolController = this.editor.toolController;
+            const enabledPrimaryTools = toolController.getPrimaryTools().filter(tool => tool.isEnabled());
+            if (enabledPrimaryTools.length) {
+                this.previousEnabledTool = enabledPrimaryTools[0];
+            }
+            else {
+                this.previousEnabledTool = null;
+            }
+            this.previousEraserEnabledState = this.eraser.isEnabled();
+            this.eraser.setEnabled(true);
+            if (this.eraser.onPointerDown(event)) {
+                return true;
+            }
+            else {
+                this.restoreOriginalTool();
+            }
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        this.eraser.onPointerMove(event);
+    }
+    restoreOriginalTool() {
+        this.eraser.setEnabled(this.previousEraserEnabledState);
+        if (this.previousEnabledTool) {
+            this.previousEnabledTool.setEnabled(true);
+        }
+    }
+    onPointerUp(event) {
+        this.eraser.onPointerUp(event);
+        this.restoreOriginalTool();
+    }
+    onGestureCancel(event) {
+        this.eraser.onGestureCancel(event);
+        this.restoreOriginalTool();
+    }
+}
 class Eraser extends BaseTool_1.default {
     constructor(editor, description, options) {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastPoint = null;
         this.isFirstEraseEvt = true;
+        this.toAdd = new Set();
         // Commands that each remove one element
         this.eraseCommands = [];
         this.addCommands = [];
@@ -45,6 +92,13 @@ class Eraser extends BaseTool_1.default {
             });
         });
     }
+    /**
+     * @returns a tool that briefly enables the eraser when a physical eraser is used.
+     * This tool should be added to the tool list after the primary tools.
+     */
+    makeEraserSwitcherTool() {
+        return new EraserSwitcher(this.editor, this);
+    }
     clearPreview() {
         this.editor.clearWetInk();
     }
@@ -127,15 +181,17 @@ class Eraser extends BaseTool_1.default {
             newAddCommands.forEach(command => command.apply(this.editor));
             const finalToErase = [];
             for (const item of toErase) {
-                if (this.toAdd.includes(item)) {
-                    this.toAdd = this.toAdd.filter(i => i !== item);
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
                 }
                 else {
                     finalToErase.push(item);
                 }
             }
             this.toRemove.push(...finalToErase);
-            this.toAdd.push(...toAdd);
+            for (const item of toAdd) {
+                this.toAdd.add(item);
+            }
             this.eraseCommands.push(new Erase_1.default(finalToErase));
             this.addCommands.push(...newAddCommands);
         }
@@ -146,7 +202,7 @@ class Eraser extends BaseTool_1.default {
         if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
             this.lastPoint = event.current.canvasPos;
             this.toRemove = [];
-            this.toAdd = [];
+            this.toAdd.clear();
             this.isFirstEraseEvt = true;
             this.drawPreviewAt(event.current.canvasPos);
             return true;
@@ -162,7 +218,21 @@ class Eraser extends BaseTool_1.default {
         const commands = [];
         if (this.addCommands.length > 0) {
             this.addCommands.forEach(cmd => cmd.unapply(this.editor));
-            commands.push(...this.toAdd.map(a => EditorImage_1.default.addElement(a)));
+            // Remove items from toAdd that are also present in toRemove -- adding, then
+            // removing these does nothing, and can break undo/redo.
+            for (const item of this.toAdd) {
+                if (this.toRemove.includes(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter(other => other !== item);
+                }
+            }
+            for (const item of this.toRemove) {
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter(other => other !== item);
+                }
+            }
+            commands.push(...[...this.toAdd].map(a => EditorImage_1.default.addElement(a)));
             this.addCommands = [];
         }
         if (this.eraseCommands.length > 0) {
@@ -180,7 +250,7 @@ class Eraser extends BaseTool_1.default {
         }
         this.clearPreview();
     }
-    onGestureCancel() {
+    onGestureCancel(_event) {
         this.addCommands.forEach(cmd => cmd.unapply(this.editor));
         this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
         this.eraseCommands = [];

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

@@ -10,13 +10,27 @@ interface PinchData {
     dist: number;
 }
 export declare enum PanZoomMode {
+    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
     OneFingerTouchGestures = 1,
+    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
+    /** Single-pointer gestures of *any* type (including touch). */
     SinglePointerGestures = 8,
+    /** Keyboard navigation (e.g. LeftArrow to move left). */
     Keyboard = 16,
+    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
     RotationLocked = 32
 }
+/**
+ * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
+ *
+ * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
+ * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
+ * respond to right-click drag events and two-finger touch gestures.
+ *
+ * @see {@link setModeEnabled}
+ */
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
@@ -58,8 +72,48 @@ export default class PanZoom extends BaseTool {
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress(event: KeyPressEvent): boolean;
     private isRotationLocked;
+    /**
+     * Changes the types of gestures used by this pan/zoom tool.
+     *
+     * @see {@link PanZoomMode} {@link setMode}
+     *
+     * @example
+     * ```ts,runnable
+     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     *
+     * // By default, there are multiple PanZoom tools that handle different events.
+     * // This gets all PanZoomTools.
+     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
+     *
+     * // The first PanZoomTool is the highest priority -- by default,
+     * // this tool is responsible for handling multi-finger touch gestures.
+     * //
+     * // Lower-priority PanZoomTools handle one-finger touch gestures and
+     * // key-presses.
+     * const panZoomTool = panZoomToolList[0];
+     *
+     * // Lock rotation for multi-finger touch gestures.
+     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
+     * ```
+     */
     setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
+    /**
+     * Sets all modes for this tool using a bitmask.
+     *
+     * @see {@link setModeEnabled}
+     *
+     * @example
+     * ```ts
+     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
+     * ```
+     */
     setMode(mode: PanZoomMode): void;
+    /**
+     * Returns a bitmask indicating the currently-enabled modes.
+     * @see {@link setModeEnabled}
+     */
     getMode(): PanZoomMode;
 }
 export {};

package/dist/cjs/tools/PanZoom.js

@@ -13,11 +13,16 @@ const BaseTool_1 = __importDefault(require("./BaseTool"));
 const keybindings_1 = require("./keybindings");
 var PanZoomMode;
 (function (PanZoomMode) {
+    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
     PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
     PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    /** Single-pointer gestures of *any* type (including touch). */
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    /** Keyboard navigation (e.g. LeftArrow to move left). */
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
     PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (exports.PanZoomMode = PanZoomMode = {}));
 class InertialScroller {
@@ -65,6 +70,15 @@ class InertialScroller {
         }
     }
 }
+/**
+ * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
+ *
+ * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
+ * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
+ * respond to right-click drag events and two-finger touch gestures.
+ *
+ * @see {@link setModeEnabled}
+ */
 class PanZoom extends BaseTool_1.default {
     constructor(editor, mode, description) {
         super(editor.notifier, description);
@@ -428,8 +442,32 @@ class PanZoom extends BaseTool_1.default {
     isRotationLocked() {
         return !!(this.mode & PanZoomMode.RotationLocked);
     }
-    // Sets whether the given `mode` is enabled. `mode` should be a single
-    // mode from the `PanZoomMode` enum.
+    /**
+     * Changes the types of gestures used by this pan/zoom tool.
+     *
+     * @see {@link PanZoomMode} {@link setMode}
+     *
+     * @example
+     * ```ts,runnable
+     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     *
+     * // By default, there are multiple PanZoom tools that handle different events.
+     * // This gets all PanZoomTools.
+     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
+     *
+     * // The first PanZoomTool is the highest priority -- by default,
+     * // this tool is responsible for handling multi-finger touch gestures.
+     * //
+     * // Lower-priority PanZoomTools handle one-finger touch gestures and
+     * // key-presses.
+     * const panZoomTool = panZoomToolList[0];
+     *
+     * // Lock rotation for multi-finger touch gestures.
+     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
+     * ```
+     */
     setModeEnabled(mode, enabled) {
         let newMode = this.mode;
         if (enabled) {
@@ -440,6 +478,16 @@ class PanZoom extends BaseTool_1.default {
         }
         this.setMode(newMode);
     }
+    /**
+     * Sets all modes for this tool using a bitmask.
+     *
+     * @see {@link setModeEnabled}
+     *
+     * @example
+     * ```ts
+     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
+     * ```
+     */
     setMode(mode) {
         if (mode !== this.mode) {
             this.mode = mode;
@@ -449,6 +497,10 @@ class PanZoom extends BaseTool_1.default {
             });
         }
     }
+    /**
+     * Returns a bitmask indicating the currently-enabled modes.
+     * @see {@link setModeEnabled}
+     */
     getMode() {
         return this.mode;
     }

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

@@ -10,7 +10,7 @@ import AbstractComponent from '../../components/AbstractComponent';
 import Command from '../../commands/Command';
 export default class Selection {
     private editor;
-    private handles;
+    private childwidgets;
     private originalRegion;
     private selectionTightBoundingBox;
     private transformers;
@@ -52,7 +52,7 @@ export default class Selection {
     private removedFromImage;
     private addRemoveSelectionFromImage;
     private removeDeletedElemsFromSelection;
-    private targetHandle;
+    private activeHandle;
     private backgroundDragging;
     onDragStart(pointer: Pointer): boolean;
     onDragUpdate(pointer: Pointer): void;

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

@@ -57,7 +57,7 @@ class Selection {
         this.hasParent = true;
         // Maps IDs to whether we removed the component from the image
         this.removedFromImage = {};
-        this.targetHandle = null;
+        this.activeHandle = null;
         this.backgroundDragging = false;
         this.selectionDuplicatedAnimationTimeout = null;
         this.originalRegion = new math_1.Rect2(startPoint.x, startPoint.y, 0, 0);
@@ -99,14 +99,14 @@ class Selection {
             side: math_1.Vec2.of(0.5, 0),
             icon: this.editor.icons.makeRotateIcon(),
         }, this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
-        this.handles = [
+        this.childwidgets = [
             resizeBothHandle,
             ...resizeHorizontalHandles,
             resizeVerticalHandle,
             rotationHandle,
         ];
-        for (const handle of this.handles) {
-            handle.addTo(this.backgroundElem);
+        for (const widget of this.childwidgets) {
+            widget.addTo(this.backgroundElem);
         }
         this.updateUI();
     }
@@ -321,8 +321,8 @@ class Selection {
         else {
             this.innerContainer.classList.remove('-empty');
         }
-        for (const handle of this.handles) {
-            handle.updatePosition();
+        for (const widget of this.childwidgets) {
+            widget.updatePosition(this.getScreenRegion());
         }
     }
     // Add/remove the contents of this seleciton from the editor.
@@ -376,16 +376,16 @@ class Selection {
     onDragStart(pointer) {
         // Clear the HTML selection (prevent HTML drag and drop being triggered by this drag)
         document.getSelection()?.removeAllRanges();
-        this.targetHandle = null;
+        this.activeHandle = null;
         let result = false;
         this.backgroundDragging = false;
         if (this.region.containsPoint(pointer.canvasPos)) {
             this.backgroundDragging = true;
             result = true;
         }
-        for (const handle of this.handles) {
-            if (handle.containsPoint(pointer.canvasPos)) {
-                this.targetHandle = handle;
+        for (const widget of this.childwidgets) {
+            if (widget.containsPoint(pointer.canvasPos)) {
+                this.activeHandle = widget;
                 this.backgroundDragging = false;
                 result = true;
             }
@@ -394,8 +394,8 @@ class Selection {
             this.removeDeletedElemsFromSelection();
             this.addRemoveSelectionFromImage(false);
         }
-        if (this.targetHandle) {
-            this.targetHandle.handleDragStart(pointer);
+        if (this.activeHandle) {
+            this.activeHandle.handleDragStart(pointer);
         }
         if (this.backgroundDragging) {
             this.transformers.drag.onDragStart(pointer.canvasPos);
@@ -406,25 +406,25 @@ class Selection {
         if (this.backgroundDragging) {
             this.transformers.drag.onDragUpdate(pointer.canvasPos);
         }
-        if (this.targetHandle) {
-            this.targetHandle.handleDragUpdate(pointer);
+        if (this.activeHandle) {
+            this.activeHandle.handleDragUpdate(pointer);
         }
     }
     onDragEnd() {
         if (this.backgroundDragging) {
             this.transformers.drag.onDragEnd();
         }
-        else if (this.targetHandle) {
-            this.targetHandle.handleDragEnd();
+        else if (this.activeHandle) {
+            this.activeHandle.handleDragEnd();
         }
         this.addRemoveSelectionFromImage(true);
         this.backgroundDragging = false;
-        this.targetHandle = null;
+        this.activeHandle = null;
         this.updateUI();
     }
     onDragCancel() {
         this.backgroundDragging = false;
-        this.targetHandle = null;
+        this.activeHandle = null;
         this.setTransform(math_1.Mat33.identity);
         this.addRemoveSelectionFromImage(true);
         this.updateUI();
@@ -452,7 +452,7 @@ class Selection {
         return false;
     }
     deleteSelectedObjects() {
-        if (this.backgroundDragging || this.targetHandle) {
+        if (this.backgroundDragging || this.activeHandle) {
             this.onDragEnd();
         }
         return new Erase_1.default(this.selectedElems);
@@ -469,7 +469,7 @@ class Selection {
         }, animationDuration);
     }
     async duplicateSelectedObjects() {
-        const wasTransforming = this.backgroundDragging || this.targetHandle;
+        const wasTransforming = this.backgroundDragging || this.activeHandle;
         let tmpApplyCommand = null;
         if (!wasTransforming) {
             this.runSelectionDuplicatedAnimation();

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

@@ -2,6 +2,7 @@ import { Point2, Vec2 } from '@js-draw/math';
 import Selection from './Selection';
 import Pointer from '../../Pointer';
 import Viewport from '../../Viewport';
+import { SelectionBoxChild } from './types';
 export declare enum HandleAction {
     ResizeXY = "resize-xy",
     Rotate = "rotate",
@@ -17,7 +18,7 @@ export declare const handleSize = 30;
 export type DragStartCallback = (startPoint: Point2) => void;
 export type DragUpdateCallback = (canvasPoint: Point2) => void;
 export type DragEndCallback = () => Promise<void> | void;
-export default class SelectionHandle {
+export default class SelectionHandle implements SelectionBoxChild {
     readonly presentation: HandlePresentation;
     private readonly parent;
     private readonly viewport;
@@ -34,6 +35,11 @@ export default class SelectionHandle {
      * element visible on the screen.
      */
     addTo(container: HTMLElement): void;
+    /**
+     * Removes this element from its container. Should only be called
+     * after {@link addTo}.
+     */
+    remove(): void;
     /**
      * Returns this handle's bounding box relative to the top left of the
      * selection box.
@@ -48,7 +54,7 @@ export default class SelectionHandle {
     /** @returns true iff `point` (in editor **canvas** coordinates) is in this. */
     containsPoint(point: Point2): boolean;
     private dragLastPos;
-    handleDragStart(pointer: Pointer): void;
+    handleDragStart(pointer: Pointer): boolean;
     handleDragUpdate(pointer: Pointer): void;
     handleDragEnd(): void | Promise<void>;
     setSnapToGrid(snap: boolean): void;