[Web] Report zero Pan velocity when the pointer rested before release (#4641)

## Description

On web, `PanGestureHandler.onPointerUp` ends the gesture without looking
at the release event, so `onEnd` carries the velocity computed by the
last `pointermove`, however long ago that was. A drag that stops, holds
still, and then releases reports the velocity of the drag, and a
`withDecay` started from it flings a pointer that had come to rest.
Android reports 0 in that case: its `VelocityTracker` treats a pointer
as stopped after 40 ms without a sample, [matching
Flutter](https://github.com/flutter/flutter/blob/66b3ad90177ccbd2963836a5556076b370622fe4/packages/flutter/lib/src/gestures/velocity_tracker.dart#L142).

The web `VelocityTracker` already uses the same 40 ms threshold to split
the sample history during a drag. The constant is now exported as
`POINTER_STOPPED_MILLISECONDS`, `PointerTracker.track` stamps the time
of each pointer's last sample, and `PointerTracker.getVelocityAt`
returns zero when the queried time is past that threshold. `onPointerUp`
reads the velocity at the release time before ending. A release within
40 ms of the last move is unchanged.

Feeding the release event into the tracker as a sample, as Android does,
was tried first and dropped: a release landing a few ms after the last
move at the same spot bent the least-squares fit and halved the reported
velocity of an ordinary fling.

Fixes #4636

## Test plan

Tested on the "Velocity Test" example.

- Two tests in `src/web/handlers/__tests__/PanGestureHandler.test.ts`: a
release at the last move keeps the drag's velocity, a release 500 ms
later reports zero. The second fails without the fix.
- Chrome, v3 `usePanGesture` screen with the reporter's drag (160 px in
48 ms) driven over CDP: released at the last move `velocityX` 3263
before and after; released 511 ms later 2707 before, 0 after.

Author: m-bert

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

@@ -261,6 +261,12 @@ export default class PanGestureHandler extends GestureHandler {
   protected override onPointerUp(event: AdaptedEvent): void {
     this.stylusData = event.stylusData;
 
+    // A pointer that rested before lifting reports zero velocity instead of
+    // the velocity of its last move.
+    const velocity = this.tracker.getVelocityAt(event.pointerId, event.time);
+    this.velocityX = velocity?.x ?? 0;
+    this.velocityY = velocity?.y ?? 0;
+
     super.onPointerUp(event);
     if (this.state === State.ACTIVE) {
       const lastCoords = this.tracker.getAbsoluteCoordsAverage();

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

@@ -418,3 +418,45 @@ describe('PanGestureHandler pointer leaving and entering the view', () => {
     expect(handler.state).toBe(State.CANCELLED);
   });
 });
+
+describe('PanGestureHandler velocity at release', () => {
+  function timedEvent(eventType: EventTypes, y: number, time: number) {
+    return { ...pointerEvent(eventType, y), time };
+  }
+
+  // Four moves 8ms apart, 10px each: 1250px/s downwards.
+  function dragThenRelease(releaseTime: number) {
+    const handler = createHandler();
+
+    handler.setGestureConfig({ enabled: true, minDist: 0 });
+    handler.pointerDown(timedEvent(EventTypes.DOWN, 20, 0));
+    for (let move = 1; move <= 4; move++) {
+      handler.pointerMove(
+        timedEvent(EventTypes.MOVE, 20 + 10 * move, 8 * move)
+      );
+    }
+    expect(handler.state).toBe(State.ACTIVE);
+
+    handler.pointerUp(timedEvent(EventTypes.UP, 60, releaseTime));
+    expect(handler.state).toBe(State.END);
+
+    return handler.nativeEvent();
+  }
+
+  test('a pointer released at its last move keeps the velocity of the drag', () => {
+    expect(dragThenRelease(32).velocityY).toBeCloseTo(1250, -2);
+  });
+
+  test('a pointer that rested before release reports zero velocity', () => {
+    expect(dragThenRelease(532).velocityY).toBe(0);
+  });
+
+  // The last move is at 32ms, the pointer counts as stopped after 40ms.
+  test('a pointer released at the stopped threshold keeps its velocity', () => {
+    expect(dragThenRelease(72).velocityY).toBeCloseTo(1250, -2);
+  });
+
+  test('a pointer released past the stopped threshold reports zero velocity', () => {
+    expect(dragThenRelease(73).velocityY).toBe(0);
+  });
+});

packages/react-native-gesture-handler/src/web/tools/PointerTracker.ts

@@ -4,7 +4,6 @@ import VelocityTracker from './VelocityTracker';
 export interface TrackerElement {
   abosoluteCoords: Point;
   relativeCoords: Point;
-  timestamp: number;
   velocityX: number;
   velocityY: number;
 }
@@ -43,7 +42,6 @@ export default class PointerTracker {
     const newElement: TrackerElement = {
       abosoluteCoords: { x: event.x, y: event.y },
       relativeCoords: { x: event.offsetX, y: event.offsetY },
-      timestamp: event.time,
       velocityX: 0,
       velocityY: 0,
     };
@@ -122,6 +120,15 @@ export default class PointerTracker {
       : null;
   }
 
+  public getVelocityAt(pointerId: number, time: number) {
+    if (!this.trackedPointers.has(pointerId)) {
+      return null;
+    }
+
+    const [x, y] = this.velocityTracker.velocityAt(time);
+    return { x, y };
+  }
+
   public getLastAbsoluteCoords(pointerId?: number) {
     return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
       ?.abosoluteCoords;

packages/react-native-gesture-handler/src/web/tools/VelocityTracker.ts

@@ -92,6 +92,17 @@ export default class VelocityTracker {
     return [0, 0];
   }
 
+  // Velocity at `time`: zero once no sample arrived within the stopped
+  // window, the current estimate otherwise.
+  public velocityAt(time: number): [number, number] {
+    const newest = this.samples.get(this.samples.size - 1);
+
+    return !newest ||
+      time - newest.time > this.assumePointerMoveStoppedMilliseconds
+      ? [0, 0]
+      : this.velocity;
+  }
+
   public reset(): void {
     this.samples.clear();
   }