js-draw 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,4 +1,7 @@
 
+# 0.0.8
+ * Map `ctrl+z` to undo, `ctrl+shift+Z` to redo.
+
 # 0.0.7
  * Preserve SVG global attributes when loading/saving images.
     * This fixes a bug where lost information (e.g. a missing namespace) broke SVGs on export.

package/dist/src/EditorImage.d.ts

@@ -15,8 +15,8 @@ export default class EditorImage {
     getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
     static AddElementCommand: {
         new (element: AbstractComponent, applyByFlattening?: boolean): {
-            readonly "__#679@#element": AbstractComponent;
-            "__#679@#applyByFlattening": boolean;
+            readonly "__#2@#element": AbstractComponent;
+            "__#2@#applyByFlattening": boolean;
             apply(editor: Editor): void;
             unapply(editor: Editor): void;
             description(localization: EditorLocalization): string;

package/dist/src/UndoRedoHistory.d.ts

@@ -13,5 +13,7 @@ declare class UndoRedoHistory {
     push(command: Command, apply?: boolean): void;
     undo(): void;
     redo(): void;
+    get undoStackSize(): number;
+    get redoStackSize(): number;
 }
 export default UndoRedoHistory;

package/dist/src/Viewport.d.ts

@@ -10,7 +10,7 @@ export declare class Viewport {
     private notifier;
     static ViewportTransform: {
         new (transform: Mat33): {
-            readonly "__#678@#inverseTransform": Mat33;
+            readonly "__#1@#inverseTransform": Mat33;
             readonly transform: Mat33;
             apply(editor: Editor): void;
             unapply(editor: Editor): void;

package/dist/src/htmlUtil.d.ts

@@ -0,0 +1 @@
+export declare const escapeHtml: (html: string) => string;

package/dist/src/tools/BaseTool.d.ts

@@ -6,10 +6,10 @@ export default abstract class BaseTool implements PointerEvtListener {
     readonly description: string;
     private enabled;
     private group;
-    abstract onPointerDown(event: PointerEvt): boolean;
-    abstract onPointerMove(event: PointerEvt): void;
-    abstract onPointerUp(event: PointerEvt): void;
-    abstract onGestureCancel(): void;
+    onPointerDown(_event: PointerEvt): boolean;
+    onPointerMove(_event: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
     abstract readonly kind: ToolType;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;

package/dist/src/tools/ToolController.d.ts

@@ -7,7 +7,8 @@ export declare enum ToolType {
     Pen = 1,
     Selection = 2,
     Eraser = 3,
-    PanZoom = 4
+    PanZoom = 4,
+    UndoRedoShortcut = 5
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/UndoRedoShortcut.d.ts

@@ -0,0 +1,10 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export default class UndoRedoShortcut extends BaseTool {
+    private editor;
+    kind: ToolType.UndoRedoShortcut;
+    constructor(editor: Editor);
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+}

package/dist/src/tools/localization.d.ts

@@ -4,6 +4,7 @@ export interface ToolLocalization {
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
+    undoRedoTool: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/types.d.ts

@@ -29,6 +29,7 @@ export interface WheelEvt {
 export interface KeyPressEvent {
     readonly kind: InputEvtType.KeyPressEvent;
     readonly key: string;
+    readonly ctrlKey: boolean;
 }
 export interface GestureCancelEvt {
     readonly kind: InputEvtType.GestureCancelEvt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -238,6 +238,7 @@ export class Editor {
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
+				ctrlKey: evt.ctrlKey,
 			})) {
 				evt.preventDefault();
 			}
@@ -447,7 +448,6 @@ export class Editor {
 		result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
 		result.setAttribute('width', `${rect.w}`);
 		result.setAttribute('height', `${rect.h}`);
-		console.log('res', result);
 
 		// Ensure the image can be identified as an SVG if downloaded.
 		// See https://jwatt.org/svg/authoring/

package/src/EditorImage.test.ts

@@ -5,12 +5,9 @@ import Stroke from './components/Stroke';
 import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
-import Editor from './Editor';
-import { RenderingMode } from './Display';
 import DummyRenderer from './rendering/DummyRenderer';
 import { RenderingStyle } from './rendering/AbstractRenderer';
-
-const createEditor = () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+import createEditor from './testing/createEditor';
 
 describe('EditorImage', () => {
 	const testStroke = new Stroke([

package/src/UndoRedoHistory.ts

@@ -56,6 +56,14 @@ class UndoRedoHistory {
 		}
 		this.fireUpdateEvent();
 	}
+
+	public get undoStackSize(): number {
+		return this.undoStack.length;
+	}
+
+	public get redoStackSize(): number {
+		return this.redoStack.length;
+	}
 }
 
 export default UndoRedoHistory;

package/src/testing/createEditor.ts

@@ -0,0 +1,4 @@
+import { RenderingMode } from '../Display';
+import Editor from '../Editor';
+
+export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });

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/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].