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
software-mansion · Oct 13, 2022 · 234ec68 · 234ec68
1 parent 49b14a8
commit 234ec68
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,11 +1,15 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     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
@@ -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
@@ -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
@@ -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
@@ -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;
     }