js-draw 0.0.7 → 0.0.10

package/src/toolbar/localization.ts

@@ -14,6 +14,7 @@ export interface ToolbarLocalization {
 	touchDrawing: string;
 	thicknessLabel: string;
 	resizeImageToSelection: string;
+	deleteSelection: string;
 	undo: string;
 	redo: string;
 
@@ -29,6 +30,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	resizeImageToSelection: 'Resize image to selection',
+	deleteSelection: 'Delete selection',
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',

package/src/tools/BaseTool.ts

@@ -6,10 +6,11 @@ export default abstract class BaseTool implements PointerEvtListener {
 	private enabled: boolean = true;
 	private group: ToolEnabledGroup|null = null;
 
-	public abstract onPointerDown(event: PointerEvt): boolean;
-	public abstract onPointerMove(event: PointerEvt): void;
-	public abstract onPointerUp(event: PointerEvt): void;
-	public abstract onGestureCancel(): void;
+	public onPointerDown(_event: PointerEvt): boolean { return false; }
+	public onPointerMove(_event: PointerEvt) { }
+	public onPointerUp(_event: PointerEvt) { }
+	public onGestureCancel() { }
+
 	public abstract readonly kind: ToolType;
 
 	protected constructor(private notifier: EditorNotifier, public readonly description: string) {

package/src/tools/PanZoom.ts

@@ -78,6 +78,7 @@ export default class PanZoom extends BaseTool {
 
 		if (handlingGesture) {
 			this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+			this.editor.display.setDraftMode(true);
 		}
 
 		return handlingGesture;
@@ -136,11 +137,13 @@ export default class PanZoom extends BaseTool {
 			this.editor.dispatch(this.transform, false);
 		}
 
+		this.editor.display.setDraftMode(false);
 		this.transform = null;
 	}
 
 	public onGestureCancel(): void {
 		this.transform?.unapply(this.editor);
+		this.editor.display.setDraftMode(false);
 		this.transform = null;
 	}
 

package/src/tools/SelectionTool.ts

@@ -1,4 +1,5 @@
 import Command from '../commands/Command';
+import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import Mat33 from '../geometry/Mat33';
@@ -421,6 +422,10 @@ class Selection {
 		this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
 		this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
 	}
+
+	public deleteSelectedObjects(): Command {
+		return new Erase(this.selectedElems);
+	}
 }
 
 export default class SelectionTool extends BaseTool {
@@ -542,4 +547,15 @@ export default class SelectionTool extends BaseTool {
 	public getSelection(): Selection|null {
 		return this.selectionBox;
 	}
+
+	public clearSelection() {
+		this.handleOverlay.replaceChildren();
+		this.prevSelectionBox = this.selectionBox;
+		this.selectionBox = null;
+
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
 }

package/src/tools/ToolController.ts

@@ -8,6 +8,7 @@ import Eraser from './Eraser';
 import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import { ToolLocalization } from './localization';
+import UndoRedoShortcut from './UndoRedoShortcut';
 
 export enum ToolType {
 	TouchPanZoom,
@@ -15,6 +16,7 @@ export enum ToolType {
 	Selection,
 	Eraser,
 	PanZoom,
+	UndoRedoShortcut,
 }
 
 export default class ToolController {
@@ -40,6 +42,7 @@ export default class ToolController {
 			touchPanZoom,
 			...primaryTools,
 			new PanZoom(editor, PanZoomMode.TwoFingerGestures | PanZoomMode.AnyDevice, localization.twoFingerPanZoomTool),
+			new UndoRedoShortcut(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
 		touchPanZoom.setEnabled(false);

package/src/tools/UndoRedoShortcut.test.ts

@@ -0,0 +1,53 @@
+/* @jest-environment jsdom */
+
+import Color4 from '../Color4';
+import Stroke from '../components/Stroke';
+import EditorImage from '../EditorImage';
+import Path from '../geometry/Path';
+import createEditor from '../testing/createEditor';
+import { InputEvtType } from '../types';
+
+describe('UndoRedoShortcut', () => {
+	const testStroke = new Stroke([Path.fromString('M0,0L10,10').toRenderable({ fill: Color4.red })]);
+	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+
+	it('ctrl+z should undo', () => {
+		const editor = createEditor();
+		editor.dispatch(addTestStrokeCommand);
+		expect(editor.history.undoStackSize).toBe(1);
+
+		editor.toolController.dispatchInputEvent({
+			kind: InputEvtType.KeyPressEvent,
+			ctrlKey: true,
+			key: 'z',
+		});
+		
+		expect(editor.history.undoStackSize).toBe(0);
+		expect(editor.history.redoStackSize).toBe(1);
+	});
+
+	it('ctrl+shift+Z should re-do', () => {
+		const editor = createEditor();
+		editor.dispatch(addTestStrokeCommand);
+		editor.dispatch(addTestStrokeCommand);
+		expect(editor.history.undoStackSize).toBe(2);
+
+		editor.toolController.dispatchInputEvent({
+			kind: InputEvtType.KeyPressEvent,
+			ctrlKey: true,
+			key: 'z',
+		});
+
+		expect(editor.history.undoStackSize).toBe(1);
+		expect(editor.history.redoStackSize).toBe(1);
+
+		editor.toolController.dispatchInputEvent({
+			kind: InputEvtType.KeyPressEvent,
+			ctrlKey: true,
+			key: 'Z',
+		});
+
+		expect(editor.history.undoStackSize).toBe(2);
+		expect(editor.history.redoStackSize).toBe(0);
+	});
+});

package/src/tools/UndoRedoShortcut.ts

@@ -0,0 +1,28 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+
+
+export default class UndoRedoShortcut extends BaseTool {
+	public kind: ToolType.UndoRedoShortcut = ToolType.UndoRedoShortcut;
+
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.undoRedoTool);
+	}
+    
+	// Activate undo/redo
+	public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
+		if (ctrlKey) {
+			if (key === 'z') {
+				this.editor.history.undo();
+				return true;
+			} else if (key === 'Z') {
+				this.editor.history.redo();
+				return true;
+			}
+		}
+
+		return false;
+	}
+}

package/src/tools/localization.ts

@@ -5,6 +5,7 @@ export interface ToolLocalization {
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
+    undoRedoTool: string;
 
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
@@ -16,6 +17,7 @@ export const defaultToolLocalization: ToolLocalization = {
 	eraserTool: 'Eraser',
 	touchPanTool: 'Touch Panning',
 	twoFingerPanZoomTool: 'Panning and Zooming',
+	undoRedoTool: 'Undo/Redo',
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,

package/src/types.ts

@@ -46,6 +46,7 @@ export interface WheelEvt {
 export interface KeyPressEvent {
 	readonly kind: InputEvtType.KeyPressEvent;
 	readonly key: string;
+	readonly ctrlKey: boolean;
 }
 
 // Event triggered when pointer capture is taken by a different [PointerEvtListener].