From 3aeb42a9185a96d79876dc5d4f29b6b2d0c6156f Mon Sep 17 00:00:00 2001
From: Huy Bui <huy03081999@gmail.com>
Date: Sat, 27 Jul 2024 13:18:03 +0700
Subject: [PATCH] feat: highlight when editing relationship

---
 src/components/EditorCanvas/Relationship.jsx  | 46 ++++++++++++++++---
 .../RelationshipsTab/RelationshipsTab.jsx     | 15 ++++--
 src/data/customEvents.js                      |  1 +
 3 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 src/data/customEvents.js

diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx
index 60423e8..f748b49 100644
--- a/src/components/EditorCanvas/Relationship.jsx
+++ b/src/components/EditorCanvas/Relationship.jsx
@@ -1,15 +1,42 @@
-import { useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Cardinality, ObjectType, Tab } from "../../data/constants";
+import { RELATIONSHIP_EDITING } from "../../data/customEvents";
 import { calcPath } from "../../utils/calcPath";
 import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
+import { cn } from "../../utils/cn";
 
 export default function Relationship({ data }) {
+  const [editing, setEditing] = useState(false);
   const { settings } = useSettings();
   const { tables } = useDiagram();
   const { layout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
   const pathRef = useRef();
 
+  useEffect(() => {
+    const handleEditing = (event) => {
+      setEditing(event.detail.id === data.id);
+    };
+
+    document.addEventListener(RELATIONSHIP_EDITING, handleEditing);
+    return () => {
+      document.removeEventListener(RELATIONSHIP_EDITING, handleEditing);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickAway = (event) => {
+      if (pathRef.current && !pathRef.current.contains(event.target)) {
+        setEditing(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickAway);
+    return () => {
+      document.removeEventListener("mousedown", handleClickAway);
+    };
+  }, [pathRef]);
+
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
 
@@ -50,6 +77,7 @@ export default function Relationship({ data }) {
   }
 
   const edit = () => {
+    setEditing(true);
     if (!layout.sidebar) {
       setSelectedElement((prev) => ({
         ...prev,
@@ -72,8 +100,15 @@ export default function Relationship({ data }) {
     }
   };
 
+  const editingPathClass = cn("group-hover:stroke-sky-700", {
+    "stroke-sky-700": editing,
+  });
+  const editingCircleClass = cn("group-hover:fill-sky-700", {
+    "fill-sky-700": editing,
+  });
+
   return (
-    <g className="select-none group" onDoubleClick={edit}>
+    <g className="select-none group cursor-pointer" onDoubleClick={edit}>
       <path
         ref={pathRef}
         d={calcPath(
@@ -91,10 +126,9 @@ export default function Relationship({ data }) {
           settings.tableWidth,
         )}
         stroke="gray"
-        className="group-hover:stroke-sky-700"
+        className={editingPathClass}
         fill="none"
         strokeWidth={2}
-        cursor="pointer"
       />
       {pathRef.current && settings.showCardinality && (
         <>
@@ -103,7 +137,7 @@ export default function Relationship({ data }) {
             cy={cardinalityStartY}
             r="12"
             fill="grey"
-            className="group-hover:fill-sky-700"
+            className={editingCircleClass}
           />
           <text
             x={cardinalityStartX}
@@ -120,7 +154,7 @@ export default function Relationship({ data }) {
             cy={cardinalityEndY}
             r="12"
             fill="grey"
-            className="group-hover:fill-sky-700"
+            className={editingCircleClass}
           />
           <text
             x={cardinalityEndX}
diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx b/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
index 99f80d7..ba452f3 100644
--- a/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
+++ b/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
@@ -4,6 +4,7 @@ import Empty from "../Empty";
 import SearchBar from "./SearchBar";
 import RelationshipInfo from "./RelationshipInfo";
 import { ObjectType } from "../../../data/constants";
+import { RELATIONSHIP_EDITING } from "../../../data/customEvents";
 import { useTranslation } from "react-i18next";
 
 export default function RelationshipsTab() {
@@ -23,14 +24,20 @@ export default function RelationshipsTab() {
         }
         keepDOM
         lazyRender
-        onChange={(k) =>
+        onChange={(k) => {
+          const newId = parseInt(k);
+          const event = new CustomEvent(RELATIONSHIP_EDITING, {
+            detail: { id: newId },
+          });
+          document.dispatchEvent(event);
+
           setSelectedElement((prev) => ({
             ...prev,
             open: true,
-            id: parseInt(k),
+            id: newId,
             element: ObjectType.RELATIONSHIP,
-          }))
-        }
+          }));
+        }}
         accordion
       >
         {relationships.length <= 0 ? (
diff --git a/src/data/customEvents.js b/src/data/customEvents.js
new file mode 100644
index 0000000..c6829e7
--- /dev/null
+++ b/src/data/customEvents.js
@@ -0,0 +1 @@
+export const RELATIONSHIP_EDITING = "relationship-editing";