Fix Gesture Handlers getting stuck due to missing up event when using the new web implementation (#2442)

## Description

Sometimes the view didn't receive the `pointerup` event when moving the
pointer really fast, even though it was captured. This was causing a
problem where the gesture would never be finished, preventing every
other handler from activating.

Funny thing is, despite not receiving the `pointerup` event,
`lostpointercapture` event was still there. I used this fact to fill the
missing `up` event, so the gesture can correctly handle it.

I've only been able to reproduce it in Chrome, when using external
display.

## Test plan

Tested on the Example app, specifically the `Draggable` example.

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

Author: j-piasecki

src/web/handlers/FlingGestureHandler.ts

@@ -159,11 +159,6 @@ export default class FlingGestureHandler extends GestureHandler {
     this.endFling();
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
-
   public activate(force?: boolean): void {
     super.activate(force);
     this.end();

src/web/handlers/GestureHandler.ts

@@ -352,6 +352,9 @@ export default abstract class GestureHandler {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
+
+    this.cancel();
+    this.reset();
   }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
     this.tryToSendMoveEvent(true);

src/web/handlers/ManualGestureHandler.ts

@@ -40,9 +40,4 @@ export default class ManualGestureHandler extends GestureHandler {
     super.onPointerRemove(event);
     this.tracker.removeFromTracker(event.pointerId);
   }
-
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
 }

src/web/handlers/NativeViewGestureHandler.ts

@@ -115,12 +115,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.cancel();
-    this.reset();
-  }
-
   public shouldRecognizeSimultaneously(handler: GestureHandler): boolean {
     if (super.shouldRecognizeSimultaneously(handler)) {
       return true;

src/web/handlers/PanGestureHandler.ts

@@ -306,11 +306,6 @@ export default class PanGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-
-    this.reset();
-  }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
     if (this.getShouldCancelWhenOutside()) {
       return;

src/web/handlers/PinchGestureHandler.ts

@@ -127,11 +127,6 @@ export default class PinchGestureHandler extends GestureHandler {
     super.onPointerOutOfBounds(event);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
-
   private tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;

src/web/handlers/RotationGestureHandler.ts

@@ -148,13 +148,6 @@ export default class RotationGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.end();
-
-    this.reset();
-  }
-
   protected tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;

src/web/handlers/TapGestureHandler.ts

@@ -197,12 +197,6 @@ export default class TapGestureHandler extends GestureHandler {
     super.onPointerOutOfBounds(event);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.tracker.resetTracker();
-    this.fail();
-  }
-
   private updateState(event: AdaptedEvent): void {
     if (
       this.currentMaxNumberOfPointers < this.tracker.getTrackedPointersCount()

src/web/tools/PointerEventManager.ts

@@ -8,6 +8,8 @@ import EventManager from './EventManager';
 import { isPointerInBounds } from '../utils';
 
 export default class PointerEventManager extends EventManager {
+  private trackedPointers = new Set<number>();
+
   public setListeners(): void {
     this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
       if (event.pointerType === PointerType.TOUCH) {
@@ -24,6 +26,7 @@ export default class PointerEventManager extends EventManager {
 
       target.setPointerCapture(adaptedEvent.pointerId);
       this.markAsInBounds(adaptedEvent.pointerId);
+      this.trackedPointers.add(adaptedEvent.pointerId);
 
       if (++this.activePointersCounter > 1) {
         adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
@@ -51,6 +54,7 @@ export default class PointerEventManager extends EventManager {
 
       target.releasePointerCapture(adaptedEvent.pointerId);
       this.markAsOutOfBounds(adaptedEvent.pointerId);
+      this.trackedPointers.delete(adaptedEvent.pointerId);
 
       if (--this.activePointersCounter > 0) {
         adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
@@ -115,7 +119,27 @@ export default class PointerEventManager extends EventManager {
       this.onPointerCancel(adaptedEvent);
       this.markAsOutOfBounds(adaptedEvent.pointerId);
       this.activePointersCounter = 0;
+      this.trackedPointers.clear();
     });
+
+    this.view.addEventListener(
+      'lostpointercapture',
+      (event: PointerEvent): void => {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.CANCEL
+        );
+
+        if (this.trackedPointers.has(adaptedEvent.pointerId)) {
+          // in some cases the `pointerup` event is not fired, but `lostpointercapture` is
+          // we simulate the `pointercancel` event here to make sure the gesture handler stops tracking it
+          this.onPointerCancel(adaptedEvent);
+
+          this.activePointersCounter = 0;
+          this.trackedPointers.clear();
+        }
+      }
+    );
   }
 
   protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
@@ -131,4 +155,9 @@ export default class PointerEventManager extends EventManager {
       time: event.timeStamp,
     };
   }
+
+  public resetManager(): void {
+    super.resetManager();
+    this.trackedPointers.clear();
+  }
 }