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 { SideSheet } from "@douyinfe/semi-ui";
|
||||
import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
|
||||
import { CrowOM, CrowOO, CrowZM } from "./RelationshipFormat";
|
||||
|
||||
|
||||
export default function Relationship({ data }) {
|
||||
const { settings } = useSettings();
|
||||
@ -13,26 +15,32 @@ export default function Relationship({ data }) {
|
||||
const { selectedElement, setSelectedElement } = useSelect();
|
||||
const { t } = useTranslation();
|
||||
const pathRef = useRef();
|
||||
|
||||
let direction = 1;
|
||||
let cardinalityStart = "1";
|
||||
let cardinalityEnd = "1";
|
||||
let cardinalityvar;
|
||||
let type = 10;
|
||||
let relationshipType=(5,type);
|
||||
|
||||
switch (data.cardinality) {
|
||||
// the translated values are to ensure backwards compatibility
|
||||
case t(Cardinality.MANY_TO_ONE):
|
||||
case Cardinality.MANY_TO_ONE:
|
||||
cardinalityStart = "n";
|
||||
cardinalityEnd = "1";
|
||||
cardinalityEnd = "(1,*)";
|
||||
cardinalityvar="1";
|
||||
break;
|
||||
case t(Cardinality.ONE_TO_MANY):
|
||||
case Cardinality.ONE_TO_MANY:
|
||||
cardinalityStart = "1";
|
||||
cardinalityEnd = "n";
|
||||
cardinalityvar="2";
|
||||
break;
|
||||
case t(Cardinality.ONE_TO_ONE):
|
||||
case Cardinality.ONE_TO_ONE:
|
||||
cardinalityStart = "1";
|
||||
cardinalityEnd = "1";
|
||||
cardinalityvar="3";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -45,13 +53,14 @@ export default function Relationship({ data }) {
|
||||
|
||||
const cardinalityOffset = 28;
|
||||
|
||||
|
||||
if (pathRef.current) {
|
||||
const pathLength = pathRef.current.getTotalLength();
|
||||
const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
|
||||
cardinalityStartX = point1.x;
|
||||
cardinalityStartY = point1.y;
|
||||
const point2 = pathRef.current.getPointAtLength(
|
||||
pathLength - cardinalityOffset,
|
||||
pathLength,
|
||||
);
|
||||
cardinalityEndX = point2.x;
|
||||
cardinalityEndY = point2.y;
|
||||
@ -79,7 +88,9 @@ export default function Relationship({ data }) {
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
if (cardinalityEndX < cardinalityStartX){
|
||||
direction=-1
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<g className="select-none group" onDoubleClick={edit}>
|
||||
@ -102,48 +113,16 @@ export default function Relationship({ data }) {
|
||||
stroke="gray"
|
||||
className="group-hover:stroke-sky-700"
|
||||
fill="none"
|
||||
stroke-dasharray={relationshipType}
|
||||
strokeWidth={2}
|
||||
cursor="pointer"
|
||||
/>
|
||||
{pathRef.current && settings.showCardinality && (
|
||||
<>
|
||||
<circle
|
||||
cx={cardinalityStartX}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
|
||||
{CrowOM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd)}
|
||||
{CrowOO(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd)}
|
||||
{CrowZM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd)}
|
||||
</g>
|
||||
|
||||
<SideSheet
|
||||
title={t("edit")}
|
||||
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