[Web] Remove workaround for touch events allowing to change state too soon (#3794)

## Description

Ordering of touch events on the web was mostly aligned with Android. To
unify the ordering across all platforms (along
#3793),
this PR changes it so that `onTouchesDown` is called before `onBegin`
and `onTouchesMove` is called before `onUpdate`.

Another change is enforcing going through `BEGAN` when imperatively
changing the state from `UNDETERMINED` to `ACTIVE`.

And a fix for an issue that came out due to the above changes - when the
discrete gestures were imperatively activated inside `onTouchesDown`,
the order was:
```
Touch down
Gesture begin
Gesture start
Touch cancel
Gesture end
Gesture finalize
Gesture begin
Gesture finalize
```

This was because those gestures transition to the `END` state
immediately after `ACTIVE`, and get reset immediately. Then, the normal
flow resumes, and they go to the `BEGAN` as a result of touch input. To
prevent that, I changed `cleanupFinishedHandlers` to be queued as a
microtask instead of being executed immediately. This should ensure that
it will be called in the same run loop, but after the gesture handles
its state.

## Test plan

Tested on the following code:
```
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

export default function EmptyExample() {
  const pan = Gesture.Pan()
    .onTouchesDown((e, stateManager) => {
      'worklet';
      console.log('Touch down');
      stateManager.activate();
    })
    .onTouchesMove(() => {
      'worklet';
      console.log('Touch move');
    })
    .onTouchesUp(() => {
      'worklet';
      console.log('Touch up');
    })
    .onTouchesCancelled(() => {
      'worklet';
      console.log('Touch cancel');
    })
    .onBegin(() => {
      'worklet';
      console.log('Gesture begin');
    })
    .onStart((e) => {
      'worklet';
      console.log('Gesture start');
    })
    .onEnd(() => {
      'worklet';
      console.log('Gesture end');
    })
    .onFinalize(() => {
      'worklet';
      console.log('Gesture finalize');
    });

  return (
    <View style={styles.container}>
      <GestureDetector gesture={pan}>
        <View style={{ width: 300, height: 300, backgroundColor: 'green' }} />
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

```

Author: j-piasecki

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

@@ -1,3 +1,4 @@
+import { State } from '../../State';
 import NodeManager from '../../web/tools/NodeManager';
 import { GestureStateManagerType } from './gestureStateManager';
 
@@ -11,7 +12,15 @@ export const GestureStateManager = {
       },
 
       activate: () => {
-        NodeManager.getHandler(handlerTag).activate(true);
+        const handler = NodeManager.getHandler(handlerTag);
+
+        // Force going from UNDETERMINED to ACTIVE through BEGAN to preserve
+        // the correct state transition flow.
+        if (handler.state === State.UNDETERMINED) {
+          handler.begin();
+        }
+
+        handler.activate(true);
       },
 
       fail: () => {

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

@@ -125,8 +125,6 @@ export default class FlingGestureHandler extends GestureHandler {
 
     super.onPointerDown(event);
     this.newPointerAction();
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {

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

@@ -313,7 +313,7 @@ export default abstract class GestureHandler implements IGestureHandler {
       GestureHandlerOrchestrator.instance.cancelMouseAndPenGestures(this);
     }
 
-    // TODO: Bring back touch events along with introducing `handleDown` method that will handle handler specific stuff
+    this.tryToSendTouchEvent(event);
   }
   // Adding another pointer to existing ones
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -347,9 +347,9 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected onPointerEnter(event: AdaptedEvent): void {
     this.tryToSendTouchEvent(event);
   }
-  protected onPointerCancel(event: AdaptedEvent): void {
-    this.tryToSendTouchEvent(event);
-
+  protected onPointerCancel(_event: AdaptedEvent): void {
+    // No need to send a cancel touch event explicitly here. `cancel` will
+    // handle cancelling all tracked touches if the handler expects pointer data.
     this.cancel();
     this.reset();
   }
@@ -370,11 +370,10 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
 
+    this.tryToSendTouchEvent(event);
     if (this.active) {
       this.sendEvent(this.state, this.state);
     }
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected tryToSendTouchEvent(event: AdaptedEvent): void {

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

@@ -91,8 +91,6 @@ export default class LongPressGestureHandler extends GestureHandler {
 
     this.tryBegin();
     this.tryActivate();
-
-    this.tryToSendTouchEvent(event);
   }
   protected override onPointerAdd(event: AdaptedEvent): void {
     super.onPointerAdd(event);

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

@@ -16,8 +16,6 @@ export default class ManualGestureHandler extends GestureHandler {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.begin();
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {

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

@@ -74,8 +74,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.newPointerAction();
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {

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

@@ -230,8 +230,6 @@ export default class PanGestureHandler extends GestureHandler {
 
     this.tryBegin(event);
     this.checkBegan();
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {

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

@@ -81,8 +81,6 @@ export default class PinchGestureHandler extends GestureHandler {
   protected override onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {

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

@@ -89,8 +89,6 @@ export default class RotationGestureHandler extends GestureHandler {
   protected override onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {

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

@@ -134,8 +134,6 @@ export default class TapGestureHandler extends GestureHandler {
     this.lastY = event.y;
 
     this.updateState(event);
-
-    this.tryToSendTouchEvent(event);
   }
 
   protected override onPointerAdd(event: AdaptedEvent): void {