From 4f3bf79708fed1898f82d38f8f65433181db7a88 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Thu, 28 May 2020 09:50:56 +0200
Subject: [PATCH] skip element mutation on noop updates (#1667)

---
 src/element/mutateElement.ts               | 18 ++++++++++++++++--
 src/tests/__snapshots__/move.test.tsx.snap |  4 ++--
 src/tests/move.test.tsx                    |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/element/mutateElement.ts b/src/element/mutateElement.ts
index fd39bd65..06c532b9 100644
--- a/src/element/mutateElement.ts
+++ b/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" ||
diff --git a/src/tests/__snapshots__/move.test.tsx.snap b/src/tests/__snapshots__/move.test.tsx.snap
index 0239b73c..a07f1b22 100644
--- a/src/tests/__snapshots__/move.test.tsx.snap
+++ b/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,
diff --git a/src/tests/move.test.tsx b/src/tests/move.test.tsx
index 80aff13a..2d97e4a6 100644
--- a/src/tests/move.test.tsx
+++ b/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);