From f45dda1f457258e520637043b3c3bd90d655fbd5 Mon Sep 17 00:00:00 2001
From: John Marlo Lapiz <lazuee.dev@gmail.com>
Date: Tue, 26 Aug 2025 08:31:20 +0000
Subject: [PATCH 1/3] fix(calcPath.js): improve connector pathing

- Added safety margin on tableWidth to switch connectors to the opposite side when overlapping.
- Added padding on tableWidth to ensure a minimum straight segment before the curve.
---
 src/utils/calcPath.js | 47 +++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/utils/calcPath.js b/src/utils/calcPath.js
index ef643633a..f6869ede8 100644
--- a/src/utils/calcPath.js
+++ b/src/utils/calcPath.js
@@ -19,6 +19,9 @@ export function calcPath(r, tableWidth = 200, zoom = 1) {
   }
 
   const width = tableWidth * zoom;
+  const tableWidthSafetyMargin = 70 * zoom;
+  const tableWidthPadding = 30 * zoom;
+
   let x1 = r.startTable.x;
   let y1 =
     r.startTable.y +
@@ -46,27 +49,27 @@ export function calcPath(r, tableWidth = 200, zoom = 1) {
   }
 
   if (y1 <= y2) {
-    if (x1 + width <= x2) {
+    if (x1 + width + tableWidthSafetyMargin <= x2) {
       return `M ${x1 + width} ${y1} L ${
         midX - radius
       } ${y1} A ${radius} ${radius} 0 0 1 ${midX} ${y1 + radius} L ${midX} ${
         y2 - radius
       } A ${radius} ${radius} 0 0 0 ${midX + radius} ${y2} L ${endX} ${y2}`;
-    } else if (x2 <= x1 + width && x1 <= x2) {
+    } else if (x2 <= x1 + width + tableWidthSafetyMargin && x1 <= x2) {
       return `M ${x1 + width} ${y1} L ${
-        x2 + width
-      } ${y1} A ${radius} ${radius} 0 0 1 ${x2 + width + radius} ${
+        x2 + width + tableWidthPadding
+      } ${y1} A ${radius} ${radius} 0 0 1 ${x2 + width + tableWidthPadding + radius} ${
         y1 + radius
-      } L ${x2 + width + radius} ${y2 - radius} A ${radius} ${radius} 0 0 1 ${
-        x2 + width
+      } L ${x2 + width + tableWidthPadding + radius} ${y2 - radius} A ${radius} ${radius} 0 0 1 ${
+        x2 + width + tableWidthPadding
       } ${y2} L ${x2 + width} ${y2}`;
-    } else if (x2 + width >= x1 && x2 + width <= x1 + width) {
+    } else if (x2 + width >= x1 - tableWidthSafetyMargin && x2 + width <= x1 + width) {
       return `M ${x1} ${y1} L ${
-        x2 - radius
-      } ${y1} A ${radius} ${radius} 0 0 0 ${x2 - radius - radius} ${
+        x2 - tableWidthPadding
+      } ${y1} A ${radius} ${radius} 0 0 0 ${x2 - tableWidthPadding - radius} ${
         y1 + radius
-      } L ${x2 - radius - radius} ${y2 - radius} A ${radius} ${radius} 0 0 0 ${
-        x2 - radius
+      } L ${x2 - tableWidthPadding - radius} ${y2 - radius} A ${radius} ${radius} 0 0 0 ${
+        x2 - tableWidthPadding
       } ${y2} L ${x2} ${y2}`;
     } else {
       return `M ${x1} ${y1} L ${
@@ -76,30 +79,30 @@ export function calcPath(r, tableWidth = 200, zoom = 1) {
       } A ${radius} ${radius} 0 0 1 ${midX - radius} ${y2} L ${endX} ${y2}`;
     }
   } else {
-    if (x1 + width <= x2) {
+    if (x1 + width + tableWidthSafetyMargin <= x2) {
       return `M ${x1 + width} ${y1} L ${
         midX - radius
       } ${y1} A ${radius} ${radius} 0 0 0 ${midX} ${y1 - radius} L ${midX} ${
         y2 + radius
       } A ${radius} ${radius} 0 0 1 ${midX + radius} ${y2} L ${endX} ${y2}`;
-    } else if (x1 + width >= x2 && x1 + width <= x2 + width) {
+    } else if (x1 + width >= x2 - tableWidthSafetyMargin && x1 + width <= x2 + width) {
       return `M ${x1} ${y1} L ${
-        x1 - radius - radius
-      } ${y1} A ${radius} ${radius} 0 0 1 ${x1 - radius - radius - radius} ${
+        x1 - radius - radius - tableWidthPadding
+      } ${y1} A ${radius} ${radius} 0 0 1 ${x1 - radius - radius - tableWidthPadding - radius} ${
         y1 - radius
-      } L ${x1 - radius - radius - radius} ${
+      } L ${x1 - radius - radius - tableWidthPadding - radius} ${
         y2 + radius
       } A ${radius} ${radius} 0 0 1 ${
-        x1 - radius - radius
+        x1 - radius - radius - tableWidthPadding
       } ${y2} L ${endX} ${y2}`;
-    } else if (x1 >= x2 && x1 <= x2 + width) {
+    } else if (x1 >= x2 - tableWidthSafetyMargin && x1 <= x2 + width) {
       return `M ${x1 + width} ${y1} L ${
-        x1 + width + radius
-      } ${y1} A ${radius} ${radius} 0 0 0 ${x1 + width + radius + radius} ${
+        x1 + width + tableWidthPadding
+      } ${y1} A ${radius} ${radius} 0 0 0 ${x1 + width + tableWidthPadding + radius} ${
         y1 - radius
-      } L ${x1 + width + radius + radius} ${
+      } L ${x1 + width + tableWidthPadding + radius} ${
         y2 + radius
-      } A ${radius} ${radius} 0 0 0 ${x1 + width + radius} ${y2} L ${
+      } A ${radius} ${radius} 0 0 0 ${x1 + width + tableWidthPadding} ${y2} L ${
         x2 + width
       } ${y2}`;
     } else {

From 5689ff4bd65584ec0672ed321c0d95c2160cd8dc Mon Sep 17 00:00:00 2001
From: John Marlo Lapiz <91590512+lazuee@users.noreply.github.com>
Date: Tue, 26 Aug 2025 18:49:58 +0800
Subject: [PATCH 2/3] fix the behavior of safety margin when table one
 leftofstart meets table two and table three rightofend

---
 src/utils/calcPath.js | 42 ++++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/utils/calcPath.js b/src/utils/calcPath.js
index f6869ede8..38967c5d2 100644
--- a/src/utils/calcPath.js
+++ b/src/utils/calcPath.js
@@ -23,17 +23,19 @@ export function calcPath(r, tableWidth = 200, zoom = 1) {
   const tableWidthPadding = 30 * zoom;
 
   let x1 = r.startTable.x;
+  const fieldHeight = tableFieldHeight * zoom;
+  const headerHeight = tableHeaderHeight * zoom;
   let y1 =
     r.startTable.y +
-    r.startFieldIndex * tableFieldHeight +
-    tableHeaderHeight +
-    tableFieldHeight / 2;
+    r.startFieldIndex * fieldHeight +
+    headerHeight +
+    fieldHeight / 2;
   let x2 = r.endTable.x;
   let y2 =
     r.endTable.y +
-    r.endFieldIndex * tableFieldHeight +
-    tableHeaderHeight +
-    tableFieldHeight / 2;
+    r.endFieldIndex * fieldHeight +
+    headerHeight +
+    fieldHeight / 2;
 
   let radius = 10 * zoom;
   const midX = (x2 + x1 + width) / 2;
@@ -86,25 +88,25 @@ export function calcPath(r, tableWidth = 200, zoom = 1) {
         y2 + radius
       } A ${radius} ${radius} 0 0 1 ${midX + radius} ${y2} L ${endX} ${y2}`;
     } else if (x1 + width >= x2 - tableWidthSafetyMargin && x1 + width <= x2 + width) {
-      return `M ${x1} ${y1} L ${
-        x1 - radius - radius - tableWidthPadding
-      } ${y1} A ${radius} ${radius} 0 0 1 ${x1 - radius - radius - tableWidthPadding - radius} ${
-        y1 - radius
-      } L ${x1 - radius - radius - tableWidthPadding - radius} ${
-        y2 + radius
-      } A ${radius} ${radius} 0 0 1 ${
-        x1 - radius - radius - tableWidthPadding
-      } ${y2} L ${endX} ${y2}`;
-    } else if (x1 >= x2 - tableWidthSafetyMargin && x1 <= x2 + width) {
       return `M ${x1 + width} ${y1} L ${
-        x1 + width + tableWidthPadding
-      } ${y1} A ${radius} ${radius} 0 0 0 ${x1 + width + tableWidthPadding + radius} ${
+        x2 + width + tableWidthPadding
+      } ${y1} A ${radius} ${radius} 0 0 0 ${x2 + width + tableWidthPadding + radius} ${
         y1 - radius
-      } L ${x1 + width + tableWidthPadding + radius} ${
+      } L ${x2 + width + tableWidthPadding + radius} ${
         y2 + radius
-      } A ${radius} ${radius} 0 0 0 ${x1 + width + tableWidthPadding} ${y2} L ${
+      } A ${radius} ${radius} 0 0 0 ${x2 + width + tableWidthPadding} ${y2} L ${
         x2 + width
       } ${y2}`;
+    } else if (x2 + width >= x1 - tableWidthSafetyMargin && x2 + width <= x1 + width) {
+      return `M ${x1} ${y1} L ${
+        x2 - tableWidthPadding
+      } ${y1} A ${radius} ${radius} 0 0 1 ${x2 - tableWidthPadding - radius} ${
+        y1 - radius
+      } L ${x2 - tableWidthPadding - radius} ${
+        y2 + radius
+      } A ${radius} ${radius} 0 0 1 ${
+        x2 - tableWidthPadding
+      } ${y2} L ${x2} ${y2}`;
     } else {
       return `M ${x1} ${y1} L ${
         midX + radius

From 9334d4e86effa1d4f8927e0541e42de9f5b26bf5 Mon Sep 17 00:00:00 2001
From: John Marlo Lapiz <91590512+lazuee@users.noreply.github.com>
Date: Wed, 27 Aug 2025 00:17:07 +0800
Subject: [PATCH 3/3] added ability to customize curve radius

---
 src/utils/calcPath.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/utils/calcPath.js b/src/utils/calcPath.js
index 38967c5d2..031786a8b 100644
--- a/src/utils/calcPath.js
+++ b/src/utils/calcPath.js
@@ -38,16 +38,19 @@ export function calcPath(r, tableWidth = 200, zoom = 1) {
     fieldHeight / 2;
 
   let radius = 10 * zoom;
+  const curveRadius = 18 * zoom;
   const midX = (x2 + x1 + width) / 2;
   const endX = x2 + width < x1 ? x2 + width : x2;
 
   if (Math.abs(y1 - y2) <= 36 * zoom) {
-    radius = Math.abs(y2 - y1) / 3;
-    if (radius <= 2) {
-      if (x1 + width <= x2) return `M ${x1 + width} ${y1} L ${x2} ${y2 + 0.1}`;
+    radius = Math.max(Math.abs(y2 - y1) / 3, curveRadius);
+    if (radius <= curveRadius) {
+      if (x1 + width <= x2) return `M ${x1 + width} ${y1} L ${x2} ${y2}`;
       else if (x2 + width < x1)
-        return `M ${x1} ${y1} L ${x2 + width} ${y2 + 0.1}`;
+        return `M ${x1} ${y1} L ${x2 + width} ${y2}`;
     }
+  } else {
+    radius = Math.max(radius, curveRadius);
   }
 
   if (y1 <= y2) {