mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-05-24 18:39:12 +00:00
Agregar botón para cambiar de notación
This commit is contained in:
Francisco-Galindo
parent
0f47cbb8b5
commit
72e5d7699e
@ -5,7 +5,7 @@ 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";
|
||||
import { CrowOM, CrowOO, CrowZM, DefaultNotation } from "./RelationshipFormat";
|
||||
|
||||
|
||||
export default function Relationship({ data }) {
|
||||
@ -15,32 +15,48 @@ export default function Relationship({ data }) {
|
||||
const { selectedElement, setSelectedElement } = useSelect();
|
||||
const { t } = useTranslation();
|
||||
const pathRef = useRef();
|
||||
const type = settings.notation === 'default' ? 0 : 10;
|
||||
const relationshipType=(5,type);
|
||||
|
||||
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,*)";
|
||||
cardinalityvar="1";
|
||||
if (settings.notation === 'default') {
|
||||
cardinalityStart = "n";
|
||||
cardinalityEnd = "1";
|
||||
} else {
|
||||
cardinalityStart = "(1,*)";
|
||||
cardinalityEnd = "(1,1)";
|
||||
cardinalityvar="1";
|
||||
}
|
||||
break;
|
||||
case t(Cardinality.ONE_TO_MANY):
|
||||
case Cardinality.ONE_TO_MANY:
|
||||
cardinalityStart = "1";
|
||||
cardinalityEnd = "n";
|
||||
cardinalityvar="2";
|
||||
if (settings.notation === 'default') {
|
||||
cardinalityStart = "1";
|
||||
cardinalityEnd = "n";
|
||||
} else {
|
||||
cardinalityStart = "(1,1)";
|
||||
cardinalityEnd = "(1,*)";
|
||||
cardinalityvar="2";
|
||||
}
|
||||
break;
|
||||
case t(Cardinality.ONE_TO_ONE):
|
||||
case Cardinality.ONE_TO_ONE:
|
||||
cardinalityStart = "1";
|
||||
cardinalityEnd = "1";
|
||||
cardinalityvar="3";
|
||||
if (settings.notation === 'default') {
|
||||
cardinalityStart = "1";
|
||||
cardinalityEnd = "1";
|
||||
} else {
|
||||
cardinalityStart = "(1,1)";
|
||||
cardinalityEnd = "(1,1)";
|
||||
cardinalityvar="3";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -55,10 +71,14 @@ export default function Relationship({ data }) {
|
||||
|
||||
|
||||
if (pathRef.current) {
|
||||
const pathLength = pathRef.current.getTotalLength();
|
||||
const pathLength = settings.notation === 'default' ?
|
||||
pathRef.current.getTotalLength() - cardinalityOffset:
|
||||
pathRef.current.getTotalLength();
|
||||
|
||||
const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
|
||||
cardinalityStartX = point1.x;
|
||||
cardinalityStartY = point1.y;
|
||||
|
||||
const point2 = pathRef.current.getPointAtLength(
|
||||
pathLength,
|
||||
);
|
||||
@ -88,9 +108,11 @@ export default function Relationship({ data }) {
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
if (cardinalityEndX < cardinalityStartX){
|
||||
direction=-1
|
||||
|
||||
if (settings.notation === 'crows_foot' && cardinalityEndX < cardinalityStartX){
|
||||
direction = -1;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<g className="select-none group" onDoubleClick={edit}>
|
||||
@ -113,16 +135,17 @@ export default function Relationship({ data }) {
|
||||
stroke="gray"
|
||||
className="group-hover:stroke-sky-700"
|
||||
fill="none"
|
||||
stroke-dasharray={relationshipType}
|
||||
strokeDasharray={relationshipType}
|
||||
strokeWidth={2}
|
||||
cursor="pointer"
|
||||
/>
|
||||
|
||||
{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)}
|
||||
{CrowOM(pathRef.current,settings.notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd)}
|
||||
{CrowOO(pathRef.current,settings.notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd)}
|
||||
{CrowZM(pathRef.current,settings.notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd)}
|
||||
{DefaultNotation(pathRef.current,settings.notation, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, cardinalityStart, cardinalityEnd)}
|
||||
</g>
|
||||
|
||||
|
||||
<SideSheet
|
||||
title={t("edit")}
|
||||
size="small"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export function CrowOM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd){
|
||||
return(
|
||||
pathRef && settings && (cardinalityvar==2) &&(
|
||||
export function CrowOM(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
|
||||
return(
|
||||
pathRef && notation === 'crows_foot' && (cardinalityvar==2) &&(
|
||||
<>
|
||||
<line
|
||||
x1={cardinalityEndX-(20*direction)}
|
||||
@ -36,6 +36,16 @@ export function CrowOM(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
strokeWidth="0.5"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
>
|
||||
{cardinalityStart}
|
||||
</text>
|
||||
<text
|
||||
x={cardinalityEndX-15}
|
||||
y={cardinalityEndY-15}
|
||||
fill="black"
|
||||
strokeWidth="0.5"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
>
|
||||
{cardinalityEnd}
|
||||
</text>
|
||||
@ -62,11 +72,10 @@ export function CrowOM(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
)
|
||||
}
|
||||
|
||||
export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd){
|
||||
return(
|
||||
pathRef && settings && cardinalityvar==3 &&(
|
||||
<>
|
||||
{console.log(settings) }
|
||||
export function CrowOO(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalitySart, cardinalityEnd){
|
||||
return(
|
||||
pathRef && notation === 'crows_foot' && cardinalityvar==3 &&(
|
||||
<>
|
||||
<line
|
||||
x1={cardinalityEndX-(15*direction)}
|
||||
y1={cardinalityEndY+10}
|
||||
@ -76,7 +85,7 @@ export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
strokeWidth='2'
|
||||
className="group-hover:fill-sky-700"
|
||||
/>
|
||||
|
||||
|
||||
<line
|
||||
x1={cardinalityEndX-(10*direction)}
|
||||
y1={cardinalityEndY+10}
|
||||
@ -104,7 +113,7 @@ export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
strokeWidth='2'
|
||||
className="group-hover:fill-sky-700"
|
||||
/>
|
||||
|
||||
|
||||
<text
|
||||
x={cardinalityStartX}
|
||||
y={cardinalityStartY-15}
|
||||
@ -113,7 +122,17 @@ export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
>
|
||||
{cardinalityEnd}
|
||||
{cardinalitySart}
|
||||
</text>
|
||||
<text
|
||||
x={cardinalityEndX-15}
|
||||
y={cardinalityEndY-15}
|
||||
fill="black"
|
||||
strokeWidth="0.5"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
>
|
||||
{cardinalityEnd}
|
||||
</text>
|
||||
</>
|
||||
)
|
||||
@ -121,9 +140,9 @@ export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
}
|
||||
|
||||
|
||||
export function CrowZM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityEnd){
|
||||
return(
|
||||
pathRef && settings && (cardinalityvar==1) &&(
|
||||
export function CrowZM(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
|
||||
return(
|
||||
pathRef && notation === 'crows_foot' && (cardinalityvar==1) &&(
|
||||
<>
|
||||
<circle
|
||||
cx={cardinalityEndX-24}
|
||||
@ -159,6 +178,16 @@ export function CrowZM(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
strokeWidth="0.5"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
>
|
||||
{cardinalityStart}
|
||||
</text>
|
||||
<text
|
||||
x={cardinalityEndX-15}
|
||||
y={cardinalityEndY-15}
|
||||
fill="black"
|
||||
strokeWidth="0.5"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
>
|
||||
{cardinalityEnd}
|
||||
</text>
|
||||
@ -183,4 +212,47 @@ export function CrowZM(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export function DefaultNotation(pathRef, notation, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, cardinalityStart, cardinalityEnd){
|
||||
return(
|
||||
pathRef && notation === 'default' && (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@ -1220,17 +1220,34 @@ export default function ControlPanel({
|
||||
function: viewGrid,
|
||||
shortcut: "Ctrl+Shift+G",
|
||||
},
|
||||
show_cardinality: {
|
||||
state: settings.showCardinality ? (
|
||||
<i className="bi bi-toggle-on" />
|
||||
) : (
|
||||
<i className="bi bi-toggle-off" />
|
||||
),
|
||||
function: () =>
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
showCardinality: !prev.showCardinality,
|
||||
})),
|
||||
// show_cardinality: {
|
||||
// state: settings.showCardinality ? (
|
||||
// <i className="bi bi-toggle-on" />
|
||||
// ) : (
|
||||
// <i className="bi bi-toggle-off" />
|
||||
// ),
|
||||
// function: () =>
|
||||
// setSettings((prev) => ({
|
||||
// ...prev,
|
||||
// showCardinality: !prev.showCardinality,
|
||||
// })),
|
||||
// },
|
||||
notation: {
|
||||
children: [
|
||||
{
|
||||
default_notation: () => {
|
||||
console.log(settings.notation);
|
||||
setSettings((prev) => ({ ...prev, notation: "default" }));
|
||||
},
|
||||
},
|
||||
{
|
||||
crows_foot_notation: () => {
|
||||
console.log(settings.notation);
|
||||
setSettings((prev) => ({ ...prev, notation: "crows_foot" }));
|
||||
},
|
||||
},
|
||||
],
|
||||
function: () => {},
|
||||
},
|
||||
show_debug_coordinates: {
|
||||
state: settings.showDebugCoordinates ? (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user