From 234ec684e8cc3e6e65a2e42f5ed3ae72c4d6e681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Bert?=
 <63123542+Warus15@users.noreply.github.com>
Date: Thu, 13 Oct 2022 15:18:12 +0200
Subject: [PATCH] Make handlers respect `shouldCancelWhenOutside` (#2271)

## Description

This PR solves web part of #2265 issue. I've modified `onPointerOut` method to act similar as on android. Right now, if pointer leaves handler and `shouldCancelWhenOutside` is set to `true`, handler goes to `cancel` state if it was `active`, or to `fail`, if it was in `began`

This change also affects `ManualGestureHandler`, which now cancels properly.

## Test plan

Tested on example app
---
 src/web/handlers/FlingGestureHandler.ts     |  2 --
 src/web/handlers/GestureHandler.ts          | 17 +++++++++++++++++
 src/web/handlers/LongPressGestureHandler.ts |  2 --
 src/web/handlers/ManualGestureHandler.ts    | 11 ++++++++++-
 src/web/handlers/PanGestureHandler.ts       |  6 ------
 src/web/handlers/PinchGestureHandler.ts     |  2 --
 src/web/handlers/RotationGestureHandler.ts  |  2 --
 src/web/handlers/TapGestureHandler.ts       |  2 --
 8 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/web/handlers/FlingGestureHandler.ts b/src/web/handlers/FlingGestureHandler.ts
index dd06a98af8..76bda7c887 100644
--- a/src/web/handlers/FlingGestureHandler.ts
+++ b/src/web/handlers/FlingGestureHandler.ts
@@ -30,8 +30,6 @@ export default class FlingGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.direction) {
       this.direction = this.config.direction;
     }
diff --git a/src/web/handlers/GestureHandler.ts b/src/web/handlers/GestureHandler.ts
index 542dfb39a3..a1336ebb9f 100644
--- a/src/web/handlers/GestureHandler.ts
+++ b/src/web/handlers/GestureHandler.ts
@@ -322,6 +322,18 @@ export default abstract class GestureHandler {
     }
   }
   protected onPointerOut(event: AdaptedEvent): void {
+    if (this.shouldCancellWhenOutside) {
+      switch (this.currentState) {
+        case State.ACTIVE:
+          this.cancel();
+          break;
+        case State.BEGAN:
+          this.fail();
+          break;
+      }
+      return;
+    }
+
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
@@ -573,6 +585,11 @@ export default abstract class GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
+
+    if (this.config.shouldCancelWhenOutside !== undefined) {
+      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
+    }
+
     this.validateHitSlops();
 
     if (this.enabled) {
diff --git a/src/web/handlers/LongPressGestureHandler.ts b/src/web/handlers/LongPressGestureHandler.ts
index 39abf93b28..fe1ba4a1ac 100644
--- a/src/web/handlers/LongPressGestureHandler.ts
+++ b/src/web/handlers/LongPressGestureHandler.ts
@@ -42,8 +42,6 @@ export default class LongPressGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.minDurationMs !== undefined) {
       this.minDurationMs = this.config.minDurationMs;
     }
diff --git a/src/web/handlers/ManualGestureHandler.ts b/src/web/handlers/ManualGestureHandler.ts
index ee9b95ae28..489ca469b4 100644
--- a/src/web/handlers/ManualGestureHandler.ts
+++ b/src/web/handlers/ManualGestureHandler.ts
@@ -1,4 +1,4 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
@@ -6,6 +6,10 @@ export default class ManualGestureHandler extends GestureHandler {
     super.init(ref, propsRef);
   }
 
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
@@ -22,6 +26,11 @@ export default class ManualGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerOutOfBounds(event);
+  }
+
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);
diff --git a/src/web/handlers/PanGestureHandler.ts b/src/web/handlers/PanGestureHandler.ts
index 1babeaabe0..5b89b95c2b 100644
--- a/src/web/handlers/PanGestureHandler.ts
+++ b/src/web/handlers/PanGestureHandler.ts
@@ -65,8 +65,6 @@ export default class PanGestureHandler extends GestureHandler {
     super.updateGestureConfig({ enabled: enabled, ...props });
     this.checkCustomActivationCriteria(this.customActivationProperties);
 
-    this.enabled = enabled;
-
     if (this.config.minDist !== undefined) {
       this.minDistSq = this.config.minDist * this.config.minDist;
     } else if (this.hasCustomActivationCriteria) {
@@ -98,10 +96,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.activateAfterLongPress = this.config.activateAfterLongPress;
     }
 
-    if (this.config.shouldCancelWhenOutside !== undefined) {
-      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
-    }
-
     if (this.config.activeOffsetXStart !== undefined) {
       this.activeOffsetXStart = this.config.activeOffsetXStart;
 
diff --git a/src/web/handlers/PinchGestureHandler.ts b/src/web/handlers/PinchGestureHandler.ts
index ee1f936663..48038e5d97 100644
--- a/src/web/handlers/PinchGestureHandler.ts
+++ b/src/web/handlers/PinchGestureHandler.ts
@@ -57,8 +57,6 @@ export default class PinchGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {
diff --git a/src/web/handlers/RotationGestureHandler.ts b/src/web/handlers/RotationGestureHandler.ts
index b7724d9e54..669c0f42c2 100644
--- a/src/web/handlers/RotationGestureHandler.ts
+++ b/src/web/handlers/RotationGestureHandler.ts
@@ -52,8 +52,6 @@ export default class RotationGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {
diff --git a/src/web/handlers/TapGestureHandler.ts b/src/web/handlers/TapGestureHandler.ts
index 96cf884ec7..7bdff043fa 100644
--- a/src/web/handlers/TapGestureHandler.ts
+++ b/src/web/handlers/TapGestureHandler.ts
@@ -39,8 +39,6 @@ export default class TapGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.numberOfTaps !== undefined) {
       this.numberOfTaps = this.config.numberOfTaps;
     }