[Web] v3 typing and using handler data (#3651)

## Description

Changing web implementation to use v3 types with a proper `handlerData`
field.

## Test plan

check whether `handledData` is a proper field of `nativeEvent` when
using `NativeDetector`.
```ts
  const gesture = useGesture('PanGestureHandler', {
    onBegin: (e: any) => {
      console.log('onGestureHandlerEvent', e.nativeEvent.handlerData);
    },
  });
 ```

Author: akwasniewski

packages/react-native-gesture-handler/src/handlers/GestureHandlerEventPayload.ts

@@ -1,4 +1,4 @@
-import { StylusData } from '../web/interfaces';
+import { StylusData } from './gestureHandlerCommon';
 
 export type FlingGestureHandlerEventPayload = {
   x: number;

packages/react-native-gesture-handler/src/handlers/gestureHandlerCommon.ts

@@ -165,6 +165,14 @@ export type GestureTouchEvent = {
   pointerType: PointerType;
 };
 
+export interface StylusData {
+  tiltX: number;
+  tiltY: number;
+  azimuthAngle: number;
+  altitudeAngle: number;
+  pressure: number;
+}
+
 export type GestureUpdateEvent<GestureEventPayloadT = Record<string, unknown>> =
   GestureEventPayload & GestureEventPayloadT;
 

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts

@@ -13,15 +13,16 @@ import {
 import { tapGestureHandlerProps } from '../../TapGestureHandler';
 import { hoverGestureHandlerProps } from '../hoverGesture';
 import { nativeViewGestureHandlerProps } from '../../NativeViewGestureHandler';
-import {
-  HandlerStateChangeEvent,
-  baseGestureHandlerWithDetectorProps,
-} from '../../gestureHandlerCommon';
+import { baseGestureHandlerWithDetectorProps } from '../../gestureHandlerCommon';
 import { RNRenderer } from '../../../RNRenderer';
 import { useCallback, useRef, useState } from 'react';
 import { Reanimated } from '../reanimatedWrapper';
 import { onGestureHandlerEvent } from '../eventReceiver';
-import { PropsRef } from '../../../web/interfaces';
+import {
+  GestureHandlerNativeEvent,
+  PropsRef,
+  ResultEvent,
+} from '../../../web/interfaces';
 
 export const ALLOWED_PROPS = [
   ...baseGestureHandlerWithDetectorProps,
@@ -168,11 +169,11 @@ export function useForceRender() {
 
 export function useWebEventHandlers() {
   return useRef<PropsRef>({
-    onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
-      onGestureHandlerEvent(e.nativeEvent);
+    onGestureHandlerEvent: (e: ResultEvent) => {
+      onGestureHandlerEvent(e.nativeEvent as GestureHandlerNativeEvent);
     },
-    onGestureHandlerStateChange: (e: HandlerStateChangeEvent<unknown>) => {
-      onGestureHandlerEvent(e.nativeEvent);
+    onGestureHandlerStateChange: (e: ResultEvent) => {
+      onGestureHandlerEvent(e.nativeEvent as GestureHandlerNativeEvent);
     },
   });
 }

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

@@ -6,20 +6,27 @@ import {
   PropsRef,
   ResultEvent,
   PointerData,
-  ResultTouchEvent,
-  TouchEventType,
   EventTypes,
+  GestureHandlerNativeEvent,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
 import IGestureHandler from './IGestureHandler';
-import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import {
+  GestureTouchEvent,
+  MouseButton,
+} from '../../handlers/gestureHandlerCommon';
 import { PointerType } from '../../PointerType';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import { ActionType } from '../../ActionType';
 import { tagMessage } from '../../utils';
+import {
+  GestureStateChangeEventWithData,
+  GestureUpdateEventWithData,
+} from '../../v3/types';
+import { TouchEventType } from '../../TouchEventType';
 
 export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
@@ -369,7 +376,7 @@ export default abstract class GestureHandler implements IGestureHandler {
     const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef =
       this.propsRef!.current;
 
-    const touchEvent: ResultTouchEvent | undefined =
+    const touchEvent: ResultEvent<GestureTouchEvent> | undefined =
       this.transformTouchEvent(event);
 
     if (touchEvent) {
@@ -389,18 +396,19 @@ export default abstract class GestureHandler implements IGestureHandler {
   //
 
   public sendEvent = (newState: State, oldState: State): void => {
-    this.ensurePropsRef();
     const {
       onGestureHandlerEvent,
       onGestureHandlerStateChange,
       onGestureHandlerAnimatedEvent,
     }: PropsRef = this.propsRef!.current;
-    const resultEvent: ResultEvent = this.transformEventData(
-      newState,
-      oldState
-    );
-
-    // In the new API oldState field has to be undefined, unless we send event state changed
+    const resultEvent: ResultEvent =
+      this.actionType !== ActionType.NATIVE_DETECTOR
+        ? this.transformEventData(newState, oldState)
+        : this.lastSentState !== newState
+          ? this.transformStateChangeEvent(newState, oldState)
+          : this.transformUpdateEvent(newState);
+
+    // In the v2 API oldState field has to be undefined, unless we send event state changed
     // Here the order is flipped to avoid workarounds such as making backup of the state and setting it to undefined first, then changing it back
     // Flipping order with setting oldState to undefined solves issue, when events were being sent twice instead of once
     // However, this may cause trouble in the future (but for now we don't know that)
@@ -410,18 +418,22 @@ export default abstract class GestureHandler implements IGestureHandler {
       invokeNullableMethod(onGestureHandlerStateChange, resultEvent);
     }
     if (this.state === State.ACTIVE) {
-      resultEvent.nativeEvent.oldState = undefined;
+      if (this.actionType !== ActionType.NATIVE_DETECTOR) {
+        (resultEvent.nativeEvent as GestureHandlerNativeEvent).oldState =
+          undefined;
+      }
       if (onGestureHandlerAnimatedEvent && this.forAnimated) {
         invokeNullableMethod(onGestureHandlerAnimatedEvent, resultEvent);
       }
       invokeNullableMethod(onGestureHandlerEvent, resultEvent);
     }
   };
 
-  private transformEventData(newState: State, oldState: State): ResultEvent {
-    if (!this.viewRef) {
-      throw new Error(tagMessage('Cannot handle event when target is null'));
-    }
+  private transformEventData(
+    newState: State,
+    oldState: State
+  ): ResultEvent<GestureHandlerNativeEvent> {
+    this.ensureViewRef(this.viewRef);
     return {
       nativeEvent: {
         numberOfPointers: this.tracker.trackedPointersCount,
@@ -439,9 +451,55 @@ export default abstract class GestureHandler implements IGestureHandler {
     };
   }
 
+  private transformStateChangeEvent(
+    newState: State,
+    oldState: State
+  ): ResultEvent<GestureStateChangeEventWithData<unknown>> {
+    this.ensureViewRef(this.viewRef);
+    return {
+      nativeEvent: {
+        state: newState,
+        handlerTag: this.handlerTag,
+        pointerType: this.pointerType,
+        oldState: oldState,
+        numberOfPointers: this.tracker.trackedPointersCount,
+        handlerData: {
+          pointerInside: this.delegate.isPointerInBounds(
+            this.tracker.getAbsoluteCoordsAverage()
+          ),
+          ...this.transformNativeEvent(),
+          target: this.viewRef,
+        },
+      },
+      timeStamp: Date.now(),
+    };
+  }
+
+  private transformUpdateEvent(
+    newState: State
+  ): ResultEvent<GestureUpdateEventWithData<unknown>> {
+    this.ensureViewRef(this.viewRef);
+    return {
+      nativeEvent: {
+        state: newState,
+        handlerTag: this.handlerTag,
+        pointerType: this.pointerType,
+        numberOfPointers: this.tracker.trackedPointersCount,
+        handlerData: {
+          pointerInside: this.delegate.isPointerInBounds(
+            this.tracker.getAbsoluteCoordsAverage()
+          ),
+          ...this.transformNativeEvent(),
+          target: this.viewRef,
+        },
+      },
+      timeStamp: Date.now(),
+    };
+  }
+
   private transformTouchEvent(
     event: AdaptedEvent
-  ): ResultTouchEvent | undefined {
+  ): ResultEvent<GestureTouchEvent> | undefined {
     const rect = this.delegate.measureView();
 
     const all: PointerData[] = [];
@@ -498,17 +556,17 @@ export default abstract class GestureHandler implements IGestureHandler {
     switch (event.eventType) {
       case EventTypes.DOWN:
       case EventTypes.ADDITIONAL_POINTER_DOWN:
-        eventType = TouchEventType.DOWN;
+        eventType = TouchEventType.TOUCHES_DOWN;
         break;
       case EventTypes.UP:
       case EventTypes.ADDITIONAL_POINTER_UP:
-        eventType = TouchEventType.UP;
+        eventType = TouchEventType.TOUCHES_UP;
         break;
       case EventTypes.MOVE:
-        eventType = TouchEventType.MOVE;
+        eventType = TouchEventType.TOUCHES_MOVE;
         break;
       case EventTypes.CANCEL:
-        eventType = TouchEventType.CANCELLED;
+        eventType = TouchEventType.TOUCHES_CANCELLED;
         break;
     }
 
@@ -571,11 +629,11 @@ export default abstract class GestureHandler implements IGestureHandler {
       });
     });
 
-    const cancelEvent: ResultTouchEvent = {
+    const cancelEvent: ResultEvent<GestureTouchEvent> = {
       nativeEvent: {
         handlerTag: this.handlerTag,
         state: this.state,
-        eventType: TouchEventType.CANCELLED,
+        eventType: TouchEventType.TOUCHES_CANCELLED,
         changedTouches: changed,
         allTouches: all,
         numberOfTouches: all.length,
@@ -597,6 +655,12 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
   }
 
+  private ensureViewRef(viewRef: any): asserts viewRef is number {
+    if (!viewRef) {
+      throw new Error(tagMessage('Cannot handle event when target is null'));
+    }
+  }
+
   protected transformNativeEvent(): Record<string, unknown> {
     // Those properties are shared by most handlers and if not this method will be overriden
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
@@ -888,10 +952,10 @@ export default abstract class GestureHandler implements IGestureHandler {
 
 function invokeNullableMethod(
   method:
-    | ((event: ResultEvent | ResultTouchEvent) => void)
-    | { __getHandler: () => (event: ResultEvent | ResultTouchEvent) => void }
+    | ((event: ResultEvent) => void)
+    | { __getHandler: () => (event: ResultEvent) => void }
     | { __nodeConfig: { argMapping: unknown[] } },
-  event: ResultEvent | ResultTouchEvent
+  event: ResultEvent
 ): void {
   if (!method) {
     return;
@@ -923,7 +987,7 @@ function invokeNullableMethod(
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const nativeValue = event.nativeEvent[key];
+    const nativeValue = (event.nativeEvent as any)[key];
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     if (value?.setValue) {

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

@@ -1,7 +1,8 @@
 import { State } from '../../State';
-import { AdaptedEvent, StylusData } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import GestureHandler from './GestureHandler';
+import { StylusData } from '../../handlers/gestureHandlerCommon';
 
 export default class HoverGestureHandler extends GestureHandler {
   private stylusData: StylusData | undefined;

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

@@ -1,6 +1,7 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config, StylusData, WheelDevice } from '../interfaces';
+import { AdaptedEvent, Config, WheelDevice } from '../interfaces';
+import { StylusData } from '../../handlers/gestureHandlerCommon';
 
 import GestureHandler from './GestureHandler';