js-draw 0.12.0 → 0.13.1

package/src/tools/SelectionTool/SelectionTool.ts

@@ -1,7 +1,3 @@
-// Allows users to select/transform portions of the `EditorImage`.
-// With respect to `extend`ing, `SelectionTool` is not stable.
-// @packageDocumentation
-
 import AbstractComponent from '../../components/AbstractComponent';
 import Editor from '../../Editor';
 import Mat33 from '../../math/Mat33';
@@ -16,7 +12,8 @@ import TextComponent from '../../components/TextComponent';
 
 export const cssPrefix = 'selection-tool-';
 
-// {@inheritDoc SelectionTool!}
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
 export default class SelectionTool extends BaseTool {
 	private handleOverlay: HTMLElement;
 	private prevSelectionBox: Selection|null;
@@ -25,6 +22,7 @@ export default class SelectionTool extends BaseTool {
 
 	private expandingSelectionBox: boolean = false;
 	private shiftKeyPressed: boolean = false;
+	private ctrlKeyPressed: boolean = false;
 
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);
@@ -61,17 +59,47 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBox.addTo(this.handleOverlay);
 	}
 
+	private snapSelectionToGrid() {
+		if (!this.selectionBox) throw new Error('No selection to snap!');
+
+		const topLeftOfBBox = this.selectionBox.region.topLeft;
+		const snapDistance =
+				this.editor.viewport.snapToGrid(topLeftOfBBox).minus(topLeftOfBBox);
+		
+		const oldTransform = this.selectionBox.getTransform();
+		this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDistance)));
+		this.selectionBox.finalizeTransform();
+	}
+
 	private selectionBoxHandlingEvt: boolean = false;
-	public onPointerDown(event: PointerEvt): boolean {
-		if (event.allPointers.length === 1 && event.current.isPrimary) {
-			if (this.lastEvtTarget && this.selectionBox?.onDragStart(event.current, this.lastEvtTarget)) {
-				this.selectionBoxHandlingEvt = true;
-				this.expandingSelectionBox = false;
+	public onPointerDown({ allPointers, current }: PointerEvt): boolean {
+		const snapToGrid = this.ctrlKeyPressed;
+		if (snapToGrid) {
+			current = current.snappedToGrid(this.editor.viewport);
+		}
+
+		if (allPointers.length === 1 && current.isPrimary) {
+			let transforming = false;
+
+			if (this.lastEvtTarget && this.selectionBox) {
+				if (snapToGrid) {
+					this.snapSelectionToGrid();
+				}
+
+				const dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
+
+				if (dragStartResult) {
+					transforming = true;
+
+					this.selectionBoxHandlingEvt = true;
+					this.expandingSelectionBox = false;
+				}
 			}
-			else {
+
+			if (!transforming) {
 				// Shift key: Combine the new and old selection boxes at the end of the gesture.
 				this.expandingSelectionBox = this.shiftKeyPressed;
-				this.makeSelectionBox(event.current.canvasPos);
+				this.makeSelectionBox(current.canvasPos);
 			}
 
 			return true;
@@ -82,10 +110,15 @@ export default class SelectionTool extends BaseTool {
 	public onPointerMove(event: PointerEvt): void {
 		if (!this.selectionBox) return;
 
+		let currentPointer = event.current;
+		if (this.ctrlKeyPressed) {
+			currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+		}
+
 		if (this.selectionBoxHandlingEvt) {
-			this.selectionBox.onDragUpdate(event.current);
+			this.selectionBox.onDragUpdate(currentPointer);
 		} else {
-			this.selectionBox!.setToPoint(event.current.canvasPos);
+			this.selectionBox!.setToPoint(currentPointer.canvasPos);
 		}
 	}
 
@@ -137,7 +170,12 @@ export default class SelectionTool extends BaseTool {
 	public onPointerUp(event: PointerEvt): void {
 		if (!this.selectionBox) return;
 
-		this.selectionBox.setToPoint(event.current.canvasPos);
+		let currentPointer = event.current;
+		if (this.ctrlKeyPressed) {
+			currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+		}
+
+		this.selectionBox.setToPoint(currentPointer.canvasPos);
 
 		// Were we expanding the previous selection?
 		if (this.expandingSelectionBox && this.prevSelectionBox) {
@@ -173,8 +211,14 @@ export default class SelectionTool extends BaseTool {
 		'e', 'j', 'ArrowDown',
 		'r', 'R',
 		'i', 'I', 'o', 'O',
+		'Control',
 	];
 	public onKeyPress(event: KeyPressEvent): boolean {
+		if (event.key === 'Control') {
+			this.ctrlKeyPressed = true;
+			return true;
+		}
+
 		if (this.selectionBox && event.ctrlKey && event.key === 'd') {
 			// Handle duplication on key up — we don't want to accidentally duplicate
 			// many times.
@@ -290,6 +334,11 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	public onKeyUp(evt: KeyUpEvent) {
+		if (evt.key === 'Control') {
+			this.ctrlKeyPressed = false;
+			return true;
+		}
+
 		if (evt.key === 'Shift') {
 			this.shiftKeyPressed = false;
 			return true;
@@ -358,6 +407,9 @@ export default class SelectionTool extends BaseTool {
 		this.handleOverlay.replaceChildren();
 		this.selectionBox = null;
 
+		this.shiftKeyPressed = false;
+		this.ctrlKeyPressed = false;
+
 		this.handleOverlay.style.display = enabled ? 'block' : 'none';
 
 		if (enabled) {

package/src/tools/ToolSwitcherShortcut.ts

@@ -1,16 +1,21 @@
-// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
-// @packageDocumentation
-
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
 
-// {@inheritDoc ToolSwitcherShortcut!}
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ * 
+ * @deprecated This may be replaced in the future.
+ */
 export default class ToolSwitcherShortcut extends BaseTool {
 	public constructor(private editor: Editor) {
 		super(editor.notifier, editor.localization.changeTool);
 	}
-	
+
+	// @internal
 	public onKeyPress({ key }: KeyPressEvent): boolean {
 		const toolController = this.editor.toolController;
 		const primaryTools = toolController.getPrimaryTools();

package/src/tools/UndoRedoShortcut.ts

@@ -1,17 +1,14 @@
-// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
-// @packageDocumentation
-
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
 
-// {@inheritDoc UndoRedoShortcut!}
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
 export default class UndoRedoShortcut extends BaseTool {
 	public constructor(private editor: Editor) {
 		super(editor.notifier, editor.localization.undoRedoTool);
 	}
     
-	// Activate undo/redo
+	// @internal
 	public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
 		if (ctrlKey) {
 			if (key === 'z') {

package/typedoc.json

@@ -1,6 +1,6 @@
 {
 	"entryPoints": [
-		"./src/"
+		"./src/lib.ts", "./src/bundle/bundled.ts"
 	],
 	"exclude": [
 		"**/*.test.ts",
@@ -21,4 +21,4 @@
 		"invalidLink": true,
 		"notDocumented": false
 	}
-}
+}