js-draw 0.11.3 → 0.13.0

package/src/tools/Pen.ts

@@ -3,7 +3,7 @@ import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Pointer, { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { EditorEventType, KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
+import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 
@@ -15,6 +15,7 @@ export interface PenStyle {
 export default class Pen extends BaseTool {
 	protected builder: ComponentBuilder|null = null;
 	private lastPoint: StrokeDataPoint|null = null;
+	private ctrlKeyPressed: boolean = false;
 
 	public constructor(
 		private editor: Editor,
@@ -31,6 +32,10 @@ export default class Pen extends BaseTool {
 
 	// Converts a `pointer` to a `StrokeDataPoint`.
 	protected toStrokePoint(pointer: Pointer): StrokeDataPoint {
+		if (this.isSnappingToGrid()) {
+			pointer = pointer.snappedToGrid(this.editor.viewport);
+		}
+
 		const minPressure = 0.3;
 		let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
 
@@ -42,8 +47,10 @@ export default class Pen extends BaseTool {
 		console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
 		console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
 
+		const pos = pointer.canvasPos;
+
 		return {
-			pos: pointer.canvasPos,
+			pos,
 			width: pressure * this.getPressureMultiplier(),
 			color: this.style.color,
 			time: pointer.timeStamp,
@@ -86,6 +93,8 @@ export default class Pen extends BaseTool {
 	}
 
 	public onPointerMove({ current }: PointerEvt): void {
+		if (!this.builder) return;
+
 		this.addPointToStroke(this.toStrokePoint(current));
 	}
 
@@ -102,7 +111,18 @@ export default class Pen extends BaseTool {
 		};
 
 		this.addPointToStroke(strokePoint);
-		if (this.builder && current.isPrimary) {
+
+		if (current.isPrimary) {
+			this.finalizeStroke();
+		}
+	}
+
+	public onGestureCancel() {
+		this.editor.clearWetInk();
+	}
+
+	private finalizeStroke() {
+		if (this.builder) {
 			const stroke = this.builder.build();
 			this.previewStroke();
 
@@ -118,10 +138,6 @@ export default class Pen extends BaseTool {
 		this.editor.clearWetInk();
 	}
 
-	public onGestureCancel() {
-		this.editor.clearWetInk();
-	}
-
 	private noteUpdated() {
 		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
 			kind: EditorEventType.ToolUpdated,
@@ -160,7 +176,15 @@ export default class Pen extends BaseTool {
 	public getColor() { return this.style.color; }
 	public getStrokeFactory() { return this.builderFactory; }
 
-	public onKeyPress({ key }: KeyPressEvent): boolean {
+	public setEnabled(enabled: boolean): void {
+		super.setEnabled(enabled);
+
+		this.ctrlKeyPressed = false;
+	}
+
+	private isSnappingToGrid() { return this.ctrlKeyPressed; }
+
+	public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
 		key = key.toLowerCase();
 
 		let newThickness: number|undefined;
@@ -176,6 +200,27 @@ export default class Pen extends BaseTool {
 			return true;
 		}
 
+		if (key === 'control') {
+			this.ctrlKeyPressed = true;
+			return true;
+		}
+
+		// Ctrl+Z: End the stroke so that it can be undone/redone.
+		if (key === 'z' && ctrlKey && this.builder) {
+			this.finalizeStroke();
+		}
+
+		return false;
+	}
+
+	public onKeyUp({ key }: KeyUpEvent): boolean {
+		key = key.toLowerCase();
+
+		if (key === 'control') {
+			this.ctrlKeyPressed = false;
+			return true;
+		}
+
 		return false;
 	}
 }

package/src/tools/SelectionTool/Selection.ts

@@ -100,6 +100,11 @@ export default class Selection {
 		}
 	}
 
+	// @internal Intended for unit tests
+	public getBackgroundElem(): HTMLElement {
+		return this.backgroundElem;
+	}
+
 	public getTransform(): Mat33 {
 		return this.transform;
 	}
@@ -304,18 +309,7 @@ export default class Selection {
 		}
 
 		this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-			if (this.region.containsRect(elem.getBBox())) {
-				return true;
-			}
-
-			// Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-			// As such, test with more lines than just this' edges.
-			const testLines = [];
-			for (const subregion of this.region.divideIntoGrid(2, 2)) {
-				testLines.push(...subregion.getEdges());
-			}
-
-			return testLines.some(edge => elem.intersects(edge));
+			return elem.intersectsRect(this.region);
 		});
 
 		if (singleItemSelectionMode && this.selectedElems.length > 0) {
@@ -392,6 +386,9 @@ export default class Selection {
 		}
 	}
 
+	// Maps IDs to whether we removed the component from the image
+	private removedFromImage: Record<string, boolean> = {};
+
 	// Add/remove the contents of this' seleciton from the editor.
 	// Used to prevent previewed content from looking like duplicate content
 	// while dragging.
@@ -400,7 +397,7 @@ export default class Selection {
 	// the editor image is likely to be slow.)
 	//
 	// If removed from the image, selected elements are drawn as wet ink.
-	private async addRemoveSelectionFromImage(inImage: boolean) {
+	private addRemoveSelectionFromImage(inImage: boolean) {
 		// Don't hide elements if doing so will be slow.
 		if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
 			return;
@@ -409,26 +406,46 @@ export default class Selection {
 		for (const elem of this.selectedElems) {
 			const parent = this.editor.image.findParent(elem);
 
-			if (!inImage) {
-				parent?.remove();
+			if (!inImage && parent) {
+				this.removedFromImage[elem.getId()] = true;
+				parent.remove();
 			}
 			// If we're making things visible and the selected object wasn't previously
 			// visible,
-			else if (!parent) {
+			else if (!parent && this.removedFromImage[elem.getId()]) {
 				EditorImage.addElement(elem).apply(this.editor);
+
+				this.removedFromImage[elem.getId()] = false;
+				delete this.removedFromImage[elem.getId()];
 			}
 		}
 
-		await this.editor.queueRerender();
-		if (!inImage) {
-			this.previewTransformCmds();
-		}
+		// Don't await queueRerender. If we're running in a test, the re-render might never
+		// happen.
+		this.editor.queueRerender().then(() => {
+			if (!inImage) {
+				this.previewTransformCmds();
+			}
+		});
+	}
+
+	private removeDeletedElemsFromSelection() {
+		// Remove any deleted elements from the selection.
+		this.selectedElems = this.selectedElems.filter(elem => {
+			const hasParent = !!this.editor.image.findParent(elem);
+
+			// If we removed the element and haven't added it back yet, don't remove it
+			// from the selection.
+			const weRemoved = this.removedFromImage[elem.getId()];
+			return hasParent || weRemoved;
+		});
 	}
 
 	private targetHandle: SelectionHandle|null = null;
 	private backgroundDragging: boolean = false;
 	public onDragStart(pointer: Pointer, target: EventTarget): boolean {
-		void this.addRemoveSelectionFromImage(false);
+		this.removeDeletedElemsFromSelection();
+		this.addRemoveSelectionFromImage(false);
 
 		for (const handle of this.handles) {
 			if (handle.isTarget(target)) {
@@ -503,11 +520,43 @@ export default class Selection {
 	}
 
 	public deleteSelectedObjects(): Command {
+		if (this.backgroundDragging || this.targetHandle) {
+			this.onDragEnd();
+		}
+
 		return new Erase(this.selectedElems);
 	}
 
-	public duplicateSelectedObjects(): Command {
-		return new Duplicate(this.selectedElems);
+	public async duplicateSelectedObjects(): Promise<Command> {
+		const wasTransforming = this.backgroundDragging || this.targetHandle;
+		let tmpApplyCommand: Command|null = null;
+
+		if (wasTransforming) {
+			// Don't update the selection's focus when redoing/undoing
+			const selectionToUpdate: Selection|null = null;
+			tmpApplyCommand = new Selection.ApplyTransformationCommand(
+				selectionToUpdate, this.selectedElems, this.transform
+			);
+
+			// Transform to ensure that the duplicates are in the correct location
+			await tmpApplyCommand.apply(this.editor);
+
+			// Show items again
+			this.addRemoveSelectionFromImage(true);
+		}
+
+		const duplicateCommand = new Duplicate(this.selectedElems);
+
+		if (wasTransforming) {
+			// Move the selected objects back to the correct location.
+			await tmpApplyCommand?.unapply(this.editor);
+			this.addRemoveSelectionFromImage(false);
+
+			this.previewTransformCmds();
+			this.updateUI();
+		}
+
+		return duplicateCommand;
 	}
 
 	public addTo(elem: HTMLElement) {
@@ -533,6 +582,7 @@ export default class Selection {
 	}
 
 	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
+		this.addRemoveSelectionFromImage(true);
 		this.originalRegion = bbox;
 		this.selectedElems = objects.filter(object => object.isSelectable());
 		this.updateUI();

package/src/tools/SelectionTool/SelectionHandle.ts

@@ -18,6 +18,7 @@ export type DragEndCallback = ()=> void;
 
 export default class SelectionHandle {
 	private element: HTMLElement;
+	private snapToGrid: boolean;
 
 	// Bounding box in screen coordinates.
 
@@ -96,4 +97,12 @@ export default class SelectionHandle {
 		}
 		this.onDragEnd();
 	}
+
+	public setSnapToGrid(snap: boolean) {
+		this.snapToGrid = snap;
+	}
+
+	public isSnappingToGrid() {
+		return this.snapToGrid;
+	}
 }

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

@@ -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,13 +334,20 @@ 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;
 		}
 		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') {
@@ -356,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) {