react-native-gesture-handler 3.0.0-beta.3 → 3.0.0-beta.4

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -1,25 +1,40 @@
 import { Platform } from 'react-native';
 
-import type { ActionType } from '../../ActionType';
+import { type ActionType, usesNativeOrVirtualDetector } from '../../ActionType';
 import { State } from '../../State';
+import { deepEqual } from '../../utils';
+import type { NativeHandlerData } from '../../v3/hooks/gestures/native/NativeTypes';
+import type { HandlerData } from '../../v3/types';
 import { SingleGestureName } from '../../v3/types';
-import { DEFAULT_TOUCH_SLOP } from '../constants';
+import {
+  DEFAULT_TOUCH_SLOP,
+  NATIVE_GESTURE_ROLE_ATTRIBUTE,
+} from '../constants';
 import type { AdaptedEvent, Config, PropsRef } from '../interfaces';
+import { NativeGestureRole } from '../interfaces';
 import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import {
+  dispatchGestureLifecycleEvent,
+  GestureLifecycleEvent,
+} from '../tools/GestureLifecycleEvents';
 import GestureHandler from './GestureHandler';
 import type IGestureHandler from './IGestureHandler';
+
 export default class NativeViewGestureHandler extends GestureHandler {
-  private buttonRole!: boolean;
+  public override readonly isContinuous = true;
+  private role: NativeGestureRole | null = null;
 
-  // TODO: Implement logic for activation on start
-  // @ts-ignore Logic yet to be implemented
+  // TODO: Implement logic for activation on start properly
   private shouldActivateOnStart = false;
   private disallowInterruption = false;
+  private yieldsToContinuousGestures = false;
 
   private startX = 0;
   private startY = 0;
   private minDistSq = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
 
+  private lastActiveHandlerData: HandlerData<NativeHandlerData> | null = null;
+
   public constructor(
     delegate: GestureHandlerDelegate<unknown, IGestureHandler>
   ) {
@@ -43,7 +58,19 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const view = this.delegate.view as HTMLElement;
 
     this.restoreViewStyles(view);
-    this.buttonRole = view.getAttribute('role') === 'button';
+
+    if (usesNativeOrVirtualDetector(this.actionType)) {
+      this.role =
+        (view.getAttribute(
+          NATIVE_GESTURE_ROLE_ATTRIBUTE
+        ) as NativeGestureRole) ?? null;
+    } else {
+      if (view.getAttribute('role') === 'button') {
+        this.role = NativeGestureRole.Button;
+      } else if (view.querySelector(':scope > input[role="switch"]') !== null) {
+        this.role = NativeGestureRole.Switch;
+      }
+    }
   }
 
   public override updateGestureConfig(config: Config): void {
@@ -55,6 +82,9 @@ export default class NativeViewGestureHandler extends GestureHandler {
     if (config.disallowInterruption !== undefined) {
       this.disallowInterruption = config.disallowInterruption;
     }
+    if (config.yieldsToContinuousGestures !== undefined) {
+      this.yieldsToContinuousGestures = config.yieldsToContinuousGestures;
+    }
 
     const view = this.delegate.view as HTMLElement;
     this.restoreViewStyles(view);
@@ -66,7 +96,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
 
     view.style['touchAction'] = 'auto';
-    // @ts-ignore Turns on defualt touch behavior on Safari
+    // @ts-ignore Turns on default touch behavior on Safari
     view.style['WebkitTouchCallout'] = 'auto';
   }
 
@@ -93,10 +123,19 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
     this.begin();
 
+    dispatchGestureLifecycleEvent(
+      this.delegate.view as HTMLElement | null,
+      GestureLifecycleEvent.Began
+    );
+
     const view = this.delegate.view as HTMLElement;
     const isRNGHText = view.hasAttribute('rnghtext');
 
-    if (this.buttonRole || isRNGHText) {
+    if (
+      (this.role === NativeGestureRole.Button && this.shouldActivateOnStart) ||
+      this.role === NativeGestureRole.Switch ||
+      isRNGHText
+    ) {
       this.activate();
     }
   }
@@ -109,12 +148,15 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const dy = this.startY - lastCoords.y;
     const distSq = dx * dx + dy * dy;
 
-    if (distSq >= this.minDistSq) {
-      if (this.buttonRole && this.state === State.ACTIVE) {
-        this.cancel();
-      } else if (!this.buttonRole && this.state === State.BEGAN) {
-        this.activate();
-      }
+    if (
+      this.role === NativeGestureRole.Switch ||
+      this.role === NativeGestureRole.Button
+    ) {
+      return;
+    }
+
+    if (distSq >= this.minDistSq && this.state === State.BEGAN) {
+      this.activate();
     }
   }
 
@@ -138,6 +180,13 @@ export default class NativeViewGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
 
     if (this.tracker.trackedPointersCount === 0) {
+      if (
+        this.role === NativeGestureRole.Button &&
+        this.state === State.BEGAN
+      ) {
+        this.activate();
+      }
+
       if (this.state === State.ACTIVE) {
         this.end();
       } else {
@@ -156,12 +205,15 @@ export default class NativeViewGestureHandler extends GestureHandler {
     if (
       handler instanceof NativeViewGestureHandler &&
       handler.state === State.ACTIVE &&
-      handler.disallowsInterruption()
+      handler.disallowsInterruption() &&
+      !handler.yieldsToContinuousGestures
     ) {
       return false;
     }
 
-    const canBeInterrupted = !this.disallowInterruption;
+    const canBeInterrupted =
+      !this.disallowInterruption ||
+      (this.yieldsToContinuousGestures && handler.isContinuous);
 
     if (
       this.state === State.ACTIVE &&
@@ -176,8 +228,16 @@ export default class NativeViewGestureHandler extends GestureHandler {
     );
   }
 
-  public override shouldBeCancelledByOther(_handler: IGestureHandler): boolean {
-    return !this.disallowInterruption;
+  public override detach(): void {
+    super.detach();
+    this.role = null;
+  }
+
+  public override shouldBeCancelledByOther(handler: IGestureHandler): boolean {
+    return (
+      !this.disallowInterruption ||
+      (this.yieldsToContinuousGestures && handler.isContinuous)
+    );
   }
 
   public override shouldAttachGestureToChildView(): boolean {
@@ -189,7 +249,32 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   public isButton(): boolean {
-    return this.buttonRole;
+    return this.role === NativeGestureRole.Button;
+  }
+
+  public override shouldBeginWithRecordedHandlers(
+    recorded: IGestureHandler[]
+  ): boolean {
+    if (!this.isButton()) {
+      return true;
+    }
+
+    const self = this as IGestureHandler;
+    return recorded.every(
+      (other) =>
+        other.shouldRecognizeSimultaneously(self) ||
+        self.shouldRecognizeSimultaneously(other) ||
+        other.delegate.view === this.delegate.view ||
+        other.name === SingleGestureName.Hover
+    );
+  }
+
+  protected override onCancel(): void {
+    super.onCancel();
+    dispatchGestureLifecycleEvent(
+      this.delegate.view as HTMLElement | null,
+      GestureLifecycleEvent.Canceled
+    );
   }
 
   protected override transformNativeEvent(): Record<string, unknown> {
@@ -199,4 +284,22 @@ export default class NativeViewGestureHandler extends GestureHandler {
       ),
     };
   }
+
+  protected override shouldSuppressActiveUpdate(
+    handlerData: HandlerData<NativeHandlerData>
+  ): boolean {
+    if (
+      this.lastActiveHandlerData &&
+      deepEqual(this.lastActiveHandlerData, handlerData)
+    ) {
+      return true;
+    }
+    this.lastActiveHandlerData = handlerData;
+    return false;
+  }
+
+  public override reset(): void {
+    super.reset();
+    this.lastActiveHandlerData = null;
+  }
 }

package/src/web/handlers/PanGestureHandler.ts

@@ -13,6 +13,8 @@ const DEFAULT_MAX_POINTERS = 10;
 const DEFAULT_MIN_DIST_SQ = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
 
 export default class PanGestureHandler extends GestureHandler {
+  public override readonly isContinuous = true;
+
   public velocityX = 0;
   public velocityY = 0;
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -10,6 +10,8 @@ import GestureHandler from './GestureHandler';
 import type IGestureHandler from './IGestureHandler';
 
 export default class PinchGestureHandler extends GestureHandler {
+  public override readonly isContinuous = true;
+
   private scale = 1;
   private velocity = 0;
 
@@ -89,8 +91,8 @@ export default class PinchGestureHandler extends GestureHandler {
   protected override onPointerAdd(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerAdd(event);
-    this.tryBegin();
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
+    this.tryBegin();
   }
 
   protected override onPointerUp(event: AdaptedEvent): void {
@@ -111,26 +113,22 @@ export default class PinchGestureHandler extends GestureHandler {
     super.onPointerRemove(event);
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
     this.tracker.removeFromTracker(event.pointerId);
-
-    if (this.state === State.ACTIVE && this.tracker.trackedPointersCount < 2) {
-      this.end();
-    }
   }
 
   protected override onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
     if (this.tracker.trackedPointersCount < 2) {
       return;
     }
-    this.tracker.track(event);
 
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
     super.onPointerMove(event);
   }
   protected override onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.tracker.track(event);
     if (this.tracker.trackedPointersCount < 2) {
       return;
     }
-    this.tracker.track(event);
 
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
     super.onPointerOutOfBounds(event);

package/src/web/handlers/RotationGestureHandler.ts

@@ -11,6 +11,8 @@ import type IGestureHandler from './IGestureHandler';
 const ROTATION_RECOGNITION_THRESHOLD = Math.PI / 36;
 
 export default class RotationGestureHandler extends GestureHandler {
+  public override readonly isContinuous = true;
+
   private rotation = 0;
   private velocity = 0;
 
@@ -98,11 +100,12 @@ export default class RotationGestureHandler extends GestureHandler {
     this.tracker.addToTracker(event);
     super.onPointerAdd(event);
 
-    this.tryBegin();
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+    this.tryBegin();
   }
 
   protected override onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
     if (this.tracker.trackedPointersCount < 2) {
       return;
     }
@@ -111,14 +114,13 @@ export default class RotationGestureHandler extends GestureHandler {
     this.cachedAnchorX = anchor.x;
     this.cachedAnchorY = anchor.y;
 
-    this.tracker.track(event);
-
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
 
     super.onPointerMove(event);
   }
 
   protected override onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.tracker.track(event);
     if (this.tracker.trackedPointersCount < 2) {
       return;
     }
@@ -127,8 +129,6 @@ export default class RotationGestureHandler extends GestureHandler {
     this.cachedAnchorX = anchor.x;
     this.cachedAnchorY = anchor.y;
 
-    this.tracker.track(event);
-
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
 
     super.onPointerOutOfBounds(event);

package/src/web/interfaces.ts

@@ -88,6 +88,7 @@ export interface Config extends Record<string, ConfigArgs> {
   maxDeltaY?: number;
   shouldActivateOnStart?: boolean;
   disallowInterruption?: boolean;
+  yieldsToContinuousGestures?: boolean;
   direction?: Directions;
   enableTrackpadTwoFingerGesture?: boolean;
 }
@@ -177,3 +178,9 @@ export type GestureHandlerRef = {
 export type SVGRef = {
   elementRef: { current: SVGElement };
 };
+
+export enum NativeGestureRole {
+  Button = 'GestureHandlerButton',
+  Switch = 'Switch',
+  ScrollView = 'ScrollView',
+}

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -32,6 +32,10 @@ export default class GestureHandlerOrchestrator {
     handler.activationIndex = Number.MAX_VALUE;
   }
 
+  public isHandlerRecorded(handler: IGestureHandler): boolean {
+    return this.gestureHandlers.includes(handler);
+  }
+
   public removeHandlerFromOrchestrator(handler: IGestureHandler): void {
     const indexInGestureHandlers = this.gestureHandlers.indexOf(handler);
     const indexInAwaitingHandlers = this.awaitingHandlers.indexOf(handler);
@@ -266,15 +270,19 @@ export default class GestureHandlerOrchestrator {
   }
 
   public recordHandlerIfNotPresent(handler: IGestureHandler): void {
-    if (this.gestureHandlers.includes(handler)) {
+    if (this.isHandlerRecorded(handler)) {
       return;
     }
 
-    this.gestureHandlers.push(handler);
-
     handler.active = false;
     handler.awaiting = false;
     handler.activationIndex = Number.MAX_SAFE_INTEGER;
+
+    if (!handler.shouldBeginWithRecordedHandlers(this.gestureHandlers)) {
+      handler.cancel();
+    }
+
+    this.gestureHandlers.push(handler);
   }
 
   private shouldHandlerWaitForOther(

package/src/web/tools/GestureLifecycleEvents.ts

@@ -0,0 +1,14 @@
+export const GestureLifecycleEvent = {
+  Began: 'gh:gestureBegan',
+  Canceled: 'gh:gestureCanceled',
+} as const;
+
+export type GestureLifecycleEventName =
+  (typeof GestureLifecycleEvent)[keyof typeof GestureLifecycleEvent];
+
+export function dispatchGestureLifecycleEvent(
+  view: HTMLElement | null | undefined,
+  name: GestureLifecycleEventName
+): void {
+  view?.dispatchEvent(new CustomEvent(name));
+}

package/src/web/tools/PointerEventManager.ts

@@ -162,6 +162,18 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
     this.onPointerMoveOut(adaptedEvent);
+
+    // When the view is not capturing the pointer (e.g. when `role="button"`),
+    // `pointermove` stops firing once the pointer leaves the view's bounds, so
+    // the out-of-bounds detection in `pointerMoveCallback` never runs. Fall back
+    // to the DOM `pointerleave` event for any tracked, in-bounds pointer.
+    if (
+      this.trackedPointers.has(event.pointerId) &&
+      this.pointersInBounds.indexOf(event.pointerId) >= 0
+    ) {
+      this.onPointerLeave(adaptedEvent);
+      this.markAsOutOfBounds(event.pointerId);
+    }
   };
 
   private lostPointerCaptureCallback = (event: PointerEvent) => {