js-draw 0.5.0 → 0.6.0

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,7 +1,6 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import { EditorEventType } from '../../types';
-import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
@@ -14,16 +13,15 @@ export default class SelectionToolWidget extends BaseToolWidget {
 
 		const resizeButton = new ActionButtonWidget(
 			editor, localization,
-			makeResizeViewportIcon,
+			() => editor.icons.makeResizeViewportIcon(),
 			this.localizationTable.resizeImageToSelection,
 			() => {
-				const selection = this.tool.getSelection();
-				this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+				this.resizeImageToSelection();
 			},
 		);
 		const deleteButton = new ActionButtonWidget(
 			editor, localization,
-			makeDeleteSelectionIcon,
+			() => editor.icons.makeDeleteSelectionIcon(),
 			this.localizationTable.deleteSelection,
 			() => {
 				const selection = this.tool.getSelection();
@@ -33,7 +31,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
 		);
 		const duplicateButton = new ActionButtonWidget(
 			editor, localization,
-			makeDuplicateSelectionIcon,
+			() => editor.icons.makeDuplicateSelectionIcon(),
 			this.localizationTable.duplicateSelection,
 			() => {
 				const selection = this.tool.getSelection();
@@ -67,11 +65,29 @@ export default class SelectionToolWidget extends BaseToolWidget {
 		});
 	}
 
+	private resizeImageToSelection() {
+		const selection = this.tool.getSelection();
+		if (selection) {
+			this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+		}
+	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		// Resize image to selection:
+		// Other keys are handled directly by the selection tool.
+		if (event.ctrlKey && event.key === 'r') {
+			this.resizeImageToSelection();
+			return true;
+		}
+
+		return false;
+	}
+
 	protected getTitle(): string {
 		return this.localizationTable.select;
 	}
 
 	protected createIcon(): Element {
-		return makeSelectionIcon();
+		return this.editor.icons.makeSelectionIcon();
 	}
 }

package/src/toolbar/widgets/TextToolWidget.ts

@@ -2,7 +2,6 @@ import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeTextIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
@@ -26,7 +25,7 @@ export default class TextToolWidget extends BaseToolWidget {
 
 	protected createIcon(): Element {
 		const textStyle = this.tool.getTextStyle();
-		return makeTextIcon(textStyle);
+		return this.editor.icons.makeTextIcon(textStyle);
 	}
 
 	private static idCounter: number = 0;

package/src/tools/PanZoom.ts

@@ -182,10 +182,13 @@ export default class PanZoom extends BaseTool {
 		return true;
 	}
 
-	public onKeyPress({ key }: KeyPressEvent): boolean {
+	public onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean {
 		if (!(this.mode & PanZoomMode.Keyboard)) {
 			return false;
 		}
+		if (ctrlKey || altKey) {
+			return false;
+		}
 
 		// No need to keep the same the transform for keyboard events.
 		this.transform = Viewport.transformBy(Mat33.identity);

package/src/tools/SelectionTool/SelectionTool.css

@@ -3,6 +3,7 @@
     background-color: var(--secondary-background-color);
     opacity: 0.5;
     overflow: visible;
+    position: absolute;
 }
 
 .selection-tool-handle {

package/src/tools/SelectionTool/SelectionTool.test.ts

@@ -100,4 +100,44 @@ describe('SelectionTool', () => {
 		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'a');
 		expect(editor.viewport.visibleRect.containsPoint(selection.region.center)).toBe(true);
 	});
+
+	it('shift+click should expand an existing selection', () => {
+		const { addTestStrokeCommand: stroke1Command } = createSquareStroke(50);
+		const { addTestStrokeCommand: stroke2Command } = createSquareStroke(500);
+
+		const editor = createEditor();
+		editor.dispatch(stroke1Command);
+		editor.dispatch(stroke2Command);
+
+		// Select the first stroke
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+
+		// Select the smaller rectangle
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(40, 40));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Shift key down.
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'Shift');
+
+		// Select the larger stroke.
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(2);
+
+		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'Shift');
+
+		// Select the larger stroke without shift pressed
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Select nothing
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(201, 201));
+		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
+	});
 });

package/src/tools/SelectionTool/SelectionTool.ts

@@ -23,6 +23,9 @@ export default class SelectionTool extends BaseTool {
 	private selectionBox: Selection|null;
 	private lastEvtTarget: EventTarget|null = null;
 
+	private expandingSelectionBox: boolean = false;
+	private shiftKeyPressed: boolean = false;
+
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);
 
@@ -50,8 +53,11 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBox = new Selection(
 			selectionStartPos, this.editor
 		);
-		// Remove any previous selection rects
-		this.handleOverlay.replaceChildren();
+
+		if (!this.expandingSelectionBox) {
+			// Remove any previous selection rects
+			this.prevSelectionBox?.cancelSelection();
+		}
 		this.selectionBox.addTo(this.handleOverlay);
 	}
 
@@ -60,7 +66,11 @@ export default class SelectionTool extends BaseTool {
 		if (event.allPointers.length === 1 && event.current.isPrimary) {
 			if (this.lastEvtTarget && this.selectionBox?.onDragStart(event.current, this.lastEvtTarget)) {
 				this.selectionBoxHandlingEvt = true;
-			} else {
+				this.expandingSelectionBox = false;
+			}
+			else {
+				// Shift key: Combine the new and old selection boxes at the end of the gesture.
+				this.expandingSelectionBox = this.shiftKeyPressed;
 				this.makeSelectionBox(event.current.canvasPos);
 			}
 
@@ -99,6 +109,7 @@ export default class SelectionTool extends BaseTool {
 		}
 	}
 
+	// Called after a gestureCancel and a pointerUp
 	private onGestureEnd() {
 		this.lastEvtTarget = null;
 
@@ -127,7 +138,19 @@ export default class SelectionTool extends BaseTool {
 		if (!this.selectionBox) return;
 
 		this.selectionBox.setToPoint(event.current.canvasPos);
-		this.onGestureEnd();
+
+		// 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(),
+			]);
+		} else {
+			this.onGestureEnd();
+		}
 	}
 
 	public onGestureCancel(): void {
@@ -139,6 +162,8 @@ export default class SelectionTool extends BaseTool {
 			this.selectionBox = this.prevSelectionBox;
 			this.selectionBox?.addTo(this.handleOverlay);
 		}
+
+		this.expandingSelectionBox = false;
 	}
 
 	private static handleableKeys = [
@@ -150,6 +175,26 @@ export default class SelectionTool extends BaseTool {
 		'i', 'I', 'o', 'O',
 	];
 	public onKeyPress(event: KeyPressEvent): boolean {
+		if (this.selectionBox && event.ctrlKey && event.key === 'd') {
+			// Handle duplication on key up — we don't want to accidentally duplicate
+			// many times.
+			return true;
+		}
+		else if (event.key === 'a' && event.ctrlKey) {
+			// Handle ctrl+A on key up.
+			// Return early to prevent 'a' from moving the selection/view.
+			return true;
+		}
+		else if (event.ctrlKey) {
+			// Don't transform the selection with, for example, ctrl+i.
+			// Pass it to another tool, if apliccable.
+			return false;
+		}
+		else if (event.key === 'Shift') {
+			this.shiftKeyPressed = true;
+			return true;
+		}
+
 		let rotationSteps = 0;
 		let xTranslateSteps = 0;
 		let yTranslateSteps = 0;
@@ -245,6 +290,21 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	public onKeyUp(evt: KeyUpEvent) {
+		if (evt.key === 'Shift') {
+			this.shiftKeyPressed = false;
+			return true;
+		}
+		else if (evt.ctrlKey) {
+			if (this.selectionBox && evt.key === 'd') {
+				this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+				return true;
+			}
+			else if (evt.key === 'a') {
+				this.setSelection(this.editor.image.getAllElements());
+				return true;
+			}
+		}
+
 		if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
 			this.selectionBox.finalizeTransform();
 			return true;
@@ -307,11 +367,20 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	// Get the object responsible for displaying this' selection.
+	// @internal
 	public getSelection(): Selection|null {
 		return this.selectionBox;
 	}
 
+	public getSelectedObjects(): AbstractComponent[] {
+		return this.selectionBox?.getSelectedObjects() ?? [];
+	}
+
+	// Select the given `objects`. Any non-selectable objects in `objects` are ignored.
 	public setSelection(objects: AbstractComponent[]) {
+		// Only select selectable objects.
+		objects = objects.filter(obj => obj.isSelectable());
+
 		let bbox: Rect2|null = null;
 		for (const object of objects) {
 			if (bbox) {

package/src/tools/ToolController.ts

@@ -39,6 +39,7 @@ export default class ToolController {
 			new Eraser(editor, localization.eraserTool),
 			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
+			new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
 		];
 		this.tools = [
 			new PipetteTool(editor, localization.pipetteTool),

package/src/tools/localization.ts

@@ -15,6 +15,8 @@ export interface ToolLocalization {
 	changeTool: string;
 	pasteHandler: string;
 
+	anyDevicePanning: string;
+
 	copied: (count: number, description: string) => string;
 	pasted: (count: number, description: string) => string;
 
@@ -38,6 +40,8 @@ export const defaultToolLocalization: ToolLocalization = {
 	changeTool: 'Change tool',
 	pasteHandler: 'Copy paste handler',
 
+	anyDevicePanning: 'Any device panning',
+
 	copied: (count: number, description: string) => `Copied ${count} ${description}`,
 	pasted: (count: number, description: string) => `Pasted ${count} ${description}`,
 

package/typedoc.json

@@ -3,7 +3,11 @@
 		"./src/"
 	],
 	"exclude": [
-		"**/*.test.ts"
+		"**/*.test.ts",
+		"node_modules/**",
+		"dist/",
+		"dist-test/",
+		"src/testing/"
 	],
 	"excludePrivate": true,
 	"excludeInternal": true,

package/dist/src/toolbar/icons.d.ts

@@ -1,20 +0,0 @@
-import Color4 from '../Color4';
-import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/Text';
-import Pen from '../tools/Pen';
-export declare const makeUndoIcon: () => SVGSVGElement;
-export declare const makeRedoIcon: (mirror?: boolean) => SVGSVGElement;
-export declare const makeDropdownIcon: () => SVGSVGElement;
-export declare const makeEraserIcon: () => SVGSVGElement;
-export declare const makeSelectionIcon: () => SVGSVGElement;
-export declare const makeHandToolIcon: () => SVGSVGElement;
-export declare const makeTouchPanningIcon: () => SVGSVGElement;
-export declare const makeAllDevicePanningIcon: () => SVGSVGElement;
-export declare const makeZoomIcon: () => SVGSVGElement;
-export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
-export declare const makePenIcon: (tipThickness: number, color: string | Color4) => SVGSVGElement;
-export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;
-export declare const makePipetteIcon: (color?: Color4) => SVGSVGElement;
-export declare const makeResizeViewportIcon: () => SVGSVGElement;
-export declare const makeDuplicateSelectionIcon: () => SVGSVGElement;
-export declare const makeDeleteSelectionIcon: () => SVGSVGElement;