Agregar botón para cambiar de notación

src/components/EditorCanvas/Relationship.jsx

@@ -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:
+      if (settings.notation === 'default') {
         cardinalityStart = "n";
-      cardinalityEnd = "(1,*)";
+        cardinalityEnd = "1";
+      } else {
+        cardinalityStart = "(1,*)";
+        cardinalityEnd = "(1,1)";
         cardinalityvar="1";
+      }
       break;
     case t(Cardinality.ONE_TO_MANY):
     case Cardinality.ONE_TO_MANY:
+      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:
+      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,14 +135,15 @@ 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)}
+        {CrowOM(pathRef.current,settings.notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
-        {CrowOO(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd)}
+        {CrowOO(pathRef.current,settings.notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
-        {CrowZM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, 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

src/components/EditorCanvas/RelationshipFormat.jsx

@@ -1,6 +1,6 @@
-export function CrowOM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd){
+export function CrowOM(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
     return(
-        pathRef && settings && (cardinalityvar==2)  &&(
+        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){
+export function CrowOO(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalitySart, cardinalityEnd){
     return(
-        pathRef && settings && cardinalityvar==3  &&(
+        pathRef && notation === 'crows_foot' && cardinalityvar==3  &&(
             <>
-            {console.log(settings) }        
             <line
               x1={cardinalityEndX-(15*direction)}
               y1={cardinalityEndY+10}
@@ -112,6 +121,16 @@ export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardi
               strokeWidth="0.5"
               textAnchor="middle"
               alignmentBaseline="middle"
+            >
+              {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){
+export function CrowZM(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
   return(
-      pathRef && settings && (cardinalityvar==1)  &&(
+      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>
@@ -184,3 +213,46 @@ 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>
+          </>
+      )
+  )
+}

src/components/EditorHeader/ControlPanel.jsx

@@ -1220,17 +1220,34 @@ export default function ControlPanel({
         function: viewGrid,
         shortcut: "Ctrl+Shift+G",
       },
-      show_cardinality: {
+      // show_cardinality: {
-        state: settings.showCardinality ? (
+      //   state: settings.showCardinality ? (
-          <i className="bi bi-toggle-on" />
+      //     <i className="bi bi-toggle-on" />
-        ) : (
+      //   ) : (
-          <i className="bi bi-toggle-off" />
+      //     <i className="bi bi-toggle-off" />
-        ),
+      //   ),
-        function: () =>
+      //   function: () =>
-          setSettings((prev) => ({
+      //     setSettings((prev) => ({
-            ...prev,
+      //       ...prev,
-            showCardinality: !prev.showCardinality,
+      //       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 ? (