js-draw 1.25.0 → 1.27.1

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -19,7 +19,7 @@ const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
 class Selection {
-    constructor(startPoint, editor, showContextMenu) {
+    constructor(selectedElems, editor, showContextMenu) {
         this.editor = editor;
         // The last-computed bounding box of selected content
         // @see getTightBoundingBox
@@ -33,7 +33,9 @@ class Selection {
         this.activeHandle = null;
         this.backgroundDragging = false;
         this.selectionDuplicatedAnimationTimeout = null;
-        this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
+        selectedElems = [...selectedElems];
+        this.selectedElems = selectedElems;
+        this.originalRegion = Rect2.empty;
         this.transformers = {
             drag: new DragTransformer(editor, this),
             resize: new ResizeTransformer(editor, this),
@@ -72,17 +74,18 @@ class Selection {
             side: 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());
-        const menuToggleButton = new SelectionMenuShortcut(this, this.editor.viewport, showContextMenu, this.editor.localization);
+        const menuToggleButton = new SelectionMenuShortcut(this, this.editor.viewport, this.editor.icons.makeOverflowIcon(), showContextMenu, this.editor.localization);
         this.childwidgets = [
+            menuToggleButton,
             resizeBothHandle,
             ...resizeHorizontalHandles,
             resizeVerticalHandle,
             rotationHandle,
-            menuToggleButton,
         ];
         for (const widget of this.childwidgets) {
             widget.addTo(this.backgroundElem);
         }
+        this.recomputeRegion();
         this.updateUI();
     }
     // @internal Intended for unit tests
@@ -205,34 +208,6 @@ class Selection {
         wetInkRenderer.popTransform();
         this.updateUI();
     }
-    // Find the objects corresponding to this in the document,
-    // select them.
-    // Returns false iff nothing was selected.
-    resolveToObjects() {
-        let singleItemSelectionMode = false;
-        this.transform = Mat33.identity;
-        // Grow the rectangle, if necessary
-        if (this.region.w === 0 || this.region.h === 0) {
-            const padding = this.editor.viewport.visibleRect.maxDimension / 200;
-            this.originalRegion = Rect2.bboxOf(this.region.corners, padding);
-            // Only select one item if the rectangle was very small.
-            singleItemSelectionMode = true;
-        }
-        this.selectedElems = this.editor.image
-            .getElementsIntersectingRegion(this.region)
-            .filter((elem) => {
-            return elem.intersectsRect(this.region) && elem.isSelectable();
-        });
-        if (singleItemSelectionMode && this.selectedElems.length > 0) {
-            this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];
-        }
-        // Find the bounding box of all selected elements.
-        if (!this.recomputeRegion()) {
-            return false;
-        }
-        this.updateUI();
-        return true;
-    }
     // Recompute this' region from the selected elements.
     // Returns false if the selection is empty.
     recomputeRegion() {
@@ -354,6 +329,10 @@ class Selection {
         });
     }
     onDragStart(pointer) {
+        // If empty, it isn't possible to drag
+        if (this.selectedElems.length === 0) {
+            return false;
+        }
         // Clear the HTML selection (prevent HTML drag and drop being triggered by this drag)
         document.getSelection()?.removeAllRanges();
         this.activeHandle = null;
@@ -454,6 +433,7 @@ class Selection {
         if (!wasTransforming) {
             this.runSelectionDuplicatedAnimation();
         }
+        let command;
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
@@ -463,16 +443,30 @@ class Selection {
             await tmpApplyCommand.apply(this.editor);
             // Show items again
             this.addRemoveSelectionFromImage(true);
-        }
-        const duplicateCommand = new Duplicate(this.selectedElems);
-        if (wasTransforming) {
+            // With the transformation applied, create the duplicates
+            command = uniteCommands(this.selectedElems.map((elem) => {
+                return EditorImage.addElement(elem.clone());
+            }));
             // Move the selected objects back to the correct location.
             await tmpApplyCommand?.unapply(this.editor);
             this.addRemoveSelectionFromImage(false);
             this.previewTransformCmds();
             this.updateUI();
         }
-        return duplicateCommand;
+        else {
+            command = new Duplicate(this.selectedElems);
+        }
+        return command;
+    }
+    snapSelectedObjectsToGrid() {
+        const viewport = this.editor.viewport;
+        // Snap the top left corner of what we have selected.
+        const topLeftOfBBox = this.computeTightBoundingBox().topLeft;
+        const snappedTopLeft = viewport.snapToGrid(topLeftOfBBox);
+        const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
+        const oldTransform = this.getTransform();
+        this.setTransform(oldTransform.rightMul(Mat33.translation(snapDelta)));
+        this.finalizeTransform();
     }
     setHandlesVisible(showHandles) {
         if (!showHandles) {
@@ -502,16 +496,6 @@ class Selection {
         this.selectionTightBoundingBox = null;
         this.hasParent = false;
     }
-    setSelectedObjects(objects, bbox) {
-        this.addRemoveSelectionFromImage(true);
-        this.originalRegion = bbox;
-        this.selectionTightBoundingBox = bbox;
-        this.selectedElems = objects.filter((object) => object.isSelectable());
-        // Enforce increasing z-index invariant
-        this.selectedElems.sort((a, b) => a.getZIndex() - b.getZIndex());
-        this.padRegion();
-        this.updateUI();
-    }
     getSelectedObjects() {
         return [...this.selectedElems];
     }

package/dist/mjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.d.ts

@@ -0,0 +1,17 @@
+import { Path, Point2 } from '@js-draw/math';
+import Viewport from '../../../Viewport';
+import EditorImage from '../../../image/EditorImage';
+import AbstractComponent from '../../../components/AbstractComponent';
+import SelectionBuilder from './SelectionBuilder';
+/**
+ * Creates lasso selections.
+ */
+export default class LassoSelectionBuilder extends SelectionBuilder {
+    private viewport;
+    private boundaryPoints;
+    private lastPoint;
+    constructor(startPoint: Point2, viewport: Viewport);
+    onPointerMove(canvasPoint: Point2): void;
+    previewPath(): Path;
+    resolveInternal(image: EditorImage): AbstractComponent[];
+}

package/dist/mjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.mjs

@@ -0,0 +1,61 @@
+import { Path } from '@js-draw/math';
+import { PathCommandType } from '@js-draw/math';
+import  SelectionBuilder  from './SelectionBuilder.mjs';
+/**
+ * Creates lasso selections.
+ */
+export default class LassoSelectionBuilder extends SelectionBuilder {
+    constructor(startPoint, viewport) {
+        super();
+        this.viewport = viewport;
+        this.boundaryPoints = [];
+        this.boundaryPoints.push(startPoint);
+        this.lastPoint = startPoint;
+    }
+    onPointerMove(canvasPoint) {
+        const lastBoundaryPoint = this.boundaryPoints[this.boundaryPoints.length - 1];
+        const minBoundaryDist = this.viewport.getSizeOfPixelOnCanvas() * 8;
+        if (lastBoundaryPoint.distanceTo(canvasPoint) >= minBoundaryDist) {
+            this.boundaryPoints.push(canvasPoint);
+        }
+        this.lastPoint = canvasPoint;
+    }
+    previewPath() {
+        const pathCommands = this.boundaryPoints.map((point) => {
+            return { kind: PathCommandType.LineTo, point };
+        });
+        pathCommands.push({
+            kind: PathCommandType.LineTo,
+            point: this.lastPoint,
+        });
+        return new Path(this.boundaryPoints[0], pathCommands).asClosed();
+    }
+    resolveInternal(image) {
+        const path = this.previewPath();
+        const lines = path.polylineApproximation();
+        const candidates = image.getElementsIntersectingRegion(path.bbox);
+        const componentIsInSelection = (component) => {
+            if (path.closedContainsRect(component.getExactBBox())) {
+                return true;
+            }
+            let hasKeyPoint = false;
+            for (const point of component.keyPoints()) {
+                if (path.closedContainsPoint(point)) {
+                    hasKeyPoint = true;
+                    break;
+                }
+            }
+            if (!hasKeyPoint) {
+                return false;
+            }
+            // Only select if completely contained within the lasso
+            for (const line of lines) {
+                if (component.intersects(line)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        return candidates.filter(componentIsInSelection);
+    }
+}

package/dist/mjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.d.ts

@@ -0,0 +1,13 @@
+import { Path, Point2 } from '@js-draw/math';
+import EditorImage from '../../../image/EditorImage';
+import SelectionBuilder from './SelectionBuilder';
+/**
+ * Creates rectangle selections
+ */
+export default class RectSelectionBuilder extends SelectionBuilder {
+    private rect;
+    constructor(startPoint: Point2);
+    onPointerMove(canvasPoint: Point2): void;
+    previewPath(): Path;
+    resolveInternal(image: EditorImage): import("../../../lib").AbstractComponent[];
+}

package/dist/mjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.mjs

@@ -0,0 +1,27 @@
+import { Path, Rect2 } from '@js-draw/math';
+import  SelectionBuilder  from './SelectionBuilder.mjs';
+/**
+ * Creates rectangle selections
+ */
+export default class RectSelectionBuilder extends SelectionBuilder {
+    constructor(startPoint) {
+        super();
+        this.rect = Rect2.fromCorners(startPoint, startPoint);
+    }
+    onPointerMove(canvasPoint) {
+        this.rect = this.rect.grownToPoint(canvasPoint);
+    }
+    previewPath() {
+        return Path.fromRect(this.rect);
+    }
+    resolveInternal(image) {
+        return image.getElementsIntersectingRegion(this.rect).filter((element) => {
+            // Filter out the case where the selection rectangle is completely contained
+            // within the element (and does not intersect it).
+            // This is useful, for example, if a very large stroke is used as the background
+            // for another drawing. This prevents the very large stroke from being selected
+            // unless the selection touches one of its edges.
+            return element.intersectsRect(this.rect);
+        });
+    }
+}

package/dist/mjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.d.ts

@@ -0,0 +1,15 @@
+import { Color4, Path, Point2 } from '@js-draw/math';
+import AbstractRenderer from '../../../rendering/renderers/AbstractRenderer';
+import EditorImage from '../../../image/EditorImage';
+import AbstractComponent from '../../../components/AbstractComponent';
+import Viewport from '../../../Viewport';
+export default abstract class SelectionBuilder {
+    abstract onPointerMove(canvasPoint: Point2): void;
+    abstract previewPath(): Path;
+    /** Returns the components currently in the selection bounds. Used by {@link resolve}. */
+    protected abstract resolveInternal(image: EditorImage): AbstractComponent[];
+    /** Renders a preview of the selection bounds */
+    render(renderer: AbstractRenderer, color: Color4): void;
+    /** Converts the selection preview into a set of selected elements */
+    resolve(image: EditorImage, viewport: Viewport): AbstractComponent[];
+}

package/dist/mjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.mjs

@@ -0,0 +1,36 @@
+import  { pathToRenderable }  from '../../../rendering/RenderablePathSpec.mjs';
+export default class SelectionBuilder {
+    /** Renders a preview of the selection bounds */
+    render(renderer, color) {
+        renderer.drawPath(pathToRenderable(this.previewPath(), { fill: color }));
+    }
+    /** Converts the selection preview into a set of selected elements */
+    resolve(image, viewport) {
+        const path = this.previewPath();
+        const filterComponents = (components) => {
+            return components.filter((component) => {
+                return component.isSelectable();
+            });
+        };
+        let components;
+        // If the bounding box is very small, search for items **near** the bounding box,
+        // rather than in the bounding box.
+        const clickSize = viewport.getSizeOfPixelOnCanvas() * 3;
+        const isClick = path.bbox.maxDimension <= clickSize;
+        if (isClick) {
+            const searchRegionSize = viewport.visibleRect.maxDimension / 200;
+            const minSizeBox = path.bbox.grownBy(searchRegionSize);
+            components = image.getElementsIntersectingRegion(minSizeBox).filter((component) => {
+                return minSizeBox.containsRect(component.getBBox()) || component.intersectsRect(minSizeBox);
+            });
+            components = filterComponents(components);
+            if (components.length > 1) {
+                components = [components[0]];
+            }
+        }
+        else {
+            components = filterComponents(this.resolveInternal(image));
+        }
+        return components;
+    }
+}

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts

@@ -11,10 +11,12 @@ type OnShowContextMenu = (anchor: Point2) => void;
 export default class SelectionMenuShortcut implements SelectionBoxChild {
     private readonly parent;
     private readonly viewport;
+    private readonly icon;
     private localization;
     private element;
+    private button;
     private onClick;
-    constructor(parent: Selection, viewport: Viewport, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
+    constructor(parent: Selection, viewport: Viewport, icon: Element, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
     private initUI;
     addTo(container: HTMLElement): void;
     remove(): void;

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -2,15 +2,17 @@ import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
 const verticalOffset = 40;
 export default class SelectionMenuShortcut {
-    constructor(parent, viewport, showContextMenu, localization) {
+    constructor(parent, viewport, icon, showContextMenu, localization) {
         this.parent = parent;
         this.viewport = viewport;
+        this.icon = icon;
         this.localization = localization;
         this.lastDragPointer = null;
         this.element = document.createElement('div');
         this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}selection-menu`);
         this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
         this.onClick = () => {
+            this.button?.focus({ preventScroll: true });
             const anchor = this.getBBoxCanvasCoords().center;
             showContextMenu(anchor);
         };
@@ -19,16 +21,22 @@ export default class SelectionMenuShortcut {
     }
     initUI() {
         const button = document.createElement('button');
-        button.textContent = '...';
+        this.icon.classList.add('icon');
+        button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;
+        this.button = button;
         // To prevent editor event handlers from conflicting with those for the button,
         // don't register a [click] handler. An onclick handler can be fired incorrectly
         // in this case (in Chrome) after onClick is fired in onDragEnd, leading to a double
         // on-click action.
         button.onkeydown = (event) => {
-            if (event.key === 'Enter')
+            if (event.key === 'Enter') {
+                // .preventDefault prevents [Enter] from activating the first item in the
+                // selection menu.
+                event.preventDefault();
                 this.onClick();
+            }
         };
         this.element.appendChild(button);
         // Update the bounding box of this in response to the new button.
@@ -58,7 +66,8 @@ export default class SelectionMenuShortcut {
         const contentCanvasSize = this.getElementScreenSize().times(toCanvasScale);
         const handleSizeCanvas = verticalOffset / this.viewport.getScaleFactor();
         const topLeft = Vec2.of(parentCanvasRect.x, parentCanvasRect.y - handleSizeCanvas);
-        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y);
+        const minSize = Vec2.of(48, 48).times(toCanvasScale);
+        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y).grownToSize(minSize);
     }
     updatePosition() {
         const bbox = this.getBBoxParentCoords();

package/dist/mjs/tools/SelectionTool/SelectionTool.d.ts

@@ -3,13 +3,18 @@ import Editor from '../../Editor';
 import { ContextMenuEvt, CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../inputEvents';
 import BaseTool from '../BaseTool';
 import Selection from './Selection';
+import { MutableReactiveValue } from '../../util/ReactiveValue';
+import { SelectionMode } from './types';
 export declare const cssPrefix = "selection-tool-";
+export { SelectionMode };
 export default class SelectionTool extends BaseTool {
     private editor;
+    readonly modeValue: MutableReactiveValue<SelectionMode>;
+    private selectionBuilder;
     private handleOverlay;
     private prevSelectionBox;
     private selectionBox;
-    private rebuildSelectionScheduled;
+    private removeSelectionScheduled;
     private startPoint;
     private expandingSelectionBox;
     private shiftKeyPressed;
@@ -17,8 +22,8 @@ export default class SelectionTool extends BaseTool {
     private lastPointer;
     private autoscroller;
     constructor(editor: Editor, description: string);
+    private getSelectionColor;
     private makeSelectionBox;
-    private snapSelectionToGrid;
     private showContextMenu;
     onContextMenu(event: ContextMenuEvt): boolean;
     private selectionBoxHandlingEvt;
@@ -36,7 +41,10 @@ export default class SelectionTool extends BaseTool {
     onCopy(event: CopyEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    /** @returns true if the selection is currently being created by the user. */
+    isSelecting(): boolean;
     getSelectedObjects(): AbstractComponent[];
     setSelection(objects: AbstractComponent[]): void;
+    private clearSelectionNoUpdateEvent;
     clearSelection(): void;
 }

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -1,4 +1,4 @@
-import { Mat33, Vec2 } from '@js-draw/math';
+import { Mat33, Vec2, Color4 } from '@js-draw/math';
 import  { EditorEventType }  from '../../types.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  BaseTool  from '../BaseTool.mjs';
@@ -9,7 +9,12 @@ import  TextComponent  from '../../components/TextComponent.mjs';
 import  { duplicateSelectionShortcut, translateLeftSelectionShortcutId, translateRightSelectionShortcutId, selectAllKeyboardShortcut, sendToBackSelectionShortcut, snapToGridKeyboardShortcutId, translateDownSelectionShortcutId, translateUpSelectionShortcutId, rotateClockwiseSelectionShortcutId, rotateCounterClockwiseSelectionShortcutId, stretchXSelectionShortcutId, shrinkXSelectionShortcutId, shrinkYSelectionShortcutId, stretchYSelectionShortcutId, stretchXYSelectionShortcutId, shrinkXYSelectionShortcutId, }  from '../keybindings.mjs';
 import  ToPointerAutoscroller  from './ToPointerAutoscroller.mjs';
 import  showSelectionContextMenu  from './util/showSelectionContextMenu.mjs';
+import  { MutableReactiveValue }  from '../../util/ReactiveValue.mjs';
+import  { SelectionMode }  from './types.mjs';
+import  LassoSelectionBuilder  from './SelectionBuilders/LassoSelectionBuilder.mjs';
+import  RectSelectionBuilder  from './SelectionBuilders/RectSelectionBuilder.mjs';
 export const cssPrefix = 'selection-tool-';
+export { SelectionMode };
 // Allows users to select/transform portions of the `EditorImage`.
 // With respect to `extend`ing, `SelectionTool` is not stable.
 export default class SelectionTool extends BaseTool {
@@ -19,7 +24,7 @@ export default class SelectionTool extends BaseTool {
         // True if clearing and recreating the selectionBox has been deferred. This is used to prevent the selection
         // from vanishing on pointerdown events that are intended to form other gestures (e.g. long press) that would
         // ultimately restore the selection.
-        this.rebuildSelectionScheduled = false;
+        this.removeSelectionScheduled = false;
         this.startPoint = null; // canvas position
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
@@ -33,6 +38,13 @@ export default class SelectionTool extends BaseTool {
         // Whether the last keypress corresponded to an action that didn't transform the
         // selection (and thus does not need to be finalized on onKeyUp).
         this.hasUnfinalizedTransformFromKeyPress = false;
+        this.modeValue = MutableReactiveValue.fromInitialValue(SelectionMode.Rectangle);
+        this.modeValue.onUpdate(() => {
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
         this.autoscroller = new ToPointerAutoscroller(editor.viewport, (scrollBy) => {
             editor.dispatch(Viewport.transformBy(Mat33.translation(scrollBy)), false);
             // Update the selection box/content to match the new viewport.
@@ -61,26 +73,19 @@ export default class SelectionTool extends BaseTool {
         this.editor.handleKeyEventsFrom(this.handleOverlay);
         this.editor.handlePointerEventsFrom(this.handleOverlay);
     }
-    makeSelectionBox(selectionStartPos) {
+    getSelectionColor() {
+        const colorString = getComputedStyle(this.handleOverlay).getPropertyValue('--selection-background-color');
+        return Color4.fromString(colorString).withAlpha(0.5);
+    }
+    makeSelectionBox(selectedObjects) {
         this.prevSelectionBox = this.selectionBox;
-        this.selectionBox = new Selection(selectionStartPos, this.editor, this.showContextMenu);
+        this.selectionBox = new Selection(selectedObjects, this.editor, this.showContextMenu);
         if (!this.expandingSelectionBox) {
             // Remove any previous selection rects
             this.prevSelectionBox?.cancelSelection();
         }
         this.selectionBox.addTo(this.handleOverlay);
     }
-    snapSelectionToGrid() {
-        if (!this.selectionBox)
-            throw new Error('No selection to snap!');
-        // Snap the top left corner of what we have selected.
-        const topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
-        const snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
-        const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
-        const oldTransform = this.selectionBox.getTransform();
-        this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDelta)));
-        this.selectionBox.finalizeTransform();
-    }
     onContextMenu(event) {
         const canShowSelectionMenu = this.selectionBox
             ?.getScreenRegion()
@@ -99,7 +104,7 @@ export default class SelectionTool extends BaseTool {
             let transforming = false;
             if (this.selectionBox) {
                 if (snapToGrid) {
-                    this.snapSelectionToGrid();
+                    this.selectionBox.snapSelectedObjectsToGrid();
                 }
                 const dragStartResult = this.selectionBox.onDragStart(current);
                 if (dragStartResult) {
@@ -111,7 +116,13 @@ export default class SelectionTool extends BaseTool {
             if (!transforming) {
                 // Shift key: Combine the new and old selection boxes at the end of the gesture.
                 this.expandingSelectionBox = this.shiftKeyPressed;
-                this.rebuildSelectionScheduled = true;
+                this.removeSelectionScheduled = !this.expandingSelectionBox;
+                if (this.modeValue.get() === SelectionMode.Lasso) {
+                    this.selectionBuilder = new LassoSelectionBuilder(current.canvasPos, this.editor.viewport);
+                }
+                else {
+                    this.selectionBuilder = new RectSelectionBuilder(current.canvasPos);
+                }
             }
             else {
                 // Only autoscroll if we're transforming an existing selection
@@ -126,13 +137,12 @@ export default class SelectionTool extends BaseTool {
     }
     onMainPointerUpdated(currentPointer) {
         this.lastPointer = currentPointer;
-        if (this.rebuildSelectionScheduled) {
-            this.rebuildSelectionScheduled = false;
-            this.makeSelectionBox(this.startPoint ?? currentPointer.canvasPos);
-            this.selectionBox?.setHandlesVisible(false);
+        if (this.removeSelectionScheduled) {
+            this.removeSelectionScheduled = false;
+            this.handleOverlay.replaceChildren();
+            this.prevSelectionBox = this.selectionBox;
+            this.selectionBox = null;
         }
-        if (!this.selectionBox)
-            return;
         this.autoscroller.onPointerMove(currentPointer.screenPos);
         if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
             const screenPos = this.editor.viewport.canvasToScreen(this.startPoint);
@@ -142,47 +152,46 @@ export default class SelectionTool extends BaseTool {
             currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
         }
         if (this.selectionBoxHandlingEvt) {
-            this.selectionBox.onDragUpdate(currentPointer);
+            this.selectionBox?.onDragUpdate(currentPointer);
         }
         else {
-            this.selectionBox.setToPoint(currentPointer.canvasPos);
+            this.selectionBuilder?.onPointerMove(currentPointer.canvasPos);
+            this.editor.clearWetInk();
+            this.selectionBuilder?.render(this.editor.display.getWetInkRenderer(), this.getSelectionColor());
         }
     }
     onPointerUp(event) {
         this.onMainPointerUpdated(event.current);
         this.autoscroller.stop();
-        if (!this.selectionBox)
-            return;
-        this.selectionBox.setHandlesVisible(true);
-        // Were we expanding the previous selection?
-        if (this.expandingSelectionBox && this.prevSelectionBox) {
-            // If so, finish expanding.
-            this.expandingSelectionBox = false;
-            this.selectionBox.resolveToObjects();
-            this.setSelection([
-                ...this.selectionBox.getSelectedObjects(),
-                ...this.prevSelectionBox.getSelectedObjects(),
-            ]);
+        if (this.selectionBoxHandlingEvt) {
+            this.selectionBox?.onDragEnd();
         }
-        else {
-            if (!this.selectionBoxHandlingEvt) {
-                // Expand/shrink the selection rectangle, if applicable
-                this.selectionBox.resolveToObjects();
-                this.onSelectionUpdated();
+        else if (this.selectionBuilder) {
+            const newSelection = this.selectionBuilder.resolve(this.editor.image, this.editor.viewport);
+            this.selectionBuilder = null;
+            this.editor.clearWetInk();
+            if (this.expandingSelectionBox && this.selectionBox) {
+                this.setSelection([...this.selectionBox.getSelectedObjects(), ...newSelection]);
             }
             else {
-                this.selectionBox.onDragEnd();
+                this.setSelection(newSelection);
             }
-            this.selectionBoxHandlingEvt = false;
-            this.lastPointer = null;
         }
+        this.expandingSelectionBox = false;
+        this.removeSelectionScheduled = false;
+        this.selectionBoxHandlingEvt = false;
+        this.lastPointer = null;
     }
     onGestureCancel() {
+        if (this.selectionBuilder) {
+            this.selectionBuilder = null;
+            this.editor.clearWetInk();
+        }
         this.autoscroller.stop();
         if (this.selectionBoxHandlingEvt) {
             this.selectionBox?.onDragCancel();
         }
-        else if (!this.rebuildSelectionScheduled) {
+        else if (!this.removeSelectionScheduled) {
             // Revert to the previous selection, if any.
             this.selectionBox?.cancelSelection();
             this.selectionBox = this.prevSelectionBox;
@@ -190,7 +199,7 @@ export default class SelectionTool extends BaseTool {
             this.selectionBox?.recomputeRegion();
             this.prevSelectionBox = null;
         }
-        this.rebuildSelectionScheduled = false;
+        this.removeSelectionScheduled = false;
         this.expandingSelectionBox = false;
         this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
@@ -458,6 +467,10 @@ export default class SelectionTool extends BaseTool {
     getSelection() {
         return this.selectionBox;
     }
+    /** @returns true if the selection is currently being created by the user. */
+    isSelecting() {
+        return !!this.selectionBuilder;
+    }
     getSelectedObjects() {
         return this.selectionBox?.getSelectedObjects() ?? [];
     }
@@ -483,20 +496,20 @@ export default class SelectionTool extends BaseTool {
                 bbox = object.getBBox();
             }
         }
-        if (!bbox) {
-            return;
-        }
-        this.clearSelection();
-        if (!this.selectionBox) {
-            this.makeSelectionBox(bbox.topLeft);
+        this.clearSelectionNoUpdateEvent();
+        if (bbox) {
+            this.makeSelectionBox(objects);
         }
-        this.selectionBox.setSelectedObjects(objects, bbox);
         this.onSelectionUpdated();
     }
-    clearSelection() {
+    // Equivalent to .clearSelection, but does not dispatch an update event
+    clearSelectionNoUpdateEvent() {
         this.handleOverlay.replaceChildren();
         this.prevSelectionBox = this.selectionBox;
         this.selectionBox = null;
+    }
+    clearSelection() {
+        this.clearSelectionNoUpdateEvent();
         this.onSelectionUpdated();
     }
 }