Jerarquia menu

package.json

@@ -17,7 +17,6 @@
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/codemirror-theme-vscode": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "@vercel/analytics": "^1.2.2",
     "axios": "^1.7.4",
     "classnames": "^2.5.1",
     "dexie": "^3.2.4",

src/components/EditorCanvas/Canvas.jsx

@@ -3,6 +3,7 @@ import {
   Action,
   Cardinality,
   Constraint,
+  SubtypeRestriction,
   ObjectType,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
@@ -435,6 +436,8 @@ export default function Canvas() {
         tables[linkingLine.startTableId].fields[linkingLine.startFieldId].name
       }_fk`,
       id: relationships.length,
+      subtype: false,
+      subtype_restriction: "",
     };
     delete newRelationship.startX;
     delete newRelationship.startY;

src/components/EditorCanvas/Relationship.jsx

@@ -1,10 +1,12 @@
 import { useRef } from "react";
-import { Cardinality, ObjectType, Tab } from "../../data/constants";
+import { Cardinality, ObjectType, Tab, SubtypeRestriction } from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
 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, IDEFZM, DefaultNotation, subDP, subDT, subOP, subOT } from "./RelationshipFormat";
+
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
@@ -13,45 +15,102 @@ export default function Relationship({ data }) {
   const { selectedElement, setSelectedElement } = useSelect();
   const { t } = useTranslation();
   const pathRef = useRef();
+  const type = settings.notation === 'default' ? 0 : 10;
+  const relationshipType=(0,0);
 
+  let direction = 1;
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
+  let cardinalityvar;
+  let subtypevar;
 
   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";
+    case t(Cardinality.ZERO_TO_MANY):
+    case Cardinality.ZERO_TO_MANY:
+      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";
+      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";
+      if (settings.notation === 'default') {
+        cardinalityStart = "1";
+        cardinalityEnd = "1";
+      } else {
+        cardinalityStart = "(1,1)";
+        cardinalityEnd = "(1,1)";
+        cardinalityvar="3";
+      }
       break;
     default:
       break;
   }
 
+  switch (data.subtype_restriction){
+    case t(SubtypeRestriction.DISJOINT_TOTAL):
+    case SubtypeRestriction.DISJOINT_TOTAL:
+      subtypevar="1";
+      console.log(subtypevar)
+    break;
+
+    case t(SubtypeRestriction.DISJOINT_PARTIAL):
+    case SubtypeRestriction.DISJOINT_PARTIAL:
+      subtypevar="2";
+      console.log(subtypevar)
+    break;
+
+    case t(SubtypeRestriction.OVERLAPPING_TOTAL):
+    case SubtypeRestriction.OVERLAPPING_TOTAL:
+      subtypevar="3";
+      console.log(subtypevar)
+    break;
+
+  case t(SubtypeRestriction.OVERLAPPING_PARTIAL):
+  case SubtypeRestriction.OVERLAPPING_PARTIAL:
+    subtypevar="4";
+    console.log(subtypevar)
+  break;
+  default:
+  break;
+
+  }
+
   let cardinalityStartX = 0;
   let cardinalityEndX = 0;
   let cardinalityStartY = 0;
   let cardinalityEndY = 0;
 
   const cardinalityOffset = 28;
 
+
   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 - cardinalityOffset,
+      pathLength,
     );
     cardinalityEndX = point2.x;
     cardinalityEndY = point2.y;
@@ -80,6 +139,10 @@ export default function Relationship({ data }) {
     }
   };
 
+  if ((settings.notation === 'crows_foot' || settings.notation === 'idef1x') && cardinalityEndX < cardinalityStartX){
+    direction = -1;
+  }
+
   return (
     <>
       <g className="select-none group" onDoubleClick={edit}>
@@ -102,48 +165,22 @@ export default function Relationship({ data }) {
           stroke="gray"
           className="group-hover:stroke-sky-700"
           fill="none"
+          strokeDasharray={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.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)}
+        {IDEFZM(pathRef.current,settings.notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
+        {subDP(pathRef.current,settings.notation, subtypevar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
+        {subDT(pathRef.current,settings.notation, subtypevar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
+        {subOT(pathRef.current,settings.notation, subtypevar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
+        {subOP(pathRef.current,settings.notation, subtypevar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd)}
       </g>
+
       <SideSheet
         title={t("edit")}
         size="small"