[Web] Gesture relations (#3713)

## Description

This PR adds a function in web module to configure gesture relations via
hooks from #3693.

## Test plan
```ts
import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useSimultaneous,
  useGesture,
  useExclusive,
  useRace,
  SingleGestureName,
} from 'react-native-gesture-handler';

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

  const av = React.useRef(new Animated.Value(0)).current
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: av } } }],
    {
      useNativeDriver: true,
    }
  );

  const tap1 = useGesture(SingleGestureName.Tap, {
    onEnd: () => {
      // 'worklet';
      console.log('Tap 1');
    },
    numberOfTaps: 1,
    disableReanimated: true,
  });

  const tap2 = useGesture(SingleGestureName.Tap, {
    onEnd: () => {
      // 'worklet';
      console.log('Tap 2');
    },
    numberOfTaps: 2,
    disableReanimated: true,
    blocksExternalGesture: tap1,
  });

  // const tap1 = useGesture('TapGestureHandler', {
  //   onEnd: () => {
  //     'worklet';
  //     console.log('Tap 1');
  //   },
  //   numberOfTaps: 1,
  //   // disableReanimated: true,
  //   requireExternalGestureToFail: tap2,
  // });

  const pan1 = useGesture(SingleGestureName.Pan, {
    // onUpdate: event,
    onUpdate: (e) => {
      'worklet';
      console.log('Pan 1');
    },
    // disableReanimated: true,
  });

  const pan2 = useGesture(SingleGestureName.Pan, {
    onUpdate: (e) => {
      'worklet';
      console.log('Pan 2');
    },
    simultaneousWithExternalGesture: pan1,
    // requireExternalGestureToFail: pan1,
    // blocksExternalGesture: pan1,
    // disableReanimated: true,
  });

  // const composedGesture = useSimultaneous(pan1, pan2);

  // const composedGesture = useExclusive(tap2, tap1);
  // const composedGesture = useExclusive(pan2, pan1); // For Animated.Event
  // const composedGesture = useExclusive(pan1, pan2); // For Animated.Event

  // const composedGesture = useRace(pan1, pan2);
  // const composedGesture = useRace(pan2, pan1);

  // const composedGesture = useExclusive(tap1, useSimultaneous(pan1, pan2));

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

      {visible && (
        <NativeDetector gesture={pan1}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-around',
              },
              { transform: [{ translateX: av }] },
            ]}>
            <NativeDetector gesture={pan2}>
              <Animated.View
                style={{ width: 100, height: 100, backgroundColor: 'green' }}
              />
            </NativeDetector>
          </Animated.View>
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}
```

Author: akwasniewski

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

@@ -6,6 +6,7 @@ import type { Config, PropsRef } from './web/interfaces';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
+import { GestureRelations } from './v3/types';
 
 // init method is called inside attachGestureHandler function. However, this function may
 // fail when received view is not valid HTML element. On the other hand, dropGestureHandler
@@ -37,10 +38,6 @@ export default {
       handlerTag,
       new GestureClass(new GestureHandlerWebDelegate())
     );
-    InteractionManager.instance.configureInteractions(
-      NodeManager.getHandler(handlerTag),
-      config as unknown as Config
-    );
     this.setGestureHandlerConfig(handlerTag, config as unknown as Config);
   },
   attachGestureHandler(
@@ -75,11 +72,6 @@ export default {
   },
   setGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).setGestureConfig(newConfig);
-
-    InteractionManager.instance.configureInteractions(
-      NodeManager.getHandler(handlerTag),
-      newConfig
-    );
   },
   updateGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
@@ -95,6 +87,12 @@ export default {
 
     NodeManager.dropGestureHandler(handlerTag);
   },
+  configureRelations(handlerTag: number, relations: GestureRelations) {
+    InteractionManager.instance.configureInteractions(
+      NodeManager.getHandler(handlerTag),
+      relations
+    );
+  },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   flushOperations() {},
 };

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

@@ -764,6 +764,10 @@ export default abstract class GestureHandler implements IGestureHandler {
       this._userSelect = config.userSelect;
     }
 
+    if (this.actionType !== ActionType.NATIVE_DETECTOR) {
+      InteractionManager.instance.configureInteractions(this, config);
+    }
+
     if (this.enabled) {
       return;
     }

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

@@ -1,3 +1,4 @@
+import { GestureRelations } from '../../v3/types';
 import type IGestureHandler from '../handlers/IGestureHandler';
 import { Config, Handler } from '../interfaces';
 
@@ -11,45 +12,46 @@ export default class InteractionManager {
   // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
   private constructor() {}
 
-  public configureInteractions(handler: IGestureHandler, config: Config) {
+  public configureInteractions(
+    handler: IGestureHandler,
+    config: GestureRelations | Config
+  ) {
     this.dropRelationsForHandlerWithTag(handler.handlerTag);
 
     if (config.waitFor) {
       const waitFor: number[] = [];
-      config.waitFor.forEach((otherHandler: Handler): void => {
-        // New API reference
-        if (typeof otherHandler === 'number') {
-          waitFor.push(otherHandler);
-        } else {
-          // Old API reference
-          waitFor.push(otherHandler.handlerTag);
-        }
+      config.waitFor.forEach((otherHandler: Handler | number) => {
+        waitFor.push(
+          typeof otherHandler === 'number'
+            ? otherHandler
+            : otherHandler.handlerTag
+        );
       });
 
       this.waitForRelations.set(handler.handlerTag, waitFor);
     }
 
     if (config.simultaneousHandlers) {
       const simultaneousHandlers: number[] = [];
-      config.simultaneousHandlers.forEach((otherHandler: Handler): void => {
-        if (typeof otherHandler === 'number') {
-          simultaneousHandlers.push(otherHandler);
-        } else {
-          simultaneousHandlers.push(otherHandler.handlerTag);
-        }
+      config.simultaneousHandlers.forEach((otherHandler: Handler | number) => {
+        simultaneousHandlers.push(
+          typeof otherHandler === 'number'
+            ? otherHandler
+            : otherHandler.handlerTag
+        );
       });
 
       this.simultaneousRelations.set(handler.handlerTag, simultaneousHandlers);
     }
 
     if (config.blocksHandlers) {
       const blocksHandlers: number[] = [];
-      config.blocksHandlers.forEach((otherHandler: Handler): void => {
-        if (typeof otherHandler === 'number') {
-          blocksHandlers.push(otherHandler);
-        } else {
-          blocksHandlers.push(otherHandler.handlerTag);
-        }
+      config.blocksHandlers.forEach((otherHandler: Handler | number) => {
+        blocksHandlers.push(
+          typeof otherHandler === 'number'
+            ? otherHandler
+            : otherHandler.handlerTag
+        );
       });
 
       this.blocksHandlersRelations.set(handler.handlerTag, blocksHandlers);