Add sidesheet for editing relationships

drawdb-io · Sep 7, 2024 · 557ce72 · 557ce72
1 parent 6cd0a69
commit 557ce72
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 201 deletions.
diff --git 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
@@ -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>
+ </>
  );
 }