react-native-gesture-handler 2.6.0 → 2.6.2

package/src/web/interfaces.ts

@@ -30,7 +30,17 @@ export interface Config extends Record<string, ConfigArgs> {
   simultaneousHandlers?: Handler[] | null;
   waitFor?: Handler[] | null;
   hitSlop?: HitSlop;
+  shouldCancelWhenOutside?: boolean;
 
+  activateAfterLongPress?: number;
+  failOffsetXStart?: number;
+  failOffsetYStart?: number;
+  failOffsetXEnd?: number;
+  failOffsetYEnd?: number;
+  activeOffsetXStart?: number;
+  activeOffsetXEnd?: number;
+  activeOffsetYStart?: number;
+  activeOffsetYEnd?: number;
   minPointers?: number;
   maxPointers?: number;
   minDist?: number;
@@ -41,14 +51,6 @@ export interface Config extends Record<string, ConfigArgs> {
   minVelocitySq?: number;
   maxDist?: number;
   maxDistSq?: number;
-  failOffsetXStart?: number;
-  failOffsetYStart?: number;
-  failOffsetXEnd?: number;
-  failOffsetYEnd?: number;
-  activeOffsetXStart?: number;
-  activeOffsetXEnd?: number;
-  activeOffsetYStart?: number;
-  activeOffsetYEnd?: number;
   numberOfPointers?: number;
   minDurationMs?: number;
   numberOfTaps?: number;
@@ -56,6 +58,8 @@ export interface Config extends Record<string, ConfigArgs> {
   maxDelayMs?: number;
   maxDeltaX?: number;
   maxDeltaY?: number;
+  shouldActivateOnStart?: boolean;
+  disallowInterruption?: boolean;
   direction?: Directions;
 }
 
@@ -69,26 +73,54 @@ interface NativeEvent extends Record<string, NativeEventArgs> {
   oldState?: State;
 }
 
+export interface PointerData {
+  id: number;
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+}
+
+type TouchNativeArgs = number | State | TouchEventType | PointerData[];
+
+interface NativeTouchEvent extends Record<string, TouchNativeArgs> {
+  handlerTag: number;
+  state: State;
+  eventType: TouchEventType;
+  changedTouches: PointerData[];
+  allTouches: PointerData[];
+  numberOfTouches: number;
+}
+
 export interface ResultEvent extends Record<string, NativeEvent | number> {
   nativeEvent: NativeEvent;
   timeStamp: number;
 }
 
+export interface ResultTouchEvent
+  extends Record<string, NativeTouchEvent | number> {
+  nativeEvent: NativeTouchEvent;
+  timeStamp: number;
+}
+
 export interface PropsRef {
   onGestureHandlerEvent: () => void;
   onGestureHandlerStateChange: () => void;
 }
 
-export interface AdaptedPointerEvent {
+export interface AdaptedEvent {
   x: number;
   y: number;
   offsetX: number;
   offsetY: number;
   pointerId: number;
   eventType: EventTypes;
-  pointerType: string;
+  pointerType: PointerType;
   buttons: number;
   time: number;
+  allTouches?: TouchList;
+  changedTouches?: TouchList;
+  touchEventType?: TouchEventType;
 }
 
 export enum MouseButtons {
@@ -112,3 +144,18 @@ export enum EventTypes {
   OUT,
   CANCEL,
 }
+
+export enum TouchEventType {
+  UNDETERMINED,
+  DOWN,
+  MOVE,
+  UP,
+  CANCELLED,
+}
+
+export enum PointerType {
+  NONE = 'none',
+  MOUSE = 'mouse',
+  TOUCH = 'touch',
+  PEN = 'pen',
+}

package/src/web/tools/EventManager.ts

@@ -1,186 +1,96 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 
-import { EventTypes, AdaptedPointerEvent, MouseButtons } from '../interfaces';
-
-export default class EventManager {
-  private activePointers: number[] = [];
-  private readonly view: HTMLElement;
+export default abstract class EventManager {
+  protected readonly view: HTMLElement;
+  protected pointersInBounds: number[] = [];
+  protected activePointersCounter: number;
 
   constructor(view: HTMLElement) {
     this.view = view;
+    this.activePointersCounter = 0;
   }
 
-  public setListeners() {
-    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
-      if (
-        !this.isPointerInBounds({
-          x: event.clientX,
-          y: event.clientY,
-        })
-      ) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
-        event,
-        EventTypes.DOWN
-      );
-      const target = event.target as HTMLElement;
-
-      target.setPointerCapture(adaptedEvent.pointerId);
-      this.addActivePointer(adaptedEvent.pointerId);
-      this.onPointerDown(adaptedEvent);
-    });
-
-    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
-      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
-        event,
-        EventTypes.UP
-      );
-      const target = event.target as HTMLElement;
-
-      this.onPointerUp(adaptedEvent);
-      target.releasePointerCapture(adaptedEvent.pointerId);
-      this.removeActivePointer(adaptedEvent.pointerId);
-    });
-
-    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
-      if (
-        event.pointerType === 'mouse' &&
-        event.buttons !== MouseButtons.LEFT
-      ) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
-        event,
-        EventTypes.MOVE
-      );
-
-      const inBounds: boolean = this.isPointerInBounds({
-        x: adaptedEvent.x,
-        y: adaptedEvent.y,
-      });
-
-      const pointerIndex: number = this.activePointers.indexOf(
-        adaptedEvent.pointerId
-      );
-
-      if (inBounds) {
-        if (pointerIndex < 0) {
-          adaptedEvent.eventType = EventTypes.ENTER;
-          this.onPointerEnter(adaptedEvent);
-          this.addActivePointer(adaptedEvent.pointerId);
-        } else {
-          this.onPointerMove(adaptedEvent);
-        }
-      } else {
-        if (pointerIndex >= 0) {
-          adaptedEvent.eventType = EventTypes.OUT;
-          this.onPointerOut(adaptedEvent);
-          this.removeActivePointer(adaptedEvent.pointerId);
-        } else {
-          this.onPointerOutOfBounds(adaptedEvent);
-        }
-      }
-    });
-
-    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
-      event.preventDefault();
-
-      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
-        event,
-        EventTypes.CANCEL
-      );
-
-      this.onPointerCancel(adaptedEvent);
-    });
+  public abstract setListeners(): void;
+  protected abstract mapEvent(
+    event: Event,
+    eventType: EventTypes,
+    index?: number,
+    touchEventType?: TouchEventType
+  ): AdaptedEvent;
+
+  protected onPointerDown(_event: AdaptedEvent): void {}
+  protected onPointerAdd(_event: AdaptedEvent): void {}
+  protected onPointerUp(_event: AdaptedEvent): void {}
+  protected onPointerRemove(_event: AdaptedEvent): void {}
+  protected onPointerMove(_event: AdaptedEvent): void {}
+  protected onPointerOut(_event: AdaptedEvent): void {}
+  protected onPointerEnter(_event: AdaptedEvent): void {}
+  protected onPointerCancel(_event: AdaptedEvent): void {
+    // When pointer cancel is triggered and there are more pointers on the view, only one pointer is cancelled
+    // Because we want all pointers to be cancelled by that event, we are doing it manually by reseting handler and changing activePointersCounter to 0
+    // Events that correspond to removing the pointer (pointerup, touchend) have condition, that they don't perform any action when activePointersCounter
+    // is equal to 0. This prevents counter from going to negative values, when pointers are removed from view after one of them has been cancelled
   }
+  protected onPointerOutOfBounds(_event: AdaptedEvent): void {}
 
-  private onPointerDown(_event: AdaptedPointerEvent): void {}
-  private onPointerUp(_event: AdaptedPointerEvent): void {}
-  private onPointerMove(_event: AdaptedPointerEvent): void {}
-  private onPointerOut(_event: AdaptedPointerEvent): void {}
-  private onPointerEnter(_event: AdaptedPointerEvent): void {}
-  private onPointerCancel(_event: AdaptedPointerEvent): void {}
-  private onPointerOutOfBounds(_event: AdaptedPointerEvent): void {}
-
-  public setOnPointerDown(
-    callback: (event: AdaptedPointerEvent) => void
-  ): void {
+  public setOnPointerDown(callback: (event: AdaptedEvent) => void): void {
     this.onPointerDown = callback;
   }
-  public setOnPointerUp(callback: (event: AdaptedPointerEvent) => void): void {
+  public setOnPointerAdd(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerAdd = callback;
+  }
+  public setOnPointerUp(callback: (event: AdaptedEvent) => void): void {
     this.onPointerUp = callback;
   }
-  public setOnPointerMove(
-    callback: (event: AdaptedPointerEvent) => void
-  ): void {
+  public setOnPointerRemove(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerRemove = callback;
+  }
+  public setOnPointerMove(callback: (event: AdaptedEvent) => void): void {
     this.onPointerMove = callback;
   }
-  public setOnPointerOut(callback: (event: AdaptedPointerEvent) => void): void {
+  public setOnPointerOut(callback: (event: AdaptedEvent) => void): void {
     this.onPointerOut = callback;
   }
-  public setOnPointerEnter(
-    callback: (event: AdaptedPointerEvent) => void
-  ): void {
+  public setOnPointerEnter(callback: (event: AdaptedEvent) => void): void {
     this.onPointerEnter = callback;
   }
-  public setOnPointerCancel(
-    callback: (event: AdaptedPointerEvent) => void
-  ): void {
+  public setOnPointerCancel(callback: (event: AdaptedEvent) => void): void {
     this.onPointerCancel = callback;
   }
   public setOnPointerOutOfBounds(
-    callback: (event: AdaptedPointerEvent) => void
+    callback: (event: AdaptedEvent) => void
   ): void {
     this.onPointerOutOfBounds = callback;
   }
 
-  private mapEvent(
-    event: PointerEvent,
-    eventType: EventTypes
-  ): AdaptedPointerEvent {
-    return {
-      x: event.clientX,
-      y: event.clientY,
-      offsetX: event.offsetX,
-      offsetY: event.offsetY,
-      pointerId: event.pointerId,
-      eventType: eventType,
-      pointerType: event.pointerType,
-      buttons: event.buttons,
-      time: event.timeStamp,
-    };
-  }
-
-  public isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
-    if (!this.view) {
-      return false;
-    }
-
-    const rect: DOMRect = this.view.getBoundingClientRect();
-
-    return (
-      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
-    );
-  }
-
-  private addActivePointer(pointerId: number): void {
-    if (this.activePointers.indexOf(pointerId) >= 0) {
+  protected markAsInBounds(pointerId: number): void {
+    if (this.pointersInBounds.indexOf(pointerId) >= 0) {
       return;
     }
 
-    this.activePointers.push(pointerId);
+    this.pointersInBounds.push(pointerId);
   }
 
-  private removeActivePointer(pointerId: number): void {
-    const index: number = this.activePointers.indexOf(pointerId);
+  protected markAsOutOfBounds(pointerId: number): void {
+    const index: number = this.pointersInBounds.indexOf(pointerId);
 
     if (index < 0) {
       return;
     }
 
-    this.activePointers.splice(index, 1);
+    this.pointersInBounds.splice(index, 1);
+  }
+
+  public resetManager(): void {
+    // Reseting activePointersCounter is necessary to make gestures such as pinch work properly
+    // There are gestures that end when there is still one active pointer (like pinch/rotation)
+    // When these gestures end, they are reset, but they still receive events from pointer that is active
+    // This causes trouble, since only onPointerDown registers gesture in orchestrator, and while gestures receive
+    // Events from active pointer after they finished, next pointerdown event will be registered as additional pointer, not the first one
+    // This casues trouble like gestures getting stuck in END state, even though they should have gone to UNDETERMINED
+
+    this.activePointersCounter = 0;
+    this.pointersInBounds = [];
   }
 }

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -1,8 +1,9 @@
 import { State } from '../../State';
-import { AdaptedPointerEvent } from '../interfaces';
+import { PointerType } from '../interfaces';
 
 import GestureHandler from '../handlers/GestureHandler';
 import PointerTracker from './PointerTracker';
+import { isPointerInBounds } from '../utils';
 
 export default class GestureHandlerOrchestrator {
   private static instance: GestureHandlerOrchestrator;
@@ -31,13 +32,19 @@ export default class GestureHandlerOrchestrator {
     handler.setActivationIndex(Number.MAX_VALUE);
   }
 
+  public removeHandlerFromOrchestrator(handler: GestureHandler): void {
+    this.gestureHandlers.splice(this.gestureHandlers.indexOf(handler), 1);
+    this.awaitingHandlers.splice(this.awaitingHandlers.indexOf(handler), 1);
+    this.handlersToCancel.splice(this.handlersToCancel.indexOf(handler), 1);
+  }
+
   private cleanupFinishedHandlers(): void {
     for (let i = this.gestureHandlers.length - 1; i >= 0; --i) {
       const handler = this.gestureHandlers[i];
+
       if (!handler) {
         continue;
       }
-
       if (this.isFinished(handler.getState()) && !handler.isAwaiting()) {
         this.gestureHandlers.splice(i, 1);
 
@@ -62,15 +69,35 @@ export default class GestureHandlerOrchestrator {
     return hasToWait;
   }
 
-  private tryActivate(
-    handler: GestureHandler,
-    event: AdaptedPointerEvent
-  ): void {
+  private tryActivate(handler: GestureHandler): void {
     if (this.hasOtherHandlerToWaitFor(handler)) {
       this.addAwaitingHandler(handler);
-    } else {
-      this.makeActive(handler, event);
+    } else if (
+      handler.getState() !== State.CANCELLED &&
+      handler.getState() !== State.FAILED
+    ) {
+      if (this.shouldActivate(handler)) {
+        this.makeActive(handler);
+      } else {
+        switch (handler.getState()) {
+          case State.ACTIVE:
+            handler.fail();
+            break;
+          case State.BEGAN:
+            handler.cancel();
+        }
+      }
+    }
+  }
+
+  private shouldActivate(handler: GestureHandler): boolean {
+    for (const otherHandler of this.gestureHandlers) {
+      if (this.shouldHandlerBeCancelledBy(handler, otherHandler)) {
+        return false;
+      }
     }
+
+    return true;
   }
 
   private cleanupAwaitingHandlers(handler: GestureHandler): void {
@@ -89,36 +116,50 @@ export default class GestureHandlerOrchestrator {
     handler: GestureHandler,
     newState: State,
     oldState: State,
-    event: AdaptedPointerEvent
+    sendIfDisabled?: boolean
   ): void {
+    if (!handler.isEnabled() && !sendIfDisabled) {
+      return;
+    }
+
     this.handlingChangeSemaphore += 1;
 
     if (this.isFinished(newState)) {
       this.awaitingHandlers.forEach((otherHandler) => {
         if (this.shouldHandlerWaitForOther(otherHandler, handler)) {
           if (newState === State.END) {
-            otherHandler?.cancel(event);
+            otherHandler?.cancel();
+            if (otherHandler.getState() === State.END) {
+              // Handle edge case, where discrete gestures end immediately after activation thus
+              // their state is set to END and when the gesture they are waiting for activates they
+              // should be cancelled, however `cancel` was never sent as gestures were already in the END state.
+              // Send synthetic BEGAN -> CANCELLED to properly handle JS logic
+              otherHandler.sendEvent(State.CANCELLED, State.BEGAN);
+            }
             otherHandler?.setAwaiting(false);
           } else {
-            this.tryActivate(otherHandler, event);
+            this.tryActivate(otherHandler);
           }
         }
       });
     }
 
     if (newState === State.ACTIVE) {
-      this.tryActivate(handler, event);
+      this.tryActivate(handler);
     } else if (oldState === State.ACTIVE || oldState === State.END) {
       if (handler.isActive()) {
-        handler.sendEvent(event, newState, oldState);
-      } else if (oldState === State.ACTIVE) {
-        handler.sendEvent(event, newState, State.BEGAN);
+        handler.sendEvent(newState, oldState);
+      } else if (
+        oldState === State.ACTIVE &&
+        (newState === State.CANCELLED || newState === State.FAILED)
+      ) {
+        handler.sendEvent(newState, State.BEGAN);
       }
     } else if (
       oldState !== State.UNDETERMINED ||
       newState !== State.CANCELLED
     ) {
-      handler.sendEvent(event, newState, oldState);
+      handler.sendEvent(newState, oldState);
     }
 
     this.handlingChangeSemaphore -= 1;
@@ -130,10 +171,7 @@ export default class GestureHandlerOrchestrator {
     }
   }
 
-  private makeActive(
-    handler: GestureHandler,
-    event: AdaptedPointerEvent
-  ): void {
+  private makeActive(handler: GestureHandler): void {
     const currentState = handler.getState();
 
     handler.setActive(true);
@@ -142,33 +180,38 @@ export default class GestureHandlerOrchestrator {
 
     this.gestureHandlers.forEach((otherHandler) => {
       // Order of arguments is correct - we check whether current handler should cancel existing handlers
+
       if (this.shouldHandlerBeCancelledBy(otherHandler, handler)) {
         this.handlersToCancel.push(otherHandler);
       }
     });
 
     for (let i = this.handlersToCancel.length - 1; i >= 0; --i) {
-      this.handlersToCancel[i]?.cancel(event);
+      this.handlersToCancel[i]?.cancel();
     }
     this.awaitingHandlers.forEach((otherHandler) => {
       if (this.shouldHandlerBeCancelledBy(otherHandler, handler)) {
-        otherHandler?.cancel(event);
+        otherHandler?.cancel();
         otherHandler?.setAwaiting(true);
       }
     });
 
-    handler.sendEvent(event, State.ACTIVE, State.BEGAN);
+    handler.sendEvent(State.ACTIVE, State.BEGAN);
 
     if (currentState !== State.ACTIVE) {
-      handler.sendEvent(event, State.END, State.ACTIVE);
+      handler.sendEvent(State.END, State.ACTIVE);
       if (currentState !== State.END) {
-        handler.sendEvent(event, State.UNDETERMINED, State.END);
+        handler.sendEvent(State.UNDETERMINED, State.END);
       }
     }
 
     if (handler.isAwaiting()) {
       handler.setAwaiting(false);
-      handler.end(event);
+      for (let i = 0; i < this.awaitingHandlers.length; ++i) {
+        if (this.awaitingHandlers[i] === handler) {
+          this.awaitingHandlers.splice(i, 1);
+        }
+      }
     }
 
     this.handlersToCancel = [];
@@ -241,16 +284,6 @@ export default class GestureHandlerOrchestrator {
     handler: GestureHandler,
     otherHandler: GestureHandler
   ): boolean {
-    const handlerPointers: number[] = handler.getTrackedPointersID();
-    const otherPointers: number[] = otherHandler.getTrackedPointersID();
-
-    if (
-      !PointerTracker.shareCommonPointers(handlerPointers, otherPointers) &&
-      handler.getView() !== otherHandler.getView()
-    ) {
-      return this.checkOverlap(handler, otherHandler);
-    }
-
     if (this.canRunSimultaneously(handler, otherHandler)) {
       return false;
     }
@@ -263,6 +296,16 @@ export default class GestureHandlerOrchestrator {
       return handler.shouldBeCancelledByOther(otherHandler);
     }
 
+    const handlerPointers: number[] = handler.getTrackedPointersID();
+    const otherPointers: number[] = otherHandler.getTrackedPointersID();
+
+    if (
+      !PointerTracker.shareCommonPointers(handlerPointers, otherPointers) &&
+      handler.getView() !== otherHandler.getView()
+    ) {
+      return this.checkOverlap(handler, otherHandler);
+    }
+
     return true;
   }
 
@@ -286,12 +329,8 @@ export default class GestureHandlerOrchestrator {
       const handlerY: number = handler.getTracker().getLastY(pointer);
 
       if (
-        handler
-          .getEventManager()
-          .isPointerInBounds({ x: handlerX, y: handlerY }) &&
-        otherHandler
-          .getEventManager()
-          .isPointerInBounds({ x: handlerX, y: handlerY })
+        isPointerInBounds(handler.getView(), { x: handlerX, y: handlerY }) &&
+        isPointerInBounds(otherHandler.getView(), { x: handlerX, y: handlerY })
       ) {
         overlap = true;
       }
@@ -302,10 +341,8 @@ export default class GestureHandlerOrchestrator {
       const otherY: number = otherHandler.getTracker().getLastY(pointer);
 
       if (
-        handler.getEventManager().isPointerInBounds({ x: otherX, y: otherY }) &&
-        otherHandler
-          .getEventManager()
-          .isPointerInBounds({ x: otherX, y: otherY })
+        isPointerInBounds(handler.getView(), { x: otherX, y: otherY }) &&
+        isPointerInBounds(otherHandler.getView(), { x: otherX, y: otherY })
       ) {
         overlap = true;
       }
@@ -320,9 +357,40 @@ export default class GestureHandlerOrchestrator {
     );
   }
 
+  // This function is called when handler receives touchdown event
+  // If handler is using mouse or pen as a pointer and any handler receives touch event,
+  // mouse/pen event dissappears - it doesn't send onPointerCancel nor onPointerUp (and others)
+  // This became a problem because handler was left at active state without any signal to end or fail
+  // To handle this, when new touch event is received, we loop through active handlers and check which type of
+  // pointer they're using. If there are any handler with mouse/pen as a pointer, we cancel them
+  public cancelMouseAndPenGestures(currentHandler: GestureHandler): void {
+    this.gestureHandlers.forEach((handler: GestureHandler) => {
+      if (
+        handler.getPointerType() !== PointerType.MOUSE &&
+        handler.getPointerType() !== PointerType.PEN
+      ) {
+        return;
+      }
+
+      if (handler !== currentHandler) {
+        handler.cancel();
+      } else {
+        // Handler that received touch event should have its pointer tracker reset
+        // This allows handler to smoothly change from mouse/pen to touch
+        // The drawback is, that when we try to use mouse/pen one more time, it doesn't send onPointerDown at the first time
+        // so it is required to click two times to get handler to work
+        //
+        // However, handler will receive manually created onPointerEnter that is triggered in EventManager in onPointerMove method.
+        // There may be possibility to use that fact to make handler respond properly to first mouse click
+        handler.getTracker().resetTracker();
+      }
+    });
+  }
+
   public static getInstance(): GestureHandlerOrchestrator {
-    if (!GestureHandlerOrchestrator.instance)
+    if (!GestureHandlerOrchestrator.instance) {
       GestureHandlerOrchestrator.instance = new GestureHandlerOrchestrator();
+    }
 
     return GestureHandlerOrchestrator.instance;
   }