movent object with keyboard

src/pages/editor/components/EditorCanvas.tsx

@@ -4,6 +4,7 @@ import Konva from "konva";
 import { useEditorStore } from "../store/editorStore";
 import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
+import { useKeyboardMovement } from "./canvas/useKeyboardMovement";
 import ObjectRenderer from "./canvas/ObjectRenderer";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
@@ -32,6 +33,7 @@ const EditorCanvas = () => {
 
   const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
   const stageSize = useStageSize();
+  useKeyboardMovement();
 
   useEffect(() => {
     if (stageRef.current) {

src/pages/editor/components/canvas/useKeyboardMovement.ts

@@ -0,0 +1,69 @@
+import { useEffect } from "react";
+import Konva from "konva";
+import { useEditorStore } from "../../store/editorStore";
+
+export const useKeyboardMovement = () => {
+  const { selectedObjectId, objects, updateObject, tool, layerRef } = useEditorStore();
+
+  useEffect(() => {
+    if (tool !== "select" || !selectedObjectId) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+
+      const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
+      if (!selectedObject) return;
+
+      const step = e.shiftKey ? 10 : 1;
+      let newX = selectedObject.x || 0;
+      let newY = selectedObject.y || 0;
+
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          newY -= step;
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          newY += step;
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          newX -= step;
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          newX += step;
+          break;
+        default:
+          return;
+      }
+
+      updateObject(selectedObjectId, {
+        x: newX,
+        y: newY,
+      });
+
+      if (layerRef?.current) {
+        const node = layerRef.current.findOne(`#${selectedObjectId}`);
+        if (node) {
+          node.x(newX);
+          node.y(newY);
+          layerRef.current.batchDraw();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [selectedObjectId, objects, updateObject, tool, layerRef]);
+};
+