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

@@ -436,6 +436,8 @@ export default function Canvas() {
     "wheel",
     (e) => {
       e.preventDefault();
+
+      if (e.ctrlKey) {
         // How "eager" the viewport is to
         // center the cursor's coordinates
         const eagernessFactor = 0.05;
@@ -454,6 +456,23 @@ export default function Canvas() {
           },
           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 },

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+UP / CTRL+Wheel up", title: "Zoom in" },
-  { shortcut: "CTRL+DOWN / Wheel down", title: "Zoom out" },
+  { 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" },
 ];