movent object with keyboard

2025-12-31 15:13:20 +03:30
parent 828ba0c7c1
commit af6cf9acd9
2 changed files with 71 additions and 0 deletions
@@ -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]);
+};
+