From 8c82d67bf7edca78626f9eb555af25acacdcad92 Mon Sep 17 00:00:00 2001
From: Andy Brenneke <andy.brenneke@ironcladhq.com>
Date: Tue, 10 Oct 2023 13:48:00 -0700
Subject: [PATCH] ctrl-+, ctrl-- zooming

---
 packages/app/src/hooks/useCanvasHotkeys.ts | 49 ++++++++++++++++++----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/hooks/useCanvasHotkeys.ts b/packages/app/src/hooks/useCanvasHotkeys.ts
index 10691f085..c97816be8 100644
--- a/packages/app/src/hooks/useCanvasHotkeys.ts
+++ b/packages/app/src/hooks/useCanvasHotkeys.ts
@@ -8,27 +8,36 @@ import { useCanvasPositioning } from './useCanvasPositioning';
 export function useCanvasHotkeys() {
   const [canvasPosition, setCanvasPosition] = useRecoilState(canvasPositionState);
   const viewportBounds = useViewportBounds();
-  const { clientToCanvasPosition } = useCanvasPositioning();
+  const { canvasToClientPosition } = useCanvasPositioning();
 
   const latestHandler = useLatest((e: KeyboardEvent) => {
+    // If we're in an input, don't do anything
+    if (['input', 'textarea'].includes(document.activeElement?.tagName.toLowerCase()!)) {
+      return;
+    }
+
     if ((e.key === '-' || e.key === '=') && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
       const zoomSpeed = 0.25;
       const zoomFactor = e.key === '=' ? 1 + zoomSpeed : 1 - zoomSpeed;
 
       const newZoom = canvasPosition.zoom * zoomFactor;
 
-      const viewportCenter = {
+      const centerOfScreenCanvasCoords = {
         x: viewportBounds.left + (viewportBounds.right - viewportBounds.left) / 2,
         y: viewportBounds.top + (viewportBounds.bottom - viewportBounds.top) / 2,
       };
 
-      const currentMousePosCanvas = clientToCanvasPosition(viewportCenter.x, viewportCenter.y);
-      const newX = viewportCenter.x / newZoom - canvasPosition.x;
-      const newY = viewportCenter.y / newZoom - canvasPosition.y;
+      const { x: clientX, y: clientY } = canvasToClientPosition(
+        centerOfScreenCanvasCoords.x,
+        centerOfScreenCanvasCoords.y,
+      );
+
+      const newX = clientX / newZoom - canvasPosition.x;
+      const newY = clientY / newZoom - canvasPosition.y;
 
       const diff = {
-        x: newX - currentMousePosCanvas.x,
-        y: newY - currentMousePosCanvas.y,
+        x: newX - centerOfScreenCanvasCoords.x,
+        y: newY - centerOfScreenCanvasCoords.y,
       };
 
       const position: CanvasPosition = {
@@ -36,6 +45,32 @@ export function useCanvasHotkeys() {
         y: canvasPosition.y + diff.y,
         zoom: newZoom,
       };
+
+      setCanvasPosition(position);
+    }
+
+    const isArrowKey = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);
+    if (isArrowKey) {
+      const arrowSpeed = 100;
+      const arrowFactor = e.shiftKey ? 10 : 1;
+      const arrowDirection = {
+        ArrowUp: { x: 0, y: 1 },
+        ArrowDown: { x: 0, y: -1 },
+        ArrowLeft: { x: 1, y: 0 },
+        ArrowRight: { x: -1, y: 0 },
+      };
+
+      const direction = arrowDirection[e.key as keyof typeof arrowDirection];
+      const diff = {
+        x: direction.x * arrowSpeed * arrowFactor,
+        y: direction.y * arrowSpeed * arrowFactor,
+      };
+
+      const position: CanvasPosition = {
+        x: canvasPosition.x + diff.x,
+        y: canvasPosition.y + diff.y,
+        zoom: canvasPosition.zoom,
+      };
       setCanvasPosition(position);
     }
   });