Recover relationships after undoing 'field_delete'

src/components/EditorHeader/ControlPanel.jsx

@@ -88,6 +88,7 @@ export default function ControlPanel({
     setTables,
     addTable,
     updateTable,
+    deleteField,
     deleteTable,
     updateField,
     setRelationships,
@@ -166,27 +167,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;
@@ -334,28 +357,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

@@ -130,7 +130,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 +148,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 +159,9 @@ export default function TablesContextProvider({ children }) {
         },
       ]);
       setRedoStack([]);
-    setRelationships((prev) =>
+    }
-      prev
+    setRelationships((prev) => {
+      const temp = prev
         .filter(
           (e) =>
             !(
@@ -155,24 +169,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