js-draw 0.11.3 → 0.12.0

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

@@ -5,8 +5,11 @@ import EditorImage from '../../EditorImage';
 import Path from '../../math/Path';
 import { Vec2 } from '../../math/Vec2';
 import { InputEvtType } from '../../types';
+import Selection from './Selection';
 import SelectionTool from './SelectionTool';
 import createEditor from '../../testing/createEditor';
+import Pointer from '../../Pointer';
+import { Rect2 } from '../../lib';
 
 const getSelectionTool = (editor: Editor): SelectionTool => {
 	return editor.toolController.getMatchingTools(SelectionTool)[0];
@@ -22,6 +25,33 @@ const createSquareStroke = (size: number = 1) => {
 	return { testStroke, addTestStrokeCommand };
 };
 
+const createEditorWithSingleObjectSelection = (objectSize: number = 50) => {
+	const { testStroke, addTestStrokeCommand } = createSquareStroke(objectSize);
+	const editor = createEditor();
+	editor.dispatch(addTestStrokeCommand);
+
+	// Select the object
+	const selectionTool = getSelectionTool(editor);
+	selectionTool.setEnabled(true);
+	editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+	editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
+	editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(5, 5));
+
+	return { editor, testStroke, selectionTool };
+};
+
+const dragSelection = (editor: Editor, selection: Selection, startPt: Vec2, endPt: Vec2) => {
+	const backgroundElem = selection.getBackgroundElem();
+
+	selection.onDragStart(Pointer.ofCanvasPoint(startPt, true, editor.viewport), backgroundElem);
+	jest.advanceTimersByTime(100);
+
+	selection.onDragUpdate(Pointer.ofCanvasPoint(endPt, true, editor.viewport));
+	jest.advanceTimersByTime(100);
+
+	selection.onDragEnd();
+};
+
 describe('SelectionTool', () => {
 	it('selection should shrink/grow to bounding box of selected objects', () => {
 		const { addTestStrokeCommand } = createSquareStroke();
@@ -47,17 +77,7 @@ describe('SelectionTool', () => {
 	});
 
 	it('sending keyboard events to the selected region should move selected items', () => {
-		const { testStroke, addTestStrokeCommand } = createSquareStroke(50);
-		const editor = createEditor();
-		editor.dispatch(addTestStrokeCommand);
-
-		// Select the object
-		const selectionTool = getSelectionTool(editor);
-		selectionTool.setEnabled(true);
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(5, 5));
-
+		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(50);
 		const selection = selectionTool.getSelection();
 		expect(selection).not.toBeNull();
 
@@ -78,16 +98,7 @@ describe('SelectionTool', () => {
 	});
 
 	it('moving the selection with a keyboard should move the view to keep the selection in view', () => {
-		const { addTestStrokeCommand } = createSquareStroke(100);
-		const editor = createEditor();
-		editor.dispatch(addTestStrokeCommand);
-
-		// Select the stroke
-		const selectionTool = getSelectionTool(editor);
-		selectionTool.setEnabled(true);
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+		const { editor, selectionTool } = createEditorWithSingleObjectSelection(50);
 
 		const selection = selectionTool.getSelection();
 		if (selection === null) {
@@ -140,4 +151,110 @@ describe('SelectionTool', () => {
 		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(201, 201));
 		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
 	});
+
+	it('should remove the selection from the document while dragging', () => {
+		const { editor, selectionTool } = createEditorWithSingleObjectSelection(50);
+
+		const selection = selectionTool.getSelection()!;
+		const backgroundElem = selection.getBackgroundElem();
+		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(0, 0), true, editor.viewport), backgroundElem);
+		jest.advanceTimersByTime(100);
+		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(20, 0), true, editor.viewport));
+		jest.advanceTimersByTime(100);
+
+		// Expect the selection to not be in the image while dragging
+		expect(editor.image.getAllElements()).toHaveLength(0);
+
+		selection.onDragEnd();
+
+		expect(editor.image.getAllElements()).toHaveLength(1);
+	});
+
+	it('should drag objects horizontally', () => {
+		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(50);
+
+		expect(editor.image.findParent(testStroke)).not.toBeNull();
+		expect(testStroke.getBBox().topLeft).objEq(Vec2.of(0, 0));
+
+		const selection = selectionTool.getSelection()!;
+		dragSelection(editor, selection, Vec2.of(0, 0), Vec2.of(10, 0));
+
+		expect(editor.image.findParent(testStroke)).not.toBeNull();
+		expect(testStroke.getBBox().topLeft).objEq(Vec2.of(10, 0));
+	});
+
+	it('should round changes in objects positions when dragging', () => {
+		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(50);
+
+		expect(editor.image.findParent(testStroke)).not.toBeNull();
+		expect(testStroke.getBBox().topLeft).objEq(Vec2.of(0, 0));
+
+		const selection = selectionTool.getSelection()!;
+		dragSelection(editor, selection, Vec2.of(0, 0), Vec2.of(9.999, 0));
+
+		expect(editor.image.findParent(testStroke)).not.toBeNull();
+		expect(testStroke.getBBox().topLeft).objEq(Vec2.of(10, 0));
+	});
+
+	it('dragCancel should return a selection to its original position', () => {
+		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(150);
+
+		const selection = selectionTool.getSelection()!;
+		const dragBackground = selection.getBackgroundElem();
+
+		expect(testStroke.getBBox().topLeft).objEq(Vec2.zero);
+
+		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(10, 0), true, editor.viewport), dragBackground);
+		jest.advanceTimersByTime(100);
+		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(200, 10), true, editor.viewport));
+		jest.advanceTimersByTime(100);
+		selection.onDragCancel();
+
+		expect(testStroke.getBBox().topLeft).objEq(Vec2.zero);
+		expect(editor.image.findParent(testStroke)).not.toBeNull();
+	});
+
+	it('duplicateSelectedObjects should duplicate a selection while dragging', async () => {
+		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(150);
+
+		const selection = selectionTool.getSelection()!;
+		const dragBackground = selection.getBackgroundElem();
+
+		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(0, 0), true, editor.viewport), dragBackground);
+		jest.advanceTimersByTime(100);
+		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(20, 0), true, editor.viewport));
+
+		// The selection should not be in the document while dragging
+		expect(editor.image.findParent(testStroke)).toBeNull();
+
+		await editor.dispatch(await selection.duplicateSelectedObjects());
+		jest.advanceTimersByTime(100);
+
+		// The duplicate stroke should be added to the document, but the original should not.
+		expect(editor.image.findParent(testStroke)).toBeNull();
+
+		const allObjectsInImage = editor.image.getAllElements();
+		expect(allObjectsInImage).toHaveLength(1);
+
+		const duplicateObject = allObjectsInImage[0];
+
+		// The duplicate stroke should be translated
+		expect(duplicateObject.getBBox()).objEq(new Rect2(20, 0, 150, 150));
+
+		// The duplicate stroke should be selected.
+		expect(selection.getSelectedObjects()).toHaveLength(1);
+
+		// The test stroke should not be added to the document
+		// (esp if we continue dragging)
+		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(30, 10), true, editor.viewport));
+		jest.advanceTimersByTime(100);
+
+		expect(editor.image.findParent(testStroke)).toBeNull();
+
+		// The test stroke should be translated when we finish dragging.
+		selection.onDragEnd();
+
+		expect(editor.image.findParent(testStroke)).not.toBeNull();
+		expect(testStroke.getBBox()).objEq(new Rect2(30, 10, 150, 150));
+	});
 });

package/src/tools/SelectionTool/SelectionTool.ts

@@ -296,7 +296,9 @@ export default class SelectionTool extends BaseTool {
 		}
 		else if (evt.ctrlKey) {
 			if (this.selectionBox && evt.key === 'd') {
-				this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+				this.selectionBox.duplicateSelectedObjects().then(command => {
+					this.editor.dispatch(command);
+				});
 				return true;
 			}
 			else if (evt.key === 'a') {

package/src/tools/TextTool.ts

@@ -80,11 +80,14 @@ export default class TextTool extends BaseTool {
 		if (this.textInputElem && this.textTargetPosition) {
 			const content = this.textInputElem.value.trimEnd();
 
+			this.textInputElem.value = '';
+
 			if (removeInput) {
-				this.textInputElem.remove();
+				// In some browsers, .remove() triggers a .blur event (synchronously).
+				// Clear this.textInputElem before removal
+				const input = this.textInputElem;
 				this.textInputElem = null;
-			} else {
-				this.textInputElem.value = '';
+				input.remove();
 			}
 
 			if (content === '') {
@@ -100,14 +103,14 @@ export default class TextTool extends BaseTool {
 			).rightMul(
 				Mat33.zRotation(this.textRotation)
 			);
-			
+
 			const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
 
 			const action = EditorImage.addElement(textComponent);
 			if (this.removeExistingCommand) {
 				// Unapply so that `removeExistingCommand` can be added to the undo stack.
 				this.removeExistingCommand.unapply(this.editor);
-	
+
 				this.editor.dispatch(uniteCommands([ this.removeExistingCommand, action ]));
 				this.removeExistingCommand = null;
 			} else {
@@ -177,10 +180,13 @@ export default class TextTool extends BaseTool {
 			// Delay removing the input -- flushInput may be called within a blur()
 			// event handler
 			const removeInput = false;
-			this.flushInput(removeInput);
-
 			const input = this.textInputElem;
-			setTimeout(() => input?.remove(), 0);
+
+			this.flushInput(removeInput);
+			this.textInputElem = null;
+			setTimeout(() => {
+				input?.remove();
+			}, 0);
 		};
 		this.textInputElem.onkeyup = (evt) => {
 			if (evt.key === 'Enter' && !evt.shiftKey) {

package/src/types.ts

@@ -198,9 +198,9 @@ export type EditorEventDataType = EditorToolEvent | EditorObjectEvent
 // Returns null to continue loading without pause.
 // [totalToProcess] can be an estimate and may change if a better estimate becomes available.
 export type OnProgressListener =
-	(amountProcessed: number, totalToProcess: number)=> Promise<void>|null;
+	(amountProcessed: number, totalToProcess: number)=> Promise<void>|null|void;
 
-export type ComponentAddedListener = (component: AbstractComponent)=> void;
+export type ComponentAddedListener = (component: AbstractComponent)=> Promise<void>|void;
 
 // Called when a new estimate for the import/export rect has been generated. This can be called multiple times.
 // Only the last call to this listener must be accurate.