From 3b47e29ba4de6596cca7a21d733c5f5a242f491f Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 19 Nov 2025 08:57:42 +0330
Subject: [PATCH] rectange

---
 .../components/canvas/useDrawingHandlers.ts   | 33 ++++++++++++++-----
 .../instructions/RectangleInstruction.tsx     |  2 +-
 .../editor/components/tools/AbstractShape.tsx |  6 ++--
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/pages/editor/components/canvas/useDrawingHandlers.ts b/src/pages/editor/components/canvas/useDrawingHandlers.ts
index 0cc9b6a..5f8d9d1 100644
--- a/src/pages/editor/components/canvas/useDrawingHandlers.ts
+++ b/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);
 
diff --git a/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx b/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
index 146006a..a551a9b 100644
--- a/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
+++ b/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}
                         >
diff --git a/src/pages/editor/components/tools/AbstractShape.tsx b/src/pages/editor/components/tools/AbstractShape.tsx
index 83ff9be..eda5fdd 100644
--- a/src/pages/editor/components/tools/AbstractShape.tsx
+++ b/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,