js-draw 1.25.0 → 1.27.1

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

@@ -4,14 +4,21 @@ import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import HelpDisplay from '../utils/HelpDisplay';
+import { SavedToolbuttonState } from './BaseWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
     private updateFormatMenu;
+    private hasSelectionValue;
     constructor(editor: Editor, tool: SelectionTool, localization?: ToolbarLocalization);
     private resizeImageToSelection;
     protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
     protected getHelpText(): string;
+    protected createSelectionActions(helpDisplay?: HelpDisplay): {
+        container: HTMLDivElement;
+    };
     protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }

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

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
 const RestylableComponent_1 = require("../../components/RestylableComponent");
 const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
+const SelectionTool_1 = require("../../tools/SelectionTool/SelectionTool");
 const types_1 = require("../../types");
 const makeColorInput_1 = __importDefault(require("./components/makeColorInput"));
-const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
 const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
 const keybindings_1 = require("./keybindings");
 const makeSeparator_1 = __importDefault(require("./components/makeSeparator"));
 const constants_1 = require("../constants");
+const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+const makeButtonGrid_1 = __importDefault(require("./components/makeButtonGrid"));
+const ReactiveValue_1 = require("../../util/ReactiveValue");
 const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     const container = document.createElement('div');
     container.classList.add('selection-format-menu', `${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}indentedList`);
@@ -68,48 +71,63 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
         },
     };
 };
+class LassoSelectToggle extends BaseWidget_1.default {
+    constructor(editor, tool, localizationTable) {
+        super(editor, 'selection-mode-toggle', localizationTable);
+        this.tool = tool;
+        editor.notifier.on(types_1.EditorEventType.ToolUpdated, (toolEvt) => {
+            if (toolEvt.kind === types_1.EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+                this.setSelected(tool.modeValue.get() === SelectionTool_1.SelectionMode.Lasso);
+            }
+        });
+        this.setSelected(false);
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
+    setModeFlag(enabled) {
+        this.tool.modeValue.set(enabled ? SelectionTool_1.SelectionMode.Lasso : SelectionTool_1.SelectionMode.Rectangle);
+    }
+    handleClick() {
+        this.setModeFlag(!this.isSelected());
+    }
+    getTitle() {
+        return this.localizationTable.selectionTool__lassoSelect;
+    }
+    createIcon() {
+        return this.editor.icons.makeSelectionIcon(SelectionTool_1.SelectionMode.Lasso);
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+    getHelpText() {
+        return this.localizationTable.selectionTool__lassoSelect__help;
+    }
+}
 class SelectionToolWidget extends BaseToolWidget_1.default {
     constructor(editor, tool, localization) {
         super(editor, tool, 'selection-tool-widget', localization);
         this.tool = tool;
         this.updateFormatMenu = () => { };
-        const resizeButton = new ActionButtonWidget_1.default(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
-            this.resizeImageToSelection();
-        }, localization);
-        resizeButton.setHelpText(this.localizationTable.selectionDropdown__resizeToHelpText);
-        const deleteButton = new ActionButtonWidget_1.default(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
-            const selection = this.tool.getSelection();
-            this.editor.dispatch(selection.deleteSelectedObjects());
-            this.tool.clearSelection();
-        }, localization);
-        deleteButton.setHelpText(this.localizationTable.selectionDropdown__deleteHelpText);
-        const duplicateButton = new ActionButtonWidget_1.default(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, async () => {
+        this.addSubWidget(new LassoSelectToggle(editor, tool, this.localizationTable));
+        const hasSelection = () => {
             const selection = this.tool.getSelection();
-            this.editor.dispatch(await selection.duplicateSelectedObjects());
-            this.setDropdownVisible(false);
-        }, localization);
-        duplicateButton.setHelpText(this.localizationTable.selectionDropdown__duplicateHelpText);
-        this.addSubWidget(resizeButton);
-        this.addSubWidget(deleteButton);
-        this.addSubWidget(duplicateButton);
-        const updateDisabled = (disabled) => {
-            resizeButton.setDisabled(disabled);
-            deleteButton.setDisabled(disabled);
-            duplicateButton.setDisabled(disabled);
+            return !!selection && selection.getSelectedItemCount() > 0;
         };
-        updateDisabled(true);
+        this.hasSelectionValue = ReactiveValue_1.MutableReactiveValue.fromInitialValue(hasSelection());
         // Enable/disable actions based on whether items are selected
         this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind !== types_1.EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
             }
             if (toolEvt.tool === this.tool) {
-                const selection = this.tool.getSelection();
-                const hasSelection = selection && selection.getSelectedItemCount() > 0;
-                updateDisabled(!hasSelection);
+                this.hasSelectionValue.set(hasSelection());
                 this.updateFormatMenu();
             }
         });
+        tool.modeValue.onUpdate(() => {
+            this.updateIcon();
+        });
     }
     resizeImageToSelection() {
         const selection = this.tool.getSelection();
@@ -135,16 +153,66 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
         return this.localizationTable.select;
     }
     createIcon() {
-        return this.editor.icons.makeSelectionIcon();
+        return this.editor.icons.makeSelectionIcon(this.tool.modeValue.get());
     }
     getHelpText() {
         return this.localizationTable.selectionDropdown__baseHelpText;
     }
+    createSelectionActions(helpDisplay) {
+        const icons = this.editor.icons;
+        const grid = (0, makeButtonGrid_1.default)([
+            {
+                icon: () => icons.makeDeleteSelectionIcon(),
+                label: this.localizationTable.deleteSelection,
+                onCreated: (button) => {
+                    helpDisplay?.registerTextHelpForElement(button, this.localizationTable.selectionDropdown__deleteHelpText);
+                },
+                onClick: () => {
+                    const selection = this.tool.getSelection();
+                    this.editor.dispatch(selection.deleteSelectedObjects());
+                    this.tool.clearSelection();
+                },
+                enabled: this.hasSelectionValue,
+            },
+            {
+                icon: () => icons.makeDuplicateSelectionIcon(),
+                label: this.localizationTable.duplicateSelection,
+                onCreated: (button) => {
+                    helpDisplay?.registerTextHelpForElement(button, this.localizationTable.selectionDropdown__duplicateHelpText);
+                },
+                onClick: async () => {
+                    const selection = this.tool.getSelection();
+                    const command = await selection?.duplicateSelectedObjects();
+                    if (command) {
+                        this.editor.dispatch(command);
+                    }
+                },
+                enabled: this.hasSelectionValue,
+            },
+            {
+                icon: () => icons.makeResizeImageToSelectionIcon(),
+                label: this.localizationTable.resizeImageToSelection,
+                onCreated: (button) => {
+                    helpDisplay?.registerTextHelpForElement(button, this.localizationTable.selectionDropdown__resizeToHelpText);
+                },
+                onClick: () => {
+                    this.resizeImageToSelection();
+                },
+                enabled: this.hasSelectionValue,
+            },
+        ], 3);
+        return { container: grid.container };
+    }
     fillDropdown(dropdown, helpDisplay) {
         super.fillDropdown(dropdown, helpDisplay);
         const controlsContainer = document.createElement('div');
         controlsContainer.classList.add(`${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         dropdown.appendChild(controlsContainer);
+        // Actions (duplicate, delete, etc.)
+        (0, makeSeparator_1.default)().addTo(controlsContainer);
+        const actions = this.createSelectionActions(helpDisplay);
+        controlsContainer.appendChild(actions.container);
+        // Formatting
         (0, makeSeparator_1.default)(this.localizationTable.reformatSelection).addTo(controlsContainer);
         const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
         formatMenu.addTo(controlsContainer);
@@ -155,5 +223,18 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
         formatMenu.update();
         return true;
     }
+    serializeState() {
+        return {
+            ...super.serializeState(),
+            selectionMode: this.tool.modeValue.get(),
+        };
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        const isValidSelectionMode = Object.values(SelectionTool_1.SelectionMode).includes(state.selectionMode);
+        if (isValidSelectionMode) {
+            this.tool.modeValue.set(state.selectionMode);
+        }
+    }
 }
 exports.default = SelectionToolWidget;

package/dist/cjs/toolbar/widgets/components/makeButtonGrid.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveValue } from '../../../util/ReactiveValue';
+import { IconElemType } from '../../IconProvider';
+interface Button {
+    icon: () => IconElemType;
+    label: string;
+    onClick: () => void;
+    onCreated?: (button: HTMLElement) => void;
+    enabled?: ReactiveValue<boolean>;
+}
+/**
+ * Creates HTML `button` elements from `buttonSpecs` and displays them in a
+ * grid with `columnCount` columns.
+ */
+declare const makeButtonGrid: (buttonSpecs: Button[], columnCount: number) => {
+    container: HTMLDivElement;
+};
+export default makeButtonGrid;

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../../util/addLongPressOrHoverCssClasses"));
+/**
+ * Creates HTML `button` elements from `buttonSpecs` and displays them in a
+ * grid with `columnCount` columns.
+ */
+const makeButtonGrid = (buttonSpecs, columnCount) => {
+    const container = document.createElement('div');
+    container.classList.add('toolbar-button-grid');
+    container.style.setProperty('--column-count', `${columnCount}`);
+    const makeButton = (buttonSpec) => {
+        const buttonElement = document.createElement('button');
+        buttonElement.classList.add('button');
+        const iconElement = buttonSpec.icon();
+        iconElement.classList.add('icon');
+        const labelElement = document.createElement('label');
+        labelElement.textContent = buttonSpec.label;
+        labelElement.classList.add('button-label-text');
+        buttonElement.onclick = buttonSpec.onClick;
+        if (buttonSpec.enabled) {
+            buttonSpec.enabled.onUpdateAndNow((enabled) => {
+                buttonElement.disabled = !enabled;
+            });
+        }
+        buttonElement.replaceChildren(iconElement, labelElement);
+        container.appendChild(buttonElement);
+        (0, addLongPressOrHoverCssClasses_1.default)(buttonElement);
+        buttonSpec.onCreated?.(buttonElement);
+        return buttonElement;
+    };
+    buttonSpecs.map(makeButton);
+    return {
+        container,
+    };
+};
+exports.default = makeButtonGrid;

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

@@ -20,7 +20,7 @@ export default class Selection {
     private innerContainer;
     private backgroundElem;
     private hasParent;
-    constructor(startPoint: Point2, editor: Editor, showContextMenu: (anchor: Point2) => void);
+    constructor(selectedElems: AbstractComponent[], editor: Editor, showContextMenu: (anchor: Point2) => void);
     getBackgroundElem(): HTMLElement;
     getTransform(): Mat33;
     get preTransformRegion(): Rect2;
@@ -43,7 +43,6 @@ export default class Selection {
     sendToBack(): SerializableCommand | null;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
-    resolveToObjects(): boolean;
     recomputeRegion(): boolean;
     padRegion(): void;
     getMinCanvasSize(): number;
@@ -63,10 +62,10 @@ export default class Selection {
     private selectionDuplicatedAnimationTimeout;
     private runSelectionDuplicatedAnimation;
     duplicateSelectedObjects(): Promise<Command>;
+    snapSelectedObjectsToGrid(): void;
     setHandlesVisible(showHandles: boolean): void;
     addTo(elem: HTMLElement): void;
     setToPoint(point: Point2): void;
     cancelSelection(): void;
-    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
     getSelectedObjects(): AbstractComponent[];
 }

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

@@ -57,7 +57,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
@@ -71,7 +71,9 @@ class Selection {
         this.activeHandle = null;
         this.backgroundDragging = false;
         this.selectionDuplicatedAnimationTimeout = null;
-        this.originalRegion = new math_1.Rect2(startPoint.x, startPoint.y, 0, 0);
+        selectedElems = [...selectedElems];
+        this.selectedElems = selectedElems;
+        this.originalRegion = math_1.Rect2.empty;
         this.transformers = {
             drag: new TransformMode_1.DragTransformer(editor, this),
             resize: new TransformMode_1.ResizeTransformer(editor, this),
@@ -110,17 +112,18 @@ 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());
-        const menuToggleButton = new SelectionMenuShortcut_1.default(this, this.editor.viewport, showContextMenu, this.editor.localization);
+        const menuToggleButton = new SelectionMenuShortcut_1.default(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
@@ -243,34 +246,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 = math_1.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 = math_1.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() {
@@ -392,6 +367,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;
@@ -492,6 +471,7 @@ class Selection {
         if (!wasTransforming) {
             this.runSelectionDuplicatedAnimation();
         }
+        let command;
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
@@ -501,16 +481,30 @@ class Selection {
             await tmpApplyCommand.apply(this.editor);
             // Show items again
             this.addRemoveSelectionFromImage(true);
-        }
-        const duplicateCommand = new Duplicate_1.default(this.selectedElems);
-        if (wasTransforming) {
+            // With the transformation applied, create the duplicates
+            command = (0, uniteCommands_1.default)(this.selectedElems.map((elem) => {
+                return EditorImage_1.default.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_1.default(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(math_1.Mat33.translation(snapDelta)));
+        this.finalizeTransform();
     }
     setHandlesVisible(showHandles) {
         if (!showHandles) {
@@ -540,16 +534,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/cjs/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/cjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const math_2 = require("@js-draw/math");
+const SelectionBuilder_1 = __importDefault(require("./SelectionBuilder"));
+/**
+ * Creates lasso selections.
+ */
+class LassoSelectionBuilder extends SelectionBuilder_1.default {
+    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: math_2.PathCommandType.LineTo, point };
+        });
+        pathCommands.push({
+            kind: math_2.PathCommandType.LineTo,
+            point: this.lastPoint,
+        });
+        return new math_1.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);
+    }
+}
+exports.default = LassoSelectionBuilder;

package/dist/cjs/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/cjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const SelectionBuilder_1 = __importDefault(require("./SelectionBuilder"));
+/**
+ * Creates rectangle selections
+ */
+class RectSelectionBuilder extends SelectionBuilder_1.default {
+    constructor(startPoint) {
+        super();
+        this.rect = math_1.Rect2.fromCorners(startPoint, startPoint);
+    }
+    onPointerMove(canvasPoint) {
+        this.rect = this.rect.grownToPoint(canvasPoint);
+    }
+    previewPath() {
+        return math_1.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);
+        });
+    }
+}
+exports.default = RectSelectionBuilder;

package/dist/cjs/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/cjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const RenderablePathSpec_1 = require("../../../rendering/RenderablePathSpec");
+class SelectionBuilder {
+    /** Renders a preview of the selection bounds */
+    render(renderer, color) {
+        renderer.drawPath((0, RenderablePathSpec_1.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;
+    }
+}
+exports.default = SelectionBuilder;

package/dist/cjs/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;