Add sidesheet for editing relationships

src/components/EditorCanvas/Canvas.jsx

@@ -87,6 +87,8 @@ export default function Canvas() {
    * @param {ObjectType[keyof ObjectType]} type
    */
   const handlePointerDownOnElement = (e, id, type) => {
+    if (selectedElement.open && !layout.sidebar) return;
+
     if (!e.isPrimary) return;
 
     if (type === ObjectType.TABLE) {
@@ -138,6 +140,8 @@ export default function Canvas() {
    * @param {PointerEvent} e
    */
   const handlePointerMove = (e) => {
+    if (selectedElement.open && !layout.sidebar) return;
+
     if (!e.isPrimary) return;
 
     if (linking) {
@@ -226,6 +230,8 @@ export default function Canvas() {
    * @param {PointerEvent} e
    */
   const handlePointerDown = (e) => {
+    if (selectedElement.open && !layout.sidebar) return;
+
     if (!e.isPrimary) return;
 
     // don't pan if the sidesheet for editing a table is open
@@ -309,6 +315,8 @@ export default function Canvas() {
    * @param {PointerEvent} e
    */
   const handlePointerUp = (e) => {
+    if (selectedElement.open && !layout.sidebar) return;
+
     if (!e.isPrimary) return;
 
     if (coordsDidUpdate(dragging.element)) {

src/components/EditorCanvas/Relationship.jsx

@@ -3,6 +3,8 @@ import { Cardinality, ObjectType, Tab } from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
 import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 import { useTranslation } from "react-i18next";
+import { SideSheet } from "@douyinfe/semi-ui";
+import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
@@ -79,6 +81,7 @@ export default function Relationship({ data }) {
   };
 
   return (
+    <>
       <g className="select-none group" onDoubleClick={edit}>
         <path
           ref={pathRef}
@@ -141,5 +144,27 @@ export default function Relationship({ data }) {
           </>
         )}
       </g>
+      <SideSheet
+        title={t("edit")}
+        size="small"
+        visible={
+          selectedElement.element === ObjectType.RELATIONSHIP &&
+          selectedElement.id === data.id &&
+          selectedElement.open &&
+          !layout.sidebar
+        }
+        onCancel={() => {
+          setSelectedElement((prev) => ({
+            ...prev,
+            open: false,
+          }));
+        }}
+        style={{ paddingBottom: "16px" }}
+      >
+        <div className="sidesheet-theme">
+          <RelationshipInfo data={data} />
+        </div>
+      </SideSheet>
+    </>
   );
 }

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -1,12 +1,4 @@
-import {
-  Collapse,
-  Row,
-  Col,
-  Select,
-  Button,
-  Popover,
-  Table,
-} from "@douyinfe/semi-ui";
+import { Row, Col, Select, Button, Popover, Table } from "@douyinfe/semi-ui";
 import {
   IconDeleteStroked,
   IconLoopTextStroked,
@@ -128,15 +120,7 @@ export default function RelationshipInfo({ data }) {
   };
 
   return (
-    <div id={`scroll_ref_${data.id}`}>
-      <Collapse.Panel
-        header={
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            {data.name}
-          </div>
-        }
-        itemKey={`${data.id}`}
-      >
+    <>
       <div className="flex justify-between items-center mb-3">
         <div className="me-3">
           <span className="font-semibold">{t("primary")}: </span>
@@ -156,8 +140,7 @@ export default function RelationshipInfo({ data }) {
                     {
                       key: "1",
                       foreign: `${tables[data.startTableId].name}(${
-                          tables[data.startTableId].fields[data.startFieldId]
-                            .name
+                        tables[data.startTableId].fields[data.startFieldId].name
                       })`,
                       primary: `${tables[data.endTableId].name}(${
                         tables[data.endTableId].fields[data.endFieldId].name
@@ -231,7 +214,6 @@ export default function RelationshipInfo({ data }) {
       >
         {t("delete")}
       </Button>
-      </Collapse.Panel>
-    </div>
+    </>
   );
 }

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -14,6 +14,12 @@ export default function RelationshipsTab() {
   return (
     <>
       <SearchBar />
+      {relationships.length <= 0 ? (
+        <Empty
+          title={t("no_relationships")}
+          text={t("no_relationships_text")}
+        />
+      ) : (
         <Collapse
           activeKey={
             selectedElement.open &&
@@ -33,15 +39,22 @@ export default function RelationshipsTab() {
           }
           accordion
         >
-        {relationships.length <= 0 ? (
-          <Empty
-            title={t("no_relationships")}
-            text={t("no_relationships_text")}
-          />
-        ) : (
-          relationships.map((r) => <RelationshipInfo key={r.id} data={r} />)
-        )}
+          {relationships.map((r) => (
+            <div id={`scroll_ref_${r.id}`} key={"relationship_" + r.id}>
+              <Collapse.Panel
+                header={
+                  <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+                    {r.name}
+                  </div>
+                }
+                itemKey={`${r.id}`}
+              >
+                <RelationshipInfo data={r} />
+              </Collapse.Panel>
+            </div>
+          ))}
         </Collapse>
+      )}
     </>
   );
 }

src/components/SimpleCanvas.jsx

@@ -117,7 +117,7 @@ function Relationship({ relationship, tables }) {
   }
 
   return (
-    <g className="select-none" onClick={() => console.log(pathRef.current)}>
+    <g className="select-none">
       <path
         ref={pathRef}
         d={calcPath({