feat: highlight when editing relationship

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}

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 ? (

src/data/customEvents.js

@@ -0,0 +1 @@
+export const RELATIONSHIP_EDITING = "relationship-editing";