js-draw 1.26.0 → 1.27.1

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cssPrefix = void 0;
+exports.SelectionMode = exports.cssPrefix = void 0;
 const math_1 = require("@js-draw/math");
 const types_1 = require("../../types");
 const Viewport_1 = __importDefault(require("../../Viewport"));
@@ -15,6 +15,11 @@ const TextComponent_1 = __importDefault(require("../../components/TextComponent"
 const keybindings_1 = require("../keybindings");
 const ToPointerAutoscroller_1 = __importDefault(require("./ToPointerAutoscroller"));
 const showSelectionContextMenu_1 = __importDefault(require("./util/showSelectionContextMenu"));
+const ReactiveValue_1 = require("../../util/ReactiveValue");
+const types_2 = require("./types");
+Object.defineProperty(exports, "SelectionMode", { enumerable: true, get: function () { return types_2.SelectionMode; } });
+const LassoSelectionBuilder_1 = __importDefault(require("./SelectionBuilders/LassoSelectionBuilder"));
+const RectSelectionBuilder_1 = __importDefault(require("./SelectionBuilders/RectSelectionBuilder"));
 exports.cssPrefix = 'selection-tool-';
 // Allows users to select/transform portions of the `EditorImage`.
 // With respect to `extend`ing, `SelectionTool` is not stable.
@@ -25,7 +30,7 @@ class SelectionTool extends BaseTool_1.default {
         // 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;
@@ -39,6 +44,13 @@ class SelectionTool extends BaseTool_1.default {
         // 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 = ReactiveValue_1.MutableReactiveValue.fromInitialValue(types_2.SelectionMode.Rectangle);
+        this.modeValue.onUpdate(() => {
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+                kind: types_1.EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
         this.autoscroller = new ToPointerAutoscroller_1.default(editor.viewport, (scrollBy) => {
             editor.dispatch(Viewport_1.default.transformBy(math_1.Mat33.translation(scrollBy)), false);
             // Update the selection box/content to match the new viewport.
@@ -67,26 +79,19 @@ class SelectionTool extends BaseTool_1.default {
         this.editor.handleKeyEventsFrom(this.handleOverlay);
         this.editor.handlePointerEventsFrom(this.handleOverlay);
     }
-    makeSelectionBox(selectionStartPos) {
+    getSelectionColor() {
+        const colorString = getComputedStyle(this.handleOverlay).getPropertyValue('--selection-background-color');
+        return math_1.Color4.fromString(colorString).withAlpha(0.5);
+    }
+    makeSelectionBox(selectedObjects) {
         this.prevSelectionBox = this.selectionBox;
-        this.selectionBox = new Selection_1.default(selectionStartPos, this.editor, this.showContextMenu);
+        this.selectionBox = new Selection_1.default(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(math_1.Mat33.translation(snapDelta)));
-        this.selectionBox.finalizeTransform();
-    }
     onContextMenu(event) {
         const canShowSelectionMenu = this.selectionBox
             ?.getScreenRegion()
@@ -105,7 +110,7 @@ class SelectionTool extends BaseTool_1.default {
             let transforming = false;
             if (this.selectionBox) {
                 if (snapToGrid) {
-                    this.snapSelectionToGrid();
+                    this.selectionBox.snapSelectedObjectsToGrid();
                 }
                 const dragStartResult = this.selectionBox.onDragStart(current);
                 if (dragStartResult) {
@@ -117,7 +122,13 @@ class SelectionTool extends BaseTool_1.default {
             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() === types_2.SelectionMode.Lasso) {
+                    this.selectionBuilder = new LassoSelectionBuilder_1.default(current.canvasPos, this.editor.viewport);
+                }
+                else {
+                    this.selectionBuilder = new RectSelectionBuilder_1.default(current.canvasPos);
+                }
             }
             else {
                 // Only autoscroll if we're transforming an existing selection
@@ -132,13 +143,12 @@ class SelectionTool extends BaseTool_1.default {
     }
     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);
@@ -148,47 +158,46 @@ class SelectionTool extends BaseTool_1.default {
             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;
@@ -196,7 +205,7 @@ class SelectionTool extends BaseTool_1.default {
             this.selectionBox?.recomputeRegion();
             this.prevSelectionBox = null;
         }
-        this.rebuildSelectionScheduled = false;
+        this.removeSelectionScheduled = false;
         this.expandingSelectionBox = false;
         this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
@@ -464,6 +473,10 @@ class SelectionTool extends BaseTool_1.default {
     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() ?? [];
     }
@@ -489,20 +502,20 @@ class SelectionTool extends BaseTool_1.default {
                 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();
     }
 }

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

@@ -1,5 +1,9 @@
 import type { Rect2, Point2 } from '@js-draw/math';
 import Pointer from '../../Pointer';
+export declare enum SelectionMode {
+    Lasso = "lasso",
+    Rectangle = "rect"
+}
 export declare enum ResizeMode {
     Both = 0,
     HorizontalOnly = 1,

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

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransformMode = exports.ResizeMode = void 0;
+exports.TransformMode = exports.ResizeMode = exports.SelectionMode = void 0;
+var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["Lasso"] = "lasso";
+    SelectionMode["Rectangle"] = "rect";
+})(SelectionMode || (exports.SelectionMode = SelectionMode = {}));
 var ResizeMode;
 (function (ResizeMode) {
     ResizeMode[ResizeMode["Both"] = 0] = "Both";

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

@@ -7,7 +7,7 @@ export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
-export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectionTool, SelectionMode } from './SelectionTool/SelectionTool';
 export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool, EraserMode } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';

package/dist/cjs/tools/lib.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserMode = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = exports.InputMapper = void 0;
+exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserMode = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionMode = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = exports.InputMapper = void 0;
 var InputMapper_1 = require("./InputFilter/InputMapper");
 Object.defineProperty(exports, "InputMapper", { enumerable: true, get: function () { return __importDefault(InputMapper_1).default; } });
 var BaseTool_1 = require("./BaseTool");
@@ -25,6 +25,7 @@ var TextTool_1 = require("./TextTool");
 Object.defineProperty(exports, "TextTool", { enumerable: true, get: function () { return __importDefault(TextTool_1).default; } });
 var SelectionTool_1 = require("./SelectionTool/SelectionTool");
 Object.defineProperty(exports, "SelectionTool", { enumerable: true, get: function () { return __importDefault(SelectionTool_1).default; } });
+Object.defineProperty(exports, "SelectionMode", { enumerable: true, get: function () { return SelectionTool_1.SelectionMode; } });
 var SelectAllShortcutHandler_1 = require("./SelectionTool/SelectAllShortcutHandler");
 Object.defineProperty(exports, "SelectAllShortcutHandler", { enumerable: true, get: function () { return __importDefault(SelectAllShortcutHandler_1).default; } });
 var Eraser_1 = require("./Eraser");

package/dist/cjs/util/ReactiveValue.js

@@ -72,9 +72,7 @@ class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef
-            ? new window.WeakRef(result)
-            : { deref: () => result };
+        const resultRef = typeof WeakRef !== 'undefined' ? new WeakRef(result) : { deref: () => result };
         for (const value of sourceValues) {
             const listener = value.onUpdate(() => {
                 // Use resultRef to allow `result` to be garbage collected
@@ -118,9 +116,7 @@ exports.ReactiveValue = ReactiveValue;
 class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {
         const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
-        const childRef = window.WeakRef
-            ? new window.WeakRef(child)
-            : { deref: () => child };
+        const childRef = typeof WeakRef !== 'undefined' ? new WeakRef(child) : { deref: () => child };
         // When the source is updated...
         const sourceListener = sourceValue.onUpdate((newValue) => {
             const childValue = childRef.deref();

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.26.0',
+    number: '1.27.1',
 };

package/dist/mjs/Editor.d.ts

@@ -116,8 +116,6 @@ export interface EditorSettings {
          *
          * If not given, the default file picker shown by a [file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
          * is shown.
-         *
-         * @beta -- API may change between minor releases.
          */
         showImagePicker?: ShowCustomFilePickerCallback;
     } | null;

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

@@ -4,6 +4,7 @@ import { LineSegment2, Mat33, Path, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 import Viewport from '../Viewport';
+import { Point2 } from '@js-draw/math';
 export type LoadSaveData = string[] | Record<symbol, string | number>;
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
@@ -27,6 +28,12 @@ export declare enum 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.
  */
 export default abstract class AbstractComponent {
     private readonly componentKind;
@@ -113,6 +120,14 @@ export default abstract class AbstractComponent {
      * this function.
      */
     intersectsRect(rect: Rect2): boolean;
+    /**
+     * 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(): Point2[];
     isSelectable(): boolean;
     isBackground(): boolean;
     getProportionalRenderingTime(): number;

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/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/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;
 }