Remove coords from relationship objects

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/EditorHeader/Thumbnail.jsx

@@ -1,174 +0,0 @@
-import { calcPath } from "../../utils/calcPath";
-
-export function Thumbnail({ diagram, i, zoom }) {
-  const translateX = 32 * zoom;
-  const translateY = 32 * zoom;
-  const theme = localStorage.getItem("theme");
-  return (
-    <svg
-      className={`${
-        theme === "dark" ? "bg-[#222229]" : "bg-white"
-      } w-full h-full rounded-md text-color`}
-    >
-      <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
-        style={{
-          transform: `translate(${translateX}px, ${translateY}px) scale(${zoom})`,
-        }}
-      >
-        {diagram.subjectAreas?.map((a) => (
-          <foreignObject
-            key={a.id}
-            x={a.x}
-            y={a.y}
-            width={a.width > 0 ? a.width : 0}
-            height={a.height > 0 ? a.height : 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-1 left-2 select-none">
-              {a.name}
-            </div>
-          </foreignObject>
-        ))}
-        {diagram.tables?.map((table, i) => {
-          const height = table.fields.length * 36 + 50 + 7;
-          return (
-            <foreignObject
-              x={table.x}
-              y={table.y}
-              width={200}
-              height={height}
-              key={i}
-            >
-              <div
-                className={`border rounded-md ${
-                  theme === "dark"
-                    ? "bg-zinc-800"
-                    : "border-zinc-300 bg-zinc-100"
-                }`}
-              >
-                <div
-                  className="h-2 w-full rounded-t-sm"
-                  style={{ backgroundColor: table.color }}
-                />
-                <div className="rounded-b-[3px]">
-                  <div
-                    className={`font-bold py-1 px-2 border-b ${
-                      theme === "dark" ? "bg-zinc-900" : "bg-zinc-200"
-                    } border-gray-300`}
-                  >
-                    {table.name}
-                  </div>
-                  {table.fields.map((f, j) => (
-                    <div
-                      className={`flex justify-between items-center py-1 px-2 ${
-                        j < table.fields.length - 1 ? "border-b" : ""
-                      }`}
-                      key={j}
-                    >
-                      <div className="flex items-center justify-start">
-                        <div
-                          className={`w-[6px] h-[6px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
-                        ></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 - 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;
-          const w = 180;
-          const r = 3;
-          const fold = 24;
-          const h = n.height;
-          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-4 py-2">
-                  <label htmlFor={`note_${n.id}`} className="ms-4">
-                    {n.title}
-                  </label>
-                  <div className="mt-[2px]">{n.content}</div>
-                </div>
-              </foreignObject>
-            </g>
-          );
-        })}
-      </g>
-    </svg>
-  );
-}