Highlight when editing relationship

package.json

@@ -44,13 +44,15 @@
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
+    "clsx": "^2.1.1",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.32",
     "prettier": "3.2.5",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.3.6",
     "vite": "^5.0.11"
   },

src/components/EditorCanvas/Canvas.jsx

@@ -411,6 +411,24 @@ export default function Canvas() {
     )
       return;
 
+    const existRelationship = relationships.find((r) => {
+      const startToEnd =
+        r.startTableId === linkingLine.startTableId &&
+        r.startFieldId === linkingLine.startFieldId &&
+        r.endTableId === hoveredTable.tableId &&
+        r.endFieldId === hoveredTable.field;
+      const endToStart =
+        r.startTableId === hoveredTable.tableId &&
+        r.startFieldId === hoveredTable.field &&
+        r.endTableId === linkingLine.startTableId &&
+        r.endFieldId === linkingLine.startFieldId;
+
+      return startToEnd || endToStart;
+    });
+    if (existRelationship) {
+      return;
+    }
+
     const newRelationship = {
       ...linkingLine,
       endTableId: hoveredTable.tableId,

src/components/EditorCanvas/Relationship.jsx

@@ -1,15 +1,21 @@
-import { useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Cardinality, ObjectType, Tab } from "../../data/constants";
 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(() => {
+    setEditing(data.id === selectedElement.id);
+  }, [data.id, selectedElement.id]);
+
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
 
@@ -50,6 +56,7 @@ export default function Relationship({ data }) {
   }
 
   const edit = () => {
+    setEditing(true);
     if (!layout.sidebar) {
       setSelectedElement((prev) => ({
         ...prev,
@@ -72,8 +79,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 +105,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 +116,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 +133,7 @@ export default function Relationship({ data }) {
             cy={cardinalityEndY}
             r="12"
             fill="grey"
-            className="group-hover:fill-sky-700"
+            className={editingCircleClass}
           />
           <text
             x={cardinalityEndX}

src/utils/cn.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...args) {
+  return twMerge(clsx(args));
+}