From 06389f96b96d682451cc38b50101c14f696b5b77 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Mon, 4 Sep 2023 08:44:50 +0530
Subject: [PATCH] fix: Update start/end points by 0.5 so bindings don't overlap
 with start/end bound element coordinates.

---
 src/components/App.tsx |  1 +
 src/data/transform.ts  | 43 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a03c1180d..250dcfd60 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -4056,6 +4056,7 @@ class App extends React.Component<AppProps, AppState> {
       scenePointer.x,
       scenePointer.y,
     );
+
     this.hitLinkElement = this.getElementLinkAtPosition(
       scenePointer,
       hitElement,
diff --git a/src/data/transform.ts b/src/data/transform.ts
index 01dba7691..3cf03fb10 100644
--- a/src/data/transform.ts
+++ b/src/data/transform.ts
@@ -359,6 +359,48 @@ const bindLinearElementToElement = (
       );
     }
   }
+
+  // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
+  const endPointIndex = linearElement.points.length - 1;
+  const delta = 0.5;
+  const newPoints = JSON.parse(JSON.stringify(linearElement.points));
+  // left to right so shift the arrow towards right
+  if (
+    linearElement.points[endPointIndex][0] >
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = delta;
+    newPoints[endPointIndex][0] -= delta;
+  }
+
+  // right to left so shift the arrow towards left
+  if (
+    linearElement.points[endPointIndex][0] <
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = -delta;
+    newPoints[endPointIndex][0] += delta;
+  }
+  // top to bottom so shift the arrow towards top
+  if (
+    linearElement.points[endPointIndex][1] >
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = delta;
+    newPoints[endPointIndex][1] -= delta;
+  }
+
+  // bottom to top so shift the arrow towards bottom
+  if (
+    linearElement.points[endPointIndex][1] <
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = -delta;
+    newPoints[endPointIndex][1] += delta;
+  }
+
+  Object.assign(linearElement, { points: newPoints });
+
   return {
     linearElement,
     startBoundElement,
@@ -580,6 +622,7 @@ export const convertToExcalidrawElements = (
                   end,
                   elementStore,
                 );
+
               elementStore.add(linearElement);
               elementStore.add(startBoundElement);
               elementStore.add(endBoundElement);