Remove coords from relationship objects

src/components/EditorCanvas/Canvas.jsx

@@ -1,17 +1,24 @@
 import { useRef, useState, useEffect } from "react";
-import { Action, Cardinality, Constraint, ObjectType } from "../../data/constants";
+import {
+  Action,
+  Cardinality,
+  Constraint,
+  ObjectType,
+} from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
 import Table from "./Table";
 import Area from "./Area";
 import Relationship from "./Relationship";
 import Note from "./Note";
-import useSettings from "../../hooks/useSettings";
-import useTransform from "../../hooks/useTransform";
-import useTables from "../../hooks/useTables";
-import useUndoRedo from "../../hooks/useUndoRedo";
-import useSelect from "../../hooks/useSelect";
-import useAreas from "../../hooks/useAreas";
-import useNotes from "../../hooks/useNotes";
+import {
+  useSettings,
+  useTransform,
+  useTables,
+  useUndoRedo,
+  useSelect,
+  useAreas,
+  useNotes,
+} from "../../hooks";
 
 export default function Canvas() {
   const { tables, updateTable, relationships, addRelationship } = useTables();
@@ -28,7 +35,7 @@ export default function Canvas() {
     prevY: 0,
   });
   const [linking, setLinking] = useState(false);
-  const [linkingLink, setLinkingLine] = useState({
+  const [linkingLine, setLinkingLine] = useState({
     startTableId: -1,
     startFieldId: -1,
     endTableId: -1,
@@ -37,11 +44,6 @@ export default function Canvas() {
     startY: 0,
     endX: 0,
     endY: 0,
-    name: "",
-    cardinality: Cardinality.ONE_TO_ONE,
-    updateConstraint: Constraint.NONE,
-    deleteConstraint: Constraint.NONE,
-    mandatory: false,
   });
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [hoveredTable, setHoveredTable] = useState({
@@ -119,7 +121,7 @@ export default function Canvas() {
     if (linking) {
       const rect = canvas.current.getBoundingClientRect();
       setLinkingLine({
-        ...linkingLink,
+        ...linkingLine,
         endX: (e.clientX - rect.left - transform.pan?.x) / transform.zoom,
         endY: (e.clientY - rect.top - transform.pan?.y) / transform.zoom,
       });
@@ -141,7 +143,7 @@ export default function Canvas() {
     } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
       const dx = e.clientX / transform.zoom - offset.x;
       const dy = e.clientY / transform.zoom - offset.y;
-      updateTable(dragging.id, { x: dx, y: dy }, true);
+      updateTable(dragging.id, { x: dx, y: dy });
     } else if (
       dragging.element === ObjectType.AREA &&
       dragging.id >= 0 &&
@@ -335,29 +337,35 @@ export default function Canvas() {
     if (hoveredTable.tableId < 0) return;
     if (hoveredTable.field < 0) return;
     if (
-      tables[linkingLink.startTableId].fields[linkingLink.startFieldId].type !==
+      tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
       tables[hoveredTable.tableId].fields[hoveredTable.field].type
     ) {
       Toast.info("Cannot connect");
       return;
     }
     if (
-      linkingLink.startTableId === hoveredTable.tableId &&
-      linkingLink.startFieldId === hoveredTable.field
+      linkingLine.startTableId === hoveredTable.tableId &&
+      linkingLine.startFieldId === hoveredTable.field
     )
       return;
 
-    addRelationship(true, {
-      ...linkingLink,
+    const newRelationship = {
+      ...linkingLine,
       endTableId: hoveredTable.tableId,
       endFieldId: hoveredTable.field,
-      endX: tables[hoveredTable.tableId].x + 15,
-      endY: tables[hoveredTable.tableId].y + hoveredTable.field * 36 + 69,
-      name: `${tables[linkingLink.startTableId].name}_${
-        tables[linkingLink.startTableId].fields[linkingLink.startFieldId].name
+      cardinality: Cardinality.ONE_TO_ONE,
+      updateConstraint: Constraint.NONE,
+      deleteConstraint: Constraint.NONE,
+      name: `${tables[linkingLine.startTableId].name}_${
+        tables[linkingLine.startTableId].fields[linkingLine.startFieldId].name
       }_fk`,
       id: relationships.length,
-    });
+    };
+    delete newRelationship.startX;
+    delete newRelationship.startY;
+    delete newRelationship.endX;
+    delete newRelationship.endY;
+    addRelationship(newRelationship, true);
   };
 
   const handleMouseWheel = (e) => {
@@ -466,7 +474,7 @@ export default function Canvas() {
             ))}
             {linking && (
               <path
-                d={`M ${linkingLink.startX} ${linkingLink.startY} L ${linkingLink.endX} ${linkingLink.endY}`}
+                d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
                 stroke="red"
                 strokeDasharray="8,8"
               />

src/components/EditorCanvas/Relationship.jsx

@@ -1,10 +1,11 @@
 import { useRef } from "react";
 import { Cardinality } from "../../data/constants";
-import useSettings from "../../hooks/useSettings";
 import { calcPath } from "../../utils/calcPath";
+import { useTables, useSettings } from "../../hooks";
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
+  const { tables } = useTables();
   const pathRef = useRef();
 
   let cardinalityStart = "1";
@@ -50,7 +51,17 @@ export default function Relationship({ data }) {
     <g className="select-none group">
       <path
         ref={pathRef}
-        d={calcPath(data.startX, data.endX, data.startY, data.endY)}
+        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,
+          },
+        })}
         stroke="gray"
         className="group-hover:stroke-sky-700"
         fill="none"
@@ -65,7 +76,7 @@ export default function Relationship({ data }) {
             r="12"
             fill="grey"
             className="group-hover:fill-sky-700"
-          ></circle>
+          />
           <text
             x={cardinalityStartX}
             y={cardinalityStartY}
@@ -82,7 +93,7 @@ export default function Relationship({ data }) {
             r="12"
             fill="grey"
             className="group-hover:fill-sky-700"
-          ></circle>
+          />
           <text
             x={cardinalityEndX}
             y={cardinalityEndY}

src/components/EditorCanvas/Table.jsx

@@ -797,12 +797,6 @@ export default function Table(props) {
                                 return {
                                   ...e,
                                   startFieldId: e.startFieldId - 1,
-                                  startX: props.tableData.x + 15,
-                                  startY:
-                                    props.tableData.y +
-                                    (e.startFieldId - 1) * 36 +
-                                    50 +
-                                    19,
                                 };
                               }
                               if (
@@ -812,12 +806,6 @@ export default function Table(props) {
                                 return {
                                   ...e,
                                   endFieldId: e.endFieldId - 1,
-                                  endX: props.tableData.x + 15,
-                                  endY:
-                                    props.tableData.y +
-                                    (e.endFieldId - 1) * 36 +
-                                    50 +
-                                    19,
                                 };
                               }
                               return e;
@@ -1314,12 +1302,6 @@ export default function Table(props) {
                       return {
                         ...e,
                         startFieldId: e.startFieldId - 1,
-                        startX: props.tableData.x + 15,
-                        startY:
-                          props.tableData.y +
-                          (e.startFieldId - 1) * 36 +
-                          50 +
-                          19,
                       };
                     }
                     if (
@@ -1329,9 +1311,6 @@ export default function Table(props) {
                       return {
                         ...e,
                         endFieldId: e.endFieldId - 1,
-                        endX: props.tableData.x + 15,
-                        endY:
-                          props.tableData.y + (e.endFieldId - 1) * 36 + 50 + 19,
                       };
                     }
                     return e;

src/components/EditorHeader/ControlPanel.jsx

@@ -59,7 +59,7 @@ import { db } from "../../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
 import { Parser } from "node-sql-parser";
 import Todo from "./Todo";
-import { Thumbnail } from "./Thumbnail";
+
 import useLayout from "../../hooks/useLayout";
 import useSettings from "../../hooks/useSettings";
 import useTransform from "../../hooks/useTransform";
@@ -76,6 +76,7 @@ import useAreas from "../../hooks/useAreas";
 import useNotes from "../../hooks/useNotes";
 import useTypes from "../../hooks/useTypes";
 import useSaveState from "../../hooks/useSaveState";
+import Thumbnail from "../Thumbnail";
 
 export default function ControlPanel({
   diagramId,
@@ -210,7 +211,7 @@ export default function ControlPanel({
       if (a.element === ObjectType.TABLE) {
         addTable(false, a.data);
       } else if (a.element === ObjectType.RELATIONSHIP) {
-        addRelationship(false, a.data);
+        addRelationship(a.data, false);
       } else if (a.element === ObjectType.NOTE) {
         addNote(false, a.data);
       } else if (a.element === ObjectType.AREA) {
@@ -234,16 +235,12 @@ export default function ControlPanel({
                 return {
                   ...e,
                   startFieldId: e.startFieldId + 1,
-                  startX: tables[a.tid].x + 15,
-                  startY: tables[a.tid].y + (e.startFieldId + 1) * 36 + 50 + 19,
                 };
               }
               if (e.endTableId === a.tid && e.endFieldId >= a.data.id) {
                 return {
                   ...e,
                   endFieldId: e.endFieldId + 1,
-                  endX: tables[a.tid].x + 15,
-                  endY: tables[a.tid].y + (e.endFieldId + 1) * 36 + 50 + 19,
                 };
               }
               return e;
@@ -354,7 +351,7 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.NOTE) {
         addNote(false);
       } else if (a.element === ObjectType.RELATIONSHIP) {
-        addRelationship(false, a.data);
+        addRelationship(a.data, false);
       } else if (a.element === ObjectType.TYPE) {
         addType(false);
       }
@@ -407,16 +404,12 @@ export default function ControlPanel({
                 return {
                   ...e,
                   startFieldId: e.startFieldId - 1,
-                  startX: tables[a.tid].x + 15,
-                  startY: tables[a.tid].y + (e.startFieldId - 1) * 36 + 50 + 19,
                 };
               }
               if (e.endTableId === a.tid && e.endFieldId > a.data.id) {
                 return {
                   ...e,
                   endFieldId: e.endFieldId - 1,
-                  endX: tables[a.tid].x + 15,
-                  endY: tables[a.tid].y + (e.endFieldId - 1) * 36 + 50 + 19,
                 };
               }
               return e;
@@ -1482,13 +1475,6 @@ export default function ControlPanel({
 
           if (startFieldId === -1 || endFieldId === -1) return;
 
-          const startX = tables[startTableId].x + 15;
-          const startY = tables[startTableId].y + startFieldId * 36 + 69;
-          const endX = tables[endTableId].x + 15;
-          const endY = tables[endTableId].y + endFieldId * 36 + 69;
-
-          relationship.mandetory = false;
-
           relationship.name = startTable + "_" + startField + "_fk";
           relationship.startTableId = startTableId;
           relationship.startFieldId = startFieldId;
@@ -1497,10 +1483,6 @@ export default function ControlPanel({
           relationship.updateConstraint = updateConstraint;
           relationship.deleteConstraint = deleteConstraint;
           relationship.cardinality = Cardinality.ONE_TO_ONE;
-          relationship.startX = startX;
-          relationship.startY = startY;
-          relationship.endX = endX;
-          relationship.endY = endY;
           relationships.push(relationship);
 
           relationships.forEach((r, i) => (r.id = i));
@@ -1559,11 +1541,6 @@ export default function ControlPanel({
 
       if (startFieldId === -1 || endFieldId === -1) return;
 
-      const startX = tables[startTableId].x + 15;
-      const startY = tables[startTableId].y + startFieldId * 36 + 69;
-      const endX = tables[endTableId].x + 15;
-      const endY = tables[endTableId].y + endFieldId * 36 + 69;
-
       relationship.name = startTable + "_" + startField + "_fk";
       relationship.startTableId = startTableId;
       relationship.startFieldId = startFieldId;
@@ -1572,10 +1549,6 @@ export default function ControlPanel({
       relationship.updateConstraint = updateConstraint;
       relationship.deleteConstraint = deleteConstraint;
       relationship.cardinality = Cardinality.ONE_TO_ONE;
-      relationship.startX = startX;
-      relationship.startY = startY;
-      relationship.endX = endX;
-      relationship.endY = endY;
       relationships.push(relationship);
     });
 
@@ -1823,10 +1796,10 @@ export default function ControlPanel({
       <div onClick={() => setSelectedTemplateId(0)}>
         <div
           className={`rounded-md h-[180px] border-2 hover:border-dashed ${
-            selectedTemplateId === 0 ? "border-blue-400" : "border-zinc-100"
+            selectedTemplateId === 0 ? "border-blue-400" : "border-zinc-400"
           }`}
         >
-          <Thumbnail i={0} diagram={{}} zoom={0.24} />
+          <Thumbnail i={0} diagram={{}} zoom={0.24} theme={settings.mode} />
         </div>
         <div className="text-center mt-1">Blank</div>
       </div>
@@ -1836,10 +1809,15 @@ export default function ControlPanel({
             className={`rounded-md h-[180px] border-2 hover:border-dashed ${
               selectedTemplateId === temp.id
                 ? "border-blue-400"
-                : "border-zinc-100"
+                : "border-zinc-400"
             }`}
           >
-            <Thumbnail i={temp.id} diagram={temp} zoom={0.24} />
+            <Thumbnail
+              i={temp.id}
+              diagram={temp}
+              zoom={0.24}
+              theme={settings.mode}
+            />
           </div>
           <div className="text-center mt-1">{temp.title}</div>
         </div>

src/components/EditorSidePanel/TablesOverview.jsx

@@ -149,16 +149,12 @@ function TablePanel({ data }) {
           return {
             ...e,
             startFieldId: e.startFieldId - 1,
-            startX: data.x + 15,
-            startY: data.y + (e.startFieldId - 1) * 36 + 50 + 19,
           };
         }
         if (e.endTableId === data.id && e.endFieldId > field.id) {
           return {
             ...e,
             endFieldId: e.endFieldId - 1,
-            endX: data.x + 15,
-            endY: data.y + (e.endFieldId - 1) * 36 + 50 + 19,
           };
         }
         return e;

src/components/SimpleCanvas.jsx

@@ -53,7 +53,7 @@ function Table({ table, grab }) {
   );
 }
 
-function Relationship({ relationship }) {
+function Relationship({ relationship, tables }) {
   const pathRef = useRef();
   let start = { x: 0, y: 0 };
   let end = { x: 0, y: 0 };
@@ -97,19 +97,24 @@ function Relationship({ relationship }) {
     <g className="select-none" onClick={() => console.log(pathRef.current)}>
       <path
         ref={pathRef}
-        d={calcPath(
-          relationship.startX,
-          relationship.endX,
-          relationship.startY,
-          relationship.endY
-        )}
+        d={calcPath({
+          ...relationship,
+          startTable: {
+            x: tables[relationship.startTableId].x,
+            y: tables[relationship.startTableId].y,
+          },
+          endTable: {
+            x: tables[relationship.endTableId].x,
+            y: tables[relationship.endTableId].y,
+          },
+        })}
         stroke="gray"
         fill="none"
         strokeWidth={2}
       />
       {pathRef.current && (
         <>
-          <circle cx={start.x} cy={start.y} r="12" fill="grey"></circle>
+          <circle cx={start.x} cy={start.y} r="12" fill="grey" />
           <text
             x={start.x}
             y={start.y}
@@ -120,7 +125,7 @@ function Relationship({ relationship }) {
           >
             {cardinalityStart}
           </text>
-          <circle cx={end.x} cy={end.y} r="12" fill="grey"></circle>
+          <circle cx={end.x} cy={end.y} r="12" fill="grey" />
           <text
             x={end.x}
             y={end.y}
@@ -139,7 +144,6 @@ function Relationship({ relationship }) {
 
 export default function SimpleCanvas({ diagram, zoom }) {
   const [tables, setTables] = useState(diagram.tables);
-  const [relationships, setRelationships] = useState(diagram.relationships);
   const [dragging, setDragging] = useState(-1);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
 
@@ -156,39 +160,9 @@ export default function SimpleCanvas({ diagram, zoom }) {
       const dx = e.clientX - offset.x;
       const dy = e.clientY - offset.y;
       setTables((prev) =>
-        prev.map((table, i) => {
-          if (i === dragging) {
-            setRelationships((prev) =>
-              prev.map((r) => {
-                if (r.startTableId === i) {
-                  return {
-                    ...r,
-                    startX: dx + 15,
-                    startY: dy + r.startFieldId * 36 + 69,
-                    endX: tables[r.endTableId].x + 15,
-                    endY: tables[r.endTableId].y + r.endFieldId * 36 + 69,
-                  };
-                } else if (r.endTableId === i) {
-                  return {
-                    ...r,
-                    startX: tables[r.startTableId].x + 15,
-                    startY: tables[r.startTableId].y + r.startFieldId * 36 + 69,
-                    endX: dx + 15,
-                    endY: dy + r.endFieldId * 36 + 69,
-                  };
-                }
-                return r;
-              })
-            );
-
-            return {
-              ...table,
-              x: dx,
-              y: dy,
-            };
-          }
-          return table;
-        })
+        prev.map((table, i) =>
+          i === dragging ? { ...table, x: dx, y: dy } : table
+        )
       );
     }
   };
@@ -237,8 +211,8 @@ export default function SimpleCanvas({ diagram, zoom }) {
           transformOrigin: "top left",
         }}
       >
-        {relationships.map((r, i) => (
-          <Relationship key={i} relationship={r} />
+        {diagram.relationships.map((r, i) => (
+          <Relationship key={i} relationship={r} tables={tables} />
         ))}
         {tables.map((t, i) => (
           <Table key={i} table={t} grab={(e) => grabTable(e, i)} />

src/components/Thumbnail.jsx

@@ -1,9 +1,7 @@
-import { calcPath } from "../../utils/calcPath";
+import { tableFieldHeight, tableHeaderHeight } from "../data/constants";
+import { calcPath } from "../utils/calcPath";
 
-export function Thumbnail({ diagram, i, zoom }) {
-  const translateX = 32 * zoom;
-  const translateY = 32 * zoom;
-  const theme = localStorage.getItem("theme");
+export default function Thumbnail({ diagram, i, zoom, theme }) {
   return (
     <svg
       className={`${
@@ -38,7 +36,7 @@ export function Thumbnail({ diagram, i, zoom }) {
       ></rect>
       <g
         style={{
-          transform: `translate(${translateX}px, ${translateY}px) scale(${zoom})`,
+          transform: `scale(${zoom})`,
         }}
       >
         {diagram.subjectAreas?.map((a) => (
@@ -60,8 +58,28 @@ export function Thumbnail({ diagram, i, zoom }) {
             </div>
           </foreignObject>
         ))}
+        {diagram.relationships?.map((r, i) => (
+          <path
+            key={i}
+            d={calcPath({
+              ...r,
+              startTable: {
+                x: diagram.tables[r.startTableId].x,
+                y: diagram.tables[r.startTableId].y - tableFieldHeight / 2,
+              },
+              endTable: {
+                x: diagram.tables[r.endTableId].x,
+                y: diagram.tables[r.endTableId].y - tableFieldHeight / 2,
+              },
+            })}
+            fill="none"
+            strokeWidth={2}
+            stroke="gray"
+          />
+        ))}
         {diagram.tables?.map((table, i) => {
-          const height = table.fields.length * 36 + 50 + 7;
+          const height =
+            table.fields.length * tableFieldHeight + tableHeaderHeight + 7;
           return (
             <foreignObject
               x={table.x}
@@ -110,20 +128,6 @@ export function Thumbnail({ diagram, i, zoom }) {
             </foreignObject>
           );
         })}
-        {diagram.relationships?.map((e, i) => (
-          <path
-            key={i}
-            d={calcPath(
-              e.startX,
-              e.endX,
-              e.startY - translateY / zoom,
-              e.endY - (translateY / zoom) * 0.5
-            )}
-            fill="none"
-            strokeWidth={1}
-            stroke="#ddd"
-          />
-        ))}
         {diagram.notes?.map((n) => {
           const x = n.x;
           const y = n.y;