mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-05-24 10:29:11 +00:00
crowfoot
This commit is contained in:
Patricio2002
parent
20a2553b3d
commit
226b1b3150
@ -5,6 +5,8 @@ import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { SideSheet } from "@douyinfe/semi-ui";
|
import { SideSheet } from "@douyinfe/semi-ui";
|
||||||
import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
|
import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
|
||||||
|
import { CrowOM, CrowOO, CrowZM } from "./RelationshipFormat";
|
||||||
|
|
||||||
|
|
||||||
export default function Relationship({ data }) {
|
export default function Relationship({ data }) {
|
||||||
const { settings } = useSettings();
|
const { settings } = useSettings();
|
||||||
@ -13,26 +15,32 @@ export default function Relationship({ data }) {
|
|||||||
const { selectedElement, setSelectedElement } = useSelect();
|
const { selectedElement, setSelectedElement } = useSelect();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const pathRef = useRef();
|
const pathRef = useRef();
|
||||||
|
let direction = 1;
|
||||||
let cardinalityStart = "1";
|
let cardinalityStart = "1";
|
||||||
let cardinalityEnd = "1";
|
let cardinalityEnd = "1";
|
||||||
|
let cardinalityvar;
|
||||||
|
let type = 10;
|
||||||
|
let relationshipType=(5,type);
|
||||||
|
|
||||||
switch (data.cardinality) {
|
switch (data.cardinality) {
|
||||||
// the translated values are to ensure backwards compatibility
|
// the translated values are to ensure backwards compatibility
|
||||||
case t(Cardinality.MANY_TO_ONE):
|
case t(Cardinality.MANY_TO_ONE):
|
||||||
case Cardinality.MANY_TO_ONE:
|
case Cardinality.MANY_TO_ONE:
|
||||||
cardinalityStart = "n";
|
cardinalityStart = "n";
|
||||||
cardinalityEnd = "1";
|
cardinalityEnd = "(1,*)";
|
||||||
|
cardinalityvar="1";
|
||||||
break;
|
break;
|
||||||
case t(Cardinality.ONE_TO_MANY):
|
case t(Cardinality.ONE_TO_MANY):
|
||||||
case Cardinality.ONE_TO_MANY:
|
case Cardinality.ONE_TO_MANY:
|
||||||
cardinalityStart = "1";
|
cardinalityStart = "1";
|
||||||
cardinalityEnd = "n";
|
cardinalityEnd = "n";
|
||||||
|
cardinalityvar="2";
|
||||||
break;
|
break;
|
||||||
case t(Cardinality.ONE_TO_ONE):
|
case t(Cardinality.ONE_TO_ONE):
|
||||||
case Cardinality.ONE_TO_ONE:
|
case Cardinality.ONE_TO_ONE:
|
||||||
cardinalityStart = "1";
|
cardinalityStart = "1";
|
||||||
cardinalityEnd = "1";
|
cardinalityEnd = "1";
|
||||||
|
cardinalityvar="3";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
@ -45,13 +53,14 @@ export default function Relationship({ data }) {
|
|||||||
|
|
||||||
const cardinalityOffset = 28;
|
const cardinalityOffset = 28;
|
||||||
|
|
||||||
|
|
||||||
if (pathRef.current) {
|
if (pathRef.current) {
|
||||||
const pathLength = pathRef.current.getTotalLength();
|
const pathLength = pathRef.current.getTotalLength();
|
||||||
const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
|
const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
|
||||||
cardinalityStartX = point1.x;
|
cardinalityStartX = point1.x;
|
||||||
cardinalityStartY = point1.y;
|
cardinalityStartY = point1.y;
|
||||||
const point2 = pathRef.current.getPointAtLength(
|
const point2 = pathRef.current.getPointAtLength(
|
||||||
pathLength - cardinalityOffset,
|
pathLength,
|
||||||
);
|
);
|
||||||
cardinalityEndX = point2.x;
|
cardinalityEndX = point2.x;
|
||||||
cardinalityEndY = point2.y;
|
cardinalityEndY = point2.y;
|
||||||
@ -79,7 +88,9 @@ export default function Relationship({ data }) {
|
|||||||
.scrollIntoView({ behavior: "smooth" });
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
if (cardinalityEndX < cardinalityStartX){
|
||||||
|
direction=-1
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<g className="select-none group" onDoubleClick={edit}>
|
<g className="select-none group" onDoubleClick={edit}>
|
||||||
@ -102,48 +113,16 @@ export default function Relationship({ data }) {
|
|||||||
stroke="gray"
|
stroke="gray"
|
||||||
className="group-hover:stroke-sky-700"
|
className="group-hover:stroke-sky-700"
|
||||||
fill="none"
|
fill="none"
|
||||||
|
stroke-dasharray={relationshipType}
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
/>
|
/>
|
||||||
{pathRef.current && settings.showCardinality && (
|
|
||||||
<>
|
{CrowOM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd)}
|
||||||
<circle
|
{CrowOO(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd)}
|
||||||
cx={cardinalityStartX}
|
{CrowZM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd)}
|
||||||
cy={cardinalityStartY}
|
|
||||||
r="12"
|
|
||||||
fill="grey"
|
|
||||||
className="group-hover:fill-sky-700"
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
x={cardinalityStartX}
|
|
||||||
y={cardinalityStartY}
|
|
||||||
fill="white"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
textAnchor="middle"
|
|
||||||
alignmentBaseline="middle"
|
|
||||||
>
|
|
||||||
{cardinalityStart}
|
|
||||||
</text>
|
|
||||||
<circle
|
|
||||||
cx={cardinalityEndX}
|
|
||||||
cy={cardinalityEndY}
|
|
||||||
r="12"
|
|
||||||
fill="grey"
|
|
||||||
className="group-hover:fill-sky-700"
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
x={cardinalityEndX}
|
|
||||||
y={cardinalityEndY}
|
|
||||||
fill="white"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
textAnchor="middle"
|
|
||||||
alignmentBaseline="middle"
|
|
||||||
>
|
|
||||||
{cardinalityEnd}
|
|
||||||
</text>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<SideSheet
|
<SideSheet
|
||||||
title={t("edit")}
|
title={t("edit")}
|
||||||
size="small"
|
size="small"
|
||||||
|
|||||||
186
src/components/EditorCanvas/RelationshipFormat.jsx
Normal file
186
src/components/EditorCanvas/RelationshipFormat.jsx
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
export function CrowOM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd){
|
||||||
|
return(
|
||||||
|
pathRef && settings && (cardinalityvar==2) &&(
|
||||||
|
<>
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-(20*direction)}
|
||||||
|
y1={cardinalityEndY+15}
|
||||||
|
x2={cardinalityEndX-(20*direction)}
|
||||||
|
y2={cardinalityEndY-15}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-(20*direction)}
|
||||||
|
y1={cardinalityEndY}
|
||||||
|
x2={cardinalityEndX+1}
|
||||||
|
y2={cardinalityEndY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-20*direction}
|
||||||
|
y1={cardinalityEndY}
|
||||||
|
x2={cardinalityEndX+1}
|
||||||
|
y2={cardinalityEndY+10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={cardinalityStartX}
|
||||||
|
y={cardinalityStartY-10}
|
||||||
|
fill="black"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
textAnchor="middle"
|
||||||
|
alignmentBaseline="middle"
|
||||||
|
>
|
||||||
|
{cardinalityEnd}
|
||||||
|
</text>
|
||||||
|
<line
|
||||||
|
x1={cardinalityStartX-(15*direction)}
|
||||||
|
y1={cardinalityStartY+10}
|
||||||
|
x2={cardinalityStartX-(15*direction)}
|
||||||
|
y2={cardinalityStartY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityStartX-(10*direction)}
|
||||||
|
y1={cardinalityStartY+10}
|
||||||
|
x2={cardinalityStartX-(10*direction)}
|
||||||
|
y2={cardinalityStartY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd){
|
||||||
|
return(
|
||||||
|
pathRef && settings && cardinalityvar==3 &&(
|
||||||
|
<>
|
||||||
|
{console.log(settings) }
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-(15*direction)}
|
||||||
|
y1={cardinalityEndY+10}
|
||||||
|
x2={cardinalityEndX-(15*direction)}
|
||||||
|
y2={cardinalityEndY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-(10*direction)}
|
||||||
|
y1={cardinalityEndY+10}
|
||||||
|
x2={cardinalityEndX-(10*direction)}
|
||||||
|
y2={cardinalityEndY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityStartX-(15*direction)}
|
||||||
|
y1={cardinalityStartY+10}
|
||||||
|
x2={cardinalityStartX-(15*direction)}
|
||||||
|
y2={cardinalityStartY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityStartX-(10*direction)}
|
||||||
|
y1={cardinalityStartY+10}
|
||||||
|
x2={cardinalityStartX-(10*direction)}
|
||||||
|
y2={cardinalityStartY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<text
|
||||||
|
x={cardinalityStartX}
|
||||||
|
y={cardinalityStartY-15}
|
||||||
|
fill="black"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
textAnchor="middle"
|
||||||
|
alignmentBaseline="middle"
|
||||||
|
>
|
||||||
|
{cardinalityEnd}
|
||||||
|
</text>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function CrowZM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd){
|
||||||
|
return(
|
||||||
|
pathRef && settings && (cardinalityvar==1) &&(
|
||||||
|
<>
|
||||||
|
<circle
|
||||||
|
cx={cardinalityEndX-24}
|
||||||
|
cy={cardinalityEndY}
|
||||||
|
r="4"
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
fill="none"
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-(20*direction)}
|
||||||
|
y1={cardinalityEndY}
|
||||||
|
x2={cardinalityEndX+1}
|
||||||
|
y2={cardinalityEndY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityEndX-20*direction}
|
||||||
|
y1={cardinalityEndY}
|
||||||
|
x2={cardinalityEndX+1}
|
||||||
|
y2={cardinalityEndY+10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={cardinalityStartX}
|
||||||
|
y={cardinalityStartY-10}
|
||||||
|
fill="black"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
textAnchor="middle"
|
||||||
|
alignmentBaseline="middle"
|
||||||
|
>
|
||||||
|
{cardinalityEnd}
|
||||||
|
</text>
|
||||||
|
<line
|
||||||
|
x1={cardinalityStartX-(15*direction)}
|
||||||
|
y1={cardinalityStartY+10}
|
||||||
|
x2={cardinalityStartX-(15*direction)}
|
||||||
|
y2={cardinalityStartY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={cardinalityStartX-(10*direction)}
|
||||||
|
y1={cardinalityStartY+10}
|
||||||
|
x2={cardinalityStartX-(10*direction)}
|
||||||
|
y2={cardinalityStartY-10}
|
||||||
|
stroke="gray"
|
||||||
|
strokeWidth='2'
|
||||||
|
className="group-hover:fill-sky-700"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user