feat: Support lasso selection (#96)

* feat(editor): Support lasso selection internally

This commit adds support for lasso selection, but does not provide a way
to enable it from the GUI.

* possible UI 1

* UI design 2

* Fix imports

* fix: Fix clicking within a large item selects the large item

* fix: Save selection mode with toolbar state

* ui: Remove buttons from selection menu that are present elsewhere

* chore: Fix tsc errors

* decrease minimum step size for lasso select

* Adjust selection button UI

* Fix imports

* Adjust how lasso selection works: Only select if completely contained

* Restore removed localizations

* Documentation

* Adjust UI

* Path documentation, fix .closedContains bug

Author: personalizedrefrigerator

packages/js-draw/src/components/AbstractComponent.ts

@@ -7,6 +7,7 @@ import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 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>>;
@@ -36,6 +37,12 @@ export 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 {
 	// The timestamp (milliseconds) at which the component was
@@ -206,6 +213,17 @@ export default abstract class AbstractComponent {
 		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.
+	 */
+	public keyPoints(): Point2[] {
+		return [this.getBBox().center];
+	}
+
 	// @returns true iff this component can be selected (e.g. by the selection tool.)
 	public isSelectable(): boolean {
 		return true;

packages/js-draw/src/components/Stroke.ts

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

packages/js-draw/src/toolbar/EdgeToolbar.scss

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

packages/js-draw/src/toolbar/IconProvider.ts

@@ -8,6 +8,7 @@ import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuil
 import { makePolylineBuilder } from '../components/builders/PolylineBuilder';
 import { EraserMode } from '../tools/Eraser';
 import { createSvgElement, createSvgElements, createSvgPaths } from '../util/createElement';
+import { SelectionMode } from '../tools/SelectionTool/types';
 
 export type IconElemType = HTMLImageElement | SVGElement;
 
@@ -173,16 +174,24 @@ export default class IconProvider {
 		return icon;
 	}
 
-	public makeSelectionIcon(): IconElemType {
+	public makeSelectionIcon(mode: SelectionMode = SelectionMode.Rectangle): IconElemType {
 		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="4"/>
+				<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="4" 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;

packages/js-draw/src/toolbar/localization.ts

@@ -48,6 +48,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;
@@ -146,6 +148,8 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	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',

packages/js-draw/src/toolbar/widgets/SelectionToolWidget.ts

@@ -2,17 +2,19 @@ import { Color4 } from '@js-draw/math';
 import { isRestylableComponent } from '../../components/RestylableComponent';
 import Editor from '../../Editor';
 import uniteCommands from '../../commands/uniteCommands';
-import SelectionTool from '../../tools/SelectionTool/SelectionTool';
+import SelectionTool, { SelectionMode } from '../../tools/SelectionTool/SelectionTool';
 import { EditorEventType } from '../../types';
 import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from './components/makeColorInput';
-import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 import { resizeImageToSelectionKeyboardShortcut } from './keybindings';
 import makeSeparator from './components/makeSeparator';
 import { toolbarCSSPrefix } from '../constants';
 import HelpDisplay from '../utils/HelpDisplay';
+import BaseWidget, { SavedToolbuttonState } from './BaseWidget';
+import makeButtonGrid from './components/makeButtonGrid';
+import { MutableReactiveValue } from '../../util/ReactiveValue';
 
 const makeFormatMenu = (
 	editor: Editor,
@@ -89,8 +91,55 @@ const makeFormatMenu = (
 	};
 };
 
+class LassoSelectToggle extends BaseWidget {
+	public constructor(
+		editor: Editor,
+		protected tool: SelectionTool,
+
+		localizationTable?: ToolbarLocalization,
+	) {
+		super(editor, 'selection-mode-toggle', localizationTable);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
+			if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+				this.setSelected(tool.modeValue.get() === SelectionMode.Lasso);
+			}
+		});
+		this.setSelected(false);
+	}
+
+	protected override shouldAutoDisableInReadOnlyEditor(): boolean {
+		return false;
+	}
+
+	private setModeFlag(enabled: boolean) {
+		this.tool.modeValue.set(enabled ? SelectionMode.Lasso : SelectionMode.Rectangle);
+	}
+
+	protected handleClick() {
+		this.setModeFlag(!this.isSelected());
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.selectionTool__lassoSelect;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeSelectionIcon(SelectionMode.Lasso);
+	}
+
+	protected override fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+
+	protected override getHelpText() {
+		return this.localizationTable.selectionTool__lassoSelect__help;
+	}
+}
+
 export default class SelectionToolWidget extends BaseToolWidget {
 	private updateFormatMenu: () => void = () => {};
+	private hasSelectionValue: MutableReactiveValue<boolean>;
 
 	public constructor(
 		editor: Editor,
@@ -99,56 +148,13 @@ export default class SelectionToolWidget extends BaseToolWidget {
 	) {
 		super(editor, tool, 'selection-tool-widget', localization);
 
-		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 () => {
-				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);
+		this.addSubWidget(new LassoSelectToggle(editor, tool, this.localizationTable));
 
-		const updateDisabled = (disabled: boolean) => {
-			resizeButton.setDisabled(disabled);
-			deleteButton.setDisabled(disabled);
-			duplicateButton.setDisabled(disabled);
+		const hasSelection = () => {
+			const selection = this.tool.getSelection();
+			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) => {
@@ -157,13 +163,13 @@ export default class SelectionToolWidget extends BaseToolWidget {
 			}
 
 			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();
+		});
 	}
 
 	private resizeImageToSelection() {
@@ -195,22 +201,86 @@ export default class SelectionToolWidget extends BaseToolWidget {
 	}
 
 	protected createIcon(): Element {
-		return this.editor.icons.makeSelectionIcon();
+		return this.editor.icons.makeSelectionIcon(this.tool.modeValue.get());
 	}
 
 	protected override getHelpText(): string {
 		return this.localizationTable.selectionDropdown__baseHelpText;
 	}
 
+	protected createSelectionActions(helpDisplay?: 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 };
+	}
+
 	protected override fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean {
 		super.fillDropdown(dropdown, helpDisplay);
 
 		const controlsContainer = document.createElement('div');
 		controlsContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
 		dropdown.appendChild(controlsContainer);
 
-		makeSeparator(this.localizationTable.reformatSelection).addTo(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);
 		this.updateFormatMenu = () => formatMenu.update();
@@ -223,4 +293,20 @@ export default class SelectionToolWidget extends BaseToolWidget {
 
 		return true;
 	}
+
+	public override serializeState(): SavedToolbuttonState {
+		return {
+			...super.serializeState(),
+			selectionMode: this.tool.modeValue.get(),
+		};
+	}
+
+	public override deserializeFrom(state: SavedToolbuttonState): void {
+		super.deserializeFrom(state);
+
+		const isValidSelectionMode = Object.values(SelectionMode).includes(state.selectionMode);
+		if (isValidSelectionMode) {
+			this.tool.modeValue.set(state.selectionMode);
+		}
+	}
 }

packages/js-draw/src/toolbar/widgets/components/components.scss

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