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();
+        const clickedOnEmpty = e.target === stage;
-        if (!pointerPos) return;
+
+        if (clickedOnEmpty && selectedObjectId) {
+            clearSelection();
+            return;
+        }
 
         if (tool === "select") {
-            const clickedOnEmpty = e.target === stage;
             if (clickedOnEmpty) {
-                setSelectedObjectId(null);
+                clearSelection();
-                if (transformerRef.current) {
-                    transformerRef.current.nodes([]);
-                }
             }
             return;
         }
 
+        if (selectedObjectId) {
+            return;
+        }
+
+        const pointerPos = stage.getPointerPosition();
+        if (!pointerPos) return;
+
         setIsDrawing(true);
         setStartPos(pointerPos);
 

src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx

@@ -31,7 +31,7 @@ const RectangleInstruction: FC = () => {
                             onClick={() => setActiveShape(shape.id)}
                             className={clx(
                                 "size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
-                                isActive ? "border-black text-black" : "border-transparent hover:border-black/20",
+                                isActive ? "" : "border-transparent",
                             )}
                             aria-pressed={isActive}
                         >

src/pages/editor/components/tools/AbstractShape.tsx

@@ -13,7 +13,9 @@ const AbstractShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
         }
     }, [isSelected, transformerRef]);
 
-    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
+    const baseRadius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
+    const abstractScale = 0.85;
+    const radius = baseRadius * abstractScale;
     const innerRadius = radius * 0.5;
 
     return (
@@ -51,7 +53,7 @@ const AbstractShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dr
                 node.scaleX(1);
                 node.scaleY(1);
 
-                const newRadius = Math.max(5, radius * Math.min(scaleX, scaleY));
+                const newRadius = Math.max(5, baseRadius * Math.min(scaleX, scaleY));
                 const newSize = newRadius * 2;
                 onUpdate(obj.id, {
                     x: node.x() - newSize / 2,