Remove coords from relationship objects

This commit is contained in:
1ilit
2024-04-05 03:02:29 +03:00
parent fa8fdae863
commit 10e0e279cc
19 changed files with 206 additions and 604 deletions

View File

@@ -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>

View File

@@ -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>
);
}