From 4a63b7f762ef2f4628cffce98df67b186b54c709 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Fri, 5 Aug 2022 23:28:06 +0200
Subject: [PATCH] Implement ctrl-z/ctrl-y

---
 src/Components/SVG/SVG.tsx |  4 ++--
 src/Editor.tsx             | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index d2cc1b2..9ebe3af 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -36,11 +36,11 @@ export class SVG extends React.PureComponent<ISVGProps> {
   }
 
   componentDidMount(): void {
-    window.addEventListener('resize', this.resizeViewBox.bind(this));
+    window.addEventListener('resize', () => this.resizeViewBox());
   }
 
   componentWillUnmount(): void {
-    window.removeEventListener('resize', this.resizeViewBox.bind(this));
+    window.removeEventListener('resize', () => this.resizeViewBox());
   }
 
   render(): JSX.Element {
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 8cb75f2..5bdca49 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -34,6 +34,30 @@ class Editor extends React.Component<IEditorProps> {
     };
   }
 
+  componentDidMount(): void {
+    window.addEventListener('keyup', (event) => this.onKeyDown(event));
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('keyup', (event) => this.onKeyDown(event));
+  }
+
+  public onKeyDown(event: KeyboardEvent): void {
+    event.preventDefault();
+    if (event.isComposing || event.keyCode === 229) {
+      return;
+    }
+    if (event.key === 'z' &&
+        event.ctrlKey &&
+        this.state.historyCurrentStep > 0) {
+      this.LoadState(this.state.historyCurrentStep - 1);
+    } else if (event.key === 'y' &&
+              event.ctrlKey &&
+              this.state.historyCurrentStep < this.state.history.length - 1) {
+      this.LoadState(this.state.historyCurrentStep + 1);
+    }
+  }
+
   public getCurrentHistory = (): IHistoryState[] => this.state.history.slice(0, this.state.historyCurrentStep + 1);
   public getCurrentHistoryState = (): IHistoryState => this.state.history[this.state.historyCurrentStep];