From 47fce123d38b0d862fb1674c8e2625ec68a04e15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Zed=C3=A9n=20Yver=C3=A5s?= <felix@fzy.se>
Date: Sun, 14 Jul 2024 15:47:45 +0200
Subject: [PATCH] feat: support scroll wheel panning

This is similar to tools like figma, where the scroll wheel pans
the view and scroll is only done if the control key is pressed.

New bindings:
scroll wheel: pan y
shift + scroll wheel: pan x
ctrl + scroll wheel: zoom
---
 src/components/EditorCanvas/Canvas.jsx | 55 +++++++++++++++++---------
 src/data/shortcuts.js                  |  6 ++-
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index 8287fc0..c15cc05 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/src/components/EditorCanvas/Canvas.jsx
@@ -436,24 +436,43 @@ export default function Canvas() {
     "wheel",
     (e) => {
       e.preventDefault();
-      // How "eager" the viewport is to
-      // center the cursor's coordinates
-      const eagernessFactor = 0.05;
-      setTransform((prev) => ({
-        pan: {
-          x:
-            prev.pan.x -
-            (pointer.spaces.diagram.x - prev.pan.x) *
-              eagernessFactor *
-              Math.sign(e.deltaY),
-          y:
-            prev.pan.y -
-            (pointer.spaces.diagram.y - prev.pan.y) *
-              eagernessFactor *
-              Math.sign(e.deltaY),
-        },
-        zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
-      }));
+
+      if (e.ctrlKey) {
+        // How "eager" the viewport is to
+        // center the cursor's coordinates
+        const eagernessFactor = 0.05;
+        setTransform((prev) => ({
+          pan: {
+            x:
+              prev.pan.x -
+              (pointer.spaces.diagram.x - prev.pan.x) *
+                eagernessFactor *
+                Math.sign(e.deltaY),
+            y:
+              prev.pan.y -
+              (pointer.spaces.diagram.y - prev.pan.y) *
+                eagernessFactor *
+                Math.sign(e.deltaY),
+          },
+          zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
+        }));
+      } else if (e.shiftKey) {
+        setTransform((prev) => ({
+          ...prev,
+          pan: {
+            ...prev.pan,
+            x: prev.pan.x + e.deltaY / prev.zoom,
+          },
+        }));
+      } else {
+        setTransform((prev) => ({
+          ...prev,
+          pan: {
+            ...prev.pan,
+            y: prev.pan.y + e.deltaY / prev.zoom,
+          },
+        }));
+      }
     },
     canvasRef,
     { passive: false },
diff --git a/src/data/shortcuts.js b/src/data/shortcuts.js
index 38cc673..eaf3c03 100644
--- a/src/data/shortcuts.js
+++ b/src/data/shortcuts.js
@@ -42,7 +42,9 @@ export const shortcuts = [
     title: "Reset view",
     description: "Resetting view will set diagram pan to (0, 0).",
   },
-  { shortcut: "CTRL+UP / Wheel up", title: "Zoom in" },
-  { shortcut: "CTRL+DOWN / Wheel down", title: "Zoom out" },
+  { shortcut: "CTRL+UP / CTRL+Wheel up", title: "Zoom in" },
+  { shortcut: "CTRL+DOWN / CTRL+Wheel down", title: "Zoom out" },
+  { shortcut: "Wheel up / Wheel down", title: "Pan Y" },
+  { shortcut: "SHIFT+Wheel up / SHIFT+Wheel down", title: "Pan X" },
   { shortcut: "CTRL+H", title: "Open shortcuts" },
 ];