#299 add custom hook for keyboard displacements

src/pods/canvas/canvas.pod.tsx

@@ -11,6 +11,7 @@ import { EditableComponent } from '@/common/components/inline-edit';
 import { useSnapIn } from './use-snapin.hook';
 import { ShapeType } from '@/core/model';
 import { useDropImageFromDesktop } from './use-drop-image-from-desktop';
+import { useKeyboardDisplacement } from './use-keyboard-displacement';
 
 export const CanvasPod = () => {
   const [isTransfomerBeingDragged, setIsTransfomerBeingDragged] =
@@ -86,6 +87,8 @@ export const CanvasPod = () => {
       updateShapePosition(id, { x, y });
     };
 
+  useKeyboardDisplacement();
+
   {
     /* TODO: add other animation for isDraggerOver */
   }

src/pods/canvas/use-keyboard-displacement.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { useCanvasContext } from '@/core/providers';
+
+export const useKeyboardDisplacement = () => {
+  const { selectionInfo, updateShapePosition } = useCanvasContext();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      event.preventDefault();
+
+      const selectedShapeData = selectionInfo.getSelectedShapeData();
+      if (selectedShapeData) {
+        const step = event.shiftKey ? 25 : 2; // If shift is pressed, move faster
+        switch (event.key) {
+          case 'ArrowUp':
+            updateShapePosition(selectionInfo.selectedShapeId, {
+              x: selectedShapeData.x,
+              y: selectedShapeData.y - step,
+            });
+            break;
+          case 'ArrowDown':
+            updateShapePosition(selectionInfo.selectedShapeId, {
+              x: selectedShapeData.x,
+              y: selectedShapeData.y + step,
+            });
+            break;
+          case 'ArrowLeft':
+            updateShapePosition(selectionInfo.selectedShapeId, {
+              x: selectedShapeData.x - step,
+              y: selectedShapeData.y,
+            });
+            break;
+          case 'ArrowRight':
+            updateShapePosition(selectionInfo.selectedShapeId, {
+              x: selectedShapeData.x + step,
+              y: selectedShapeData.y,
+            });
+            break;
+          default:
+            break;
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [selectionInfo.selectedShapeId, selectionInfo.getSelectedShapeData]);
+};