añadido el diseño

src/components/EditorCanvas/Canvas.jsx

@@ -3,6 +3,7 @@ import {
   Action,
   Cardinality,
   Constraint,
+  SubtypeRestriction,
   ObjectType,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";

src/components/EditorCanvas/Relationship.jsx

@@ -1,11 +1,11 @@
 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, sub01 } from "./RelationshipFormat";
+import { CrowOM, CrowOO, CrowZM, IDEFZM, DefaultNotation, subDP, subDT, subOP, subOT } from "./RelationshipFormat";
 
 
 export default function Relationship({ data }) {
@@ -22,6 +22,7 @@ export default function Relationship({ data }) {
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
   let cardinalityvar;
+  let subtypevar;
 
   switch (data.cardinality) {
     // the translated values are to ensure backwards compatibility
@@ -62,6 +63,35 @@ export default function Relationship({ data }) {
       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;
@@ -145,7 +175,10 @@ export default function Relationship({ data }) {
         {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)}
-        {sub01(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

src/components/EditorCanvas/RelationshipFormat.jsx

@@ -295,9 +295,9 @@ export function IDEFZM(pathRef, notation, cardinalityvar, cardinalityEndX, cardi
   )
 }
 
-export function sub01(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+export function subDP(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
   return(
-      pathRef && notation === 'idef1x' && (cardinalityvar==2)  &&(
+      pathRef && notation === 'idef1x' && (cardinalityvar=="2")  &&(
           <>
             <circle
               cx={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
@@ -308,6 +308,16 @@ export function sub01(pathRef, notation, cardinalityvar, cardinalityEndX, cardin
               fill="white"
               className="group-hover:fill-sky-700"
             />
+            <text
+                  x={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
+                  y={cardinalityEndY+2}
+                  fill="grey"
+                  strokeWidth="0.5"
+                  textAnchor="middle"
+                  alignmentBaseline="middle"
+              >
+                  D
+            </text>
             <line
               x1={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+24)/3)*direction)}
               y1={cardinalityEndY+20}
@@ -342,9 +352,9 @@ export function sub01(pathRef, notation, cardinalityvar, cardinalityEndX, cardin
   )
 }
 
-export function sub011(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+export function subDT(pathRef, notation, subtypevar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
   return(
-      pathRef && notation === 'idef1x' && (cardinalityvar==3)  &&(
+    pathRef && notation === 'idef1x' && (subtypevar=="1")  &&(
       <>
         <circle
           cx={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
@@ -355,6 +365,82 @@ export function sub011(pathRef, notation, cardinalityvar, cardinalityEndX, cardi
           fill="white"
           className="group-hover:fill-sky-700"
         />
+        <text
+              x={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
+              y={cardinalityEndY+2}
+              fill="grey"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+          >
+              D
+        </text>
+        <line
+          x1={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+24)/3)*direction)}
+          y1={cardinalityEndY+20}
+          x2={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+24)/3)*direction)}
+          y2={cardinalityEndY-20}
+          stroke="gray"
+          strokeWidth='2'
+          className="group-hover:fill-sky-700"
+        />
+        <line
+          x1={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+44)/3)*direction)}
+          y1={cardinalityEndY+20}
+          x2={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+44)/3)*direction)}
+          y2={cardinalityEndY-20}
+          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"
+          >
+              {cardinalityStart}
+          </text>
+          <text
+              x={cardinalityEndX-15}
+              y={cardinalityEndY-15}
+              fill="black"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+          >
+              {cardinalityEnd}
+          </text>
+      </>
+  )
+  )
+}
+
+export function subOP(pathRef, notation, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+  return(
+      pathRef && notation === 'idef1x' && (cardinalityvar=="4")  &&(
+          <>
+            <circle
+              cx={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
+              cy={cardinalityEndY}
+              r="8"
+              stroke="gray"
+              strokeWidth='2'
+              fill="white"
+              className="group-hover:fill-sky-700"
+            />
+            <text
+                  x={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
+                  y={cardinalityEndY+2}
+                  fill="grey"
+                  strokeWidth="0.5"
+                  textAnchor="middle"
+                  alignmentBaseline="middle"
+              >
+                  O
+            </text>
             <line
               x1={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+24)/3)*direction)}
               y1={cardinalityEndY+20}
@@ -389,3 +475,69 @@ export function sub011(pathRef, notation, cardinalityvar, cardinalityEndX, cardi
   )
 }
 
+export function subOT(pathRef, notation, subtypevar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+  return(
+    pathRef && notation === 'idef1x' && (subtypevar=="3")  &&(
+      <>
+        <circle
+          cx={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
+          cy={cardinalityEndY}
+          r="8"
+          stroke="gray"
+          strokeWidth='2'
+          fill="white"
+          className="group-hover:fill-sky-700"
+        />
+        <text
+              x={cardinalityEndX-(((cardinalityEndX-cardinalityStartX)/3)*direction)}
+              y={cardinalityEndY+2}
+              fill="grey"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+          >
+              O
+        </text>
+        <line
+          x1={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+24)/3)*direction)}
+          y1={cardinalityEndY+20}
+          x2={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+24)/3)*direction)}
+          y2={cardinalityEndY-20}
+          stroke="gray"
+          strokeWidth='2'
+          className="group-hover:fill-sky-700"
+        />
+        <line
+          x1={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+44)/3)*direction)}
+          y1={cardinalityEndY+20}
+          x2={cardinalityEndX-(((cardinalityEndX-cardinalityStartX+44)/3)*direction)}
+          y2={cardinalityEndY-20}
+          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"
+          >
+              {cardinalityStart}
+          </text>
+          <text
+              x={cardinalityEndX-15}
+              y={cardinalityEndY-15}
+              fill="black"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+          >
+              {cardinalityEnd}
+          </text>
+      </>
+  )
+  )
+}
+