Use meta key + wheel to zoom in/out (#769)

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) => {

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({
+    if (e[KEYS.META]) {
-      scrollX: this.state.scrollX - deltaX / this.state.zoom,
+      this.setState(({ zoom }) => ({
-      scrollY: this.state.scrollY - deltaY / this.state.zoom,
+        zoom: getNormalizedZoom(zoom - deltaY / 100),
-    });
+      }));
+      return;
+    }
+
+    this.setState(({ zoom, scrollX, scrollY }) => ({
+      scrollX: scrollX - deltaX / zoom,
+      scrollY: scrollY - deltaY / zoom,
+    }));
   };
 
   private addElementsFromPaste = (

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

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