From 876df7f6b15f713c09cbb7168b760daa60f4aa36 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:48:17 +0300
Subject: [PATCH] brr

---
 src/components/canvas.jsx       | 107 +-----------------------------
 src/components/relationship.jsx | 113 ++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 105 deletions(-)
 create mode 100644 src/components/relationship.jsx

diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index d0a806a..cde2be0 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -3,6 +3,7 @@ import { useDrop } from "react-dnd";
 import Table from "./table";
 import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
 import Area from "./area";
+import Relationship from "./relationship";
 
 export default function Canvas(props) {
   const ObjectType = {
@@ -303,111 +304,7 @@ export default function Canvas(props) {
               strokeDasharray="8,8"
             />
           )}
-          {props.relationships.map((e, i) => {
-            const r = 16;
-            const offsetX = 8;
-            const tableWidth = 240;
-            const midX = (e.endX + e.startX + tableWidth) / 2;
-            const endX =
-              e.endX + tableWidth < e.startX
-                ? e.endX + tableWidth - offsetX * 2
-                : e.endX;
-
-            let path = "";
-
-            if (e.startY <= e.endY) {
-              if (e.startX + tableWidth < e.endX) {
-                path = `M ${e.startX + tableWidth - offsetX * 2} ${
-                  e.startY
-                } L ${midX - r} ${e.startY} A ${r} ${r} 0 0 ${1} ${midX} ${
-                  e.startY + r
-                } L ${midX} ${e.endY - r} A ${r} ${r} 0 0 ${0} ${midX + r} ${
-                  e.endY
-                } L ${endX} ${e.endY}`;
-              } else if (e.endX < e.startX + tableWidth && e.startX < e.endX) {
-                path = `M ${e.startX + tableWidth - 2 * offsetX} ${
-                  e.startY
-                } L ${e.endX + tableWidth} ${e.startY} A ${r} ${r} 0 0 ${1} ${
-                  e.endX + tableWidth + r
-                } ${e.startY + r} L ${e.endX + tableWidth + r} ${
-                  e.endY - r
-                } A ${r} ${r} 0 0 1 ${e.endX + tableWidth} ${e.endY} L ${
-                  e.endX + tableWidth - 2 * offsetX
-                } ${e.endY}`;
-              } else if (
-                e.endX + tableWidth > e.startX &&
-                e.endX + tableWidth < e.startX + tableWidth
-              ) {
-                path = `M ${e.startX} ${e.startY} L ${e.endX - r} ${
-                  e.startY
-                } A ${r} ${r} 0 0 ${0} ${e.endX - r - r} ${e.startY + r} L ${
-                  e.endX - r - r
-                } ${e.endY - r} A ${r} ${r} 0 0 0 ${e.endX - r} ${e.endY} L ${
-                  e.endX
-                } ${e.endY}`;
-              } else {
-                path = `M ${e.startX} ${e.startY} L ${midX + r} ${
-                  e.startY
-                } A ${r} ${r} 0 0 ${0} ${midX} ${e.startY + r} L ${midX} ${
-                  e.endY - r
-                } A ${r} ${r} 0 0 ${1} ${midX - r} ${e.endY} L ${endX} ${
-                  e.endY
-                }`;
-              }
-            } else {
-              if (e.startX + tableWidth < e.endX) {
-                path = `M ${e.startX + tableWidth - offsetX * 2} ${
-                  e.startY
-                } L ${midX - r} ${e.startY} A ${r} ${r} 0 0 ${0} ${midX} ${
-                  e.startY - r
-                } L ${midX} ${e.endY + r} A ${r} ${r} 0 0 ${1} ${midX + r} ${
-                  e.endY
-                } L ${endX} ${e.endY}`;
-              } else if (
-                e.startX + tableWidth > e.endX &&
-                e.startX + tableWidth < e.endX + tableWidth
-              ) {
-                path = `M ${e.startX} ${e.startY} L ${e.startX - r} ${
-                  e.startY
-                } A ${r} ${r} 0 0 ${1} ${e.startX - r - r} ${e.startY - r} L ${
-                  e.startX - r - r
-                } ${e.endY + r} A ${r} ${r} 0 0 ${1} ${e.startX - r} ${
-                  e.endY
-                } L ${endX} ${e.endY}`;
-              } else if (e.startX > e.endX && e.startX < e.endX + tableWidth) {
-                path = `M ${e.startX + tableWidth - 2 * offsetX} ${
-                  e.startY
-                } L ${e.startX + tableWidth - 2 * offsetX + r} ${
-                  e.startY
-                } A ${r} ${r} 0 0 0 ${
-                  e.startX + tableWidth - 2 * offsetX + r + r
-                } ${e.startY - r} L ${
-                  e.startX + tableWidth - 2 * offsetX + r + r
-                } ${e.endY + r} A ${r} ${r} 0 0 0 ${
-                  e.startX + tableWidth - 2 * offsetX + r
-                } ${e.endY} L ${e.endX + tableWidth - 2 * offsetX} ${e.endY}`;
-              } else {
-                path = `M ${e.startX} ${e.startY} L ${midX + r} ${
-                  e.startY
-                } A ${r} ${r} 0 0 ${1} ${midX} ${e.startY - r} L ${midX} ${
-                  e.endY + r
-                } A ${r} ${r} 0 0 ${0} ${midX - r} ${e.endY} L ${endX} ${
-                  e.endY
-                }`;
-              }
-            }
-
-            return (
-              <path
-                key={i}
-                d={path}
-                stroke="gray"
-                fill="none"
-                strokeWidth={2.5}
-                onClick={() => {}}
-              />
-            );
-          })}
+          {props.relationships.map((e, i) => <Relationship data={e}/>)}
         </svg>
       </div>
     </div>
diff --git a/src/components/relationship.jsx b/src/components/relationship.jsx
new file mode 100644
index 0000000..4e468d9
--- /dev/null
+++ b/src/components/relationship.jsx
@@ -0,0 +1,113 @@
+import { React, useState } from "react";
+
+export default function Relationship(props) {
+  const [hovered, setHovered] = useState(false);
+  const calcPath = (x1, x2, y1, y2) => {
+    let r = 16;
+    const offsetX = 8;
+    const tableWidth = 240;
+    const midX = (x2 + x1 + tableWidth) / 2;
+    const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2;
+    
+    if (Math.abs(y1 - y2) <= 36) {
+      r = Math.abs(y2 - y1) / 3;
+      if (r <= 2) {
+        if (x1 + tableWidth <= x2)
+          return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2}`;
+        else if (x2 + tableWidth < x1)
+          return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1} ${y1}`;
+      }
+    }
+
+    if (y1 <= y2) {
+      if (x1 + tableWidth < x2) {
+        return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
+          midX - r
+        } ${y1} A ${r} ${r} 0 0 1 ${midX} ${y1 + r} L ${midX} ${
+          y2 - r
+        } A ${r} ${r} 0 0 0 ${midX + r} ${y2} L ${endX} ${y2}`;
+      } else if (x2 < x1 + tableWidth && x1 < x2) {
+        return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
+          x2 + tableWidth
+        } ${y1} A ${r} ${r} 0 0 1 ${x2 + tableWidth + r} ${y1 + r} L ${
+          x2 + tableWidth + r
+        } ${y2 - r} A ${r} ${r} 0 0 1 ${x2 + tableWidth} ${y2} L ${
+          x2 + tableWidth - 2 * offsetX
+        } ${y2}`;
+      } else if (x2 + tableWidth > x1 && x2 + tableWidth < x1 + tableWidth) {
+        return `M ${x1} ${y1} L ${x2 - r} ${y1} A ${r} ${r} 0 0 ${0} ${
+          x2 - r - r
+        } ${y1 + r} L ${x2 - r - r} ${y2 - r} A ${r} ${r} 0 0 0 ${
+          x2 - r
+        } ${y2} L ${x2} ${y2}`;
+      } else {
+        return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 0 ${midX} ${
+          y1 + r
+        } L ${midX} ${y2 - r} A ${r} ${r} 0 0 1 ${
+          midX - r
+        } ${y2} L ${endX} ${y2}`;
+      }
+    } else {
+      if (x1 + tableWidth < x2) {
+        return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
+          midX - r
+        } ${y1} A ${r} ${r} 0 0 0 ${midX} ${y1 - r} L ${midX} ${
+          y2 + r
+        } A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
+      } else if (x1 + tableWidth > x2 && x1 + tableWidth < x2 + tableWidth) {
+        return `M ${x1} ${y1} L ${x1 - r} ${y1} A ${r} ${r} 0 0 1 ${
+          x1 - r - r
+        } ${y1 - r} L ${x1 - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
+          x1 - r
+        } ${y2} L ${endX} ${y2}`;
+      } else if (x1 > x2 && x1 < x2 + tableWidth) {
+        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 ${
+          x2 + tableWidth - 2 * offsetX
+        } ${y2}`;
+      } else {
+        return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 1 ${midX} ${
+          y1 - r
+        } L ${midX} ${y2 + r} A ${r} ${r} 0 0 0 ${
+          midX - r
+        } ${y2} L ${endX} ${y2}`;
+      }
+    }
+  };
+
+  return (
+    <g>
+      <defs>
+        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+          <feDropShadow
+            dx="2"
+            dy="2"
+            stdDeviation="6"
+            floodColor="gray"
+            floodOpacity="0.8"
+          />
+        </filter>
+      </defs>
+      <path
+        d={calcPath(
+          props.data.startX,
+          props.data.endX,
+          props.data.startY,
+          props.data.endY
+        )}
+        stroke={hovered ? "blue" : "gray"}
+        fill="none"
+        strokeWidth={2.0}
+        filter="url(#shadow)"
+        cursor="pointer"
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      />
+    </g>
+  );
+}