js-draw 1.25.0 → 1.27.1

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

@@ -4,15 +4,17 @@ const math_1 = require("@js-draw/math");
 const SelectionTool_1 = require("./SelectionTool");
 const verticalOffset = 40;
 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(`${SelectionTool_1.cssPrefix}handle`, `${SelectionTool_1.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);
         };
@@ -21,16 +23,22 @@ 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.
@@ -60,7 +68,8 @@ class SelectionMenuShortcut {
         const contentCanvasSize = this.getElementScreenSize().times(toCanvasScale);
         const handleSizeCanvas = verticalOffset / this.viewport.getScaleFactor();
         const topLeft = math_1.Vec2.of(parentCanvasRect.x, parentCanvasRect.y - handleSizeCanvas);
-        return new math_1.Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y);
+        const minSize = math_1.Vec2.of(48, 48).times(toCanvasScale);
+        return new math_1.Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y).grownToSize(minSize);
     }
     updatePosition() {
         const bbox = this.getBBoxParentCoords();

package/dist/cjs/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/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/TextTool.js

@@ -163,12 +163,15 @@ class TextTool extends BaseTool_1.default {
             }
         };
         this.textInputElem.onblur = () => {
+            const input = this.textInputElem;
             // Delay removing the input -- flushInput may be called within a blur()
             // event handler
             const removeInput = false;
-            const input = this.textInputElem;
             this.flushInput(removeInput);
             this.textInputElem = null;
+            if (input) {
+                input.classList.add('-hiding');
+            }
             setTimeout(() => {
                 input?.remove();
             }, 0);
@@ -208,7 +211,7 @@ class TextTool extends BaseTool_1.default {
         if (allPointers.length === 1) {
             // Are we clicking on a text node?
             const canvasPos = current.canvasPos;
-            const halfTestRegionSize = math_1.Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const halfTestRegionSize = math_1.Vec2.of(4, 4).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = math_1.Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
             let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent_1.default);

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/util/assertions.d.ts

@@ -2,7 +2,7 @@
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-export declare const assertUnreachable: (key: never) => never;
+export declare function assertUnreachable(key: never): never;
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -13,15 +13,16 @@ export declare const assertUnreachable: (key: never) => never;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value is number;
+export declare function assertIsNumber(value: unknown, allowNaN?: boolean): asserts value is number;
+export declare function assertIsArray(values: unknown): asserts values is unknown[];
 /**
  * Throws if any of `values` is not of type number.
  */
-export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+export declare function assertIsNumberArray(values: unknown, allowNaN?: boolean): asserts values is number[];
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-export declare const assertIsBoolean: (value: any) => value is boolean;
+export declare function assertIsBoolean(value: unknown): asserts value is boolean;
+export declare function assertTruthy<T>(value: T | null | undefined | false | 0): asserts value is T;
+export declare function assertIsObject(value: unknown): asserts value is Record<string, unknown>;

package/dist/cjs/util/assertions.js

@@ -1,15 +1,22 @@
 "use strict";
+// Note: Arrow functions cannot be used for type assertions. See
+// https://github.com/microsoft/TypeScript/issues/34523
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertIsBoolean = exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable = void 0;
+exports.assertUnreachable = assertUnreachable;
+exports.assertIsNumber = assertIsNumber;
+exports.assertIsArray = assertIsArray;
+exports.assertIsNumberArray = assertIsNumberArray;
+exports.assertIsBoolean = assertIsBoolean;
+exports.assertTruthy = assertTruthy;
+exports.assertIsObject = assertIsObject;
 /**
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-const assertUnreachable = (key) => {
+function assertUnreachable(key) {
     // See https://stackoverflow.com/a/39419171/17055750
     throw new Error(`Should be unreachable. Key: ${key}.`);
-};
-exports.assertUnreachable = assertUnreachable;
+}
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -20,43 +27,42 @@ exports.assertUnreachable = assertUnreachable;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-const assertIsNumber = (value, allowNaN = false) => {
+function assertIsNumber(value, allowNaN = false) {
     if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
         throw new Error('Given value is not a number');
-        // return false;
     }
-    return true;
-};
-exports.assertIsNumber = assertIsNumber;
+}
+function assertIsArray(values) {
+    if (!Array.isArray(values)) {
+        throw new Error('Asserting isArray: Given entity is not an array');
+    }
+}
 /**
  * Throws if any of `values` is not of type number.
  */
-const assertIsNumberArray = (values, allowNaN = false) => {
-    if (typeof values !== 'object') {
-        throw new Error('Asserting isNumberArray: Given entity is not an array');
-    }
-    if (!(0, exports.assertIsNumber)(values['length'])) {
-        return false;
-    }
+function assertIsNumberArray(values, allowNaN = false) {
+    assertIsArray(values);
+    assertIsNumber(values.length);
     for (const value of values) {
-        if (!(0, exports.assertIsNumber)(value, allowNaN)) {
-            return false;
-        }
+        assertIsNumber(value, allowNaN);
     }
-    return true;
-};
-exports.assertIsNumberArray = assertIsNumberArray;
+}
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-const assertIsBoolean = (value) => {
+function assertIsBoolean(value) {
     if (typeof value !== 'boolean') {
         throw new Error('Given value is not a boolean');
-        // return false;
     }
-    return true;
-};
-exports.assertIsBoolean = assertIsBoolean;
+}
+function assertTruthy(value) {
+    if (!value) {
+        throw new Error(`${JSON.stringify(value)} is not truthy`);
+    }
+}
+function assertIsObject(value) {
+    if (typeof value !== 'object') {
+        throw new Error(`AssertIsObject: Given entity is not an object (type = ${typeof value})`);
+    }
+}

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.25.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/Editor.mjs

@@ -1320,7 +1320,7 @@ export class Editor {
                 '',
                 '',
                 '== js-draw ==',
-                mitLicenseAttribution('2023-2024 Henry Heino'),
+                mitLicenseAttribution('2023-2025 Henry Heino'),
                 '',
             ].join('\n'),
             minimized: true,

package/dist/mjs/bundle/bundled.mjs

@@ -1,4 +1,5 @@
-// Main entrypoint for Webpack when building a bundle for release.
+// Main entrypoint for the bundler (ESBuild/Webpack/etc.) when creating the bundled
+// portion of a release.
 import '../styles';
 import  Editor  from '../Editor.mjs';
 export  *  from '../lib.mjs';

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;