fix: highlight using selectedElement

src/components/EditorCanvas/Relationship.jsx

@@ -1,6 +1,5 @@
 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";
@@ -14,28 +13,8 @@ export default function Relationship({ data }) {
   const pathRef = useRef();
 
   useEffect(() => {
-    const handleEditing = (event) => {
-      setEditing(event.detail.id === data.id);
-    };
-
-    document.addEventListener(RELATIONSHIP_EDITING, handleEditing);
-    return () => {
-      document.removeEventListener(RELATIONSHIP_EDITING, handleEditing);
-    };
-  }, [data.id]);
-
-  useEffect(() => {
-    const handleClickAway = (event) => {
-      if (pathRef.current && !pathRef.current.contains(event.target)) {
-        setEditing(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickAway);
-    return () => {
-      document.removeEventListener("mousedown", handleClickAway);
-    };
-  }, [pathRef]);
+    setEditing(data.id === selectedElement.id);
+  }, [data.id, selectedElement.id]);
 
   let cardinalityStart = "1";
   let cardinalityEnd = "1";

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -4,7 +4,6 @@ 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() {
@@ -24,20 +23,14 @@ export default function RelationshipsTab() {
         }
         keepDOM
         lazyRender
-        onChange={(k) => {
-          const newId = parseInt(k);
-          const event = new CustomEvent(RELATIONSHIP_EDITING, {
-            detail: { id: newId },
-          });
-          document.dispatchEvent(event);
-
+        onChange={(k) =>
           setSelectedElement((prev) => ({
             ...prev,
             open: true,
-            id: newId,
+            id: parseInt(k),
             element: ObjectType.RELATIONSHIP,
-          }));
-        }}
+          }))
+        }
         accordion
       >
         {relationships.length <= 0 ? (

src/data/customEvents.js

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