js-draw 1.26.0 → 1.27.1

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

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

package/dist/mjs/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/mjs/tools/SelectionTool/types.mjs

@@ -1,3 +1,8 @@
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["Lasso"] = "lasso";
+    SelectionMode["Rectangle"] = "rect";
+})(SelectionMode || (SelectionMode = {}));
 export var ResizeMode;
 (function (ResizeMode) {
     ResizeMode[ResizeMode["Both"] = 0] = "Both";

package/dist/mjs/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/mjs/tools/lib.mjs

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

package/dist/mjs/util/ReactiveValue.mjs

@@ -69,9 +69,7 @@ export 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
@@ -114,9 +112,7 @@ export class ReactiveValue {
 export 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/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.26.0',
+    number: '1.27.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.26.0",
+	"version": "1.27.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.26.0",
+		"@js-draw/math": "^1.27.1",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.26.0",
+		"@js-draw/build-tool": "^1.27.1",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "6529cad584ca93a992f2576a43f25af48da3d707"
+	"gitHead": "e11574b7b329e7867358c400457a3d99b1d2c469"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -340,7 +340,7 @@
 		transition: 0.2s ease box-shadow;
 
 		&:not(:disabled):hover {
-			box-shadow: 0 1px 2px var(--shadow-color);
+			box-shadow: 0 0px 2px var(--shadow-color);
 		}
 
 		&:disabled {
@@ -360,6 +360,11 @@
 		@include labelVisibleOnHover.label-visible-on-hover('label > .button-label-text');
 	}
 
+	.toolbar-button-grid button {
+		--button-label-hover-offset-y: 0;
+		@include labelVisibleOnHover.label-visible-on-hover('label');
+	}
+
 	.toolbar-help-overlay-button {
 		align-items: last baseline;
 	}

package/src/toolbar/widgets/components/components.scss

@@ -4,3 +4,4 @@
 @use './makeFileInput.scss';
 @use './makeGridSelector.scss';
 @use './makeSnappedList.scss';
+@use './makeButtonGrid.scss';

package/src/toolbar/widgets/components/makeButtonGrid.scss

@@ -0,0 +1,25 @@
+.toolbar-button-grid {
+	display: grid;
+	grid-template-columns: repeat(var(--column-count), 1fr);
+	justify-items: center;
+	--button-size: 30px;
+
+	> .button {
+		font-size: 1em;
+		width: min-content;
+
+		> .icon {
+			max-width: var(--button-size);
+			max-height: var(--button-size);
+
+			// Ensures that all icons have the same base size
+			width: 48px;
+			height: 48px;
+		}
+
+		> label {
+			display: block;
+			font-weight: normal;
+		}
+	}
+}

package/src/tools/SelectionTool/SelectionTool.scss

@@ -156,6 +156,7 @@
 
 		&.-empty {
 			opacity: 0;
+			display: none;
 		}
 
 		&.-hide-handles .selection-tool-handle {

package/src/tools/util/createMenuOverlay.scss

@@ -31,7 +31,7 @@
 
 		overflow: clip;
 		border-radius: 6px;
-		box-shadow: 0px 1px 2px var(--shadow-color);
+		box-shadow: 0px 0px 2px var(--shadow-color);
 		background-color: var(--background-color-1);
 	}
 
@@ -66,9 +66,10 @@
 		width: 1em;
 		height: 1em;
 		flex-shrink: 0;
+		align-self: center;
 
 		// RTL support:
 		margin-inline-start: 0em;
-		margin-inline-end: 0.25em;
+		margin-inline-end: 0.32em;
 	}
 }