Fix recovering relationships after delete operations (#84)

src/components/EditorCanvas/Canvas.jsx

@@ -362,7 +362,7 @@ export default function Canvas() {
       tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
       tables[hoveredTable.tableId].fields[hoveredTable.field].type
     ) {
-      Toast.info(t("connot_connect"));
+      Toast.info(t("cannot_connect"));
       return;
     }
     if (

src/components/EditorHeader/ControlPanel.jsx

@@ -88,6 +88,7 @@ export default function ControlPanel({
     setTables,
     addTable,
     updateTable,
+    deleteField,
     deleteTable,
     updateField,
     setRelationships,
@@ -145,7 +146,8 @@ export default function ControlPanel({
       }
     } else if (a.action === Action.DELETE) {
       if (a.element === ObjectType.TABLE) {
-        addTable(a.data, false);
+        a.data.relationship.forEach((x) => addRelationship(x, false));
+        addTable(a.data.table, false);
       } else if (a.element === ObjectType.RELATIONSHIP) {
         addRelationship(a.data, false);
       } else if (a.element === ObjectType.NOTE) {
@@ -166,27 +168,49 @@ export default function ControlPanel({
           updateField(a.tid, a.fid, a.undo);
         } else if (a.component === "field_delete") {
           setRelationships((prev) => {
-            return prev.map((e) => {
+            let temp = [...prev];
-              if (e.startTableId === a.tid && e.startFieldId >= a.data.id) {
+            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.id) {
+              if (
+                e.endTableId === a.tid &&
+                e.endFieldId >= a.data.field.id &&
+                !recoveredRel
+              ) {
                 return {
                   ...e,
+                  id: i,
                   endFieldId: e.endFieldId + 1,
                 };
               }
-              return e;
+              return { ...e, id: i };
             });
+            return temp;
           });
           setTables((prev) =>
             prev.map((t) => {
               if (t.id === a.tid) {
                 const temp = t.fields.slice();
-                temp.splice(a.data.id, 0, a.data);
+                temp.splice(a.data.field.id, 0, a.data.field);
                 return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
               }
               return t;
@@ -314,7 +338,7 @@ export default function ControlPanel({
       }
     } else if (a.action === Action.DELETE) {
       if (a.element === ObjectType.TABLE) {
-        deleteTable(a.data.id, false);
+        deleteTable(a.data.table.id, false);
       } else if (a.element === ObjectType.RELATIONSHIP) {
         deleteRelationship(a.data.id, false);
       } else if (a.element === ObjectType.NOTE) {
@@ -334,28 +358,7 @@ export default function ControlPanel({
         if (a.component === "field") {
           updateField(a.tid, a.fid, a.redo);
         } else if (a.component === "field_delete") {
-          setRelationships((prev) => {
+          deleteField(a.data.field, a.tid, false);
-            return prev.map((e) => {
-              if (e.startTableId === a.tid && e.startFieldId > a.data.id) {
-                return {
-                  ...e,
-                  startFieldId: e.startFieldId - 1,
-                };
-              }
-              if (e.endTableId === a.tid && e.endFieldId > a.data.id) {
-                return {
-                  ...e,
-                  endFieldId: e.endFieldId - 1,
-                };
-              }
-              return e;
-            });
-          });
-          updateTable(a.tid, {
-            fields: tables[a.tid].fields
-              .filter((field) => field.id !== a.data.id)
-              .map((e, i) => ({ ...e, id: i })),
-          });
         } else if (a.component === "field_add") {
           updateTable(a.tid, {
             fields: [

src/context/TablesContext.jsx

@@ -68,12 +68,18 @@ export default function TablesContextProvider({ children }) {
   const deleteTable = (id, addToHistory = true) => {
     if (addToHistory) {
       Toast.success(t("table_deleted"));
+      const rels = relationships.reduce((acc, r) => {
+        if (r.startTableId === id || r.endTableId === id) {
+          acc.push(r);
+        }
+        return acc;
+      }, []);
       setUndoStack((prev) => [
         ...prev,
         {
           action: Action.DELETE,
           element: ObjectType.TABLE,
-          data: tables[id],
+          data: { table: tables[id], relationship: rels },
           message: t("delete_table", { tableName: tables[id] }),
         },
       ]);
@@ -130,7 +136,17 @@ export default function TablesContextProvider({ children }) {
     );
   };
 
-  const deleteField = (field, tid) => {
+  const deleteField = (field, tid, addToHistory = true) => {
+    if (addToHistory) {
+      const rels = relationships.reduce((acc, r) => {
+        if (
+          (r.startTableId === tid && r.startFieldId === field.id) ||
+          (r.endTableId === tid && r.endFieldId === field.id)
+        ) {
+          acc.push(r);
+        }
+        return acc;
+      }, []);
       setUndoStack((prev) => [
         ...prev,
         {
@@ -138,7 +154,10 @@ export default function TablesContextProvider({ children }) {
           element: ObjectType.TABLE,
           component: "field_delete",
           tid: tid,
-        data: field,
+          data: {
+            field: field,
+            relationship: rels,
+          },
           message: t("edit_table", {
             tableName: tables[tid].name,
             extra: "[delete field]",
@@ -146,8 +165,9 @@ export default function TablesContextProvider({ children }) {
         },
       ]);
       setRedoStack([]);
-    setRelationships((prev) =>
+    }
-      prev
+    setRelationships((prev) => {
+      const temp = prev
         .filter(
           (e) =>
             !(
@@ -155,24 +175,24 @@ export default function TablesContextProvider({ children }) {
               (e.endTableId === tid && e.endFieldId === field.id)
             ),
         )
-        .map((e, i) => ({ ...e, id: i })),
+        .map((e, i) => {
-    );
-    setRelationships((prev) => {
-      return prev.map((e) => {
           if (e.startTableId === tid && e.startFieldId > field.id) {
             return {
               ...e,
               startFieldId: e.startFieldId - 1,
+              id: i,
             };
           }
           if (e.endTableId === tid && e.endFieldId > field.id) {
             return {
               ...e,
               endFieldId: e.endFieldId - 1,
+              id: i,
             };
           }
-        return e;
+          return { ...e, id: i };
         });
+      return temp;
     });
     updateTable(tid, {
       fields: tables[tid].fields