rectange

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

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import Konva from "konva";
-import { useEditorStore, type EditorObject } from "../../store/editorStore";
+import { useEditorStore, type EditorObject } from "@/pages/editor/store/editorStore";
 import { createDrawingObject } from "./drawingUtils";
 
 export const useDrawingHandlers = () => {
@@ -9,31 +9,46 @@ export const useDrawingHandlers = () => {
     const [tempObject, setTempObject] = useState<EditorObject | null>(null);
     const transformerRef = useRef<Konva.Transformer>(null);
 
-    const { tool, addObject, updateObject, setSelectedObjectId } = useEditorStore();
+    const { tool, addObject, updateObject, setSelectedObjectId, selectedObjectId } = useEditorStore();
 
     useEffect(() => {
         setTempObject(null);
         setIsDrawing(false);
     }, [tool]);
 
+    const clearSelection = () => {
+        setSelectedObjectId(null);
+        if (transformerRef.current) {
+            transformerRef.current.nodes([]);
+            transformerRef.current.getLayer()?.batchDraw();
+        }
+    };
+
     const handleStageMouseDown = (e: Konva.KonvaEventObject<MouseEvent>) => {
         const stage = e.target.getStage();
         if (!stage) return;
 
-        const pointerPos = stage.getPointerPosition();
-        if (!pointerPos) return;
+        const clickedOnEmpty = e.target === stage;
+
+        if (clickedOnEmpty && selectedObjectId) {
+            clearSelection();
+            return;
+        }
 
         if (tool === "select") {
-            const clickedOnEmpty = e.target === stage;
             if (clickedOnEmpty) {
-                setSelectedObjectId(null);
-                if (transformerRef.current) {
-                    transformerRef.current.nodes([]);
-                }
+                clearSelection();
             }
             return;
         }
 
+        if (selectedObjectId) {
+            return;
+        }
+
+        const pointerPos = stage.getPointerPosition();
+        if (!pointerPos) return;
+
         setIsDrawing(true);
         setStartPos(pointerPos);