js-draw 0.0.5 → 0.0.8

package/src/geometry/Path.ts

@@ -367,16 +367,28 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
 
 		const moveTo = (point: Point2) => {
+			// The first moveTo/lineTo is already handled by the [startPoint] parameter of the Path constructor.
+			if (isFirstCommand) {
+				isFirstCommand = false;
+				return;
+			}
+
 			commands.push({
 				kind: PathCommandType.MoveTo,
 				point,
 			});
 		};
 		const lineTo = (point: Point2) => {
+			if (isFirstCommand) {
+				isFirstCommand = false;
+				return;
+			}
+
 			commands.push({
 				kind: PathCommandType.LineTo,
 				point,
@@ -492,6 +504,7 @@ export default class Path {
 			if (args.length > 0) {
 				firstPos ??= args[0];
 			}
+			isFirstCommand = false;
 		}
 
 		return new Path(firstPos ?? Vec2.zero, commands);

package/src/rendering/SVGRenderer.ts

@@ -15,12 +15,27 @@ export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStart: Point2|null;
 
 	private mainGroup: SVGGElement;
+	private overwrittenAttrs: Record<string, string|null> = {};
 
 	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
 		super(viewport);
 		this.clear();
 	}
 
+	// Sets an attribute on the root SVG element.
+	public setRootSVGAttribute(name: string, value: string|null) {
+		// Make the original value of the attribute restorable on clear
+		if (!(name in this.overwrittenAttrs)) {
+			this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+		}
+
+		if (value !== null) {
+			this.elem.setAttribute(name, value);
+		} else {
+			this.elem.removeAttribute(name);
+		}
+	}
+
 	public displaySize(): Vec2 {
 		return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
 	}
@@ -28,6 +43,18 @@ export default class SVGRenderer extends AbstractRenderer {
 	public clear() {
 		this.mainGroup = document.createElementNS(svgNameSpace, 'g');
 
+		// Restore all alltributes
+		for (const attrName in this.overwrittenAttrs) {
+			const value = this.overwrittenAttrs[attrName];
+
+			if (value) {
+				this.elem.setAttribute(attrName, value);
+			} else {
+				this.elem.removeAttribute(attrName);
+			}
+		}
+		this.overwrittenAttrs = {};
+
 		// Remove all children
 		this.elem.replaceChildren(this.mainGroup);
 	}

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