Add changeEventCalculator to handlers (#3708)

## Description

This PR adds `changeEventCalculator` functions into continuous handlers.

## Test plan

<details>
<summary>Tested on the following example:</summary>

```tsx
import * as React from 'react';
import { Animated, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  usePan,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const gesture = usePan({
    onUpdate: (e) => {
      'worklet';
      console.log(e.handlerData.changeX);
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}
```

</details>

Author: m-bert

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

@@ -1,6 +1,6 @@
 import { ComponentClass } from 'react';
 import { tagMessage } from '../../utils';
-import { GestureCallbacks, UpdateEvent } from '../../v3/types';
+import { GestureCallbacks, GestureUpdateEvent } from '../../v3/types';
 
 export interface SharedValue<Value = unknown> {
   value: Value;
@@ -15,7 +15,7 @@ export interface SharedValue<Value = unknown> {
 }
 
 export type ReanimatedContext<THandlerData> = {
-  lastUpdateEvent: UpdateEvent<THandlerData> | undefined;
+  lastUpdateEvent: GestureUpdateEvent<THandlerData> | undefined;
 };
 
 interface WorkletProps {

packages/react-native-gesture-handler/src/v3/hooks/callbacks/stateChangeHandler.ts

@@ -1,48 +1,46 @@
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import { State } from '../../../State';
-import { GestureCallbacks, StateChangeEvent } from '../../types';
-import { isEventForHandlerWithTag, isNativeEvent } from '../utils';
+import {
+  GestureCallbacks,
+  GestureStateChangeEvent,
+  StateChangeEvent,
+} from '../../types';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { runCallback } from '../utils/eventHandlersUtils';
 
 export function getStateChangeHandler<THandlerData>(
   handlerTag: number,
   callbacks: GestureCallbacks<THandlerData>
 ) {
-  return (event: StateChangeEvent<THandlerData>) => {
+  return (sourceEvent: StateChangeEvent<THandlerData>) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(
+      sourceEvent
+    ) as GestureStateChangeEvent<THandlerData>;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
 
-    let oldState: State | undefined;
-    let state: State | undefined;
-
-    if (isNativeEvent(event)) {
-      oldState = event.nativeEvent.oldState;
-      state = event.nativeEvent.state;
-    } else {
-      oldState = event.oldState;
-      state = event.state;
-    }
-
-    if (oldState === State.UNDETERMINED && state === State.BEGAN) {
+    if (event.oldState === State.UNDETERMINED && event.state === State.BEGAN) {
       runCallback(CALLBACK_TYPE.BEGAN, callbacks, event);
     } else if (
-      (oldState === State.BEGAN || oldState === State.UNDETERMINED) &&
-      state === State.ACTIVE
+      (event.oldState === State.BEGAN ||
+        event.oldState === State.UNDETERMINED) &&
+      event.state === State.ACTIVE
     ) {
       runCallback(CALLBACK_TYPE.START, callbacks, event);
-    } else if (oldState !== state && state === State.END) {
-      if (oldState === State.ACTIVE) {
+    } else if (event.oldState !== event.state && event.state === State.END) {
+      if (event.oldState === State.ACTIVE) {
         runCallback(CALLBACK_TYPE.END, callbacks, event, true);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
     } else if (
-      (state === State.FAILED || state === State.CANCELLED) &&
-      state !== oldState
+      (event.state === State.FAILED || event.state === State.CANCELLED) &&
+      event.state !== event.oldState
     ) {
-      if (oldState === State.ACTIVE) {
+      if (event.oldState === State.ACTIVE) {
         runCallback(CALLBACK_TYPE.END, callbacks, event, false);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);

packages/react-native-gesture-handler/src/v3/hooks/callbacks/touchEventHandler.ts

@@ -1,6 +1,5 @@
-import { NativeSyntheticEvent } from 'react-native';
 import { GestureCallbacks, TouchEvent } from '../../types';
-import { isEventForHandlerWithTag, isNativeEvent } from '../utils';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { TouchEventType } from '../../../TouchEventType';
 import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 import {
@@ -12,30 +11,18 @@ export function getTouchEventHandler<THandlerData>(
   handlerTag: number,
   callbacks: GestureCallbacks<THandlerData>
 ) {
-  return (event: TouchEvent) => {
+  return (sourceEvent: TouchEvent) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(sourceEvent) as GestureTouchEvent;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
 
-    if (
-      isNativeEvent(event) &&
-      event.nativeEvent.eventType !== TouchEventType.UNDETERMINED
-    ) {
-      runCallback(
-        touchEventTypeToCallbackType(
-          (event as NativeSyntheticEvent<GestureTouchEvent>).nativeEvent
-            .eventType
-        ),
-        callbacks,
-        event
-      );
-    } else if (
-      (event as GestureTouchEvent).eventType !== TouchEventType.UNDETERMINED
-    ) {
+    if (event.eventType !== TouchEventType.UNDETERMINED) {
       runCallback(
-        touchEventTypeToCallbackType((event as GestureTouchEvent).eventType),
+        touchEventTypeToCallbackType(event.eventType),
         callbacks,
         event
       );

packages/react-native-gesture-handler/src/v3/hooks/callbacks/updateHandler.ts

@@ -4,9 +4,10 @@ import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper'
 import {
   ChangeCalculatorType,
   GestureCallbacks,
+  GestureUpdateEvent,
   UpdateEvent,
 } from '../../types';
-import { isEventForHandlerWithTag } from '../utils';
+import { isEventForHandlerWithTag, maybeExtractNativeEvent } from '../utils';
 import { runCallback } from '../utils/eventHandlersUtils';
 
 export function getUpdateHandler<THandlerData>(
@@ -15,9 +16,13 @@ export function getUpdateHandler<THandlerData>(
   context: ReanimatedContext<THandlerData> | undefined,
   changeEventCalculator?: ChangeCalculatorType<THandlerData>
 ) {
-  return (event: UpdateEvent<THandlerData>) => {
+  return (sourceEvent: UpdateEvent<THandlerData>) => {
     'worklet';
 
+    const event = maybeExtractNativeEvent(
+      sourceEvent
+    ) as GestureUpdateEvent<THandlerData>;
+
     if (!isEventForHandlerWithTag(handlerTag, event)) {
       return;
     }
@@ -36,7 +41,6 @@ export function getUpdateHandler<THandlerData>(
         : event
     );
 
-    // TODO: Investigate why this is always undefined
     context.lastUpdateEvent = event;
   };
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/useHover.ts

@@ -3,10 +3,11 @@ import { HoverEffect } from '../../../handlers/gestures/hoverGesture';
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  HandlerData,
   SingleGestureName,
 } from '../../types';
 import { useGesture } from '../useGesture';
-import { cloneConfig } from '../utils';
+import { cloneConfig, getChangeEventCalculator } from '../utils';
 
 type HoverGestureProperties = {
   /**
@@ -27,6 +28,8 @@ type HoverHandlerData = {
   absoluteX: number;
   absoluteY: number;
   stylusData: StylusData;
+  changeX: number;
+  changeY: number;
 };
 
 type HoverGestureInternalConfig = BaseGestureConfig<
@@ -37,10 +40,23 @@ type HoverGestureInternalConfig = BaseGestureConfig<
 export type HoverGestureConfig =
   ExcludeInternalConfigProps<HoverGestureInternalConfig>;
 
+function diffCalculator(
+  current: HandlerData<HoverHandlerData>,
+  previous: HandlerData<HoverHandlerData> | null
+) {
+  'worklet';
+  return {
+    changeX: previous ? current.x - previous.x : 0,
+    changeY: previous ? current.y - previous.y : 0,
+  };
+}
+
 export function useHover(config: HoverGestureConfig) {
   const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
     config
   );
 
+  hoverConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
   return useGesture(SingleGestureName.Hover, hoverConfig);
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/usePan.ts

@@ -2,10 +2,11 @@ import { StylusData } from '../../../handlers/gestureHandlerCommon';
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  HandlerData,
   SingleGestureName,
 } from '../../types';
 import { useGesture } from '../useGesture';
-import { cloneConfig, remapProps } from '../utils';
+import { getChangeEventCalculator, remapProps, cloneConfig } from '../utils';
 
 type CommonPanGestureProperties = {
   /**
@@ -114,6 +115,8 @@ type PanHandlerData = {
   velocityX: number;
   velocityY: number;
   stylusData: StylusData;
+  changeX: number;
+  changeY: number;
 };
 
 export type PanGestureConfig = ExcludeInternalConfigProps<
@@ -236,6 +239,21 @@ function transformPanProps(
   }
 }
 
+function diffCalculator(
+  current: HandlerData<PanHandlerData>,
+  previous: HandlerData<PanHandlerData> | null
+) {
+  'worklet';
+  return {
+    changeX: previous
+      ? current.translationX - previous.translationX
+      : current.translationX,
+    changeY: previous
+      ? current.translationY - previous.translationY
+      : current.translationY,
+  };
+}
+
 export function usePan(config: PanGestureConfig) {
   if (__DEV__) {
     validatePanConfig(config);
@@ -252,6 +270,8 @@ export function usePan(config: PanGestureConfig) {
 
   transformPanProps(panConfig);
 
+  panConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
   return useGesture<PanHandlerData, PanGestureInternalProperties>(
     SingleGestureName.Pan,
     panConfig

packages/react-native-gesture-handler/src/v3/hooks/gestures/usePinch.ts

@@ -1,10 +1,11 @@
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  HandlerData,
   SingleGestureName,
 } from '../../types';
 import { useGesture } from '../useGesture';
-import { cloneConfig } from '../utils';
+import { cloneConfig, getChangeEventCalculator } from '../utils';
 
 type PinchGestureProperties = Record<string, never>;
 
@@ -13,6 +14,7 @@ type PinchHandlerData = {
   focalX: number;
   focalY: number;
   velocity: number;
+  scaleChange: number;
 };
 
 type PinchGestureInternalConfig = BaseGestureConfig<
@@ -23,10 +25,22 @@ type PinchGestureInternalConfig = BaseGestureConfig<
 export type PinchGestureConfig =
   ExcludeInternalConfigProps<PinchGestureInternalConfig>;
 
+function diffCalculator(
+  current: HandlerData<PinchHandlerData>,
+  previous: HandlerData<PinchHandlerData> | null
+) {
+  'worklet';
+  return {
+    scaleChange: previous ? current.scale / previous.scale : current.scale,
+  };
+}
+
 export function usePinch(config: PinchGestureConfig) {
   const pinchConfig = cloneConfig<PinchHandlerData, PinchGestureProperties>(
     config
   );
 
+  pinchConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
   return useGesture(SingleGestureName.Pinch, pinchConfig);
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/useRotation.ts

@@ -1,10 +1,11 @@
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  HandlerData,
   SingleGestureName,
 } from '../../types';
 import { useGesture } from '../useGesture';
-import { cloneConfig } from '../utils';
+import { cloneConfig, getChangeEventCalculator } from '../utils';
 
 type RotationGestureProperties = Record<string, never>;
 
@@ -13,6 +14,7 @@ type RotationHandlerData = {
   anchorX: number;
   anchorY: number;
   velocity: number;
+  rotationChange: number;
 };
 
 type RotationGestureInternalConfig = BaseGestureConfig<
@@ -23,11 +25,26 @@ type RotationGestureInternalConfig = BaseGestureConfig<
 export type RotationGestureConfig =
   ExcludeInternalConfigProps<RotationGestureInternalConfig>;
 
+function diffCalculator(
+  current: HandlerData<RotationHandlerData>,
+  previous: HandlerData<RotationHandlerData> | null
+) {
+  'worklet';
+  return {
+    rotationChange: previous
+      ? current.rotation - previous.rotation
+      : current.rotation,
+  };
+}
+
 export function useRotation(config: RotationGestureConfig) {
   const rotationConfig = cloneConfig<
     RotationHandlerData,
     RotationGestureProperties
   >(config);
 
+  rotationConfig.changeEventCalculator =
+    getChangeEventCalculator(diffCalculator);
+
   return useGesture(SingleGestureName.Rotation, rotationConfig);
 }