From ad729461310fd35b9b9f51f740f1a51a57d24769 Mon Sep 17 00:00:00 2001
From: Timur Khazamov <bboytx@gmail.com>
Date: Sun, 16 Feb 2020 17:00:45 +0100
Subject: [PATCH] Shortcuts to zoom in/out and to reset zoom (#770)

* Shortcuts to zoom in/out and to reset zoom

* add support for numerical keys

* Fixed Firefox compatibility

Co-authored-by: David Luzar <luzar.david@gmail.com>
---
 src/actions/actionCanvas.tsx | 31 +++++++++++++++++++++++++++++++
 src/actions/index.ts         |  1 +
 src/index.tsx                |  2 ++
 3 files changed, 34 insertions(+)

diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index daec869d..d3044532 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -6,6 +6,7 @@ import { trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
+import { KEYS } from "../keys";
 
 export const actionChangeViewBackgroundColor: Action = {
   name: "changeViewBackgroundColor",
@@ -57,6 +58,15 @@ export const actionClearCanvas: Action = {
 
 const ZOOM_STEP = 0.1;
 
+const KEY_CODES = {
+  MINUS: "Minus",
+  EQUAL: "Equal",
+  ZERO: "Digit0",
+  NUM_SUBTRACT: "NumpadSubtract",
+  NUM_ADD: "NumpadAdd",
+  NUM_ZERO: "Numpad0",
+};
+
 export const actionZoomIn: Action = {
   name: "zoomIn",
   perform: (elements, appState) => {
@@ -78,6 +88,9 @@ export const actionZoomIn: Action = {
       }}
     />
   ),
+  keyTest: event =>
+    (event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) &&
+    (event[KEYS.META] || event.shiftKey),
 };
 
 export const actionZoomOut: Action = {
@@ -101,4 +114,22 @@ export const actionZoomOut: Action = {
       }}
     />
   ),
+  keyTest: event =>
+    (event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) &&
+    (event[KEYS.META] || event.shiftKey),
+};
+
+export const actionResetZoom: Action = {
+  name: "resetZoom",
+  perform: (elements, appState) => {
+    return {
+      appState: {
+        ...appState,
+        zoom: 1,
+      },
+    };
+  },
+  keyTest: event =>
+    (event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
+    (event[KEYS.META] || event.shiftKey),
 };
diff --git a/src/actions/index.ts b/src/actions/index.ts
index 0a868e05..659c9d4b 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -23,6 +23,7 @@ export {
   actionClearCanvas,
   actionZoomIn,
   actionZoomOut,
+  actionResetZoom,
 } from "./actionCanvas";
 
 export { actionFinalize } from "./actionFinalize";
diff --git a/src/index.tsx b/src/index.tsx
index 0fe4dd72..6ffedf4f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -81,6 +81,7 @@ import {
   actionClearCanvas,
   actionZoomIn,
   actionZoomOut,
+  actionResetZoom,
   actionChangeProjectName,
   actionChangeExportBackground,
   actionLoadScene,
@@ -525,6 +526,7 @@ export class App extends React.Component<any, AppState> {
     this.actionManager.registerAction(actionClearCanvas);
     this.actionManager.registerAction(actionZoomIn);
     this.actionManager.registerAction(actionZoomOut);
+    this.actionManager.registerAction(actionResetZoom);
 
     this.actionManager.registerAction(actionChangeProjectName);
     this.actionManager.registerAction(actionChangeExportBackground);