From 9a13dd8836ecdfd2dc1d37e2a9b790244c91be75 Mon Sep 17 00:00:00 2001 From: David Luzar Date: Sat, 20 Mar 2021 13:29:53 +0100 Subject: [PATCH] fix: bail on noop updates for newElementWith (#3279) --- src/element/mutateElement.ts | 33 +- .../regressionTests.test.tsx.snap | 518 +++++------------- 2 files changed, 173 insertions(+), 378 deletions(-) diff --git a/src/element/mutateElement.ts b/src/element/mutateElement.ts index 8014efe7..32795c33 100644 --- a/src/element/mutateElement.ts +++ b/src/element/mutateElement.ts @@ -87,9 +87,30 @@ export const mutateElement = >( export const newElementWith = ( element: TElement, updates: ElementUpdate, -): 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(), + }; +}; diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index ee0f830c..75e10faa 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/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 [], @@ -3452,78 +3452,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": 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, @@ -3552,8 +3480,8 @@ Object { "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, @@ -14981,6 +14909,42 @@ Object { "x": 10, "y": 10, }, + Object { + "angle": 0, + "backgroundColor": "#e64980", + "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": 4, + "versionNonce": 2019559783, + "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", @@ -14988,6 +14952,29 @@ Object { "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": "cross-hatch", + "groupIds": Array [], + "height": 20, "id": "id1", "isDeleted": false, "opacity": 100, @@ -15042,9 +15029,9 @@ Object { }, Object { "angle": 0, - "backgroundColor": "transparent", + "backgroundColor": "#e64980", "boundElementIds": null, - "fillStyle": "hachure", + "fillStyle": "cross-hatch", "groupIds": Array [], "height": 20, "id": "id1", @@ -15055,7 +15042,7 @@ Object { "strokeColor": "#c92a2a", "strokeSharpness": "sharp", "strokeStyle": "solid", - "strokeWidth": 1, + "strokeWidth": 2, "type": "rectangle", "version": 6, "versionNonce": 1116226695, @@ -15065,65 +15052,6 @@ Object { }, ], }, - 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", - "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": 8, - "versionNonce": 238820263, - "width": 20, - "x": 40, - "y": 40, - }, - ], - }, Object { "appState": Object { "editingGroupId": null, @@ -15172,10 +15100,69 @@ Object { "seed": 449462985, "strokeColor": "#c92a2a", "strokeSharpness": "sharp", + "strokeStyle": "dotted", + "strokeWidth": 2, + "type": "rectangle", + "version": 7, + "versionNonce": 1014066025, + "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": 9, + "version": 2, + "versionNonce": 1278240551, + "width": 20, + "x": 10, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "#e64980", + "boundElementIds": null, + "fillStyle": "cross-hatch", + "groupIds": Array [], + "height": 20, + "id": "id1", + "isDeleted": false, + "opacity": 100, + "roughness": 2, + "seed": 238820263, + "strokeColor": "#c92a2a", + "strokeSharpness": "sharp", + "strokeStyle": "dotted", + "strokeWidth": 2, + "type": "rectangle", + "version": 8, "versionNonce": 400692809, "width": 20, "x": 40, @@ -15183,183 +15170,6 @@ Object { }, ], }, - 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": "cross-hatch", - "groupIds": Array [], - "height": 20, - "id": "id1", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 449462985, - "strokeColor": "#c92a2a", - "strokeSharpness": "sharp", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "version": 10, - "versionNonce": 1604849351, - "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": "cross-hatch", - "groupIds": Array [], - "height": 20, - "id": "id1", - "isDeleted": false, - "opacity": 100, - "roughness": 1, - "seed": 449462985, - "strokeColor": "#c92a2a", - "strokeSharpness": "sharp", - "strokeStyle": "dotted", - "strokeWidth": 2, - "type": "rectangle", - "version": 11, - "versionNonce": 1505387817, - "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": "cross-hatch", - "groupIds": Array [], - "height": 20, - "id": "id1", - "isDeleted": false, - "opacity": 100, - "roughness": 2, - "seed": 23633383, - "strokeColor": "#c92a2a", - "strokeSharpness": "sharp", - "strokeStyle": "dotted", - "strokeWidth": 2, - "type": "rectangle", - "version": 12, - "versionNonce": 493213705, - "width": 20, - "x": 40, - "y": 40, - }, - ], - }, Object { "appState": Object { "editingGroupId": null, @@ -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,