[Web] Handle moves that leave or re-enter the view as out-of-bounds moves (#4610)

The fix now lives in `GestureHandler`: `onPointerLeave` and
`onPointerEnter` mark the event as a move and pass it to
`onPointerOutOfBounds`, so every handler applies these moves. The
Pan-specific overrides are removed. The description below explains the
original Pan symptoms, which this change still fixes.

## Description

On web, `PointerEventManager` dispatches the `pointermove` that takes a
tracked pointer out of the view as `onPointerLeave`, and the one that
brings it back as `onPointerEnter`. `PanGestureHandler` did not override
either, so for those moves it never updated the tracker, the last
coordinates or the velocity, and never checked whether to activate. As a
result:

- `onUpdate` does not fire for the move that leaves or re-enters the
view.
- If the pointer is released right after, `onEnd` reports the last
in-bounds position instead of the release position.
- A Pan in `BEGAN` whose activating move lands outside the view does not
activate on that move.

This PR makes `PanGestureHandler` handle the leave and enter moves like
any other move: it tracks the pointer, updates the coordinates and
velocity, checks activation and sends the update. With
`shouldCancelWhenOutside`, leaving the view still cancels the gesture as
before. The shared tracking code of `onPointerMove` and
`onPointerOutOfBounds` moves to a private `trackMove` helper.

Fixes #4607

## Test plan

Added tests to `src/web/handlers/__tests__/PanGestureHandler.test.ts`:

- The move that leaves the view sends an update with the new
translation, and `onEnd` reports the release position.
- The move that re-enters the view does the same.
- The move that leaves the view activates a Pan that is still in
`BEGAN`.
- With `shouldCancelWhenOutside`, leaving the view still cancels the
gesture.

Without the fix, the first three fail. With it, `yarn test` passes (23
suites, 227 tests), and `yarn ts-check`, ESLint and Prettier are clean.

---------

Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>
Co-authored-by: Michał <michal.bert@swmansion.com>

Author: RaphaelFakhri

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -376,10 +376,12 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
 
-    this.tryToSendTouchEvent(event);
+    event.eventType = EventTypes.MOVE;
+    this.onPointerOutOfBounds(event);
   }
   protected onPointerEnter(event: AdaptedEvent): void {
-    this.tryToSendTouchEvent(event);
+    event.eventType = EventTypes.MOVE;
+    this.onPointerMove(event);
   }
   protected onPointerCancel(_event: AdaptedEvent): void {
     // No need to send a cancel touch event explicitly here. `cancel` will

packages/react-native-gesture-handler/src/web/handlers/__tests__/PanGestureHandler.test.ts

@@ -21,6 +21,26 @@ class TestPanGestureHandler extends PanGestureHandler {
     return this.transformNativeEvent();
   }
 
+  public pointerDown(event: AdaptedEvent): void {
+    this.onPointerDown(event);
+  }
+
+  public pointerMove(event: AdaptedEvent): void {
+    this.onPointerMove(event);
+  }
+
+  public pointerLeave(event: AdaptedEvent): void {
+    this.onPointerLeave(event);
+  }
+
+  public pointerEnter(event: AdaptedEvent): void {
+    this.onPointerEnter(event);
+  }
+
+  public pointerUp(event: AdaptedEvent): void {
+    this.onPointerUp(event);
+  }
+
   protected override onWheel(event: AdaptedEvent): void {
     this.wheelEvents.push(event);
     super.onWheel(event);
@@ -42,6 +62,19 @@ function wheelEvent(): AdaptedEvent {
   };
 }
 
+function pointerEvent(eventType: EventTypes, y: number): AdaptedEvent {
+  return {
+    x: 20,
+    y,
+    offsetX: 20,
+    offsetY: y,
+    pointerId: 0,
+    eventType,
+    pointerType: PointerType.MOUSE,
+    time: 0,
+  };
+}
+
 function createHandler(eventManagers: EventManager<unknown>[] = []) {
   const delegate = {
     init: jest.fn(),
@@ -307,3 +340,81 @@ describe('PanGestureHandler trackpad coordinates', () => {
     ).toMatchObject({ x: 75, y: 50, absoluteX: 65, absoluteY: 110 });
   });
 });
+
+describe('PanGestureHandler pointer leaving and entering the view', () => {
+  // The view is 40x40, the pointer goes down at its center.
+  function startPan(config: Record<string, unknown> = {}) {
+    const handler = createHandler();
+    const updates: { state: State; translationY: unknown }[] = [];
+
+    handler.sendEvent = jest.fn((newState: State) => {
+      updates.push({
+        state: newState,
+        translationY: handler.nativeEvent().translationY,
+      });
+    });
+
+    handler.setGestureConfig({ enabled: true, minDist: 0, ...config });
+    handler.pointerDown(pointerEvent(EventTypes.DOWN, 20));
+
+    return { handler, updates };
+  }
+
+  test('the move that leaves the view updates the position', () => {
+    const { handler, updates } = startPan();
+
+    handler.pointerMove(pointerEvent(EventTypes.MOVE, 25));
+    expect(handler.state).toBe(State.ACTIVE);
+
+    updates.length = 0;
+    handler.pointerLeave(pointerEvent(EventTypes.LEAVE, 320));
+
+    expect(updates).toEqual([{ state: State.ACTIVE, translationY: 300 }]);
+
+    handler.pointerUp(pointerEvent(EventTypes.UP, 320));
+
+    expect(updates[updates.length - 1]).toEqual({
+      state: State.END,
+      translationY: 300,
+    });
+  });
+
+  test('the move that enters the view updates the position', () => {
+    const { handler, updates } = startPan();
+
+    handler.pointerMove(pointerEvent(EventTypes.MOVE, 25));
+    handler.pointerLeave(pointerEvent(EventTypes.LEAVE, 320));
+
+    updates.length = 0;
+    handler.pointerEnter(pointerEvent(EventTypes.ENTER, 30));
+
+    expect(updates).toEqual([{ state: State.ACTIVE, translationY: 10 }]);
+
+    handler.pointerUp(pointerEvent(EventTypes.UP, 30));
+
+    expect(updates[updates.length - 1]).toEqual({
+      state: State.END,
+      translationY: 10,
+    });
+  });
+
+  test('the move that leaves the view can activate the gesture', () => {
+    const { handler } = startPan({ minDist: 10 });
+
+    handler.pointerMove(pointerEvent(EventTypes.MOVE, 25));
+    expect(handler.state).toBe(State.BEGAN);
+
+    handler.pointerLeave(pointerEvent(EventTypes.LEAVE, 320));
+
+    expect(handler.state).toBe(State.ACTIVE);
+  });
+
+  test('the gesture is still cancelled when the pointer leaves the view with shouldCancelWhenOutside', () => {
+    const { handler } = startPan({ shouldCancelWhenOutside: true });
+
+    handler.pointerMove(pointerEvent(EventTypes.MOVE, 25));
+    handler.pointerLeave(pointerEvent(EventTypes.LEAVE, 320));
+
+    expect(handler.state).toBe(State.CANCELLED);
+  });
+});