From c9a8d76e8ed1d9b1db0f5b5662c2d10b480e6934 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 20 Feb 2024 03:02:17 +0200
Subject: [PATCH] Fix relationship overlap

---
 src/components/Canvas.jsx |  6 ++---
 src/utils/index.js        | 57 ++++++++++++++++++++++-----------------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx
index 0281010..4ee4a14 100644
--- a/src/components/Canvas.jsx
+++ b/src/components/Canvas.jsx
@@ -440,6 +440,9 @@ export default function Canvas() {
                 zoom={settings.zoom}
               ></Area>
             ))}
+            {relationships.map((e, i) => (
+              <Relationship key={i} data={e} />
+            ))}
             {tables.map((table) => (
               <Table
                 key={table.id}
@@ -467,9 +470,6 @@ export default function Canvas() {
                 strokeDasharray="8,8"
               />
             )}
-            {relationships.map((e, i) => (
-              <Relationship key={i} data={e} />
-            ))}
             {notes.map((n) => (
               <Note
                 key={n.id}
diff --git a/src/utils/index.js b/src/utils/index.js
index 3949538..5740f6a 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -883,16 +883,45 @@ function validateDiagram(diagram) {
 }
 
 const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
+  const tableWidth = 200 * zoom;
+  if (y1 <= y2) {
+    if (x1 + tableWidth <= x2) {
+      x2 -= 14;
+    } else if (x2 <= x1 + tableWidth && x1 <= x2) {
+      // x2-=14;
+      // x1-=14;
+    } else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
+      x1 -= 14;
+      x2 -= 14;
+    } else {
+      x2 -= 14;
+      x1 -= 14;
+    }
+  } else {
+    if (x1 + tableWidth <= x2) {
+      x2 -= 14;
+    } else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
+      //
+      x1 -= 14;
+      x2 -= 14;
+    } else if (x1 >= x2 && x1 <= x2 + tableWidth) {
+      // x1-=19;
+      // x2-=14;
+    } else {
+      x1 -= 14;
+      x2 -= 14;
+    }
+  }
   x1 *= zoom;
   x2 *= zoom;
   y1 *= zoom;
   y2 *= zoom;
-  const tableWidth = 200 * zoom;
+
   let r = 10 * zoom;
   const offsetX = 8 * zoom;
   const midX = (x2 + x1 + tableWidth) / 2;
-  const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2;
-  const startTableY = y1 - startFieldId * 36 - 50 - 18;
+  const endX = x2 + tableWidth < x1 ? x2 + tableWidth : x2;
+  // const startTableY = y1 - startFieldId * 36 - 50 - 18;
   // const endTableY = y2 - endFieldId * 36 - 50;
 
   if (Math.abs(y1 - y2) <= 36 * zoom) {
@@ -901,7 +930,7 @@ const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
       if (x1 + tableWidth <= x2)
         return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`;
       else if (x2 + tableWidth < x1)
-        return `M ${x1} ${y1} L ${x2 + tableWidth - 2 * offsetX} ${y2 + 0.1}`;
+        return `M ${x1} ${y1} L ${x2 + tableWidth} ${y2 + 0.1}`;
     }
   }
 
@@ -941,32 +970,12 @@ const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
         y2 + r
       } A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
     } else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
-      // this for the overlap remember
-      if (startTableY < y2) {
-        return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${
-          x1 - r - r - r
-        } ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
-          x1 - r - r
-        } ${y2} L ${x1 - r - 4} ${y2}`;
-      }
       return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${
         x1 - r - r - r
       } ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
         x1 - r - r
       } ${y2} L ${endX} ${y2}`;
     } else if (x1 >= x2 && x1 <= x2 + tableWidth) {
-      // this for the overlap remember
-      if (startTableY < y2) {
-        return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
-          x1 + tableWidth - 2 * offsetX + r
-        } ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${
-          y1 - r
-        } L ${x1 + tableWidth - 2 * offsetX + r + r} ${
-          y2 + r
-        } A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r} ${y2} L ${
-          x1 + tableWidth - 16
-        } ${y2}`;
-      }
       return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
         x1 + tableWidth - 2 * offsetX + r
       } ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${