Feat automatic relationship

src/components/EditorCanvas/Canvas.jsx

@@ -36,7 +36,7 @@ export default function Canvas() {
     pointer,
   } = canvasContextValue;
 
-  const { tables, updateTable, relationships, addRelationship, database } =
+  const { tables, updateTable, relationships, addRelationship } =
     useDiagram();
   const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useNotes();
@@ -409,45 +409,97 @@ export default function Canvas() {
       }
     setPanning((old) => ({ ...old, isPanning: false }));
     setDragging({ element: ObjectType.NONE, id: -1, prevX: 0, prevY: 0 });
+    setLinkingLine({
+      ...linkingLine,
+      startTableId: field.tableId,
+      startFieldId: field.id,
+      startX: pointer.spaces.diagram.x,
+      startY: pointer.spaces.diagram.y,
+    });
     setLinking(true);
   };
 
   const handleLinking = () => {
     if (hoveredTable.tableId < 0) return;
-    if (hoveredTable.field < 0) return;
-    if (
-      !areFieldsCompatible(
-        database,
-        tables[linkingLine.startTableId].fields[linkingLine.startFieldId],
-        tables[hoveredTable.tableId].fields[hoveredTable.field],
-      )
-    ) {
-      Toast.info(t("cannot_connect"));
+    // Get the childTable and parentTable
+    const childTable = tables.find((t) => t.id === hoveredTable.tableId);
+    const parentTable = tables.find((t) => t.id === linkingLine.startTableId);
+    const parentFields = parentTable.fields.filter((field) => field.primary);
+
+    if (parentFields.length === 0) {
+      Toast.info(t("no_primary_key"));
       return;
     }
-    if (
-      linkingLine.startTableId === hoveredTable.tableId &&
-      linkingLine.startFieldId === hoveredTable.field
-    )
+    // If the relationship is recursive
+    const recursiveRelation = parentTable === childTable;
+    if (!recursiveRelation) {
+      if (!areFieldsCompatible(parentFields, childTable)) {
+        Toast.info(t("duplicate_field_name"));
+        return;
+      }
+    }
+    // Check if the relationship already exists
+    const alreadyLinked = relationships.some(
+      (rel) =>
+        rel.startTableId === linkingLine.startTableId &&
+        rel.endTableId === hoveredTable.tableId
+    );
+    if (alreadyLinked) {
+      Toast.info(t("duplicate_relationship"));
       return;
-
+    }
+
+    // Generate new fields for the childTable
+    const newFields = parentFields.map((field, index) => ({
+      name: recursiveRelation ? "" : field.name,
+      type: field.type,
+      size: field.size,
+      notNull: true,
+      unique: false,
+      default: "",
+      check: "",
+      primary: false,
+      increment: false,
+      comment: "",
+      foreignK: true,
+      foreignKey: {
+        tableId: parentTable.id,
+        fieldId: field.id,
+      },
+      id: childTable.fields.length + index, // Ensure IDs are unique
+    }));
+
+    // Concatenate the existing fields with the new fields
+    const updatedChildFields = [...childTable.fields, ...newFields];
+
+    // Update the childTable with the new fields
+    updateTable(childTable.id, {
+      fields: updatedChildFields,
+    });
+
+    // Use the updated childTable fields to create the new relationship
     const newRelationship = {
       ...linkingLine,
-      endTableId: hoveredTable.tableId,
-      endFieldId: hoveredTable.field,
-      cardinality: Cardinality.ONE_TO_ONE,
+      endTableId: childTable.id,
+      // The new fields are added at the end of the childTable fields
+      endFieldId: updatedChildFields.length - 1,
+      startTableId: parentTable.id,
+      startFieldId: parentFields[0].id,
+      Cardinality: Cardinality.ONE_TO_ONE,
       updateConstraint: Constraint.NONE,
       deleteConstraint: Constraint.NONE,
-      name: `fk_${tables[linkingLine.startTableId].name}_${
-        tables[linkingLine.startTableId].fields[linkingLine.startFieldId].name
-      }_${tables[hoveredTable.tableId].name}`,
+      name: `fk_${parentTable.name}_${parentFields[0].name}`,
       id: relationships.length,
+      endField: newFields,
     };
+
     delete newRelationship.startX;
     delete newRelationship.startY;
     delete newRelationship.endX;
     delete newRelationship.endY;
+    // Add the new relationship to the relationships array
     addRelationship(newRelationship);
+    setLinking(false);
   };
 
   // Handle mouse wheel scrolling

src/components/EditorCanvas/Table.jsx

@@ -11,7 +11,6 @@ import {
   IconMore,
   IconMinus,
   IconDeleteStroked,
-  IconKeyStroked,
 } from "@douyinfe/semi-icons";
 import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
 import { useLayout, useSettings, useDiagram, useSelect } from "../../hooks";
@@ -356,7 +355,40 @@ export default function Table(props) {
             />
           ) : (
             <div className="flex gap-1 items-center">
-              {fieldData.primary && <IconKeyStroked />}
+              {fieldData.primary && 
+                <svg 
+                  xmlns="http://www.w3.org/2000/svg" 
+                  width="20" 
+                  height="20" 
+                  fill="#ff2222cc" 
+                  className="bi bi-key" 
+                  viewBox="0 0 16 16"
+                >
+                  <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 
+                    .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 
+                    9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 
+                    4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 
+                    0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 
+                    .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5"/>
+                  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+                </svg>}
+              {fieldData.foreignK && 
+                <svg 
+                  xmlns="http://www.w3.org/2000/svg" 
+                  width="20" 
+                  height="20" 
+                  fill="#2f68adcc" 
+                  className="bi bi-key" 
+                  viewBox="0 0 16 16"
+                >
+                  <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 
+                    .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 
+                    9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 
+                    4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 
+                    0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 
+                    .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5"/>
+                  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+                </svg>}
               {!fieldData.notNull && <span>?</span>}
               <span>
                 {fieldData.type +

src/components/EditorHeader/ControlPanel.jsx

@@ -186,57 +186,34 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.TABLE) {
         if (a.component === "field") {
           updateField(a.tid, a.fid, a.undo);
-        } else if (a.component === "field_delete") {
-          setRelationships((prev) => {
-            let temp = [...prev];
-            a.data.relationship.forEach((r) => {
-              temp.splice(r.id, 0, r);
-            });
-            temp = temp.map((e, i) => {
-              const recoveredRel = a.data.relationship.find(
-                (x) =>
-                  (x.startTableId === e.startTableId &&
-                    x.startFieldId === e.startFieldId) ||
-                  (x.endTableId === e.endTableId &&
-                    x.endFieldId === a.endFieldId),
-              );
-              if (
-                e.startTableId === a.tid &&
-                e.startFieldId >= a.data.field.id &&
-                !recoveredRel
-              ) {
-                return {
-                  ...e,
-                  id: i,
-                  startFieldId: e.startFieldId + 1,
-                };
-              }
-              if (
-                e.endTableId === a.tid &&
-                e.endFieldId >= a.data.field.id &&
-                !recoveredRel
-              ) {
-                return {
-                  ...e,
-                  id: i,
-                  endFieldId: e.endFieldId + 1,
-                };
-              }
-              return { ...e, id: i };
-            });
-            return temp;
+      } else if (a.component === "field_delete") {
+        // Restores relationships
+        setRelationships((prev) => {
+          let temp = [...prev];
+          a.data.relationship.forEach((r) => {
+            temp.splice(r.id, 0, r);
           });
+          temp = temp.map((e, i) => ({ ...e, id: i }));
+          return temp;
+        });
+        // Restores the fields of the parent table
+        setTables((prev) =>
+          prev.map((t) =>
+            t.id === a.tid ? { ...t, fields: a.data.previousFields } : t
+          )
+        );
+        // Restores the affected child tables according to the snapshot
+        if (a.data.childFieldsSnapshot) {
           setTables((prev) =>
             prev.map((t) => {
-              if (t.id === a.tid) {
-                const temp = t.fields.slice();
-                temp.splice(a.data.field.id, 0, a.data.field);
-                return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
+              if (a.data.childFieldsSnapshot[t.id]) {
+                return { ...t, fields: a.data.childFieldsSnapshot[t.id] };
               }
               return t;
-            }),
+            })
           );
-        } else if (a.component === "field_add") {
+        }
+      }else if (a.component === "field_add") {
           updateTable(a.tid, {
             fields: tables[a.tid].fields
               .filter((e) => e.id !== tables[a.tid].fields.length - 1)

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -343,6 +343,7 @@ export default function TableInfo({ data }) {
                     notNull: false,
                     increment: false,
                     comment: "",
+                    foreignK: false, 
                     id: data.fields.length,
                   },
                 ],