diff --git a/src/pages/editor/components/canvas/useKeyboardMovement.ts b/src/pages/editor/components/canvas/useKeyboardMovement.ts index 6a5cf3a..a6b63eb 100644 --- a/src/pages/editor/components/canvas/useKeyboardMovement.ts +++ b/src/pages/editor/components/canvas/useKeyboardMovement.ts @@ -3,10 +3,10 @@ import Konva from "konva"; import { useEditorStore } from "../../store/editorStore"; export const useKeyboardMovement = () => { - const { selectedObjectId, objects, updateObject, tool, layerRef } = useEditorStore(); + const { selectedObjectId, objects, updateObject, deleteObject, tool, layerRef } = useEditorStore(); useEffect(() => { - if (tool !== "select" || !selectedObjectId) { + if (tool !== "select") { return; } @@ -16,6 +16,19 @@ export const useKeyboardMovement = () => { return; } + // Handle Delete and Backspace keys + if (e.key === "Delete" || e.key === "Backspace") { + if (selectedObjectId) { + e.preventDefault(); + deleteObject(selectedObjectId); + return; + } + } + + if (!selectedObjectId) { + return; + } + const selectedObject = objects.find((obj) => obj.id === selectedObjectId); if (!selectedObject) return; @@ -64,6 +77,6 @@ export const useKeyboardMovement = () => { return () => { window.removeEventListener("keydown", handleKeyDown); }; - }, [selectedObjectId, objects, updateObject, tool, layerRef]); + }, [selectedObjectId, objects, updateObject, deleteObject, tool, layerRef]); };