sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Luzar 2021-03-20 13:29:53 +01:00 committed by GitHub
parent cf6a5ff16b
commit 9a13dd8836
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 173 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/element/mutateElement.ts
View File

@ -87,9 +87,30 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
export const newElementWith = <TElement extends ExcalidrawElement>( export const newElementWith = <TElement extends ExcalidrawElement>(
element: TElement, element: TElement,
updates: ElementUpdate<TElement>, updates: ElementUpdate<TElement>,
): TElement => ({ ): TElement => {
...element, let didChange = false;
...updates, for (const key in updates) {
version: element.version + 1, const value = (updates as any)[key];
versionNonce: randomInteger(), 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(),
};
};

518
src/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@ -3357,8 +3357,8 @@ Object {
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 1,
"type": "rectangle", "type": "rectangle",
"version": 8, "version": 4,
"versionNonce": 1116226695, "versionNonce": 453191,
"width": 10, "width": 10,
"x": 10, "x": 10,
"y": 10, "y": 10,
@ -3429,7 +3429,7 @@ Object {
"elements": Array [ "elements": Array [
Object { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "#fa5252",
"boundElementIds": null, "boundElementIds": null,
"fillStyle": "hachure", "fillStyle": "hachure",
"groupIds": Array [], "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 { Object {
"appState": Object { "appState": Object {
"editingGroupId": null, "editingGroupId": null,
@ -3552,8 +3480,8 @@ Object {
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 1,
"type": "rectangle", "type": "rectangle",
"version": 8, "version": 4,
"versionNonce": 1116226695, "versionNonce": 453191,
"width": 10, "width": 10,
"x": 10, "x": 10,
"y": 10, "y": 10,
@ -14745,7 +14673,7 @@ Object {
"strokeWidth": 2, "strokeWidth": 2,
"type": "rectangle", "type": "rectangle",
"version": 3, "version": 3,
"versionNonce": 81784553, "versionNonce": 1505387817,
"width": 20, "width": 20,
"x": 10, "x": 10,
"y": 10, "y": 10,
@ -14764,14 +14692,14 @@ Object {
"isDeleted": false, "isDeleted": false,
"opacity": 60, "opacity": 60,
"roughness": 2, "roughness": 2,
"seed": 23633383, "seed": 238820263,
"strokeColor": "#c92a2a", "strokeColor": "#c92a2a",
"strokeSharpness": "sharp", "strokeSharpness": "sharp",
"strokeStyle": "dotted", "strokeStyle": "dotted",
"strokeWidth": 2, "strokeWidth": 2,
"type": "rectangle", "type": "rectangle",
"version": 13, "version": 9,
"versionNonce": 915032327, "versionNonce": 1604849351,
"width": 20, "width": 20,
"x": 40, "x": 40,
"y": 40, "y": 40,
@ -14934,7 +14862,7 @@ Object {
"opacity": 100, "opacity": 100,
"roughness": 1, "roughness": 1,
"seed": 449462985, "seed": 449462985,
"strokeColor": "#000000", "strokeColor": "#c92a2a",
"strokeSharpness": "sharp", "strokeSharpness": "sharp",
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 1,
@ -14981,6 +14909,42 @@ Object {
"x": 10, "x": 10,
"y": 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 { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -14988,6 +14952,29 @@ Object {
"fillStyle": "hachure", "fillStyle": "hachure",
"groupIds": Array [], "groupIds": Array [],
"height": 20, "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", "id": "id1",
"isDeleted": false, "isDeleted": false,
"opacity": 100, "opacity": 100,
@ -15042,9 +15029,9 @@ Object {
}, },
Object { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "#e64980",
"boundElementIds": null, "boundElementIds": null,
"fillStyle": "hachure", "fillStyle": "cross-hatch",
"groupIds": Array [], "groupIds": Array [],
"height": 20, "height": 20,
"id": "id1", "id": "id1",
@ -15055,7 +15042,7 @@ Object {
"strokeColor": "#c92a2a", "strokeColor": "#c92a2a",
"strokeSharpness": "sharp", "strokeSharpness": "sharp",
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 2,
"type": "rectangle", "type": "rectangle",
"version": 6, "version": 6,
"versionNonce": 1116226695, "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 { Object {
"appState": Object { "appState": Object {
"editingGroupId": null, "editingGroupId": null,
@ -15172,10 +15100,69 @@ Object {
"seed": 449462985, "seed": 449462985,
"strokeColor": "#c92a2a", "strokeColor": "#c92a2a",
"strokeSharpness": "sharp", "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", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 1,
"type": "rectangle", "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, "versionNonce": 400692809,
"width": 20, "width": 20,
"x": 40, "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 { Object {
"appState": Object { "appState": Object {
"editingGroupId": null, "editingGroupId": null,
@ -15405,14 +15215,14 @@ Object {
"isDeleted": false, "isDeleted": false,
"opacity": 60, "opacity": 60,
"roughness": 2, "roughness": 2,
"seed": 23633383, "seed": 238820263,
"strokeColor": "#c92a2a", "strokeColor": "#c92a2a",
"strokeSharpness": "sharp", "strokeSharpness": "sharp",
"strokeStyle": "dotted", "strokeStyle": "dotted",
"strokeWidth": 2, "strokeWidth": 2,
"type": "rectangle", "type": "rectangle",
"version": 13, "version": 9,
"versionNonce": 915032327, "versionNonce": 1604849351,
"width": 20, "width": 20,
"x": 40, "x": 40,
"y": 40, "y": 40,
@ -15448,7 +15258,7 @@ Object {
"strokeWidth": 2, "strokeWidth": 2,
"type": "rectangle", "type": "rectangle",
"version": 3, "version": 3,
"versionNonce": 81784553, "versionNonce": 1505387817,
"width": 20, "width": 20,
"x": 10, "x": 10,
"y": 10, "y": 10,
@ -15464,14 +15274,14 @@ Object {
"isDeleted": false, "isDeleted": false,
"opacity": 60, "opacity": 60,
"roughness": 2, "roughness": 2,
"seed": 23633383, "seed": 238820263,
"strokeColor": "#c92a2a", "strokeColor": "#c92a2a",
"strokeSharpness": "sharp", "strokeSharpness": "sharp",
"strokeStyle": "dotted", "strokeStyle": "dotted",
"strokeWidth": 2, "strokeWidth": 2,
"type": "rectangle", "type": "rectangle",
"version": 13, "version": 9,
"versionNonce": 915032327, "versionNonce": 1604849351,
"width": 20, "width": 20,
"x": 40, "x": 40,
"y": 40, "y": 40,
@ -17069,8 +16879,8 @@ Object {
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 1,
"type": "rectangle", "type": "rectangle",
"version": 5, "version": 3,
"versionNonce": 401146281, "versionNonce": 449462985,
"width": 10, "width": 10,
"x": 0, "x": 0,
"y": 0, "y": 0,
@ -17141,7 +16951,7 @@ Object {
"elements": Array [ "elements": Array [
Object { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "#fa5252",
"boundElementIds": null, "boundElementIds": null,
"fillStyle": "hachure", "fillStyle": "hachure",
"groupIds": Array [], "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, "strokeWidth": 1,
"type": "rectangle", "type": "rectangle",
"version": 6, "version": 6,
"versionNonce": 1006504105, "versionNonce": 760410951,
"width": 20, "width": 20,
"x": 10, "x": 10,
"y": -10, "y": -10,
@ -20633,7 +20407,7 @@ Object {
"strokeWidth": 1, "strokeWidth": 1,
"type": "rectangle", "type": "rectangle",
"version": 6, "version": 6,
"versionNonce": 289600103, "versionNonce": 1006504105,
"width": 30, "width": 30,
"x": 40, "x": 40,
"y": 0, "y": 0,
@ -20676,8 +20450,8 @@ Object {
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 1, "strokeWidth": 1,
"type": "arrow", "type": "arrow",
"version": 11, "version": 9,
"versionNonce": 1315507081, "versionNonce": 81784553,
"width": 60, "width": 60,
"x": 130, "x": 130,
"y": 10, "y": 10,