drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-10-15 23:20:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle thumbnails for templates

Browse Source
This commit is contained in:
1ilit
2023-12-11 23:11:30 +02:00
parent c3f2809313
commit 705251a275
4 changed files with 238 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/relationship.jsx
View File

@@ -1,88 +1,8 @@
import { React, useState } from "react";
import { calcPath } from "../utils";
export default function Relationship(props) {
const [hovered, setHovered] = useState(false);
const calcPath = (x1, x2, y1, y2) => {
let r = 16;
const offsetX = 8;
const tableWidth = 200;
const midX = (x2 + x1 + tableWidth) / 2;
const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2;
if (Math.abs(y1 - y2) <= 36) {
r = Math.abs(y2 - y1) / 3;
if (r <= 2) {
if (x1 + tableWidth <= x2)
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2 + 0.1} ${
y2 + 0.1
}`;
else if (x2 + tableWidth < x1)
return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1 + 0.1} ${
y1 + 0.1
}`;
}
}
if (y1 <= y2) {
if (x1 + tableWidth <= x2) {
return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
midX - r
} ${y1} A ${r} ${r} 0 0 1 ${midX} ${y1 + r} L ${midX} ${
y2 - r
} A ${r} ${r} 0 0 0 ${midX + r} ${y2} L ${endX} ${y2}`;
} else if (x2 <= x1 + tableWidth && x1 <= x2) {
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
x2 + tableWidth
} ${y1} A ${r} ${r} 0 0 1 ${x2 + tableWidth + r} ${y1 + r} L ${
x2 + tableWidth + r
} ${y2 - r} A ${r} ${r} 0 0 1 ${x2 + tableWidth} ${y2} L ${
x2 + tableWidth - 2 * offsetX
} ${y2}`;
} else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
return `M ${x1} ${y1} L ${x2 - r} ${y1} A ${r} ${r} 0 0 ${0} ${
x2 - r - r
} ${y1 + r} L ${x2 - r - r} ${y2 - r} A ${r} ${r} 0 0 0 ${
x2 - r
} ${y2} L ${x2} ${y2}`;
} else {
return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 0 ${midX} ${
y1 + r
} L ${midX} ${y2 - r} A ${r} ${r} 0 0 1 ${
midX - r
} ${y2} L ${endX} ${y2}`;
}
} else {
if (x1 + tableWidth <= x2) {
return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
midX - r
} ${y1} A ${r} ${r} 0 0 0 ${midX} ${y1 - r} L ${midX} ${
y2 + r
} A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
} else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
return `M ${x1} ${y1} L ${x1 - r} ${y1} A ${r} ${r} 0 0 1 ${
x1 - r - r
} ${y1 - r} L ${x1 - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
x1 - r
} ${y2} L ${endX} ${y2}`;
} else if (x1 >= x2 && x1 <= x2 + tableWidth) {
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 ${
x2 + tableWidth - 2 * offsetX
} ${y2}`;
} else {
return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 1 ${midX} ${
y1 - r
} L ${midX} ${y2 + r} A ${r} ${r} 0 0 0 ${
midX - r
} ${y2} L ${endX} ${y2}`;
}
}
};
return (
<g>