js-draw 1.25.0 → 1.27.1

package/dist/mjs/components/AbstractComponent.mjs

@@ -28,6 +28,12 @@ export var ComponentSizingMode;
 })(ComponentSizingMode || (ComponentSizingMode = {}));
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
+ *
+ * In addition to the `abstract` methods, there are a few methods that should be
+ * overridden when creating a selectable/erasable subclass:
+ * - {@link keyPoints}: Overriding this may improve how the component interacts with the selection tool.
+ * - {@link withRegionErased}: Override/implement this to allow the component to be partially erased
+ *    by the partial stroke eraser.
  */
 class AbstractComponent {
     constructor(
@@ -136,6 +142,16 @@ class AbstractComponent {
         const testLines = rect.getEdges();
         return testLines.some((edge) => this.intersects(edge));
     }
+    /**
+     * Returns a selection of points within this object. Each contiguous section
+     * of this object should have a point in the returned array.
+     *
+     * Subclasses should override this method if the center of the bounding box is
+     * not contained within the object.
+     */
+    keyPoints() {
+        return [this.getBBox().center];
+    }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
         return true;

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

@@ -54,6 +54,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     /** @beta -- May fail for concave `path`s */
     withRegionErased(eraserPath: Path, viewport: Viewport): Stroke[];
     intersects(line: LineSegment2): boolean;
+    keyPoints(): import("@js-draw/math").Vec3[];
     intersectsRect(rect: Rect2): boolean;
     private simplifiedPath;
     private computeSimplifiedPathFor;

package/dist/mjs/components/Stroke.mjs

@@ -294,6 +294,13 @@ export default class Stroke extends AbstractComponent {
         }
         return false;
     }
+    keyPoints() {
+        return this.parts
+            .map((part) => {
+            return part.startPoint;
+        })
+            .flat();
+    }
     intersectsRect(rect) {
         // AbstractComponent::intersectsRect can be inexact for strokes with non-zero
         // stroke radius (has many false negatives). As such, additional checks are

package/dist/mjs/image/EditorImage.d.ts

@@ -225,7 +225,7 @@ export declare class ImageNode {
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
     protected getChildrenIntersectingRegion(region: Rect2, isTooSmallFilter?: TooSmallToRenderCheck): ImageNode[];
-    getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    getChildrenOrSelfIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     /**
      * Returns a list of `ImageNode`s with content (and thus no children).
      * Override getChildrenIntersectingRegion to customize how this method
@@ -258,6 +258,7 @@ export declare class RootImageNode extends ImageNode {
     private fullscreenChildren;
     private dataComponents;
     protected getChildrenIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getChildrenOrSelfIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getLeaves(): ImageNode[];
     removeChild(child: ImageNode): void;
     getChildWithContent(target: AbstractComponent): ImageNode | null;

package/dist/mjs/image/EditorImage.mjs

@@ -538,11 +538,11 @@ export class ImageNode {
             return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
     }
-    getChildrenOrSelfIntersectingRegion(region) {
-        if (this.content) {
+    getChildrenOrSelfIntersectingRegion(region, isTooSmall) {
+        if (this.content && this.bbox.intersects(region) && !isTooSmall?.(this.bbox)) {
             return [this];
         }
-        return this.getChildrenIntersectingRegion(region);
+        return this.getChildrenIntersectingRegion(region, isTooSmall);
     }
     /**
      * Returns a list of `ImageNode`s with content (and thus no children).
@@ -560,10 +560,17 @@ export class ImageNode {
         workList.push(this);
         while (workList.length > 0) {
             const current = workList.pop();
-            if (current.content !== null) {
-                result.push(current);
+            // Split the children into leaves and non-leaves
+            const processed = current.getChildrenOrSelfIntersectingRegion(region, isTooSmall);
+            for (const item of processed) {
+                if (item.content) {
+                    result.push(item);
+                }
+                else {
+                    // Non-leaves need to be processed
+                    workList.push(item);
+                }
             }
-            workList.push(...current.getChildrenIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
@@ -917,6 +924,14 @@ export class RootImageNode extends ImageNode {
         }
         return result;
     }
+    getChildrenOrSelfIntersectingRegion(region, _isTooSmall) {
+        const content = this.getContent();
+        // Fullscreen components always intersect/contain
+        if (content && content.getSizingMode() === ComponentSizingMode.FillScreen) {
+            return [this];
+        }
+        return super.getChildrenOrSelfIntersectingRegion(region, _isTooSmall);
+    }
     getLeaves() {
         const leaves = super.getLeaves();
         // Add fullscreen/data components — this method should

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -31,6 +31,7 @@ import { Color4 } from '@js-draw/math';
 import  { toolbarCSSPrefix }  from './constants.mjs';
 import  SaveActionWidget  from './widgets/SaveActionWidget.mjs';
 import  ExitActionWidget  from './widgets/ExitActionWidget.mjs';
+import  { assertIsObject, assertTruthy }  from '../util/assertions.mjs';
 /**
  * Abstract base class for js-draw editor toolbars.
  *
@@ -205,8 +206,12 @@ class AbstractToolbar {
      */
     deserializeState(state) {
         const data = JSON.parse(state);
+        assertIsObject(data);
+        assertTruthy(data);
         const rootId = AbstractToolbar.rootToolbarId;
-        this.deserializeInternal(data[rootId]);
+        if (rootId in data && typeof data[rootId] !== 'undefined') {
+            this.deserializeInternal(data[rootId]);
+        }
         for (const widgetId in data) {
             if (widgetId === rootId) {
                 continue;
@@ -215,7 +220,9 @@ class AbstractToolbar {
                 console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
                 continue;
             }
-            __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+            if (typeof data[widgetId] === 'object' && data[widgetId]) {
+                __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+            }
         }
     }
     /**

package/dist/mjs/toolbar/IconProvider.d.ts

@@ -2,6 +2,7 @@ import { Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { PenStyle } from '../tools/Pen';
 import { EraserMode } from '../tools/Eraser';
+import { SelectionMode } from '../tools/SelectionTool/types';
 export type IconElemType = HTMLImageElement | SVGElement;
 /**
  * Provides icons that can be used in the toolbar and other locations.
@@ -41,7 +42,7 @@ export default class IconProvider {
     makeRedoIcon(): IconElemType;
     makeDropdownIcon(): IconElemType;
     makeEraserIcon(eraserSize?: number, mode?: EraserMode): IconElemType;
-    makeSelectionIcon(): IconElemType;
+    makeSelectionIcon(mode?: SelectionMode): IconElemType;
     makeRotateIcon(): IconElemType;
     makeHandToolIcon(): IconElemType;
     makeTouchPanningIcon(): IconElemType;

package/dist/mjs/toolbar/IconProvider.mjs

@@ -11,6 +11,7 @@ import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBu
 import  { makePolylineBuilder }  from '../components/builders/PolylineBuilder.mjs';
 import  { EraserMode }  from '../tools/Eraser.mjs';
 import  { createSvgElement, createSvgElements, createSvgPaths }  from '../util/createElement.mjs';
+import  { SelectionMode }  from '../tools/SelectionTool/types.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 let checkerboardIdCounter = 0;
 const makeCheckerboardPattern = () => {
@@ -164,15 +165,24 @@ class IconProvider {
         });
         return icon;
     }
-    makeSelectionIcon() {
+    makeSelectionIcon(mode = SelectionMode.Rectangle) {
         const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw a cursor-like shape
-        icon.innerHTML = `
-		<g>
-			<rect x="10" y="10" width="70" height="70" fill="pink" stroke="black"/>
-			<rect x="75" y="75" width="10" height="10" fill="white" stroke="black"/>
-		</g>
-		`;
+        if (mode === SelectionMode.Rectangle) {
+            icon.innerHTML = `
+			<g>
+				<rect x="10" y="10" width="70" height="70" fill="pink" stroke="black" stroke-dasharray="32 9"/>
+				<rect x="75" y="75" width="10" height="10" fill="white" stroke="black"/>
+			</g>
+			`;
+        }
+        else {
+            icon.innerHTML = `
+			<g>
+				<rect x="10" y="10" width="76" height="76" rx="50" stroke-dasharray="32 9" fill="pink" stroke="black"/>
+				<rect x="71" y="71" width="10" height="10" fill="white" stroke="black"/>
+			</g>
+			`;
+        }
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }

package/dist/mjs/toolbar/localization.d.ts

@@ -44,6 +44,8 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     resetView: string;
     reformatSelection: string;
     selectionToolKeyboardShortcuts: string;
+    selectionTool__lassoSelect: string;
+    selectionTool__lassoSelect__help: string;
     paste: string;
     documentProperties: string;
     backgroundColor: string;

package/dist/mjs/toolbar/localization.mjs

@@ -34,6 +34,8 @@ export const defaultToolbarLocalization = {
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     colorSelectionCanceledAnnouncement: 'Color selection canceled',
+    selectionTool__lassoSelect: 'Freeform selection',
+    selectionTool__lassoSelect__help: 'When enabled, dragging creates a freeform (lasso) selection.',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     documentProperties: 'Page',
     backgroundColor: 'Background color',

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -16,6 +16,7 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
 import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
 import  HelpDisplay  from '../utils/HelpDisplay.mjs';
+import  { assertIsObject }  from '../../util/assertions.mjs';
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -446,10 +447,14 @@ class BaseWidget {
      */
     deserializeFrom(state) {
         if (state.subwidgetState) {
+            assertIsObject(state.subwidgetState);
             // Deserialize all subwidgets.
             for (const subwidgetId in state.subwidgetState) {
                 if (subwidgetId in this.subWidgets) {
-                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+                    const serializedSubwidgetState = state.subwidgetState[subwidgetId];
+                    if (serializedSubwidgetState) {
+                        this.subWidgets[subwidgetId].deserializeFrom(serializedSubwidgetState);
+                    }
                 }
             }
         }

package/dist/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -28,7 +28,7 @@ const makeZoomControl = (localizationTable, editor, helpDisplay) => {
             zoomLevel = Math.round(zoomLevel * 1000) / 1000;
         }
         if (zoomLevel !== lastZoom) {
-            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            zoomLevelDisplay.textContent = localizationTable.zoomLevel(zoomLevel);
             lastZoom = zoomLevel;
         }
     };
@@ -189,10 +189,10 @@ export default class HandToolWidget extends BaseToolWidget {
     }
     deserializeFrom(state) {
         if (state.touchPanning !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, !!state.touchPanning);
         }
         if (state.rotationLocked !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, !!state.rotationLocked);
         }
         super.deserializeFrom(state);
     }

package/dist/mjs/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/mjs/toolbar/widgets/SelectionToolWidget.mjs

@@ -1,13 +1,16 @@
 import { Color4 } from '@js-draw/math';
 import  { isRestylableComponent }  from '../../components/RestylableComponent.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  { SelectionMode }  from '../../tools/SelectionTool/SelectionTool.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  makeColorInput  from './components/makeColorInput.mjs';
-import  ActionButtonWidget  from './ActionButtonWidget.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  { resizeImageToSelectionKeyboardShortcut }  from './keybindings.mjs';
 import  makeSeparator  from './components/makeSeparator.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
+import  makeButtonGrid  from './components/makeButtonGrid.mjs';
+import  { MutableReactiveValue }  from '../../util/ReactiveValue.mjs';
 const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     const container = document.createElement('div');
     container.classList.add('selection-format-menu', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}indentedList`);
@@ -63,48 +66,63 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
         },
     };
 };
+class LassoSelectToggle extends BaseWidget {
+    constructor(editor, tool, localizationTable) {
+        super(editor, 'selection-mode-toggle', localizationTable);
+        this.tool = tool;
+        editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
+            if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+                this.setSelected(tool.modeValue.get() === SelectionMode.Lasso);
+            }
+        });
+        this.setSelected(false);
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
+    setModeFlag(enabled) {
+        this.tool.modeValue.set(enabled ? SelectionMode.Lasso : SelectionMode.Rectangle);
+    }
+    handleClick() {
+        this.setModeFlag(!this.isSelected());
+    }
+    getTitle() {
+        return this.localizationTable.selectionTool__lassoSelect;
+    }
+    createIcon() {
+        return this.editor.icons.makeSelectionIcon(SelectionMode.Lasso);
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+    getHelpText() {
+        return this.localizationTable.selectionTool__lassoSelect__help;
+    }
+}
 export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'selection-tool-widget', localization);
         this.tool = tool;
         this.updateFormatMenu = () => { };
-        const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
-            this.resizeImageToSelection();
-        }, localization);
-        resizeButton.setHelpText(this.localizationTable.selectionDropdown__resizeToHelpText);
-        const deleteButton = new ActionButtonWidget(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(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 = MutableReactiveValue.fromInitialValue(hasSelection());
         // Enable/disable actions based on whether items are selected
         this.editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind !== 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();
@@ -130,16 +148,66 @@ export default class SelectionToolWidget extends BaseToolWidget {
         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 = makeButtonGrid([
+            {
+                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(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
         dropdown.appendChild(controlsContainer);
+        // Actions (duplicate, delete, etc.)
+        makeSeparator().addTo(controlsContainer);
+        const actions = this.createSelectionActions(helpDisplay);
+        controlsContainer.appendChild(actions.container);
+        // Formatting
         makeSeparator(this.localizationTable.reformatSelection).addTo(controlsContainer);
         const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
         formatMenu.addTo(controlsContainer);
@@ -150,4 +218,17 @@ export default class SelectionToolWidget extends BaseToolWidget {
         formatMenu.update();
         return true;
     }
+    serializeState() {
+        return {
+            ...super.serializeState(),
+            selectionMode: this.tool.modeValue.get(),
+        };
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        const isValidSelectionMode = Object.values(SelectionMode).includes(state.selectionMode);
+        if (isValidSelectionMode) {
+            this.tool.modeValue.set(state.selectionMode);
+        }
+    }
 }

package/dist/mjs/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/mjs/toolbar/widgets/components/makeButtonGrid.mjs

@@ -0,0 +1,35 @@
+import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
+/**
+ * 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);
+        addLongPressOrHoverCssClasses(buttonElement);
+        buttonSpec.onCreated?.(buttonElement);
+        return buttonElement;
+    };
+    buttonSpecs.map(makeButton);
+    return {
+        container,
+    };
+};
+export default makeButtonGrid;

package/dist/mjs/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[];
 }