Fix bug: Undo multi element (#1461)

* Add failing test

* Fix multi element undo

* Update snapshots

src/components/App.tsx

@@ -266,7 +266,7 @@ class App extends React.Component<any, AppState> {
       }
       this.setState((state) => ({
         ...res.appState,
-        editingElement: editingElement || state.editingElement,
+        editingElement: editingElement || res.appState?.editingElement || null,
         isCollaborating: state.isCollaborating,
         collaborators: state.collaborators,
       }));

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -1630,32 +1630,7 @@ Object {
   "cursorX": 0,
   "cursorY": 0,
   "draggingElement": null,
-  "editingElement": Object {
-    "angle": 0,
-    "backgroundColor": "transparent",
-    "fillStyle": "hachure",
-    "height": 0,
-    "id": "id6",
-    "isDeleted": false,
-    "lastCommittedPoint": null,
-    "opacity": 100,
-    "points": Array [
-      Array [
-        0,
-        0,
-      ],
-    ],
-    "roughness": 1,
-    "seed": 845789479,
-    "strokeColor": "#000000",
-    "strokeWidth": 1,
-    "type": "line",
-    "version": 6,
-    "versionNonce": 745419401,
-    "width": 0,
-    "x": 30,
-    "y": 30,
-  },
+  "editingElement": null,
   "elementLocked": false,
   "elementType": "selection",
   "errorMessage": null,
@@ -13437,17 +13412,31 @@ Object {
   "height": 10,
   "id": "id2",
   "isDeleted": true,
+  "lastCommittedPoint": Array [
+    10,
+    10,
+  ],
   "opacity": 100,
+  "points": Array [
+    Array [
+      0,
+      0,
+    ],
+    Array [
+      10,
+      10,
+    ],
+  ],
   "roughness": 1,
   "seed": 1116226695,
   "strokeColor": "#000000",
   "strokeWidth": 1,
-  "type": "rectangle",
-  "version": 5,
-  "versionNonce": 1006504105,
+  "type": "arrow",
+  "version": 9,
+  "versionNonce": 2004587015,
   "width": 10,
-  "x": 50,
-  "y": 10,
+  "x": 10,
+  "y": 30,
 }
 `;
 
@@ -13516,21 +13505,131 @@ Object {
           "angle": 0,
           "backgroundColor": "transparent",
           "fillStyle": "hachure",
-          "height": 10,
+          "height": 20,
           "id": "id2",
           "isDeleted": false,
+          "lastCommittedPoint": Array [
+            0,
+            20,
+          ],
           "opacity": 100,
+          "points": Array [
+            Array [
+              0,
+              0,
+            ],
+            Array [
+              10,
+              10,
+            ],
+            Array [
+              0,
+              20,
+            ],
+          ],
           "roughness": 1,
           "seed": 1116226695,
           "strokeColor": "#000000",
           "strokeWidth": 1,
+          "type": "arrow",
+          "version": 8,
+          "versionNonce": 81784553,
+          "width": 10,
+          "x": 10,
+          "y": 30,
+        },
+      ],
+    },
+    Object {
+      "appState": Object {
+        "currentItemBackgroundColor": "transparent",
+        "currentItemFillStyle": "hachure",
+        "currentItemFont": "20px Virgil",
+        "currentItemOpacity": 100,
+        "currentItemRoughness": 1,
+        "currentItemStrokeColor": "#000000",
+        "currentItemStrokeWidth": 1,
+        "currentItemTextAlign": "left",
+        "exportBackground": true,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": Object {
+          "id2": true,
+        },
+        "shouldAddWatermark": false,
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": Array [
+        Object {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "fillStyle": "hachure",
+          "height": 10,
+          "id": "id0",
+          "isDeleted": false,
+          "opacity": 100,
+          "roughness": 1,
+          "seed": 337897,
+          "strokeColor": "#000000",
+          "strokeWidth": 1,
           "type": "rectangle",
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1278240551,
           "width": 10,
-          "x": 50,
+          "x": 10,
+          "y": 10,
+        },
+        Object {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "fillStyle": "hachure",
+          "height": 10,
+          "id": "id1",
+          "isDeleted": false,
+          "opacity": 100,
+          "roughness": 1,
+          "seed": 453191,
+          "strokeColor": "#000000",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "version": 3,
+          "versionNonce": 401146281,
+          "width": 10,
+          "x": 30,
           "y": 10,
         },
+        Object {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "fillStyle": "hachure",
+          "height": 10,
+          "id": "id2",
+          "isDeleted": false,
+          "lastCommittedPoint": Array [
+            10,
+            10,
+          ],
+          "opacity": 100,
+          "points": Array [
+            Array [
+              0,
+              0,
+            ],
+            Array [
+              10,
+              10,
+            ],
+          ],
+          "roughness": 1,
+          "seed": 1116226695,
+          "strokeColor": "#000000",
+          "strokeWidth": 1,
+          "type": "arrow",
+          "version": 6,
+          "versionNonce": 1604849351,
+          "width": 10,
+          "x": 10,
+          "y": 30,
+        },
       ],
     },
   ],
@@ -13640,7 +13739,7 @@ Object {
 
 exports[`regression tests undo/redo drawing an element: [end of test] number of elements 1`] = `3`;
 
-exports[`regression tests undo/redo drawing an element: [end of test] number of renders 1`] = `17`;
+exports[`regression tests undo/redo drawing an element: [end of test] number of renders 1`] = `24`;
 
 exports[`regression tests zoom hotkeys: [end of test] appState 1`] = `
 Object {

src/tests/regressionTests.test.tsx

@@ -542,12 +542,19 @@ describe("regression tests", () => {
     pointerMove(40, 20);
     pointerUp();
 
-    clickTool("rectangle");
-    pointerDown(50, 10);
-    pointerMove(60, 20);
+    clickTool("arrow");
+    pointerDown(10, 30);
     pointerUp();
+    pointerMove(20, 40);
+    pointerDown(20, 40);
+    pointerUp();
+    pointerMove(10, 50);
+    pointerDown(10, 50);
+    pointerUp();
+    hotkeyPress("ENTER");
 
     expect(h.elements.filter((element) => !element.isDeleted).length).toBe(3);
+    keyPress("z", true); // press twice for multi arrow
     keyPress("z", true);
     expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
     keyPress("z", true);