fix: bail on noop updates for newElementWith (#3279)

src/element/mutateElement.ts

@@ -87,9 +87,30 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 export const newElementWith = <TElement extends ExcalidrawElement>(
   element: TElement,
   updates: ElementUpdate<TElement>,
-): TElement => ({
-  ...element,
-  ...updates,
-  version: element.version + 1,
-  versionNonce: randomInteger(),
-});
+): TElement => {
+  let didChange = false;
+  for (const key in updates) {
+    const value = (updates as any)[key];
+    if (typeof value !== "undefined") {
+      if (
+        (element as any)[key] === value &&
+        // if object, always update in case its deep prop was mutated
+        (typeof value !== "object" || value === null || key === "groupIds")
+      ) {
+        continue;
+      }
+      didChange = true;
+    }
+  }
+
+  if (!didChange) {
+    return element;
+  }
+
+  return {
+    ...element,
+    ...updates,
+    version: element.version + 1,
+    versionNonce: randomInteger(),
+  };
+};

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

@@ -3357,8 +3357,8 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
-  "version": 8,
-  "versionNonce": 1116226695,
+  "version": 4,
+  "versionNonce": 453191,
   "width": 10,
   "x": 10,
   "y": 10,
@@ -3429,7 +3429,7 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "transparent",
+          "backgroundColor": "#fa5252",
           "boundElementIds": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
@@ -3475,85 +3475,13 @@ Object {
           "opacity": 100,
           "roughness": 1,
           "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 5,
-          "versionNonce": 401146281,
-          "width": 10,
-          "x": 10,
-          "y": 10,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "#fa5252",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 6,
-          "versionNonce": 2019559783,
-          "width": 10,
-          "x": 10,
-          "y": 10,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "#fa5252",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
           "strokeColor": "#5f3dc4",
           "strokeSharpness": "sharp",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 8,
-          "versionNonce": 1116226695,
+          "version": 4,
+          "versionNonce": 453191,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -14745,7 +14673,7 @@ Object {
   "strokeWidth": 2,
   "type": "rectangle",
   "version": 3,
-  "versionNonce": 81784553,
+  "versionNonce": 1505387817,
   "width": 20,
   "x": 10,
   "y": 10,
@@ -14764,14 +14692,14 @@ Object {
   "isDeleted": false,
   "opacity": 60,
   "roughness": 2,
-  "seed": 23633383,
+  "seed": 238820263,
   "strokeColor": "#c92a2a",
   "strokeSharpness": "sharp",
   "strokeStyle": "dotted",
   "strokeWidth": 2,
   "type": "rectangle",
-  "version": 13,
-  "versionNonce": 915032327,
+  "version": 9,
+  "versionNonce": 1604849351,
   "width": 20,
   "x": 40,
   "y": 40,
@@ -14934,7 +14862,7 @@ Object {
           "opacity": 100,
           "roughness": 1,
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "solid",
           "strokeWidth": 1,
@@ -14983,124 +14911,6 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id1",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 449462985,
-          "strokeColor": "#c92a2a",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 5,
-          "versionNonce": 1150084233,
-          "width": 20,
-          "x": 40,
-          "y": 40,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id1": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 2,
-          "versionNonce": 1278240551,
-          "width": 20,
-          "x": 10,
-          "y": 10,
-        },
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id1",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 449462985,
-          "strokeColor": "#c92a2a",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 6,
-          "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": 40,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id1": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 2,
-          "versionNonce": 1278240551,
-          "width": 20,
-          "x": 10,
-          "y": 10,
-        },
-        Object {
-          "angle": 0,
           "backgroundColor": "#e64980",
           "boundElementIds": null,
           "fillStyle": "hachure",
@@ -15116,8 +14926,8 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 8,
-          "versionNonce": 238820263,
+          "version": 4,
+          "versionNonce": 2019559783,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -15175,8 +14985,8 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 9,
-          "versionNonce": 400692809,
+          "version": 5,
+          "versionNonce": 1150084233,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -15234,8 +15044,8 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 10,
-          "versionNonce": 1604849351,
+          "version": 6,
+          "versionNonce": 1116226695,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -15293,8 +15103,8 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 11,
-          "versionNonce": 1505387817,
+          "version": 7,
+          "versionNonce": 1014066025,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -15346,14 +15156,14 @@ Object {
           "isDeleted": false,
           "opacity": 100,
           "roughness": 2,
-          "seed": 23633383,
+          "seed": 238820263,
           "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 12,
-          "versionNonce": 493213705,
+          "version": 8,
+          "versionNonce": 400692809,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -15405,14 +15215,14 @@ Object {
           "isDeleted": false,
           "opacity": 60,
           "roughness": 2,
-          "seed": 23633383,
+          "seed": 238820263,
           "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 13,
-          "versionNonce": 915032327,
+          "version": 9,
+          "versionNonce": 1604849351,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -15448,7 +15258,7 @@ Object {
           "strokeWidth": 2,
           "type": "rectangle",
           "version": 3,
-          "versionNonce": 81784553,
+          "versionNonce": 1505387817,
           "width": 20,
           "x": 10,
           "y": 10,
@@ -15464,14 +15274,14 @@ Object {
           "isDeleted": false,
           "opacity": 60,
           "roughness": 2,
-          "seed": 23633383,
+          "seed": 238820263,
           "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 13,
-          "versionNonce": 915032327,
+          "version": 9,
+          "versionNonce": 1604849351,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -17069,8 +16879,8 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
-  "version": 5,
-  "versionNonce": 401146281,
+  "version": 3,
+  "versionNonce": 449462985,
   "width": 10,
   "x": 0,
   "y": 0,
@@ -17141,7 +16951,7 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "transparent",
+          "backgroundColor": "#fa5252",
           "boundElementIds": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
@@ -17164,42 +16974,6 @@ Object {
         },
       ],
     },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "#fa5252",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 5,
-          "versionNonce": 401146281,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-      ],
-    },
   ],
 }
 `;
@@ -20607,7 +20381,7 @@ Object {
   "strokeWidth": 1,
   "type": "rectangle",
   "version": 6,
-  "versionNonce": 1006504105,
+  "versionNonce": 760410951,
   "width": 20,
   "x": 10,
   "y": -10,
@@ -20633,7 +20407,7 @@ Object {
   "strokeWidth": 1,
   "type": "rectangle",
   "version": 6,
-  "versionNonce": 289600103,
+  "versionNonce": 1006504105,
   "width": 30,
   "x": 40,
   "y": 0,
@@ -20676,8 +20450,8 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
-  "version": 11,
-  "versionNonce": 1315507081,
+  "version": 9,
+  "versionNonce": 81784553,
   "width": 60,
   "x": 130,
   "y": 10,