From 254887ada85b3cdd4740122c0fa4c5da78414315 Mon Sep 17 00:00:00 2001
From: yveskalume <yvkalume@gmail.com>
Date: Wed, 7 Jan 2026 21:10:46 +0200
Subject: [PATCH] feat: add draggable functionality to Arrow component for
 dynamic point adjustment

---
 src/components/elements/Arrow.tsx | 36 ++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/elements/Arrow.tsx b/src/components/elements/Arrow.tsx
index 486798f..72458e8 100644
--- a/src/components/elements/Arrow.tsx
+++ b/src/components/elements/Arrow.tsx
@@ -164,7 +164,41 @@ const Arrow: React.FC<ArrowProps> = ({ element, isSelected, onSelect, onChange }
     : { x: renderStart.x + (renderEnd.x - renderStart.x) * labelPosition, y: renderStart.y + (renderEnd.y - renderStart.y) * labelPosition };
 
   return (
-    <Group>
+    <Group
+      draggable={!element.locked}
+      onDragEnd={(e) => {
+        if (e.target !== e.currentTarget) return;
+
+        const node = e.target;
+        const dx = node.x();
+        const dy = node.y();
+
+        const newPoints = points.map((p) => ({
+          x: p.x + dx,
+          y: p.y + dy,
+        }));
+
+        let newControlPoints = undefined;
+        if (props.controlPoints && props.controlPoints.length > 0) {
+          newControlPoints = props.controlPoints.map((p) => ({
+            x: p.x + dx,
+            y: p.y + dy,
+          }));
+        }
+
+        // Reset relative position
+        node.x(0);
+        node.y(0);
+
+        onChange({
+          points: newPoints,
+          props: {
+            ...props,
+            controlPoints: newControlPoints || props.controlPoints,
+          },
+        });
+      }}
+    >
       {/* If endpoints overlap/invalid, render a small dot instead of a shadowed arrow to avoid Konva draw crashes. */}
       {isDegenerate && (
         <Circle