Edit relationship on double click (#68)

src/components/EditorCanvas/Relationship.jsx

@@ -1,11 +1,13 @@
 import { useRef } from "react";
-import { Cardinality } from "../../data/constants";
+import { Cardinality, ObjectType, Tab } from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
-import { useTables, useSettings } from "../../hooks";
+import { useTables, useSettings, useLayout, useSelect } from "../../hooks";
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
   const { tables } = useTables();
+  const { layout } = useLayout();
+  const { selectedElement, setSelectedElement } = useSelect();
   const pathRef = useRef();
 
   let cardinalityStart = "1";
@@ -47,8 +49,31 @@ export default function Relationship({ data }) {
     cardinalityEndY = point2.y;
   }
 
+  const edit = () => {
+    if (!layout.sidebar) {
+      setSelectedElement((prev) => ({
+        ...prev,
+        element: ObjectType.RELATIONSHIP,
+        id: data.id,
+        open: true,
+      }));
+    } else {
+      setSelectedElement((prev) => ({
+        ...prev,
+        currentTab: Tab.RELATIONSHIPS,
+        element: ObjectType.RELATIONSHIP,
+        id: data.id,
+        open: true,
+      }));
+      if (selectedElement.currentTab !== Tab.RELATIONSHIPS) return;
+      document
+        .getElementById(`scroll_ref_${data.id}`)
+        .scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
-    <g className="select-none group">
+    <g className="select-none group" onDoubleClick={edit}>
       <path
         ref={pathRef}
         d={calcPath(

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -1,20 +1,32 @@
-import { useState } from "react";
 import { Collapse } from "@douyinfe/semi-ui";
-import { useTables } from "../../../hooks";
+import { useSelect, useTables } from "../../../hooks";
 import Empty from "../Empty";
 import SearchBar from "./SearchBar";
 import RelationshipInfo from "./RelationshipInfo";
+import { ObjectType } from "../../../data/constants";
 
 export default function RelationshipsTab() {
   const { relationships } = useTables();
-  const [refActiveIndex, setRefActiveIndex] = useState("");
+  const { selectedElement, setSelectedElement } = useSelect();
 
   return (
     <>
-      <SearchBar setRefActiveIndex={setRefActiveIndex} />
+      <SearchBar />
       <Collapse
-        activeKey={refActiveIndex}
-        onChange={(k) => setRefActiveIndex(k)}
+        activeKey={
+          selectedElement.open &&
+          selectedElement.element === ObjectType.RELATIONSHIP
+            ? `${selectedElement.id}`
+            : ""
+        }
+        onChange={(k) =>
+          setSelectedElement((prev) => ({
+            ...prev,
+            open: true,
+            id: parseInt(k),
+            element: ObjectType.RELATIONSHIP,
+          }))
+        }
         accordion
       >
         {relationships.length <= 0 ? (

src/components/EditorSidePanel/RelationshipsTab/SearchBar.jsx

@@ -1,18 +1,20 @@
 import { useState } from "react";
-import { useTables } from "../../../hooks";
+import { useSelect, useTables } from "../../../hooks";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
+import { ObjectType } from "../../../data/constants";
 
-export default function SearchBar({ setRefActiveIndex }) {
+export default function SearchBar() {
   const { relationships } = useTables();
   const [searchText, setSearchText] = useState("");
+  const { setSelectedElement } = useSelect();
   const [filteredResult, setFilteredResult] = useState(
-    relationships.map((t) => t.name)
+    relationships.map((t) => t.name),
   );
 
   const handleStringSearch = (value) => {
     setFilteredResult(
-      relationships.map((t) => t.name).filter((i) => i.includes(value))
+      relationships.map((t) => t.name).filter((i) => i.includes(value)),
     );
   };
 
@@ -30,7 +32,12 @@ export default function SearchBar({ setRefActiveIndex }) {
       onChange={(v) => setSearchText(v)}
       onSelect={(v) => {
         const { id } = relationships.find((t) => t.name === v);
-        setRefActiveIndex(`${id}`);
+        setSelectedElement((prev) => ({
+          ...prev,
+          id: id,
+          open: true,
+          element: ObjectType.RELATIONSHIP,
+        }));
         document
           .getElementById(`scroll_ref_${id}`)
           .scrollIntoView({ behavior: "smooth" });