[Web] v3 typing and using handler data

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,9 +6,9 @@ import {
   PropsRef,
   ResultEvent,
   PointerData,
-  ResultTouchEvent,
   TouchEventType,
   EventTypes,
+  GestureHandlerNativeEvent,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
@@ -20,6 +20,7 @@ import { PointerType } from '../../PointerType';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import { ActionType } from '../../ActionType';
 import { tagMessage } from '../../utils';
+import { StateChangeEvent, TouchEvent, UpdateEvent } from '../../v3/types';
 
 export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
@@ -369,7 +370,7 @@ export default abstract class GestureHandler implements IGestureHandler {
     const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef =
       this.propsRef!.current;
 
-    const touchEvent: ResultTouchEvent | undefined =
+    const touchEvent: ResultEvent<TouchEvent> | undefined =
       this.transformTouchEvent(event);
 
     if (touchEvent) {
@@ -395,12 +396,14 @@ export default abstract class GestureHandler implements IGestureHandler {
       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 +413,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 +446,55 @@ export default abstract class GestureHandler implements IGestureHandler {
     };
   }
 
+  private transformStateChangeEvent(
+    newState: State,
+    oldState: State
+  ): ResultEvent<StateChangeEvent<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<UpdateEvent<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<TouchEvent> | undefined {
     const rect = this.delegate.measureView();
 
     const all: PointerData[] = [];
@@ -571,7 +624,7 @@ export default abstract class GestureHandler implements IGestureHandler {
       });
     });
 
-    const cancelEvent: ResultTouchEvent = {
+    const cancelEvent: ResultEvent<TouchEvent> = {
       nativeEvent: {
         handlerTag: this.handlerTag,
         state: this.state,
@@ -597,6 +650,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 +947,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 +982,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';
 

packages/react-native-gesture-handler/src/web/interfaces.ts

@@ -3,10 +3,12 @@ import {
   ActiveCursor,
   MouseButton,
   TouchAction,
+  StylusData,
 } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
-import { State } from '../State';
 import { PointerType } from '../PointerType';
+import { GestureHandlerEvent } from '../v3/types';
+import { State } from '../State';
 
 export interface HitSlop {
   left?: number;
@@ -83,7 +85,8 @@ export interface Config extends Record<string, ConfigArgs> {
 }
 
 type NativeEventArgs = number | State | boolean | undefined;
-interface NativeEvent extends Record<string, NativeEventArgs> {
+export interface GestureHandlerNativeEvent
+  extends Record<string, NativeEventArgs> {
   numberOfPointers: number;
   state: State;
   pointerInside: boolean | undefined;
@@ -106,42 +109,19 @@ export interface PointerData {
   absoluteY: number;
 }
 
-type TouchNativeArgs = number | State | TouchEventType | PointerData[];
-
-interface NativeTouchEvent extends Record<string, TouchNativeArgs> {
-  handlerTag: number;
-  state: State;
-  eventType: TouchEventType;
-  changedTouches: PointerData[];
-  allTouches: PointerData[];
-  numberOfTouches: number;
-  pointerType: PointerType;
-}
-
-export interface ResultEvent extends Record<string, NativeEvent | number> {
-  nativeEvent: NativeEvent;
-  timeStamp: number;
-}
-
-export interface ResultTouchEvent
-  extends Record<string, NativeTouchEvent | number> {
-  nativeEvent: NativeTouchEvent;
+// Native event has to stay for v2 compatibility
+type ResultEventType = GestureHandlerEvent<unknown> | GestureHandlerNativeEvent;
+export interface ResultEvent<T extends ResultEventType = ResultEventType>
+  extends Record<string, T | number> {
+  nativeEvent: T;
   timeStamp: number;
 }
 
 export interface PropsRef {
-  onGestureHandlerEvent: (e: any) => void;
-  onGestureHandlerAnimatedEvent?: (e: any) => void;
-  onGestureHandlerStateChange: (e: any) => void;
-  onGestureHandlerTouchEvent?: (e: any) => void;
-}
-
-export interface StylusData {
-  tiltX: number;
-  tiltY: number;
-  azimuthAngle: number;
-  altitudeAngle: number;
-  pressure: number;
+  onGestureHandlerEvent: (e: ResultEvent) => void;
+  onGestureHandlerAnimatedEvent?: (e: ResultEvent) => void;
+  onGestureHandlerStateChange: (e: ResultEvent) => void;
+  onGestureHandlerTouchEvent?: (e: ResultEvent) => void;
 }
 
 export interface AdaptedEvent {

packages/react-native-gesture-handler/src/web/utils.ts

@@ -1,10 +1,6 @@
 import { PointerType } from '../PointerType';
-import type {
-  GestureHandlerRef,
-  Point,
-  StylusData,
-  SVGRef,
-} from './interfaces';
+import type { GestureHandlerRef, Point, SVGRef } from './interfaces';
+import { StylusData } from '../handlers/gestureHandlerCommon';
 
 export function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {
   const rect: DOMRect = view.getBoundingClientRect();