skip element mutation on noop updates (#1667)

src/element/mutateElement.ts

@@ -17,22 +17,36 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   element: TElement,
   updates: ElementUpdate<TElement>,
 ) => {
+  let didChange = false;
+
   // casting to any because can't use `in` operator
   // (see https://github.com/microsoft/TypeScript/issues/21732)
   const { points } = updates as any;
 
   if (typeof points !== "undefined") {
+    didChange = true;
     updates = { ...getSizeFromPoints(points), ...updates };
   }
 
   for (const key in updates) {
     const value = (updates as any)[key];
     if (typeof value !== "undefined") {
-      // @ts-ignore
-      element[key] = value;
+      if (
+        (element as any)[key] === value &&
+        // if object, always update in case its deep prop was mutated
+        (typeof value !== "object" || value === null)
+      ) {
+        continue;
+      }
+      (element as any)[key] = value;
+      didChange = true;
     }
   }
 
+  if (!didChange) {
+    return;
+  }
+
   if (
     typeof updates.height !== "undefined" ||
     typeof updates.width !== "undefined" ||

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

@@ -40,8 +40,8 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
-  "version": 5,
-  "versionNonce": 1116226695,
+  "version": 4,
+  "versionNonce": 1150084233,
   "width": 30,
   "x": -10,
   "y": 60,

src/tests/move.test.tsx

@@ -83,7 +83,7 @@ describe("duplicate element on move when ALT is clicked", () => {
     fireEvent.pointerMove(canvas, { clientX: 10, clientY: 60 });
     fireEvent.pointerUp(canvas);
 
-    expect(renderScene).toHaveBeenCalledTimes(5);
+    expect(renderScene).toHaveBeenCalledTimes(4);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(2);