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 Table from "./table";
|
||||||
import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
|
import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
|
||||||
import Area from "./area";
|
import Area from "./area";
|
||||||
|
import Relationship from "./relationship";
|
||||||
|
|
||||||
export default function Canvas(props) {
|
export default function Canvas(props) {
|
||||||
const ObjectType = {
|
const ObjectType = {
|
||||||
@ -303,111 +304,7 @@ export default function Canvas(props) {
|
|||||||
strokeDasharray="8,8"
|
strokeDasharray="8,8"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{props.relationships.map((e, i) => {
|
{props.relationships.map((e, i) => <Relationship data={e}/>)}
|
||||||
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={() => {}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</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