From eee961d65fa7ee0996083523a0eb1286caaa7bba Mon Sep 17 00:00:00 2001
From: Timur Khazamov <bboytx@gmail.com>
Date: Sun, 16 Feb 2020 14:38:53 +0100
Subject: [PATCH] Use meta key + wheel to zoom in/out (#769)

---
 src/actions/actionCanvas.tsx |  7 +------
 src/index.tsx                | 16 ++++++++++++----
 src/scene/index.ts           |  2 +-
 src/scene/zoom.ts            |  6 ++++++
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index cd390d49..daec869d 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -5,6 +5,7 @@ import { getDefaultAppState } from "../appState";
 import { trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
+import { getNormalizedZoom } from "../scene";
 
 export const actionChangeViewBackgroundColor: Action = {
   name: "changeViewBackgroundColor",
@@ -56,12 +57,6 @@ export const actionClearCanvas: Action = {
 
 const ZOOM_STEP = 0.1;
 
-function getNormalizedZoom(zoom: number): number {
-  const normalizedZoom = parseFloat(zoom.toFixed(2));
-  const clampedZoom = Math.max(0.1, Math.min(normalizedZoom, 2));
-  return clampedZoom;
-}
-
 export const actionZoomIn: Action = {
   name: "zoomIn",
   perform: (elements, appState) => {
diff --git a/src/index.tsx b/src/index.tsx
index f4d9d5a7..7c6fdade 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -35,6 +35,7 @@ import {
   calculateScrollCenter,
   loadFromBlob,
   getZoomOrigin,
+  getNormalizedZoom,
 } from "./scene";
 
 import { renderScene } from "./renderer";
@@ -1983,10 +1984,17 @@ export class App extends React.Component<any, AppState> {
     e.preventDefault();
     const { deltaX, deltaY } = e;
 
-    this.setState({
-      scrollX: this.state.scrollX - deltaX / this.state.zoom,
-      scrollY: this.state.scrollY - deltaY / this.state.zoom,
-    });
+    if (e[KEYS.META]) {
+      this.setState(({ zoom }) => ({
+        zoom: getNormalizedZoom(zoom - deltaY / 100),
+      }));
+      return;
+    }
+
+    this.setState(({ zoom, scrollX, scrollY }) => ({
+      scrollX: scrollX - deltaX / zoom,
+      scrollY: scrollY - deltaY / zoom,
+    }));
   };
 
   private addElementsFromPaste = (
diff --git a/src/scene/index.ts b/src/scene/index.ts
index c921905f..af9795dd 100644
--- a/src/scene/index.ts
+++ b/src/scene/index.ts
@@ -27,4 +27,4 @@ export {
   hasText,
 } from "./comparisons";
 export { createScene } from "./createScene";
-export { getZoomOrigin, getZoomTranslation } from "./zoom";
+export { getZoomOrigin, getZoomTranslation, getNormalizedZoom } from "./zoom";
diff --git a/src/scene/zoom.ts b/src/scene/zoom.ts
index 45d08278..71074d19 100644
--- a/src/scene/zoom.ts
+++ b/src/scene/zoom.ts
@@ -28,3 +28,9 @@ export function getZoomTranslation(canvas: HTMLCanvasElement, zoom: number) {
     y: parseFloat(diffMiddleOfTheCanvas.y.toFixed(8)),
   };
 }
+
+export function getNormalizedZoom(zoom: number): number {
+  const normalizedZoom = parseFloat(zoom.toFixed(2));
+  const clampedZoom = Math.max(0.1, Math.min(normalizedZoom, 2));
+  return clampedZoom;
+}