brr
This commit is contained in:
1ilit
parent
5678fa0fa9
commit
876df7f6b1
@ -3,6 +3,7 @@ import { useDrop } from "react-dnd";
|
||||
import Table from "./table";
|
||||
import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
|
||||
import Area from "./area";
|
||||
import Relationship from "./relationship";
|
||||
|
||||
export default function Canvas(props) {
|
||||
const ObjectType = {
|
||||
@ -303,111 +304,7 @@ export default function Canvas(props) {
|
||||
strokeDasharray="8,8"
|
||||
/>
|
||||
)}
|
||||
{props.relationships.map((e, i) => {
|
||||
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={path}
|
||||
stroke="gray"
|
||||
fill="none"
|
||||
strokeWidth={2.5}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{props.relationships.map((e, i) => <Relationship data={e}/>)}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
113
src/components/relationship.jsx
Normal file
113
src/components/relationship.jsx
Normal file
@ -0,0 +1,113 @@
|
||||
import { React, useState } from "react";
|
||||
|
||||
export default function Relationship(props) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const calcPath = (x1, x2, y1, y2) => {
|
||||
let r = 16;
|
||||
const offsetX = 8;
|
||||
const tableWidth = 240;
|
||||
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} ${y2}`;
|
||||
else if (x2 + tableWidth < x1)
|
||||
return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1} ${y1}`;
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<defs>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow
|
||||
dx="2"
|
||||
dy="2"
|
||||
stdDeviation="6"
|
||||
floodColor="gray"
|
||||
floodOpacity="0.8"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
d={calcPath(
|
||||
props.data.startX,
|
||||
props.data.endX,
|
||||
props.data.startY,
|
||||
props.data.endY
|
||||
)}
|
||||
stroke={hovered ? "blue" : "gray"}
|
||||
fill="none"
|
||||
strokeWidth={2.0}
|
||||
filter="url(#shadow)"
|
||||
cursor="pointer"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user