live arrow shape

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

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import { Arrow } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
@@ -14,6 +14,20 @@ const ArrowShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePro
     const endY = obj.height || 0;
 
     const actualStrokeWidth = obj.strokeWidth ?? 2;
+    const actualStroke = obj.stroke || "#000000";
+
+    // اگر انتخاب شده و strokeWidth = 0 است، ضخامت را 3 کن تا مشخص باشد
+    const displayStrokeWidth = isSelected && actualStrokeWidth === 0 ? 3 : actualStrokeWidth;
+
+    // به‌روزرسانی رنگ و ضخامت به‌صورت لایو
+    useEffect(() => {
+        if (shapeRef.current) {
+            shapeRef.current.stroke(actualStroke);
+            shapeRef.current.fill(actualStroke);
+            shapeRef.current.strokeWidth(displayStrokeWidth);
+            shapeRef.current.getLayer()?.batchDraw();
+        }
+    }, [actualStroke, displayStrokeWidth, obj.stroke, obj.strokeWidth, isSelected]);
 
     return (
         <Arrow
@@ -22,9 +36,9 @@ const ArrowShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePro
             x={startX}
             y={startY}
             points={[0, 0, endX - startX, endY - startY]}
-            stroke={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
-            strokeWidth={actualStrokeWidth}
-            fill={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
+            stroke={actualStroke}
+            strokeWidth={displayStrokeWidth}
+            fill={actualStroke}
             hitStrokeWidth={20}
             perfectDrawEnabled={false}
             rotation={obj.rotation || 0}