js-draw 0.0.6 → 0.0.9

package/dist/src/Editor.js

@@ -175,6 +175,7 @@ export class Editor {
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.KeyPressEvent,
                 key: evt.key,
+                ctrlKey: evt.ctrlKey,
             })) {
                 evt.preventDefault();
             }

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 "__#2@#element": AbstractComponent;
-            "__#2@#applyByFlattening": boolean;
+            readonly "__#679@#element": AbstractComponent;
+            "__#679@#applyByFlattening": boolean;
             apply(editor: Editor): void;
             unapply(editor: Editor): void;
             description(localization: EditorLocalization): string;

package/dist/src/SVGLoader.d.ts

@@ -15,7 +15,9 @@ export default class SVGLoader implements ImageLoader {
     private addPath;
     private addUnknownNode;
     private updateViewBox;
+    private updateSVGAttrs;
     private visit;
+    private getSourceAttrs;
     start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener): Promise<Rect2>;
     static fromString(text: string): SVGLoader;
 }

package/dist/src/SVGLoader.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import Color4 from './Color4';
 import Stroke from './components/Stroke';
+import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
@@ -113,6 +114,10 @@ export default class SVGLoader {
         }
         this.rootViewBox = new Rect2(x, y, width, height);
     }
+    updateSVGAttrs(node) {
+        var _a;
+        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+    }
     visit(node) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
@@ -126,6 +131,7 @@ export default class SVGLoader {
                     break;
                 case 'svg':
                     this.updateViewBox(node);
+                    this.updateSVGAttrs(node);
                     break;
                 default:
                     console.warn('Unknown SVG element,', node);
@@ -142,6 +148,12 @@ export default class SVGLoader {
             yield ((_a = this.onProgress) === null || _a === void 0 ? void 0 : _a.call(this, this.processedCount, this.totalToProcess));
         });
     }
+    // Get SVG element attributes (e.g. xlink=...)
+    getSourceAttrs(node) {
+        return node.getAttributeNames().map(attr => {
+            return [attr, node.getAttribute(attr)];
+        });
+    }
     start(onAddComponent, onProgress) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {

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/UndoRedoHistory.js

@@ -42,5 +42,11 @@ class UndoRedoHistory {
         }
         this.fireUpdateEvent();
     }
+    get undoStackSize() {
+        return this.undoStack.length;
+    }
+    get redoStackSize() {
+        return this.redoStack.length;
+    }
 }
 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 "__#1@#inverseTransform": Mat33;
+            readonly "__#678@#inverseTransform": Mat33;
             readonly transform: Mat33;
             apply(editor: Editor): void;
             unapply(editor: Editor): void;

package/dist/src/components/SVGGlobalAttributesObject.d.ts

@@ -0,0 +1,15 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    private readonly attrs;
+    protected contentBBox: Rect2;
+    constructor(attrs: Array<[string, string | null]>);
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    intersects(_lineSegment: LineSegment2): boolean;
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    description(localization: ImageComponentLocalization): string;
+}

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -0,0 +1,29 @@
+import Rect2 from '../geometry/Rect2';
+import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractComponent from './AbstractComponent';
+// Stores global SVG attributes (e.g. namespace identifiers.)
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    constructor(attrs) {
+        super();
+        this.attrs = attrs;
+        this.contentBBox = Rect2.empty;
+    }
+    render(canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        console.log('Rendering to SVG.', this.attrs);
+        for (const [attr, value] of this.attrs) {
+            canvas.setRootSVGAttribute(attr, value);
+        }
+    }
+    intersects(_lineSegment) {
+        return false;
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    description(localization) {
+        return localization.svgObject;
+    }
+}

package/dist/src/rendering/SVGRenderer.d.ts

@@ -10,7 +10,9 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPath;
     private lastPathStart;
     private mainGroup;
+    private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
+    setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
     protected beginPath(startPoint: Point2): void;

package/dist/src/rendering/SVGRenderer.js

@@ -6,13 +6,38 @@ export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.overwrittenAttrs = {};
         this.clear();
     }
+    // Sets an attribute on the root SVG element.
+    setRootSVGAttribute(name, value) {
+        // 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);
+        }
+    }
     displaySize() {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     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/dist/src/testing/createEditor.d.ts

@@ -0,0 +1,3 @@
+import Editor from '../Editor';
+declare const _default: () => Editor;
+export default _default;

package/dist/src/testing/createEditor.js

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

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/BaseTool.js

@@ -6,6 +6,10 @@ export default class BaseTool {
         this.enabled = true;
         this.group = null;
     }
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
+    onPointerUp(_event) { }
+    onGestureCancel() { }
     onWheel(_event) {
         return false;
     }

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/ToolController.js

@@ -5,6 +5,7 @@ import ToolEnabledGroup from './ToolEnabledGroup';
 import Eraser from './Eraser';
 import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
+import UndoRedoShortcut from './UndoRedoShortcut';
 export var ToolType;
 (function (ToolType) {
     ToolType[ToolType["TouchPanZoom"] = 0] = "TouchPanZoom";
@@ -12,6 +13,7 @@ export var ToolType;
     ToolType[ToolType["Selection"] = 2] = "Selection";
     ToolType[ToolType["Eraser"] = 3] = "Eraser";
     ToolType[ToolType["PanZoom"] = 4] = "PanZoom";
+    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
@@ -31,6 +33,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/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/UndoRedoShortcut.js

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

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/tools/localization.js

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

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.6",
+  "version": "0.0.9",
   "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",
@@ -48,7 +48,7 @@
     "linter-precommit": "eslint --fix --ext .js --ext .ts",
     "lint-staged": "lint-staged",
     "_postinstall": "husky install",
-    "prepack": "pinst --disable",
+    "prepack": "yarn build && pinst --disable",
     "postpack": "pinst --enable"
   },
   "dependencies": {

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();
 			}

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/SVGLoader.ts

@@ -1,6 +1,7 @@
 import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
+import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
@@ -127,6 +128,10 @@ export default class SVGLoader implements ImageLoader {
 		this.rootViewBox = new Rect2(x, y, width, height);
 	}
 
+	private updateSVGAttrs(node: SVGSVGElement) {
+		this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+	}
+
 	private async visit(node: Element) {
 		this.totalToProcess += node.childElementCount;
 
@@ -139,6 +144,7 @@ export default class SVGLoader implements ImageLoader {
 			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
+			this.updateSVGAttrs(node as SVGSVGElement);
 			break;
 		default:
 			console.warn('Unknown SVG element,', node);
@@ -158,6 +164,13 @@ export default class SVGLoader implements ImageLoader {
 		await this.onProgress?.(this.processedCount, this.totalToProcess);
 	}
 
+	// Get SVG element attributes (e.g. xlink=...)
+	private getSourceAttrs(node: SVGSVGElement): Array<[string, string|null]> {
+		return node.getAttributeNames().map(attr => {
+			return [ attr, node.getAttribute(attr) ];
+		});
+	}
+
 	public async start(
 		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener
 	): Promise<Rect2> {

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/components/SVGGlobalAttributesObject.ts

@@ -0,0 +1,39 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer from '../rendering/AbstractRenderer';
+import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+// Stores global SVG attributes (e.g. namespace identifiers.)
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+	protected contentBBox: Rect2;
+	public constructor(private readonly attrs: Array<[string, string|null]>) {
+		super();
+		this.contentBBox = Rect2.empty;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		if (!(canvas instanceof SVGRenderer)) {
+			// Don't draw unrenderable objects if we can't
+			return;
+		}
+
+		console.log('Rendering to SVG.', this.attrs);
+		for (const [ attr, value ] of this.attrs) {
+			canvas.setRootSVGAttribute(attr, value);
+		}
+	}
+
+	public intersects(_lineSegment: LineSegment2): boolean {
+		return false;
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33): void {
+	}
+
+	public description(localization: ImageComponentLocalization): string {
+		return localization.svgObject;
+	}
+}

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;
+	}
+}