Skip to content

Commit 32615ba

Browse files
authored
fix: Canvas resize on Linux (#4310)
## Description https://discord.com/channels/955905230107738152/1297002444647170129/1297002444647170129 ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file
1 parent 513d786 commit 32615ba

File tree

1 file changed

+12
-5
lines changed

1 file changed

+12
-5
lines changed

packages/design-system/src/components/primitives/numeric-gesture-control.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,9 @@ export const numericScrubControl = (
169169

170170
onStart?.();
171171
state.value = getInitialValue();
172-
state.timerId = setTimeout(() => {
172+
state.timerId = setTimeout(async () => {
173173
exitPointerLock?.();
174-
exitPointerLock = requestPointerLock(state, event, targetNode);
174+
exitPointerLock = await requestPointerLock(state, event, targetNode);
175175
}, 150);
176176

177177
targetNode.addEventListener("pointermove", handleEvent);
@@ -272,7 +272,7 @@ const setRootStyle = (
272272
};
273273
};
274274

275-
const requestPointerLock = (
275+
const requestPointerLock = async (
276276
state: NumericScrubState,
277277
event: PointerEvent,
278278
targetNode: HTMLElement | SVGElement
@@ -287,8 +287,15 @@ const requestPointerLock = (
287287
// other browsers show a warning banner, making the use of it in this scenario subpar: in which case we fallback to using non-pointerLock means:
288288
// albeit without an infinite cursor ux.
289289
if (shouldUsePointerLock) {
290-
// @ts-expect-error - unadjustedMovement is a chromium only feature, fixes random movementX|Y jumps on windows
291-
targetNode.requestPointerLock({ unadjustedMovement: true });
290+
// based on https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock is async
291+
try {
292+
// @ts-expect-error - unadjustedMovement is a chromium only feature, fixes random movementX|Y jumps on windows
293+
await targetNode.requestPointerLock({ unadjustedMovement: true });
294+
} catch {
295+
// Some platforms may not support unadjusted movement.
296+
await targetNode.requestPointerLock();
297+
}
298+
292299
const cursorNode = (targetNode.ownerDocument.querySelector(
293300
"#numeric-guesture-control-cursor"
294301
) ||

0 commit comments

Comments
 (0)