Add subtype restrictions

src/components/EditorCanvas/Canvas.jsx

@@ -436,6 +436,7 @@ export default function Canvas() {
       }_fk`,
       id: relationships.length,
       subtype: false,
+      subtype_restriction: "",
     };
     delete newRelationship.startX;
     delete newRelationship.startY;

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -6,6 +6,7 @@ import {
 } from "@douyinfe/semi-icons";
 import {
   Cardinality,
+  SubtypeRestriction,
   Constraint,
   Action,
   ObjectType,
@@ -97,6 +98,29 @@ export default function RelationshipInfo({ data }) {
     );
   };
 
+  const changeSubtypeRestriction = (value) => {
+    setUndoStack((prev) => [
+      ...prev,
+      {
+        action: Action.EDIT,
+        element: ObjectType.RELATIONSHIP,
+        rid: data.id,
+        undo: { subtype_restriction: data.subtype_restriction },
+        redo: { subtype_restriction: value },
+        message: t("edit_relationship", {
+          refName: data.name,
+          extra: "[subtype_restriction]",
+        }),
+      },
+    ]);
+    setRedoStack([]);
+    setRelationships((prev) =>
+      prev.map((e, idx) =>
+        idx === data.id ? { ...e, subtype_restriction: value } : e,
+      ),
+    );
+  };
+
   const toggleSubtype = () => {
     const prevVal = data.subtype;
     setUndoStack((prev) => [
@@ -206,7 +230,7 @@ export default function RelationshipInfo({ data }) {
       />
       <Row gutter={6} className="my-3">
         <Col span={12}>
-        <div className="font-semibold my-1" >{'Subtype'}:
+        <div className="font-semibold my-1" >{t("subtype")}:
         </div>
         </Col>
         <Col span={12}>
@@ -216,7 +240,20 @@ export default function RelationshipInfo({ data }) {
           />
         </Col>
       </Row>
-      {console.log(data)}
+      {data.subtype &&
+        <Row gutter={6} className="my-3">
+          <div className="font-semibold my-1">{t("subtype_restriction")}:</div>
+          <Select
+            optionList={Object.values(SubtypeRestriction).map((v) => ({
+              label: t(v),
+              value: v,
+            }))}
+            value={data.subtype_restriction}
+            className="w-full"
+            onChange={changeSubtypeRestriction}
+          />
+        </Row>
+      }
       <Row gutter={6} className="my-3">
         <Col span={12}>
           <div className="font-semibold">{t("on_update")}: </div>

src/data/constants.js

@@ -34,6 +34,13 @@ export const Cardinality = {
   MANY_TO_ONE: "many_to_one",
 };
 
+export const SubtypeRestriction = {
+  DISJOINT_TOTAL: "disjoint_total",
+  DISJOINT_PARTIAL: "disjoint_partial",
+  OVERLAPPING_TOTAL: "overlapping_total",
+  OVERLAPPING_PARTIAL: "overlapping_partial",
+};
+
 export const Constraint = {
   NONE: "No action",
   RESTRICT: "Restrict",

src/i18n/locales/en.js

@@ -52,6 +52,12 @@ const en = {
     default_notation: "Default notation",
     crows_foot_notation: "Crow's foot notation",
     idef1x_notation: "IDEF1X notation",
+    subtype: "Subtype",
+    subtype_restriction: "Subtype restriction",
+    disjoint_partial: "Disjoint partial",
+    disjoint_total: "Disjoint total",
+    overlapping_partial: "Overlapping partial",
+    overlapping_total: "Overlapping total",
     notation: "Notation",
     theme: "Theme",
     light: "Light",

src/i18n/locales/es.js

@@ -53,6 +53,12 @@ const es = {
     default_notation: "Notación predeterminada",
     crows_foot_notation: "Notación Crow's Foot",
     idef1x_notation: "Notación IDEF1X",
+    subtype: "Subtipo",
+    subtype_restriction: "Restricción de subtipo",
+    disjoint_partial: "Excluyente parcial",
+    disjoint_total: "Excluyente total",
+    overlapping_partial: "Traslape partial",
+    overlapping_total: "Traslape total",
     theme: "Tema",
     light: "Claro",
     dark: "Oscuro",