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 {
-import useTransform from "../../hooks/useTransform";
+  useSettings,
-import useTables from "../../hooks/useTables";
+  useTransform,
-import useUndoRedo from "../../hooks/useUndoRedo";
+  useTables,
-import useSelect from "../../hooks/useSelect";
+  useUndoRedo,
-import useAreas from "../../hooks/useAreas";
+  useSelect,
-import useNotes from "../../hooks/useNotes";
+  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 &&
+      linkingLine.startTableId === hoveredTable.tableId &&
-      linkingLink.startFieldId === hoveredTable.field
+      linkingLine.startFieldId === hoveredTable.field
     )
       return;
 
-    addRelationship(true, {
+    const newRelationship = {
-      ...linkingLink,
+      ...linkingLine,
       endTableId: hoveredTable.tableId,
       endFieldId: hoveredTable.field,
-      endX: tables[hoveredTable.tableId].x + 15,
+      cardinality: Cardinality.ONE_TO_ONE,
-      endY: tables[hoveredTable.tableId].y + hoveredTable.field * 36 + 69,
+      updateConstraint: Constraint.NONE,
-      name: `${tables[linkingLink.startTableId].name}_${
+      deleteConstraint: Constraint.NONE,
-        tables[linkingLink.startTableId].fields[linkingLink.startFieldId].name
+      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(
+        d={calcPath({
-          relationship.startX,
+          ...relationship,
-          relationship.endX,
+          startTable: {
-          relationship.startY,
+            x: tables[relationship.startTableId].x,
-          relationship.endY
+            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) => {
+        prev.map((table, i) =>
-          if (i === dragging) {
+          i === dragging ? { ...table, x: dx, y: dy } : table
-            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;
-        })
       );
     }
   };
@@ -237,8 +211,8 @@ export default function SimpleCanvas({ diagram, zoom }) {
           transformOrigin: "top left",
         }}
       >
-        {relationships.map((r, i) => (
+        {diagram.relationships.map((r, i) => (
-          <Relationship key={i} relationship={r} />
+          <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 }) {
+export default function Thumbnail({ diagram, i, zoom, theme }) {
-  const translateX = 32 * zoom;
-  const translateY = 32 * zoom;
-  const theme = localStorage.getItem("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;

src/context/TablesContext.jsx

@@ -103,33 +103,9 @@ export default function TablesContextProvider({ children }) {
     }
   };
 
-  const updateTable = (id, updatedValues, updateRelationships = false) => {
+  const updateTable = (id, updatedValues) => {
     setTables((prev) =>
-      prev.map((table) => {
+      prev.map((t) => (t.id === id ? { ...t, ...updatedValues } : t))
-        if (table.id === id) {
-          if (updateRelationships) {
-            setRelationships((prev) =>
-              prev.map((r) => {
-                let newR = { ...r };
-                if (r.startTableId === id) {
-                  newR.startX = updatedValues.x + 15;
-                  newR.startY = updatedValues.y + r.startFieldId * 36 + 69;
-                }
-                if (r.endTableId === id) {
-                  newR.endX = updatedValues.x + 15;
-                  newR.endY = updatedValues.y + r.endFieldId * 36 + 69;
-                }
-                return newR;
-              })
-            );
-          }
-          return {
-            ...table,
-            ...updatedValues,
-          };
-        }
-        return table;
-      })
     );
   };
 
@@ -149,7 +125,7 @@ export default function TablesContextProvider({ children }) {
     );
   };
 
-  const addRelationship = (addToHistory = true, data) => {
+  const addRelationship = (data, addToHistory = true) => {
     if (addToHistory) {
       setRelationships((prev) => {
         setUndoStack((prevUndo) => [

src/data/constants.js

@@ -49,6 +49,9 @@ export const noteThemes = [
 
 export const defaultBlue = "#175e7a";
 export const defaultNoteTheme = "#fcf7ac";
+export const tableHeaderHeight = 50;
+export const tableWidth = 200;
+export const tableFieldHeight = 36;
 
 export const Cardinality = {
   ONE_TO_ONE: "One to one",

src/data/heroDiagram.js

@@ -103,10 +103,6 @@ export const diagram = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      startX: xOffset + 42,
-      startY: window.innerHeight * 0.72 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 2),
-      endX: xOffset + 90,
-      endY: window.innerHeight * 0.23 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
       cardinality: "Many to one",
     },
     {
@@ -114,10 +110,6 @@ export const diagram = {
       startFieldId: 2,
       endTableId: 1,
       endFieldId: 0,
-      startX: xOffset + 351,
-      startY: window.innerHeight * 0.72 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 5),
-      endX: xOffset + 42,
-      endY: window.innerHeight * 0.72 - (5 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
       cardinality: "One to one",
     },
     {
@@ -125,11 +117,7 @@ export const diagram = {
       startFieldId: 1,
       endTableId: 3,
       endFieldId: 0,
-      startX: xOffset + 351,
-      startY: window.innerHeight * 0.72 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 3),
-      endX: xOffset + 325,
-      endY: window.innerHeight * 0.23 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
       cardinality: "Many to one",
     },
   ],
-};
+};

src/data/schemas.js

@@ -124,15 +124,10 @@ export const jsonSchema = {
           startFieldId: { type: "integer" },
           endTableId: { type: "integer" },
           endFieldId: { type: "integer" },
-          startX: { type: "number" },
-          startY: { type: "number" },
-          endX: { type: "number" },
-          endY: { type: "number" },
           name: { type: "string" },
           cardinality: { type: "string" },
           updateConstraint: { type: "string" },
           deleteConstraint: { type: "string" },
-          mandatory: { type: "boolean" },
           id: { type: "integer" },
         },
         required: [
@@ -140,15 +135,10 @@ export const jsonSchema = {
           "startFieldId",
           "endTableId",
           "endFieldId",
-          "startX",
-          "startY",
-          "endX",
-          "endY",
           "name",
           "cardinality",
           "updateConstraint",
           "deleteConstraint",
-          "mandatory",
           "id",
         ],
       },

src/pages/Templates.jsx

@@ -6,7 +6,7 @@ import { Tabs, TabPane, Banner, Steps } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
 import { db } from "../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
-import { calcPath } from "../utils/calcPath";
+import Thumbnail from "../components/Thumbnail";
 
 export default function Templates() {
   const defaultTemplates = useLiveQuery(() =>
@@ -73,7 +73,14 @@ export default function Templates() {
                     key={i}
                     className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
                   >
-                    <Thumbnail diagram={t} i={"1" + i} />
+                    <div className="h-48">
+                      <Thumbnail
+                        diagram={t}
+                        i={"1" + i}
+                        zoom={0.3}
+                        theme="light"
+                      />
+                    </div>
                     <div className="px-4 py-3">
                       <div className="flex justify-between">
                         <div className="text-lg font-bold text-zinc-700">
@@ -187,155 +194,3 @@ export default function Templates() {
     </div>
   );
 }
-
-function Thumbnail({ diagram, i }) {
-  const zoom = 0.3;
-  return (
-    <div className="w-full select-none">
-      <svg className="bg-white w-full h-full rounded-t-md">
-        <defs>
-          <pattern
-            id={"pattern-circles-" + i}
-            x="0"
-            y="0"
-            width="10"
-            height="10"
-            patternUnits="userSpaceOnUse"
-            patternContentUnits="userSpaceOnUse"
-          >
-            <circle
-              id={"pattern-circle-" + i}
-              cx="2"
-              cy="2"
-              r="0.4"
-              fill="rgb(99, 152, 191)"
-            ></circle>
-          </pattern>
-        </defs>
-        <rect
-          x="0"
-          y="0"
-          width="100%"
-          height="100%"
-          fill={"url(#pattern-circles-" + i + ")"}
-        ></rect>
-        <g>
-          {diagram.subjectAreas?.map((a) => (
-            <foreignObject
-              key={a.id}
-              x={a.x * zoom}
-              y={a.y * zoom}
-              width={a.width > 0 ? a.width * zoom : 0}
-              height={a.height > 0 ? a.height * zoom : 0}
-            >
-              <div
-                className={`border border-slate-400 w-full h-full rounded-sm relative`}
-              >
-                <div
-                  className="opacity-40 w-fill h-full"
-                  style={{ backgroundColor: a.color }}
-                />
-              </div>
-              <div className="text-color absolute top-[4px] left-[6px] select-none text-[4px]">
-                {a.name}
-              </div>
-            </foreignObject>
-          ))}
-          {diagram.tables?.map((table, i) => {
-            const height = table.fields.length * 36 + 50 + 7;
-            return (
-              <foreignObject
-                x={table.x * zoom}
-                y={table.y * zoom}
-                width={200 * zoom}
-                height={height * zoom}
-                key={i}
-              >
-                <div className="border-[1px] rounded-[3px] border-zinc-300 text-[4px] bg-zinc-100">
-                  <div
-                    className="h-[4px] w-full rounded-t-sm"
-                    style={{ backgroundColor: table.color }}
-                  ></div>
-                  <div className="rounded-b-[3px]">
-                    <div className="bg-zinc-200 font-bold py-[2px] px-[4px] border-b border-gray-300">
-                      {table.name}
-                    </div>
-                    {table.fields.map((f, j) => (
-                      <div
-                        className={`flex justify-between items-center py-[2px] px-[3px] ${
-                          j < table.fields.length - 1 ? "border-b" : ""
-                        }`}
-                        key={j}
-                      >
-                        <div className="flex items-center justify-start">
-                          <div
-                            className={`w-[3px] h-[3px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-[2px]`}
-                          ></div>
-                          <div>{f.name}</div>
-                        </div>
-                        <div className="text-zinc-500">{f.type}</div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </foreignObject>
-            );
-          })}
-          {diagram.relationships?.map((e, i) => (
-            <path
-              key={i}
-              d={calcPath(e.startX, e.endX, e.startY, e.endY, zoom)}
-              fill="none"
-              strokeWidth={1}
-              stroke="gray"
-            />
-          ))}
-          {diagram.notes?.map((n) => {
-            const x = n.x * zoom;
-            const y = n.y * zoom;
-            const w = 180 * zoom;
-            const r = 3 * zoom;
-            const fold = 24 * zoom;
-            const h = n.height * zoom;
-            return (
-              <g key={n.id}>
-                <path
-                  d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
-                    x + w
-                  } ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
-                    x + w - r
-                  } ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
-                    y + h - r
-                  } L${x} ${y + fold}`}
-                  fill={n.color}
-                  stroke="rgb(168 162 158)"
-                  strokeLinejoin="round"
-                  strokeWidth="0.5"
-                />
-                <path
-                  d={`M${x} ${y + fold} L${x + fold - r} ${
-                    y + fold
-                  } A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
-                    x + fold
-                  } ${y} L${x} ${y + fold} Z`}
-                  fill={n.color}
-                  stroke={"rgb(168 162 158)"}
-                  strokeLinejoin="round"
-                  strokeWidth="0.5"
-                />
-                <foreignObject x={x} y={y} width={w} height={h}>
-                  <div className="text-gray-900 w-full h-full px-[4px] py-[2px] text-[4px]">
-                    <label htmlFor={`note_${n.id}`} className="ms-[6px]">
-                      {n.title}
-                    </label>
-                    <div className="text-[4px] mt-[2px]">{n.content}</div>
-                  </div>
-                </foreignObject>
-              </g>
-            );
-          })}
-        </g>
-      </svg>
-    </div>
-  );
-}

src/templates/template1.js

@@ -288,15 +288,10 @@ export const template1 = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      startX: 292.57925,
-      startY: 124.20675000000011,
-      endX: 129.92525,
-      endY: 350.2977500000002,
       name: "blog_posts_user_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 0,
     },
     {
@@ -304,15 +299,10 @@ export const template1 = {
       startFieldId: 1,
       endTableId: 1,
       endFieldId: 0,
-      startX: 520.6211250000003,
-      startY: 446.6078750000002,
-      endX: 292.57925,
-      endY: 88.20675000000011,
       name: "comments_blog_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 1,
     },
     {
@@ -320,15 +310,10 @@ export const template1 = {
       startFieldId: 2,
       endTableId: 0,
       endFieldId: 0,
-      startX: 520.6211250000003,
-      startY: 482.6078750000002,
-      endX: 129.92525,
-      endY: 350.2977500000002,
       name: "comments_user_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 2,
     },
     {
@@ -336,15 +321,10 @@ export const template1 = {
       startFieldId: 1,
       endTableId: 3,
       endFieldId: 0,
-      startX: 827.1175000000004,
-      startY: 236.55062500000008,
-      endX: 758.2832500000009,
-      endY: 387.1841250000001,
       name: "blog_tag_tag_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 3,
     },
     {
@@ -352,15 +332,10 @@ export const template1 = {
       startFieldId: 0,
       endTableId: 1,
       endFieldId: 0,
-      startX: 827.1175000000004,
-      startY: 200.55062500000008,
-      endX: 292.57925,
-      endY: 88.20675000000011,
       name: "blog_tag_blog_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 4,
     },
   ],

src/templates/template2.js

@@ -303,15 +303,10 @@ export const template2 = {
       startFieldId: 4,
       endTableId: 1,
       endFieldId: 0,
-      startX: 380,
-      startY: 233,
-      endX: 56,
-      endY: 128,
       name: "employees_dep_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 0,
     },
     {
@@ -319,15 +314,10 @@ export const template2 = {
       startFieldId: 5,
       endTableId: 2,
       endFieldId: 0,
-      startX: 380,
-      startY: 269,
-      endX: 52,
-      endY: 353,
       name: "employees_pos_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 1,
     },
     {
@@ -335,15 +325,10 @@ export const template2 = {
       startFieldId: 1,
       endTableId: 3,
       endFieldId: 0,
-      startX: 699,
-      startY: 400,
-      endX: 683,
-      endY: 97,
       name: "project_assignment_project_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 2,
     },
     {
@@ -351,15 +336,10 @@ export const template2 = {
       startFieldId: 2,
       endTableId: 0,
       endFieldId: 0,
-      startX: 699,
-      startY: 436,
-      endX: 380,
-      endY: 89,
       name: "project_assignment_employee_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 3,
     },
   ],

src/templates/template3.js

@@ -364,15 +364,10 @@ export const template3 = {
       startFieldId: 5,
       endTableId: 0,
       endFieldId: 0,
-      startX: 771,
-      startY: 296,
-      endX: 346,
-      endY: 369,
       name: "order_product_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 0,
     },
     {
@@ -380,15 +375,10 @@ export const template3 = {
       startFieldId: 4,
       endTableId: 1,
       endFieldId: 0,
-      startX: 346,
-      startY: 513,
-      endX: 664,
-      endY: 460,
       name: "products_category_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 1,
     },
     {
@@ -396,15 +386,10 @@ export const template3 = {
       startFieldId: 1,
       endTableId: 4,
       endFieldId: 0,
-      startX: 48,
-      startY: 198,
-      endX: 417,
-      endY: 85,
       name: "reviews_customer_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 2,
     },
     {
@@ -412,15 +397,10 @@ export const template3 = {
       startFieldId: 2,
       endTableId: 0,
       endFieldId: 0,
-      startX: 48,
-      startY: 234,
-      endX: 346,
-      endY: 369,
       name: "reviews_product_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 3,
     },
     {
@@ -428,15 +408,10 @@ export const template3 = {
       startFieldId: 2,
       endTableId: 4,
       endFieldId: 0,
-      startX: 771,
-      startY: 188,
-      endX: 417,
-      endY: 85,
       name: "orders_customer_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 4,
     },
   ],

src/templates/template4.js

@@ -315,15 +315,10 @@ export const template4 = {
       startFieldId: 3,
       endTableId: 2,
       endFieldId: 0,
-      startX: 182,
-      startY: 265,
-      endX: 490,
-      endY: 411,
       name: "books_author_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 0,
     },
     {
@@ -331,15 +326,10 @@ export const template4 = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      startX: 516,
-      startY: 119,
-      endX: 182,
-      endY: 157,
       name: "reservations_book_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 1,
     },
     {
@@ -347,15 +337,10 @@ export const template4 = {
       startFieldId: 2,
       endTableId: 4,
       endFieldId: 0,
-      startX: 516,
-      startY: 155,
-      endX: 795,
-      endY: 289,
       name: "reservations_patron_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 2,
     },
     {
@@ -363,15 +348,10 @@ export const template4 = {
       startFieldId: 4,
       endTableId: 1,
       endFieldId: 0,
-      startX: 182,
-      startY: 301,
-      endX: 93,
-      endY: 448,
       name: "books_genre_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 3,
     },
   ],

src/templates/template5.js

@@ -553,15 +553,10 @@ export const template5 = {
       startFieldId: 1,
       endTableId: 1,
       endFieldId: 0,
-      startX: 144,
-      startY: 197,
-      endX: 399,
-      endY: 384,
       name: "accounts_customer_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 0,
     },
     {
@@ -569,15 +564,10 @@ export const template5 = {
       startFieldId: 2,
       endTableId: 1,
       endFieldId: 0,
-      startX: 787,
-      startY: 170,
-      endX: 399,
-      endY: 384,
       name: "cards_customer_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 1,
     },
     {
@@ -585,15 +575,10 @@ export const template5 = {
       startFieldId: 1,
       endTableId: 1,
       endFieldId: 0,
-      startX: 934,
-      startY: 386,
-      endX: 399,
-      endY: 384,
       name: "loans_customer_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 2,
     },
     {
@@ -601,15 +586,10 @@ export const template5 = {
       startFieldId: 1,
       endTableId: 1,
       endFieldId: 0,
-      startX: 679,
-      startY: 500,
-      endX: 399,
-      endY: 384,
       name: "investments_customer_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 3,
     },
     {
@@ -617,15 +597,10 @@ export const template5 = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      startX: 446,
-      startY: 109,
-      endX: 144,
-      endY: 161,
       name: "transactions_account_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 4,
     },
     {
@@ -633,15 +608,10 @@ export const template5 = {
       startFieldId: 2,
       endTableId: 0,
       endFieldId: 0,
-      startX: 127,
-      startY: 499,
-      endX: 144,
-      endY: 161,
       name: "transfers_to_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 5,
     },
     {
@@ -649,15 +619,10 @@ export const template5 = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      startX: 127,
-      startY: 463,
-      endX: 144,
-      endY: 161,
       name: "transfers_from_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 6,
     },
   ],

src/templates/template6.js

@@ -399,15 +399,10 @@ export const template6 = {
       startFieldId: 2,
       endTableId: 0,
       endFieldId: 0,
-      startX: 96,
-      startY: 518,
-      endX: 215,
-      endY: 79,
       name: "enrollment_student_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 0,
     },
     {
@@ -415,15 +410,10 @@ export const template6 = {
       startFieldId: 1,
       endTableId: 1,
       endFieldId: 0,
-      startX: 96,
-      startY: 482,
-      endX: 492,
-      endY: 423,
       name: "enrollment_course_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 1,
     },
     {
@@ -431,15 +421,10 @@ export const template6 = {
       startFieldId: 4,
       endTableId: 4,
       endFieldId: 0,
-      startX: 786,
-      startY: 263,
-      endX: 800,
-      endY: 407,
       name: "instructors_dep_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 2,
     },
     {
@@ -447,15 +432,10 @@ export const template6 = {
       startFieldId: 2,
       endTableId: 4,
       endFieldId: 0,
-      startX: 492,
-      startY: 495,
-      endX: 800,
-      endY: 407,
       name: "courses_dep_id_fk",
       cardinality: "One to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 3,
     },
     {
@@ -463,15 +443,10 @@ export const template6 = {
       startFieldId: 7,
       endTableId: 5,
       endFieldId: 0,
-      startX: 215,
-      startY: 331,
-      endX: 510,
-      endY: 147,
       name: "students_major_id_fk",
       cardinality: "Many to one",
       updateConstraint: "No action",
       deleteConstraint: "No action",
-      mandatory: false,
       id: 4,
     },
   ],

src/utils/calcPath.js

@@ -1,110 +1,100 @@
-export function calcPath(x1, x2, y1, y2, zoom = 1) {
+import {
-  const tableWidth = 200 * zoom;
+  tableFieldHeight,
-  if (y1 <= y2) {
+  tableHeaderHeight,
-    if (x1 + tableWidth <= x2) {
+  tableWidth,
-      x2 -= 14;
+} from "../data/constants";
-    } else if (x2 <= x1 + tableWidth && x1 <= x2) {
-      // x2-=14;
-      // x1-=14;
-    } else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
-      x1 -= 14;
-      x2 -= 14;
-    } else {
-      x2 -= 14;
-      x1 -= 14;
-    }
-  } else {
-    if (x1 + tableWidth <= x2) {
-      x2 -= 14;
-    } else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
-      //
-      x1 -= 14;
-      x2 -= 14;
-    } else if (x1 >= x2 && x1 <= x2 + tableWidth) {
-      // x1-=19;
-      // x2-=14;
-    } else {
-      x1 -= 14;
-      x2 -= 14;
-    }
-  }
-  x1 *= zoom;
-  x2 *= zoom;
-  y1 *= zoom;
-  y2 *= zoom;
 
-  let r = 10 * zoom;
+export function calcPath(r, zoom = 1) {
-  const offsetX = 8 * zoom;
+  const width = tableWidth * zoom;
-  const midX = (x2 + x1 + tableWidth) / 2;
+  let x1 = r.startTable.x;
-  const endX = x2 + tableWidth < x1 ? x2 + tableWidth : x2;
+  let y1 =
+    r.startTable.y +
+    r.startFieldId * tableFieldHeight +
+    tableHeaderHeight +
+    tableFieldHeight / 2;
+  let x2 = r.endTable.x;
+  let y2 =
+    r.endTable.y +
+    r.endFieldId * tableFieldHeight +
+    tableHeaderHeight +
+    tableFieldHeight / 2;
+
+  let radius = 10 * zoom;
+  const midX = (x2 + x1 + width) / 2;
+  const endX = x2 + width < x1 ? x2 + width : x2;
 
   if (Math.abs(y1 - y2) <= 36 * zoom) {
-    r = Math.abs(y2 - y1) / 3;
+    radius = Math.abs(y2 - y1) / 3;
-    if (r <= 2) {
+    if (radius <= 2) {
-      if (x1 + tableWidth <= x2)
+      if (x1 + width <= x2) return `M ${x1 + width} ${y1} L ${x2} ${y2 + 0.1}`;
-        return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`;
+      else if (x2 + width < x1)
-      else if (x2 + tableWidth < x1)
+        return `M ${x1} ${y1} L ${x2 + width} ${y2 + 0.1}`;
-        return `M ${x1} ${y1} L ${x2 + tableWidth} ${y2 + 0.1}`;
     }
   }
 
   if (y1 <= y2) {
-    if (x1 + tableWidth <= x2) {
+    if (x1 + width <= x2) {
-      return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
+      return `M ${x1 + width} ${y1} L ${
-        midX - r
+        midX - radius
-      } ${y1} A ${r} ${r} 0 0 1 ${midX} ${y1 + r} L ${midX} ${
+      } ${y1} A ${radius} ${radius} 0 0 1 ${midX} ${y1 + radius} L ${midX} ${
-        y2 - r
+        y2 - radius
-      } A ${r} ${r} 0 0 0 ${midX + r} ${y2} L ${endX} ${y2}`;
+      } A ${radius} ${radius} 0 0 0 ${midX + radius} ${y2} L ${endX} ${y2}`;
-    } else if (x2 <= x1 + tableWidth && x1 <= x2) {
+    } else if (x2 <= x1 + width && x1 <= x2) {
-      return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
+      return `M ${x1 + width} ${y1} L ${
-        x2 + tableWidth
+        x2 + width
-      } ${y1} A ${r} ${r} 0 0 1 ${x2 + tableWidth + r} ${y1 + r} L ${
+      } ${y1} A ${radius} ${radius} 0 0 1 ${x2 + width + radius} ${
-        x2 + tableWidth + r
+        y1 + radius
-      } ${y2 - r} A ${r} ${r} 0 0 1 ${x2 + tableWidth} ${y2} L ${
+      } L ${x2 + width + radius} ${y2 - radius} A ${radius} ${radius} 0 0 1 ${
-        x2 + tableWidth - 2 * offsetX
+        x2 + width
-      } ${y2}`;
+      } ${y2} L ${x2 + width} ${y2}`;
-    } else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
+    } else if (x2 + width >= x1 && x2 + width <= x1 + width) {
-      return `M ${x1} ${y1} L ${x2 - r} ${y1} A ${r} ${r} 0 0 0 ${x2 - r - r} ${
+      return `M ${x1} ${y1} L ${
-        y1 + r
+        x2 - radius
-      } L ${x2 - r - r} ${y2 - r} A ${r} ${r} 0 0 0 ${
+      } ${y1} A ${radius} ${radius} 0 0 0 ${x2 - radius - radius} ${
-        x2 - r
+        y1 + radius
+      } L ${x2 - radius - radius} ${y2 - radius} A ${radius} ${radius} 0 0 0 ${
+        x2 - radius
       } ${y2} L ${x2} ${y2}`;
     } else {
-      return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 0 ${midX} ${
+      return `M ${x1} ${y1} L ${
-        y1 + r
+        midX + radius
-      } L ${midX} ${y2 - r} A ${r} ${r} 0 0 1 ${
+      } ${y1} A ${radius} ${radius} 0 0 0 ${midX} ${y1 + radius} L ${midX} ${
-        midX - r
+        y2 - radius
-      } ${y2} L ${endX} ${y2}`;
+      } A ${radius} ${radius} 0 0 1 ${midX - radius} ${y2} L ${endX} ${y2}`;
     }
   } else {
-    if (x1 + tableWidth <= x2) {
+    if (x1 + width <= x2) {
-      return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
+      return `M ${x1 + width} ${y1} L ${
-        midX - r
+        midX - radius
-      } ${y1} A ${r} ${r} 0 0 0 ${midX} ${y1 - r} L ${midX} ${
+      } ${y1} A ${radius} ${radius} 0 0 0 ${midX} ${y1 - radius} L ${midX} ${
-        y2 + r
+        y2 + radius
-      } A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
+      } A ${radius} ${radius} 0 0 1 ${midX + radius} ${y2} L ${endX} ${y2}`;
-    } else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
+    } else if (x1 + width >= x2 && x1 + width <= x2 + width) {
-      return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${
+      return `M ${x1} ${y1} L ${
-        x1 - r - r - r
+        x1 - radius - radius
-      } ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
+      } ${y1} A ${radius} ${radius} 0 0 1 ${x1 - radius - radius - radius} ${
-        x1 - r - r
+        y1 - radius
+      } L ${x1 - radius - radius - radius} ${
+        y2 + radius
+      } A ${radius} ${radius} 0 0 1 ${
+        x1 - radius - radius
       } ${y2} L ${endX} ${y2}`;
-    } else if (x1 >= x2 && x1 <= x2 + tableWidth) {
+    } else if (x1 >= x2 && x1 <= x2 + width) {
-      return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
+      return `M ${x1 + width} ${y1} L ${
-        x1 + tableWidth - 2 * offsetX + r
+        x1 + width + radius
-      } ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${
+      } ${y1} A ${radius} ${radius} 0 0 0 ${x1 + width + radius + radius} ${
-        y1 - r
+        y1 - radius
-      } L ${x1 + tableWidth - 2 * offsetX + r + r} ${
+      } L ${x1 + width + radius + radius} ${
-        y2 + r
+        y2 + radius
-      } A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r} ${y2} L ${
+      } A ${radius} ${radius} 0 0 0 ${x1 + width + radius} ${y2} L ${
-        x2 + tableWidth - 2 * offsetX
+        x2 + width
       } ${y2}`;
     } else {
-      return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 1 ${midX} ${
+      return `M ${x1} ${y1} L ${
-        y1 - r
+        midX + radius
-      } L ${midX} ${y2 + r} A ${r} ${r} 0 0 0 ${
+      } ${y1} A ${radius} ${radius} 0 0 1 ${midX} ${y1 - radius} L ${midX} ${
-        midX - r
+        y2 + radius
-      } ${y2} L ${endX} ${y2}`;
+      } A ${radius} ${radius} 0 0 0 ${midX - radius} ${y2} L ${endX} ${y2}`;
     }
   }
 }