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,24 +130,38 @@ export default function TablesContextProvider({ children }) {
     );
   };
 
-  const deleteField = (field, tid) => {
+  const deleteField = (field, tid, addToHistory = true) => {
-    setUndoStack((prev) => [
+    if (addToHistory) {
-      ...prev,
+      const rels = relationships.reduce((acc, r) => {
-      {
+        if (
-        action: Action.EDIT,
+          (r.startTableId === tid && r.startFieldId === field.id) ||
-        element: ObjectType.TABLE,
+          (r.endTableId === tid && r.endFieldId === field.id)
-        component: "field_delete",
+        ) {
-        tid: tid,
+          acc.push(r);
-        data: field,
+        }
-        message: t("edit_table", {
+        return acc;
-          tableName: tables[tid].name,
+      }, []);
-          extra: "[delete field]",
+      setUndoStack((prev) => [
-        }),
+        ...prev,
-      },
+        {
-    ]);
+          action: Action.EDIT,
-    setRedoStack([]);
+          element: ObjectType.TABLE,
-    setRelationships((prev) =>
+          component: "field_delete",
-      prev
+          tid: tid,
+          data: {
+            field: field,
+            relationship: rels,
+          },
+          message: t("edit_table", {
+            tableName: tables[tid].name,
+            extra: "[delete field]",
+          }),
+        },
+      ]);
+      setRedoStack([]);
+    }
+    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) => {
-    );
+          if (e.startTableId === tid && e.startFieldId > field.id) {
-    setRelationships((prev) => {
+            return {
-      return prev.map((e) => {
+              ...e,
-        if (e.startTableId === tid && e.startFieldId > field.id) {
+              startFieldId: e.startFieldId - 1,
-          return {
+              id: i,
-            ...e,
+            };
-            startFieldId: e.startFieldId - 1,
+          }
-          };
+          if (e.endTableId === tid && e.endFieldId > field.id) {
-        }
+            return {
-        if (e.endTableId === tid && e.endFieldId > field.id) {
+              ...e,
-          return {
+              endFieldId: e.endFieldId - 1,
-            ...e,
+              id: i,
-            endFieldId: e.endFieldId - 1,
+            };
-          };
+          }
-        }
+          return { ...e, id: i };
-        return e;
+        });
-      });
+      return temp;
     });
     updateTable(tid, {
       fields: tables[tid].fields