smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: simplify zoom by removing zoom.translation (#4477)

Browse source
This commit is contained in:
David Luzar 2022-01-29 21:12:44 +01:00 • committed by GitHub
parent e4edda4555
commit 79d323fab1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 152 additions and 408 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/tests/__snapshots__/contextmenu.test.tsx.snap
View file

@ -72,10 +72,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -242,10 +238,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -563,10 +555,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -884,10 +872,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -1052,10 +1036,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -1258,10 +1238,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -1523,10 +1499,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -1856,10 +1828,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -2611,10 +2579,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -2932,10 +2896,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -3257,10 +3217,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -3656,10 +3612,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -3923,10 +3875,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -4255,10 +4203,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -4360,10 +4304,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -4441,10 +4381,6 @@ Object {
"width": 200,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}

216
src/tests/__snapshots__/regressionTests.test.tsx.snap
View file

@ -83,10 +83,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -572,10 +568,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -1043,10 +1035,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -1858,10 +1846,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -2075,10 +2059,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -2549,10 +2529,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -2809,10 +2785,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -2982,10 +2954,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -3441,10 +3409,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -3690,10 +3654,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -3904,10 +3864,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -4156,10 +4112,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -4419,10 +4371,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -4839,10 +4787,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -5123,10 +5067,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -5428,10 +5368,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -5621,10 +5557,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -5791,10 +5723,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -6272,10 +6200,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -6596,10 +6520,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -8723,10 +8643,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -9101,10 +9017,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -9362,10 +9274,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -9589,10 +9497,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -9875,10 +9779,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -10045,10 +9945,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -10215,10 +10111,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -10385,10 +10277,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -10585,10 +10473,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -10785,10 +10669,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -11003,10 +10883,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -11203,10 +11079,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -11373,10 +11245,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -11543,10 +11411,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -11743,10 +11607,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -11913,10 +11773,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -12142,10 +11998,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -12884,10 +12736,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -13123,7 +12971,7 @@ Object {
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": -5.416666666666667,
"scrollX": -2.916666666666668,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
@ -13143,10 +12991,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0.4166666666666714,
"y": 0,
},
"value": 1,
},
}
@ -13246,10 +13090,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -13354,10 +13194,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -13533,10 +13369,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -13858,10 +13690,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -14077,10 +13905,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -14925,10 +14749,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -15032,10 +14852,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -15849,10 +15665,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -16269,10 +16081,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -16508,8 +16316,8 @@ Object {
"pendingImageElement": null,
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 11.046099290780141,
"scrollY": -5,
"scrollX": 10,
"scrollY": -10,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
@ -16528,11 +16336,7 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": -59.425,
"y": -48.66347517730496,
},
"value": 1.99,
"value": 1,
},
}
`;
@ -16633,10 +16437,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -17148,10 +16948,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}
@ -17251,10 +17047,6 @@ Object {
"width": 1024,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}

4
src/tests/data/restore.test.ts
View file

@ -415,16 +415,12 @@ describe("restoreAppState", () => {
);
expect(restoredAppState.zoom.value).toBe(10);
expect(restoredAppState.zoom.translation).toMatchObject(
getDefaultAppState().zoom.translation,
);
});
it("when the zoom of imported data state is not a number", () => {
const stubImportedAppState = getDefaultAppState();
stubImportedAppState.zoom = {
value: 10 as NormalizedZoomValue,
translation: { x: 5, y: 3 },
};
const stubLocalAppState = getDefaultAppState();

6
src/tests/helpers/ui.ts
View file

@ -87,8 +87,8 @@ export class Keyboard {
}
export class Pointer {
private clientX = 0;
private clientY = 0;
public clientX = 0;
public clientY = 0;
constructor(
private readonly pointerType: "mouse" | "touch" | "pen",
@ -156,7 +156,7 @@ export class Pointer {
// absolute coords
// ---------------------------------------------------------------------------
moveTo(x: number, y: number) {
moveTo(x: number = this.clientX, y: number = this.clientY) {
this.clientX = x;
this.clientY = y;
fireEvent.pointerMove(GlobalTestState.canvas, this.getEvent());

4
src/tests/packages/__snapshots__/utils.test.ts.snap
View file

@ -67,10 +67,6 @@ Object {
"viewModeEnabled": false,
"zenModeEnabled": false,
"zoom": Object {
"translation": Object {
"x": 0,
"y": 0,
},
"value": 1,
},
}

39
src/tests/regressionTests.test.tsx
View file

@ -287,22 +287,39 @@ describe("regression tests", () => {
});
it("two-finger scroll works", () => {
const startScrollY = h.state.scrollY;
finger1.down(50, 50);
finger2.down(60, 50);
// scroll horizontally vertically
finger1.up(0, -10);
finger2.up(0, -10);
const startScrollY = h.state.scrollY;
finger1.downAt(0, 0);
finger2.downAt(10, 0);
finger1.clientY -= 10;
finger2.clientY -= 10;
finger1.moveTo();
finger2.moveTo();
finger1.upAt();
finger2.upAt();
expect(h.state.scrollY).toBeLessThan(startScrollY);
// scroll horizontally
const startScrollX = h.state.scrollX;
finger1.restorePosition(50, 50);
finger2.restorePosition(50, 60);
finger1.down();
finger2.down();
finger1.up(10, 0);
finger2.up(10, 0);
finger1.downAt();
finger2.downAt();
finger1.clientX += 10;
finger2.clientX += 10;
finger1.moveTo();
finger2.moveTo();
finger1.upAt();
finger2.upAt();
expect(h.state.scrollX).toBeGreaterThan(startScrollX);
});