adding a button to change the relationship type and adding the zero-to-many relationship.

src/components/EditorCanvas/Relationship.jsx

@@ -11,7 +11,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, IDEFZM, DefaultNotation } from "./RelationshipFormat";
+import { CrowOM, CrowOO, CrowZM, IDEFZM, DefaultNotation } from "./RelationshipFormat";
 
 
 const labelFontSize = 16;
@@ -37,35 +37,24 @@ export default function Relationship({ data }) {
       default:  {
         one_to_one: DefaultNotation,
         one_to_many: DefaultNotation,
-        many_to_one: DefaultNotation,
+        zero_to_many: DefaultNotation,
       },
       crows_foot: {
         one_to_one: CrowOO,
         one_to_many: CrowOM,
-        many_to_one: CrowOM,
+        zero_to_many: CrowZM,
       },
       idef1x: {
         one_to_one: IDEFZM,
         one_to_many: IDEFZM,
-        many_to_one: IDEFZM,
+        zero_to_many: IDEFZM,
       },
     }
   }
 
   let format;
   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 === Notation.DEFAULT) {
-        cardinalityStart = "n";
-        cardinalityEnd = "1";
-      } else {
-        cardinalityStart = "(1,*)";
-        cardinalityEnd = "(1,1)";
-      }
-      format = formats.notation[settings.notation].many_to_one;
-      break;
     case t(Cardinality.ONE_TO_MANY):
     case Cardinality.ONE_TO_MANY:
       if (settings.notation === Notation.DEFAULT) {
@@ -91,6 +80,17 @@ export default function Relationship({ data }) {
     default:
       format = formats.default.one_to_one;
       break;
+    case t(Cardinality.ZERO_TO_MANY):
+    case Cardinality.ZERO_TO_MANY:
+      if (settings.notation === Notation.DEFAULT) {
+        cardinalityStart = "0";
+        cardinalityEnd = "n";
+      } else {
+        cardinalityStart = "(0,1)";
+        cardinalityEnd = "(0,*)";
+      }
+      format = formats.notation[settings.notation].zero_to_many;
+      break;
   }
 
   let cardinalityStartX = 0;

src/components/EditorCanvas/RelationshipFormat.jsx

@@ -158,6 +158,83 @@ export function CrowOO(
     )
 }
 
+export function CrowZM(
+  pathRef, 
+  cardinalityEndX, 
+  cardinalityEndY, 
+  cardinalityStartX, 
+  cardinalityStartY,  
+  direction, 
+  cardinalityStart, 
+  cardinalityEnd
+) {
+  return (
+    pathRef && (
+      <>
+        <circle
+          cx={cardinalityEndX - 24}
+          cy={cardinalityEndY}
+          r="4"
+          stroke="gray"
+          strokeWidth="2"
+          fill="none"
+          className="group-hover:fill-sky-700"
+        />
+        <line
+          x1={cardinalityEndX - (20 * direction)}
+          y1={cardinalityEndY}
+          x2={cardinalityEndX + 1}
+          y2={cardinalityEndY - 10}
+          stroke="gray"
+          strokeWidth="2"
+          className="group-hover:fill-sky-700"
+        />
+        <line
+          x1={cardinalityEndX - 20 * direction}
+          y1={cardinalityEndY}
+          x2={cardinalityEndX + 1}
+          y2={cardinalityEndY + 10}
+          stroke="gray"
+          strokeWidth="2"
+          className="group-hover:fill-sky-700"
+        />
+        <polygon
+          points={`
+            ${cardinalityStartX - (15 * direction)},${cardinalityStartY} 
+            ${cardinalityStartX - (20 * direction)},${cardinalityStartY - 5} 
+            ${cardinalityStartX - (25 * direction)},${cardinalityStartY} 
+            ${cardinalityStartX - (20 * direction)},${cardinalityStartY + 5}
+          `}
+          stroke="gray"
+          strokeWidth="2"
+          fill="none"
+          className="group-hover:fill-sky-700"
+        />
+        <text
+          x={cardinalityStartX - 8}
+          y={cardinalityStartY - 20}
+          fill="grey"
+          strokeWidth="0.5"
+          textAnchor="middle"
+          alignmentBaseline="middle"
+        >
+          {cardinalityStart}
+        </text>
+        <text
+          x={cardinalityEndX - 10}
+          y={cardinalityEndY - 20}
+          fill="grey"
+          strokeWidth="0.5"
+          textAnchor="middle"
+          alignmentBaseline="middle"
+        >
+          {cardinalityEnd}
+        </text>
+      </>
+    )
+  );
+}
+
 export function DefaultNotation(
   pathRef, 
   cardinalityEndX, 

src/components/EditorCanvas/Table.jsx

@@ -300,9 +300,13 @@ export default function Table(props) {
           ${(tableData.fields.length === 1 && settings.notation === Notation.DEFAULT)
             ? "rounded-b-md"
             : ""
-          }${(tableData.fields.length === 1 && settings.notation !== Notation.DEFAULT)
-            ? "border-l border-r border-gray-400"
-            : ""
+          }${(settings.notation !== Notation.DEFAULT && index === tableData.fields.length - 1)
+              ? (
+                  primaryKeyCount === tableData.fields.length
+                    ? "border-l border-r border-b border-gray-400"
+                    : "border-b border-gray-400"
+                )
+              : ""
           }${
           (fieldData.primary && settings.notation !== Notation.DEFAULT && primaryKeyCount === 1)
             ? "border-b border-gray-400"

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -17,8 +17,9 @@ import {
   Constraint,
   Action,
   ObjectType,
+  Notation,
 } from "../../../data/constants";
-import { useDiagram, useUndoRedo } from "../../../hooks";
+import { useDiagram, useUndoRedo, useSettings } from "../../../hooks";
 import i18n from "../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
@@ -40,6 +41,7 @@ export default function RelationshipInfo({ data }) {
     useDiagram();
   const { t } = useTranslation();
   const [editField, setEditField] = useState({});
+  const { settings } = useSettings();
 
   const swapKeys = () => {
     setUndoStack((prev) => [
@@ -130,6 +132,30 @@ export default function RelationshipInfo({ data }) {
     );
   };
 
+  const changeIdentifyingRelationship = (value) => {
+    if ( Notation.DEFAULT === true) return;
+
+    setUndoStack((prev) => [
+      ...prev,
+      {
+        action: Action.EDIT,
+        element: ObjectType.RELATIONSHIP,
+        rid: data.id,
+        undo: { identifying: data.identifying, lineType: data.lineType },
+        redo: { identifying: value, lineType: value ? "5,5" : "0" },
+        message: t("edit_relationship", {
+          refName: data.name,
+          extra: "[identifying]",
+        }),
+      },
+    ]);
+    setRedoStack([]);
+    setRelationships((prev) =>
+      prev.map((e, idx) =>
+        idx === data.id ? { ...e, identifying: value, lineType: value ? "5,5" : "0" } : e,
+      ),
+    );
+  }
   return (
     <>
       <div className="flex items-center mb-2.5">
@@ -248,6 +274,17 @@ export default function RelationshipInfo({ data }) {
           />
         </Col>
       </Row>
+      {settings.notation !== Notation.DEFAULT && (
+        <Button
+          icon={<IconLoopTextStroked />}
+          block
+          type={data.identifying ? "primary" : "secondary"}
+          onClick={() => changeIdentifyingRelationship(!data.identifying)}
+        >
+          {data.identifying ? t("Identifying") : t("no Identifying")}
+        </Button>
+      )}
+      <div className="my-2"></div>
       <Button
         icon={<IconDeleteStroked />}
         block

src/data/constants.js

@@ -32,7 +32,7 @@ export const tableColorStripHeight = 7;
 export const Cardinality = {
   ONE_TO_ONE: "one_to_one",
   ONE_TO_MANY: "one_to_many",
-  MANY_TO_ONE: "many_to_one",
+  ZERO_TO_MANY: "zero_to_many",
 };
 export const Notation = {
   DEFAULT: "default",

src/data/heroDiagram.js

@@ -121,7 +121,7 @@ export const diagram = {
       startFieldId: 1,
       endTableId: 0,
       endFieldId: 0,
-      cardinality: "many_to_one",
+      cardinality: "one_to_many",
     },
     {
       startTableId: 2,
@@ -135,7 +135,7 @@ export const diagram = {
       startFieldId: 1,
       endTableId: 3,
       endFieldId: 0,
-      cardinality: "many_to_one",
+      cardinality: "zero_to_many",
     },
   ],
 };

src/i18n/locales/en.js

@@ -141,7 +141,7 @@ const en = {
     swap: "Swap",
     one_to_one: "One to one",
     one_to_many: "One to many",
-    many_to_one: "Many to one",
+    zero_to_many: "Cero to many",
     content: "Content",
     types_info:
       "This feature is meant for object-relational DBMSs like PostgreSQL.\nIf used for MySQL or MariaDB a JSON type will be generated with the corresponding json validation check.\nIf used for SQLite it will be translated to a BLOB.\nIf used for MSSQL a type alias to the first field will be generated.",

src/i18n/locales/es.js

@@ -134,7 +134,7 @@ const es = {
     swap: "Intercambiar",
     one_to_one: "Uno a uno",
     one_to_many: "Uno a muchos",
-    many_to_one: "Muchos a uno",
+    Zero_to_much: "Zero a Muchos",
     content: "Contenido",
     types_info:
       "Esta característica está destinada a DBMSs objeto-relacionales como PostgreSQL.\nSi se usa para MySQL o MariaDB, se generará un tipo JSON con la verificación de validación json correspondiente.\nSi se usa para SQLite, se traducirá a un BLOB.\nSi se usa para MSSQL, se generará un alias de tipo al primer campo.",