fix: Scrub on windows (#4847)

## Description

https://discord.com/channels/955905230107738152/1337534586707644416


There are other bugs I see on Windows on my machine -
`requestPointerLock` seems too buggy.

1. In my case, wrap-around is not working.  
2. Fast clicks and movements can cause `pointerup` to not be intercepted
(because of the fix above).

Here’s how I see the issue:  

- `requestPointerLock` is asynchronous.  
- During `requestPointerLock`, we might get a `lostpointercapture`
event.
- This has a very low probability of happening on Mac.  
- On Windows, the probability is very high _(it can be caused by calling
`requestPointerLock` itself, depending on the machine)_.
- On Mac, if this happens, the `pointerup` event will most likely be
lost.
- On Windows, the `pointerup` event is usually preserved but can be lost
as well.

Currently, on Windows, instead of cleanup, we assume everything will be
fine.
On Mac, we perform cleanup on the `lostpointercapture` event.  

Windows' behavior is buggy, but I haven’t found a proper way to fix it.
There's no way to detect `event.buttons` on move, and this happens
independently of the `pointerleave` event.
Using body as lock target etc doesn't work too. 

My suggestion - if this causes new bugs - is to remove
`requestPointerLock` entirely on Windows.


## Steps for reproduction

1. click button
3. 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:
0000)
- [ ] 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

Author: istarkov

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

@@ -81,6 +81,11 @@ type NumericScrubState = {
   cursor?: SVGElement;
   direction: NumericScrubDirection;
   status: "idle" | "scrubbing";
+  /**
+   * On Windows, requestPointerLock might already be called,
+   * but document.pointerLockElement may not have been updated yet.
+   */
+  pointerCaptureRequested: boolean;
 };
 
 const getValueDefault = (
@@ -143,6 +148,14 @@ const addCursorUI = (direction: NumericScrubDirection) => {
   };
 };
 
+const isWindows = () => {
+  if (typeof window !== "undefined") {
+    return navigator.platform.toLowerCase().includes("win");
+  }
+
+  return false;
+};
+
 export const numericScrubControl = (
   targetNode: HTMLElement | SVGElement,
   options: NumericScrubOptions
@@ -168,6 +181,7 @@ export const numericScrubControl = (
     cursor: undefined,
     direction,
     status: "idle",
+    pointerCaptureRequested: false,
   };
 
   // The appearance of the custom cursor is delayed, so we need to track the mouse position
@@ -182,6 +196,8 @@ export const numericScrubControl = (
       task();
     }
 
+    cleanupTasks.length = 0;
+
     if (state.status === "scrubbing") {
       state.status = "idle";
       onStatusChange?.("idle");
@@ -209,8 +225,7 @@ export const numericScrubControl = (
       return;
     }
 
-    const { type, movementY, movementX } = event;
-    const movement = direction === "horizontal" ? movementX : -movementY;
+    const { type } = event;
 
     switch (type) {
       case "pointerup": {
@@ -230,6 +245,8 @@ export const numericScrubControl = (
         break;
       }
       case "pointerdown": {
+        cleanup();
+
         if (
           event.target &&
           shouldHandleEvent?.(event.target as Node) === false
@@ -296,6 +313,11 @@ export const numericScrubControl = (
         break;
       }
       case "pointermove": {
+        const { movementY, movementX } = event;
+
+        const movement = direction === "horizontal" ? movementX : -movementY;
+
+        // console.log("movement", movement, event);
         mouseState.x = event.clientX;
         mouseState.y = event.clientY;
 
@@ -328,12 +350,12 @@ export const numericScrubControl = (
           // When cursor moves out of the browser window
           // we want it to come back from the other side
           const top = wrapAround(
-            Number.parseFloat(state.cursor.style.top) + event.movementY,
+            Number.parseFloat(state.cursor.style.top) + movementY,
             0,
             globalThis.innerHeight
           );
           const left = wrapAround(
-            Number.parseFloat(state.cursor.style.left) + event.movementX,
+            Number.parseFloat(state.cursor.style.left) + movementX,
             0,
             globalThis.innerWidth
           );
@@ -345,11 +367,21 @@ export const numericScrubControl = (
         }
         break;
       }
+
       case "pointercancel": {
         cleanup();
         break;
       }
+
       case "lostpointercapture": {
+        // On Mac if this happens it's near 100% probability that pointerup event will not fire
+        if (isWindows()) {
+          // This Windows fix cause other bug, in some cases pointerup event will not fire
+          if (state.pointerCaptureRequested) {
+            break;
+          }
+        }
+
         if (document.pointerLockElement === null) {
           cleanup();
         }
@@ -417,18 +449,36 @@ const requestPointerLock = (
   disposeOnCleanup(() => {
     targetNode.setPointerCapture(pointerId);
     return () => {
-      targetNode.releasePointerCapture(pointerId);
+      if (targetNode.hasPointerCapture(pointerId)) {
+        targetNode.releasePointerCapture(pointerId);
+      }
     };
   });
 
+  let isDisposed = false;
+  disposeOnCleanup(() => () => {
+    isDisposed = true;
+  });
+
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
   // Safari supports pointer lock well, but the issue lies with the pointer lock banner.
   // It shifts the entire page down, which creates a poor user experience.
   if (!isSafari) {
     disposeOnCleanup(() => {
       const timerId = window.setTimeout(() => {
+        state.pointerCaptureRequested = true;
         requestPointerLockSafe(targetNode)
           .then(() => {
+            state.pointerCaptureRequested = false;
+
+            if (isDisposed) {
+              if (targetNode.ownerDocument.pointerLockElement === targetNode) {
+                targetNode.ownerDocument.exitPointerLock();
+              }
+              return;
+            }
+
             const cursorNode =
               (targetNode.ownerDocument.querySelector(
                 "#numeric-guesture-control-cursor"
@@ -466,17 +516,23 @@ const requestPointerLock = (
             }
           })
           .catch((error) => {
+            state.pointerCaptureRequested = false;
             console.error("requestPointerLock", error);
           });
       }, scrubTimeout);
 
       return () => {
+        state.pointerCaptureRequested = false;
+
         if (state.cursor) {
           state.cursor.remove();
           state.cursor = undefined;
         }
 
-        targetNode.ownerDocument.exitPointerLock();
+        if (targetNode.ownerDocument.pointerLockElement === targetNode) {
+          targetNode.ownerDocument.exitPointerLock();
+        }
+
         clearTimeout(timerId);
       };
     });