From 32615ba44be2d5d808b439a2713a50b1870cf262 Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Sat, 19 Oct 2024 15:20:31 +0300
Subject: [PATCH] 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
---
 .../primitives/numeric-gesture-control.ts       | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/primitives/numeric-gesture-control.ts b/packages/design-system/src/components/primitives/numeric-gesture-control.ts
index 7f5d68888a7..5f319a6c4fa 100644
--- a/packages/design-system/src/components/primitives/numeric-gesture-control.ts
+++ b/packages/design-system/src/components/primitives/numeric-gesture-control.ts
@@ -169,9 +169,9 @@ export const numericScrubControl = (
 
         onStart?.();
         state.value = getInitialValue();
-        state.timerId = setTimeout(() => {
+        state.timerId = setTimeout(async () => {
           exitPointerLock?.();
-          exitPointerLock = requestPointerLock(state, event, targetNode);
+          exitPointerLock = await requestPointerLock(state, event, targetNode);
         }, 150);
 
         targetNode.addEventListener("pointermove", handleEvent);
@@ -272,7 +272,7 @@ const setRootStyle = (
   };
 };
 
-const requestPointerLock = (
+const requestPointerLock = async (
   state: NumericScrubState,
   event: PointerEvent,
   targetNode: HTMLElement | SVGElement
@@ -287,8 +287,15 @@ const requestPointerLock = (
   // 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:
   // albeit without an infinite cursor ux.
   if (shouldUsePointerLock) {
-    // @ts-expect-error - unadjustedMovement is a chromium only feature, fixes random movementX|Y jumps on windows
-    targetNode.requestPointerLock({ unadjustedMovement: true });
+    // based on https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock is async
+    try {
+      // @ts-expect-error - unadjustedMovement is a chromium only feature, fixes random movementX|Y jumps on windows
+      await targetNode.requestPointerLock({ unadjustedMovement: true });
+    } catch {
+      // Some platforms may not support unadjusted movement.
+      await targetNode.requestPointerLock();
+    }
+
     const cursorNode = (targetNode.ownerDocument.querySelector(
       "#numeric-guesture-control-cursor"
     ) ||