fix select peykan

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

@@ -13,15 +13,23 @@ const ArrowShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dragg
         }
     }, [isSelected, transformerRef]);
 
+    const startX = obj.x;
+    const startY = obj.y;
+    const endX = obj.width || 0;
+    const endY = obj.height || 0;
+
     return (
         <Arrow
             ref={shapeRef}
-            x={obj.x}
+            id={obj.id}
-            y={obj.y}
+            x={startX}
-            points={[0, 0, (obj.width || 0) - obj.x, (obj.height || 0) - obj.y]}
+            y={startY}
+            points={[0, 0, endX - startX, endY - startY]}
             stroke={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
-            strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
+            strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 2)}
             fill={isSelected ? "#3b82f6" : obj.stroke || "#000000"}
+            hitStrokeWidth={20}
+            perfectDrawEnabled={false}
             rotation={obj.rotation || 0}
             draggable={draggable}
             onClick={() => {
@@ -31,9 +39,39 @@ const ArrowShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dragg
             }}
             onDragEnd={(e) => {
                 const node = e.target;
+                const newX = node.x();
+                const newY = node.y();
+                const dx = endX - startX;
+                const dy = endY - startY;
+
                 onUpdate(obj.id, {
-                    x: node.x(),
+                    x: newX,
-                    y: node.y(),
+                    y: newY,
+                    width: newX + dx,
+                    height: newY + dy,
+                });
+            }}
+            onTransformEnd={() => {
+                const node = shapeRef.current;
+                if (!node) return;
+
+                const scaleX = node.scaleX();
+                const scaleY = node.scaleY();
+
+                node.scaleX(1);
+                node.scaleY(1);
+
+                const newX = node.x();
+                const newY = node.y();
+                const dx = (endX - startX) * scaleX;
+                const dy = (endY - startY) * scaleY;
+
+                onUpdate(obj.id, {
+                    x: newX,
+                    y: newY,
+                    rotation: node.rotation(),
+                    width: newX + dx,
+                    height: newY + dy,
                 });
             }}
         />