Implement ctrl-z/ctrl-y

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 {

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