titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix relationship overlap

Browse Source
This commit is contained in:
1ilit 2024-02-20 03:02:17 +02:00
parent d792791394
commit c9a8d76e8e
2 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Canvas.jsx
View File

@ -440,6 +440,9 @@ export default function Canvas() {
zoom={settings.zoom} zoom={settings.zoom}
></Area> ></Area>
))} ))}
{relationships.map((e, i) => (
<Relationship key={i} data={e} />
))}
{tables.map((table) => ( {tables.map((table) => (
<Table <Table
key={table.id} key={table.id}
@ -467,9 +470,6 @@ export default function Canvas() {
strokeDasharray="8,8" strokeDasharray="8,8"
/> />
)} )}
{relationships.map((e, i) => (
<Relationship key={i} data={e} />
))}
{notes.map((n) => ( {notes.map((n) => (
<Note <Note
key={n.id} key={n.id}

57
src/utils/index.js
View File

@ -883,16 +883,45 @@ function validateDiagram(diagram) {
} }
const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => { const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
const tableWidth = 200 * zoom;
if (y1 <= y2) {
if (x1 + tableWidth <= x2) {
x2 -= 14;
} 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; x1 *= zoom;
x2 *= zoom; x2 *= zoom;
y1 *= zoom; y1 *= zoom;
y2 *= zoom; y2 *= zoom;
const tableWidth = 200 * zoom;
let r = 10 * zoom; let r = 10 * zoom;
const offsetX = 8 * zoom; const offsetX = 8 * zoom;
const midX = (x2 + x1 + tableWidth) / 2; const midX = (x2 + x1 + tableWidth) / 2;
const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2; const endX = x2 + tableWidth < x1 ? x2 + tableWidth : x2;
const startTableY = y1 - startFieldId * 36 - 50 - 18; // const startTableY = y1 - startFieldId * 36 - 50 - 18;
// const endTableY = y2 - endFieldId * 36 - 50; // const endTableY = y2 - endFieldId * 36 - 50;
if (Math.abs(y1 - y2) <= 36 * zoom) { if (Math.abs(y1 - y2) <= 36 * zoom) {
@ -901,7 +930,7 @@ const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
if (x1 + tableWidth <= x2) if (x1 + tableWidth <= x2)
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`; return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`;
else if (x2 + tableWidth < x1) else if (x2 + tableWidth < x1)
return `M ${x1} ${y1} L ${x2 + tableWidth - 2 * offsetX} ${y2 + 0.1}`; return `M ${x1} ${y1} L ${x2 + tableWidth} ${y2 + 0.1}`;
} }
} }
@ -941,32 +970,12 @@ const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
y2 + r y2 + r
} A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`; } A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
} else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) { } else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
// this for the overlap remember
if (startTableY < y2) {
return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${
x1 - r - r - r
} ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
x1 - r - r
} ${y2} L ${x1 - r - 4} ${y2}`;
}
return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${ return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${
x1 - r - r - r x1 - r - r - r
} ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${ } ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
x1 - r - r x1 - r - r
} ${y2} L ${endX} ${y2}`; } ${y2} L ${endX} ${y2}`;
} else if (x1 >= x2 && x1 <= x2 + tableWidth) { } else if (x1 >= x2 && x1 <= x2 + tableWidth) {
// this for the overlap remember
if (startTableY < y2) {
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
x1 + tableWidth - 2 * offsetX + r
} ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${
y1 - r
} L ${x1 + tableWidth - 2 * offsetX + r + r} ${
y2 + r
} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r} ${y2} L ${
x1 + tableWidth - 16
} ${y2}`;
}
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${ return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
x1 + tableWidth - 2 * offsetX + r x1 + tableWidth - 2 * offsetX + r
} ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${ } ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${