From 557ce72961cc6ba5f5e5880479b490b0561d230b Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sat, 7 Sep 2024 23:52:03 +0400
Subject: [PATCH] Add sidesheet for editing relationships

---
 src/components/EditorCanvas/Canvas.jsx        |   8 +
 src/components/EditorCanvas/Relationship.jsx  | 145 +++++++-----
 .../RelationshipsTab/RelationshipInfo.jsx     | 208 ++++++++----------
 .../RelationshipsTab/RelationshipsTab.jsx     |  69 +++---
 src/components/SimpleCanvas.jsx               |   2 +-
 5 files changed, 230 insertions(+), 202 deletions(-)

diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index 7587f12..1f15384 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/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)) {
diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx
index 331fdeb..9f512a9 100644
--- a/src/components/EditorCanvas/Relationship.jsx
+++ b/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,67 +81,90 @@ export default function Relationship({ data }) {
   };
 
   return (
-    <g className="select-none group" onDoubleClick={edit}>
-      <path
-        ref={pathRef}
-        d={calcPath(
-          {
-            ...data,
-            startTable: {
-              x: tables[data.startTableId].x,
-              y: tables[data.startTableId].y,
+    <>
+      <g className="select-none group" onDoubleClick={edit}>
+        <path
+          ref={pathRef}
+          d={calcPath(
+            {
+              ...data,
+              startTable: {
+                x: tables[data.startTableId].x,
+                y: tables[data.startTableId].y,
+              },
+              endTable: {
+                x: tables[data.endTableId].x,
+                y: tables[data.endTableId].y,
+              },
             },
-            endTable: {
-              x: tables[data.endTableId].x,
-              y: tables[data.endTableId].y,
-            },
-          },
-          settings.tableWidth,
+            settings.tableWidth,
+          )}
+          stroke="gray"
+          className="group-hover:stroke-sky-700"
+          fill="none"
+          strokeWidth={2}
+          cursor="pointer"
+        />
+        {pathRef.current && settings.showCardinality && (
+          <>
+            <circle
+              cx={cardinalityStartX}
+              cy={cardinalityStartY}
+              r="12"
+              fill="grey"
+              className="group-hover:fill-sky-700"
+            />
+            <text
+              x={cardinalityStartX}
+              y={cardinalityStartY}
+              fill="white"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+            >
+              {cardinalityStart}
+            </text>
+            <circle
+              cx={cardinalityEndX}
+              cy={cardinalityEndY}
+              r="12"
+              fill="grey"
+              className="group-hover:fill-sky-700"
+            />
+            <text
+              x={cardinalityEndX}
+              y={cardinalityEndY}
+              fill="white"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+            >
+              {cardinalityEnd}
+            </text>
+          </>
         )}
-        stroke="gray"
-        className="group-hover:stroke-sky-700"
-        fill="none"
-        strokeWidth={2}
-        cursor="pointer"
-      />
-      {pathRef.current && settings.showCardinality && (
-        <>
-          <circle
-            cx={cardinalityStartX}
-            cy={cardinalityStartY}
-            r="12"
-            fill="grey"
-            className="group-hover:fill-sky-700"
-          />
-          <text
-            x={cardinalityStartX}
-            y={cardinalityStartY}
-            fill="white"
-            strokeWidth="0.5"
-            textAnchor="middle"
-            alignmentBaseline="middle"
-          >
-            {cardinalityStart}
-          </text>
-          <circle
-            cx={cardinalityEndX}
-            cy={cardinalityEndY}
-            r="12"
-            fill="grey"
-            className="group-hover:fill-sky-700"
-          />
-          <text
-            x={cardinalityEndX}
-            y={cardinalityEndY}
-            fill="white"
-            strokeWidth="0.5"
-            textAnchor="middle"
-            alignmentBaseline="middle"
-          >
-            {cardinalityEnd}
-          </text>
-        </>
-      )}
-    </g>
+      </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>
+    </>
   );
 }
diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx b/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
index 114afcc..bc184f1 100644
--- a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
+++ b/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,110 +120,100 @@ 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>
-            {tables[data.endTableId].name}
-          </div>
-          <div className="mx-1">
-            <span className="font-semibold">{t("foreign")}: </span>
-            {tables[data.startTableId].name}
-          </div>
-          <div className="ms-1">
-            <Popover
-              content={
-                <div className="p-2 popover-theme">
-                  <Table
-                    columns={columns}
-                    dataSource={[
-                      {
-                        key: "1",
-                        foreign: `${tables[data.startTableId].name}(${
-                          tables[data.startTableId].fields[data.startFieldId]
-                            .name
-                        })`,
-                        primary: `${tables[data.endTableId].name}(${
-                          tables[data.endTableId].fields[data.endFieldId].name
-                        })`,
-                      },
-                    ]}
-                    pagination={false}
-                    size="small"
-                    bordered
-                  />
-                  <div className="mt-2">
-                    <Button
-                      icon={<IconLoopTextStroked />}
-                      block
-                      onClick={swapKeys}
-                    >
-                      {t("swap")}
-                    </Button>
-                  </div>
-                </div>
-              }
-              trigger="click"
-              position="rightTop"
-              showArrow
-            >
-              <Button icon={<IconMore />} type="tertiary" />
-            </Popover>
-          </div>
+    <>
+      <div className="flex justify-between items-center mb-3">
+        <div className="me-3">
+          <span className="font-semibold">{t("primary")}: </span>
+          {tables[data.endTableId].name}
         </div>
-        <div className="font-semibold my-1">{t("cardinality")}:</div>
-        <Select
-          optionList={Object.values(Cardinality).map((v) => ({
-            label: t(v),
-            value: v,
-          }))}
-          value={data.cardinality}
-          className="w-full"
-          onChange={changeCardinality}
-        />
-        <Row gutter={6} className="my-3">
-          <Col span={12}>
-            <div className="font-semibold">{t("on_update")}: </div>
-            <Select
-              optionList={Object.values(Constraint).map((v) => ({
-                label: v,
-                value: v,
-              }))}
-              value={data.updateConstraint}
-              className="w-full"
-              onChange={(value) => changeConstraint("update", value)}
-            />
-          </Col>
-          <Col span={12}>
-            <div className="font-semibold">{t("on_delete")}: </div>
-            <Select
-              optionList={Object.values(Constraint).map((v) => ({
-                label: v,
-                value: v,
-              }))}
-              value={data.deleteConstraint}
-              className="w-full"
-              onChange={(value) => changeConstraint("delete", value)}
-            />
-          </Col>
-        </Row>
-        <Button
-          icon={<IconDeleteStroked />}
-          block
-          type="danger"
-          onClick={() => deleteRelationship(data.id)}
-        >
-          {t("delete")}
-        </Button>
-      </Collapse.Panel>
-    </div>
+        <div className="mx-1">
+          <span className="font-semibold">{t("foreign")}: </span>
+          {tables[data.startTableId].name}
+        </div>
+        <div className="ms-1">
+          <Popover
+            content={
+              <div className="p-2 popover-theme">
+                <Table
+                  columns={columns}
+                  dataSource={[
+                    {
+                      key: "1",
+                      foreign: `${tables[data.startTableId].name}(${
+                        tables[data.startTableId].fields[data.startFieldId].name
+                      })`,
+                      primary: `${tables[data.endTableId].name}(${
+                        tables[data.endTableId].fields[data.endFieldId].name
+                      })`,
+                    },
+                  ]}
+                  pagination={false}
+                  size="small"
+                  bordered
+                />
+                <div className="mt-2">
+                  <Button
+                    icon={<IconLoopTextStroked />}
+                    block
+                    onClick={swapKeys}
+                  >
+                    {t("swap")}
+                  </Button>
+                </div>
+              </div>
+            }
+            trigger="click"
+            position="rightTop"
+            showArrow
+          >
+            <Button icon={<IconMore />} type="tertiary" />
+          </Popover>
+        </div>
+      </div>
+      <div className="font-semibold my-1">{t("cardinality")}:</div>
+      <Select
+        optionList={Object.values(Cardinality).map((v) => ({
+          label: t(v),
+          value: v,
+        }))}
+        value={data.cardinality}
+        className="w-full"
+        onChange={changeCardinality}
+      />
+      <Row gutter={6} className="my-3">
+        <Col span={12}>
+          <div className="font-semibold">{t("on_update")}: </div>
+          <Select
+            optionList={Object.values(Constraint).map((v) => ({
+              label: v,
+              value: v,
+            }))}
+            value={data.updateConstraint}
+            className="w-full"
+            onChange={(value) => changeConstraint("update", value)}
+          />
+        </Col>
+        <Col span={12}>
+          <div className="font-semibold">{t("on_delete")}: </div>
+          <Select
+            optionList={Object.values(Constraint).map((v) => ({
+              label: v,
+              value: v,
+            }))}
+            value={data.deleteConstraint}
+            className="w-full"
+            onChange={(value) => changeConstraint("delete", value)}
+          />
+        </Col>
+      </Row>
+      <Button
+        icon={<IconDeleteStroked />}
+        block
+        type="danger"
+        onClick={() => deleteRelationship(data.id)}
+      >
+        {t("delete")}
+      </Button>
+    </>
   );
 }
diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx b/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
index 99f80d7..e492a96 100644
--- a/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
+++ b/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
@@ -14,34 +14,47 @@ export default function RelationshipsTab() {
   return (
     <>
       <SearchBar />
-      <Collapse
-        activeKey={
-          selectedElement.open &&
-          selectedElement.element === ObjectType.RELATIONSHIP
-            ? `${selectedElement.id}`
-            : ""
-        }
-        keepDOM
-        lazyRender
-        onChange={(k) =>
-          setSelectedElement((prev) => ({
-            ...prev,
-            open: true,
-            id: parseInt(k),
-            element: ObjectType.RELATIONSHIP,
-          }))
-        }
-        accordion
-      >
-        {relationships.length <= 0 ? (
-          <Empty
-            title={t("no_relationships")}
-            text={t("no_relationships_text")}
-          />
-        ) : (
-          relationships.map((r) => <RelationshipInfo key={r.id} data={r} />)
-        )}
-      </Collapse>
+      {relationships.length <= 0 ? (
+        <Empty
+          title={t("no_relationships")}
+          text={t("no_relationships_text")}
+        />
+      ) : (
+        <Collapse
+          activeKey={
+            selectedElement.open &&
+            selectedElement.element === ObjectType.RELATIONSHIP
+              ? `${selectedElement.id}`
+              : ""
+          }
+          keepDOM
+          lazyRender
+          onChange={(k) =>
+            setSelectedElement((prev) => ({
+              ...prev,
+              open: true,
+              id: parseInt(k),
+              element: ObjectType.RELATIONSHIP,
+            }))
+          }
+          accordion
+        >
+          {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>
+      )}
     </>
   );
 }
diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
index 78a2840..1ed5d94 100644
--- a/src/components/SimpleCanvas.jsx
+++ b/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({