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

pafs

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:16 +03:00
parent 868a992a7a
commit 5678fa0fa9
1 changed files with 93 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/canvas.jsx
View File

@ -304,24 +304,103 @@ export default function Canvas(props) {
/>
)}
{props.relationships.map((e, i) => {
const r = 20;
const invert1 = e.startY < e.endY ? 1 : 0;
const invert2 = e.startY < e.endY ? 0 : 1;
const r = 16;
const offsetX = 8;
const tableWidth = 240;
const midX = (e.endX + e.startX + tableWidth) / 2;
const endX =
e.endX + tableWidth < e.startX
? e.endX + tableWidth - offsetX * 2
: e.endX;
let path = "";
if (e.startY <= e.endY) {
if (e.startX + tableWidth < e.endX) {
path = `M ${e.startX + tableWidth - offsetX * 2} ${
e.startY
} L ${midX - r} ${e.startY} A ${r} ${r} 0 0 ${1} ${midX} ${
e.startY + r
} L ${midX} ${e.endY - r} A ${r} ${r} 0 0 ${0} ${midX + r} ${
e.endY
} L ${endX} ${e.endY}`;
} else if (e.endX < e.startX + tableWidth && e.startX < e.endX) {
path = `M ${e.startX + tableWidth - 2 * offsetX} ${
e.startY
} L ${e.endX + tableWidth} ${e.startY} A ${r} ${r} 0 0 ${1} ${
e.endX + tableWidth + r
} ${e.startY + r} L ${e.endX + tableWidth + r} ${
e.endY - r
} A ${r} ${r} 0 0 1 ${e.endX + tableWidth} ${e.endY} L ${
e.endX + tableWidth - 2 * offsetX
} ${e.endY}`;
} else if (
e.endX + tableWidth > e.startX &&
e.endX + tableWidth < e.startX + tableWidth
) {
path = `M ${e.startX} ${e.startY} L ${e.endX - r} ${
e.startY
} A ${r} ${r} 0 0 ${0} ${e.endX - r - r} ${e.startY + r} L ${
e.endX - r - r
} ${e.endY - r} A ${r} ${r} 0 0 0 ${e.endX - r} ${e.endY} L ${
e.endX
} ${e.endY}`;
} else {
path = `M ${e.startX} ${e.startY} L ${midX + r} ${
e.startY
} A ${r} ${r} 0 0 ${0} ${midX} ${e.startY + r} L ${midX} ${
e.endY - r
} A ${r} ${r} 0 0 ${1} ${midX - r} ${e.endY} L ${endX} ${
e.endY
}`;
}
} else {
if (e.startX + tableWidth < e.endX) {
path = `M ${e.startX + tableWidth - offsetX * 2} ${
e.startY
} L ${midX - r} ${e.startY} A ${r} ${r} 0 0 ${0} ${midX} ${
e.startY - r
} L ${midX} ${e.endY + r} A ${r} ${r} 0 0 ${1} ${midX + r} ${
e.endY
} L ${endX} ${e.endY}`;
} else if (
e.startX + tableWidth > e.endX &&
e.startX + tableWidth < e.endX + tableWidth
) {
path = `M ${e.startX} ${e.startY} L ${e.startX - r} ${
e.startY
} A ${r} ${r} 0 0 ${1} ${e.startX - r - r} ${e.startY - r} L ${
e.startX - r - r
} ${e.endY + r} A ${r} ${r} 0 0 ${1} ${e.startX - r} ${
e.endY
} L ${endX} ${e.endY}`;
} else if (e.startX > e.endX && e.startX < e.endX + tableWidth) {
path = `M ${e.startX + tableWidth - 2 * offsetX} ${
e.startY
} L ${e.startX + tableWidth - 2 * offsetX + r} ${
e.startY
} A ${r} ${r} 0 0 0 ${
e.startX + tableWidth - 2 * offsetX + r + r
} ${e.startY - r} L ${
e.startX + tableWidth - 2 * offsetX + r + r
} ${e.endY + r} A ${r} ${r} 0 0 0 ${
e.startX + tableWidth - 2 * offsetX + r
} ${e.endY} L ${e.endX + tableWidth - 2 * offsetX} ${e.endY}`;
} else {
path = `M ${e.startX} ${e.startY} L ${midX + r} ${
e.startY
} A ${r} ${r} 0 0 ${1} ${midX} ${e.startY - r} L ${midX} ${
e.endY + r
} A ${r} ${r} 0 0 ${0} ${midX - r} ${e.endY} L ${endX} ${
e.endY
}`;
}
}
return (
<path
key={i}
d={`M ${e.startX} ${e.startY} L ${e.startX + 224} ${
e.startY
} L ${e.startX + 254} ${e.startY} A ${r} ${r} 0 0 ${invert1} ${
e.startX + 254 + 20
} ${invert1 === 1 ? e.startY + r : e.startY - r} L ${
e.startX + 254 + 20
} ${
invert2 === 1 ? e.endY + r : e.endY - r
} A ${r} ${r} 0 0 ${invert2} ${e.startX + 254 + 40} ${
e.endY
} L ${e.endX} ${e.endY}`}
d={path}
stroke="gray"
fill="none"
strokeWidth={2.5}