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

feat: make appState.selectedElementIds more stable (#6745)

Browse Source
This commit is contained in:
David Luzar
2023-07-08 23:33:34 +02:00
committed by GitHub
parent 3ddcc48e4c
commit 49e4289878
15 changed files with 503 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/tests/__snapshots__/contextmenu.test.tsx.snap
View File

@@ -2179,7 +2179,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {
@@ -2413,7 +2412,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedGroupIds": Object {
"id3": true,
@@ -4171,7 +4169,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -4399,7 +4396,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedGroupIds": Object {
"id3": true,
@@ -4479,7 +4475,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -4892,7 +4887,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -4901,8 +4895,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -5469,7 +5461,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -5478,8 +5469,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {
@@ -5713,8 +5702,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {
"id4": true,

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

@@ -65,9 +65,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id4": true,
"id6": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -76,7 +73,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id7": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {
@@ -443,8 +439,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
"id4": true,
},
"selectedGroupIds": Object {
"id5": true,
@@ -618,29 +612,20 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id5": true,
},
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": false,
"id1": true,
"id2": false,
"id3": true,
"id5": true,
"id6": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id4": false,
"id5": true,
},
"selectedLinearElement": null,
"selectionElement": null,
@@ -1003,7 +988,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {
"id4": true,
@@ -1179,7 +1163,6 @@ Object {
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id12": true,
"id7": true,
},
"selectedElementsAreBeingDragged": false,
@@ -1448,8 +1431,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {
"id4": true,
@@ -1528,7 +1509,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id5": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -1712,8 +1692,6 @@ Object {
"id0": true,
"id1": true,
"id7": true,
"id8": true,
"id9": true,
},
"selectedGroupIds": Object {
"id10": true,
@@ -1825,7 +1803,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id11": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -1934,7 +1911,6 @@ Object {
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id12": true,
"id7": true,
},
"selectedGroupIds": Object {},
@@ -2116,7 +2092,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -2239,7 +2214,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -2347,7 +2321,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -2356,8 +2329,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
"id4": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {
@@ -2724,8 +2695,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
"id4": true,
},
"selectedGroupIds": Object {
"id5": true,
@@ -2904,7 +2873,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -3059,7 +3027,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -3394,7 +3361,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id1": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -3754,7 +3720,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id1": true,
"id3": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -4247,7 +4212,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -4370,7 +4334,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -4478,7 +4441,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -4486,8 +4448,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -4610,7 +4570,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -4654,8 +4613,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -4770,7 +4727,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id2": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -5069,7 +5025,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -5522,7 +5477,6 @@ Object {
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -5875,7 +5829,6 @@ Object {
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -6423,9 +6376,7 @@ Object {
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id1": true,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,
@@ -7157,7 +7108,6 @@ Object {
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -7166,8 +7116,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -7395,8 +7343,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -7536,9 +7482,7 @@ Object {
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id7": false,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,
@@ -9539,9 +9483,7 @@ Object {
"editingGroupId": null,
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id7": false,
},
"selectedElementIds": Object {},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
},
@@ -9948,7 +9890,6 @@ Object {
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -9956,7 +9897,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id1": true,
"id4": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -10380,7 +10320,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -10389,8 +10328,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -10681,7 +10618,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -10689,7 +10625,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id1": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -10801,7 +10736,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id2": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -10938,7 +10872,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id2": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -10946,8 +10879,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -11059,7 +10990,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id2": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -11132,8 +11062,6 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -12334,9 +12262,7 @@ Object {
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": false,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,
@@ -12435,9 +12361,7 @@ Object {
"editingGroupId": null,
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": false,
},
"selectedElementIds": Object {},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
},
@@ -13439,9 +13363,7 @@ Object {
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": false,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,
@@ -13540,9 +13462,7 @@ Object {
"editingGroupId": null,
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": false,
},
"selectedElementIds": Object {},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
},
@@ -13864,7 +13784,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -13874,8 +13793,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id5": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {
@@ -14347,7 +14264,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {
"id4": true,
@@ -14459,8 +14375,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id5": true,
},
"selectedGroupIds": Object {
"id4": true,
@@ -14727,7 +14641,6 @@ Object {
"pendingImageElementId": null,
"previousSelectedElementIds": Object {
"id0": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -14735,7 +14648,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id1": true,
"id4": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -15029,9 +14941,7 @@ Object {
"scrollX": -2.916666666666668,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,
@@ -15261,10 +15171,7 @@ Object {
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": false,
"id1": true,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,
@@ -15451,8 +15358,6 @@ Object {
"previousSelectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -15461,9 +15366,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id4": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -15691,9 +15593,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
"id4": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -15832,7 +15731,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -15842,7 +15740,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id5": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -16204,7 +16101,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {
"id4": true,
@@ -16316,7 +16212,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id5": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -16487,7 +16382,6 @@ Object {
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
@@ -16728,7 +16622,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id11": true,
"id5": true,
"id6": true,
},
@@ -17036,8 +16929,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id1": true,
"id2": true,
"id3": true,
},
"selectedGroupIds": Object {
"id4": true,
@@ -17356,8 +17247,6 @@ Object {
"selectedElementIds": Object {
"id5": true,
"id6": true,
"id7": true,
"id8": true,
},
"selectedGroupIds": Object {
"id9": true,
@@ -18309,7 +18198,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id4": true,
},
"selectedGroupIds": Object {},
"viewBackgroundColor": "#ffffff",
@@ -18418,7 +18306,6 @@ Object {
"selectedElementIds": Object {
"id0": true,
"id2": true,
"id4": true,
},
"selectedGroupIds": Object {
"id5": true,
@@ -18532,7 +18419,6 @@ Object {
"id0": true,
"id1": true,
"id2": true,
"id7": true,
},
"selectedGroupIds": Object {
"id3": true,
@@ -18737,7 +18623,6 @@ Object {
"previousSelectedElementIds": Object {
"id1": true,
"id2": true,
"id3": true,
},
"resizingElement": null,
"scrollX": 0,
@@ -19552,9 +19437,7 @@ Object {
"scrollX": 10,
"scrollY": -10,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
},
"selectedElementIds": Object {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": Object {},
"selectedLinearElement": null,

40
src/tests/flip.test.tsx
View File

@@ -430,7 +430,10 @@ describe("arrow", () => {
const expectedAngle = (7 * Math.PI) / 4;
const line = createLinearElementWithCurveInsideMinMaxPoints("arrow");
h.app.scene.replaceAllElements([line]);
h.app.state.selectedElementIds[line.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[line.id]: true,
};
mutateElement(line, {
angle: originalAngle,
});
@@ -446,7 +449,10 @@ describe("arrow", () => {
const expectedAngle = (7 * Math.PI) / 4;
const line = createLinearElementWithCurveInsideMinMaxPoints("arrow");
h.app.scene.replaceAllElements([line]);
h.app.state.selectedElementIds[line.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[line.id]: true,
};
mutateElement(line, {
angle: originalAngle,
});
@@ -616,7 +622,10 @@ describe("line", () => {
const expectedAngle = (7 * Math.PI) / 4;
const line = createLinearElementWithCurveInsideMinMaxPoints("line");
h.app.scene.replaceAllElements([line]);
h.app.state.selectedElementIds[line.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[line.id]: true,
};
mutateElement(line, {
angle: originalAngle,
});
@@ -632,7 +641,10 @@ describe("line", () => {
const expectedAngle = (7 * Math.PI) / 4;
const line = createLinearElementWithCurveInsideMinMaxPoints("line");
h.app.scene.replaceAllElements([line]);
h.app.state.selectedElementIds[line.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[line.id]: true,
};
mutateElement(line, {
angle: originalAngle,
});
@@ -659,14 +671,20 @@ describe("freedraw", () => {
it("flips an unrotated drawing horizontally correctly", async () => {
const draw = createAndReturnOneDraw();
// select draw, since not done automatically
h.state.selectedElementIds[draw.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[draw.id]: true,
};
await checkHorizontalFlip();
});
it("flips an unrotated drawing vertically correctly", async () => {
const draw = createAndReturnOneDraw();
// select draw, since not done automatically
h.state.selectedElementIds[draw.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[draw.id]: true,
};
await checkVerticalFlip();
});
@@ -676,7 +694,10 @@ describe("freedraw", () => {
const draw = createAndReturnOneDraw(originalAngle);
// select draw, since not done automatically
h.state.selectedElementIds[draw.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[draw.id]: true,
};
await checkRotatedHorizontalFlip(expectedAngle);
});
@@ -687,7 +708,10 @@ describe("freedraw", () => {
const draw = createAndReturnOneDraw(originalAngle);
// select draw, since not done automatically
h.state.selectedElementIds[draw.id] = true;
h.state.selectedElementIds = {
...h.state.selectedElementIds,
[draw.id]: true,
};
await checkRotatedVerticalFlip(expectedAngle);
});

1
src/tests/zindex.test.tsx
View File

@@ -89,6 +89,7 @@ const populateElements = (
...selectGroupsForSelectedElements(
{ ...h.state, ...appState, selectedElementIds },
h.elements,
h.state,
),
...appState,
selectedElementIds,