mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-10-19 09:16:09 +00:00
Remove coords from relationship objects
This commit is contained in:
@@ -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>
|
||||
|
@@ -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>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user