react-native-gesture-handler 2.6.0 → 2.6.1

package/src/web/tools/InteractionManager.ts

@@ -2,19 +2,26 @@ import GestureHandler from '../handlers/GestureHandler';
 import { Config, Handler } from '../interfaces';
 
 export default class InteractionManager {
+  private static instance: InteractionManager;
   private readonly waitForRelations: Map<number, number[]> = new Map();
   private readonly simultaneousRelations: Map<number, number[]> = new Map();
 
+  // Private becaues of singleton
+  // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
+  private constructor() {}
+
   public configureInteractions(handler: GestureHandler, config: Config) {
     this.dropRelationsForHandlerWithTag(handler.getTag());
 
     if (config.waitFor) {
       const waitFor: number[] = [];
-      config.waitFor.forEach((handler: Handler): void => {
-        if (typeof handler === 'number') {
-          waitFor.push(handler);
+      config.waitFor.forEach((otherHandler: Handler): void => {
+        // New API reference
+        if (typeof otherHandler === 'number') {
+          waitFor.push(otherHandler);
         } else {
-          waitFor.push(handler.handlerTag);
+          // Old API reference
+          waitFor.push(otherHandler.handlerTag);
         }
       });
 
@@ -23,17 +30,16 @@ export default class InteractionManager {
 
     if (config.simultaneousHandlers) {
       const simultaneousHandlers: number[] = [];
-      config.simultaneousHandlers.forEach((handler: Handler): void => {
-        if (typeof handler === 'number') {
-          simultaneousHandlers.push(handler);
+      config.simultaneousHandlers.forEach((otherHandler: Handler): void => {
+        if (typeof otherHandler === 'number') {
+          simultaneousHandlers.push(otherHandler);
         } else {
-          simultaneousHandlers.push(handler.handlerTag);
+          simultaneousHandlers.push(otherHandler.handlerTag);
         }
       });
 
       this.simultaneousRelations.set(handler.getTag(), simultaneousHandlers);
     }
-    handler.setInteractionManager(this);
   }
 
   public shouldWaitForHandlerFailure(
@@ -86,6 +92,7 @@ export default class InteractionManager {
     _handler: GestureHandler,
     _otherHandler: GestureHandler
   ): boolean {
+    //TODO: Implement logic
     return false;
   }
 
@@ -93,6 +100,7 @@ export default class InteractionManager {
     _handler: GestureHandler,
     _otherHandler: GestureHandler
   ): boolean {
+    //TODO: Implement logic
     return false;
   }
 
@@ -105,4 +113,12 @@ export default class InteractionManager {
     this.waitForRelations.clear();
     this.simultaneousRelations.clear();
   }
+
+  public static getInstance(): InteractionManager {
+    if (!this.instance) {
+      this.instance = new InteractionManager();
+    }
+
+    return this.instance;
+  }
 }

package/src/web/tools/NodeManager.ts

@@ -2,13 +2,13 @@ import { ValueOf } from '../../typeUtils';
 import { Gestures } from '../../RNGestureHandlerModule.web';
 
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
-export default class NodeManager {
+export default abstract class NodeManager {
   private static gestures: Record<
     number,
     InstanceType<ValueOf<typeof Gestures>>
   > = {};
 
-  static getHandler(tag: number) {
+  public static getHandler(tag: number) {
     if (tag in this.gestures) {
       return this.gestures[tag];
     }
@@ -16,10 +16,10 @@ export default class NodeManager {
     throw new Error(`No handler for tag ${tag}`);
   }
 
-  static createGestureHandler(
+  public static createGestureHandler(
     handlerTag: number,
     handler: InstanceType<ValueOf<typeof Gestures>>
-  ) {
+  ): void {
     if (handlerTag in this.gestures) {
       throw new Error(`Handler with tag ${handlerTag} already exists`);
     }
@@ -28,7 +28,7 @@ export default class NodeManager {
     this.gestures[handlerTag].setTag(handlerTag);
   }
 
-  static dropGestureHandler(handlerTag: number) {
+  public static dropGestureHandler(handlerTag: number): void {
     if (!(handlerTag in this.gestures)) {
       return;
     }
@@ -37,7 +37,7 @@ export default class NodeManager {
     delete this.gestures[handlerTag];
   }
 
-  static getNodes() {
+  public static getNodes() {
     return { ...this.gestures };
   }
 }

package/src/web/tools/PointerEventManager.ts

@@ -0,0 +1,134 @@
+import {
+  AdaptedEvent,
+  EventTypes,
+  MouseButtons,
+  PointerType,
+} from '../interfaces';
+import EventManager from './EventManager';
+import { isPointerInBounds } from '../utils';
+
+export default class PointerEventManager extends EventManager {
+  public setListeners(): void {
+    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+      if (
+        !isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })
+      ) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
+      const target = event.target as HTMLElement;
+
+      target.setPointerCapture(adaptedEvent.pointerId);
+      this.markAsInBounds(adaptedEvent.pointerId);
+
+      if (++this.activePointersCounter > 1) {
+        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+        this.onPointerAdd(adaptedEvent);
+      } else {
+        this.onPointerDown(adaptedEvent);
+      }
+    });
+
+    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      // When we call reset on gesture handlers, it also resets their event managers
+      // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
+      // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
+      // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
+      if (this.activePointersCounter === 0) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
+      const target = event.target as HTMLElement;
+
+      target.releasePointerCapture(adaptedEvent.pointerId);
+      this.markAsOutOfBounds(adaptedEvent.pointerId);
+
+      if (--this.activePointersCounter > 0) {
+        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+        this.onPointerRemove(adaptedEvent);
+      } else {
+        this.onPointerUp(adaptedEvent);
+      }
+    });
+
+    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      if (
+        event.pointerType === PointerType.MOUSE &&
+        event.buttons !== MouseButtons.LEFT
+      ) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.MOVE);
+
+      const inBounds: boolean = isPointerInBounds(this.view, {
+        x: adaptedEvent.x,
+        y: adaptedEvent.y,
+      });
+
+      const pointerIndex: number = this.pointersInBounds.indexOf(
+        adaptedEvent.pointerId
+      );
+
+      if (inBounds) {
+        if (pointerIndex < 0) {
+          adaptedEvent.eventType = EventTypes.ENTER;
+          this.onPointerEnter(adaptedEvent);
+          this.markAsInBounds(adaptedEvent.pointerId);
+        } else {
+          this.onPointerMove(adaptedEvent);
+        }
+      } else {
+        if (pointerIndex >= 0) {
+          adaptedEvent.eventType = EventTypes.OUT;
+          this.onPointerOut(adaptedEvent);
+          this.markAsOutOfBounds(adaptedEvent.pointerId);
+        } else {
+          this.onPointerOutOfBounds(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(
+        event,
+        EventTypes.CANCEL
+      );
+
+      this.onPointerCancel(adaptedEvent);
+      this.markAsOutOfBounds(adaptedEvent.pointerId);
+      this.activePointersCounter = 0;
+    });
+  }
+
+  protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
+    return {
+      x: event.clientX,
+      y: event.clientY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY,
+      pointerId: event.pointerId,
+      eventType: eventType,
+      pointerType: event.pointerType as PointerType,
+      buttons: event.buttons,
+      time: event.timeStamp,
+    };
+  }
+}

package/src/web/tools/PointerTracker.ts

@@ -1,6 +1,6 @@
-import { AdaptedPointerEvent } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 
-interface TrackerElement {
+export interface TrackerElement {
   lastX: number;
   lastY: number;
 
@@ -10,7 +10,9 @@ interface TrackerElement {
   velocityY: number;
 }
 
+// Used to scale velocity so that it is similar to velocity in Android/iOS
 const VELOCITY_FACTOR = 0.2;
+const MAX_POINTERS = 20;
 
 export default class PointerTracker {
   private trackedPointers: Map<number, TrackerElement> = new Map<
@@ -18,11 +20,27 @@ export default class PointerTracker {
     TrackerElement
   >();
 
-  public addToTracker(event: AdaptedPointerEvent): void {
+  private touchEventsIds: Map<number, number> = new Map<number, number>();
+
+  private lastMovedPointerId: number;
+
+  private cachedAverages: { x: number; y: number } = { x: 0, y: 0 };
+
+  public constructor() {
+    this.lastMovedPointerId = NaN;
+
+    for (let i = 0; i < MAX_POINTERS; ++i) {
+      this.touchEventsIds.set(i, NaN);
+    }
+  }
+
+  public addToTracker(event: AdaptedEvent): void {
     if (this.trackedPointers.has(event.pointerId)) {
       return;
     }
 
+    this.lastMovedPointerId = event.pointerId;
+
     const newElement: TrackerElement = {
       lastX: event.x,
       lastY: event.y,
@@ -32,13 +50,20 @@ export default class PointerTracker {
     };
 
     this.trackedPointers.set(event.pointerId, newElement);
+    this.mapTouchEventId(event.pointerId);
+
+    this.cachedAverages = {
+      x: this.getLastAvgX(),
+      y: this.getLastAvgY(),
+    };
   }
 
   public removeFromTracker(pointerId: number): void {
     this.trackedPointers.delete(pointerId);
+    this.removeMappedTouchId(pointerId);
   }
 
-  public track(event: AdaptedPointerEvent): void {
+  public track(event: AdaptedEvent): void {
     const element: TrackerElement = this.trackedPointers.get(
       event.pointerId
     ) as TrackerElement;
@@ -47,6 +72,8 @@ export default class PointerTracker {
       return;
     }
 
+    this.lastMovedPointerId = event.pointerId;
+
     const dx = event.x - element.lastX;
     const dy = event.y - element.lastY;
     const dt = event.time - element.timeStamp;
@@ -58,6 +85,41 @@ export default class PointerTracker {
     element.lastY = event.y;
 
     this.trackedPointers.set(event.pointerId, element);
+
+    const avgX: number = this.getLastAvgX();
+    const avgY: number = this.getLastAvgY();
+
+    this.cachedAverages = {
+      x: avgX,
+      y: avgY,
+    };
+  }
+
+  //Mapping TouchEvents ID
+  private mapTouchEventId(id: number): void {
+    for (const [mappedId, touchId] of this.touchEventsIds) {
+      if (isNaN(touchId)) {
+        this.touchEventsIds.set(mappedId, id);
+        break;
+      }
+    }
+  }
+
+  private removeMappedTouchId(id: number): void {
+    const mappedId: number = this.getMappedTouchEventId(id);
+    if (!isNaN(mappedId)) {
+      this.touchEventsIds.set(mappedId, NaN);
+    }
+  }
+
+  public getMappedTouchEventId(touchEventId: number): number {
+    for (const [key, value] of this.touchEventsIds.entries()) {
+      if (value === touchEventId) {
+        return key;
+      }
+    }
+
+    return NaN;
   }
 
   public getVelocityX(pointerId: number): number {
@@ -66,17 +128,60 @@ export default class PointerTracker {
   public getVelocityY(pointerId: number): number {
     return this.trackedPointers.get(pointerId)?.velocityY as number;
   }
-  public getLastX(pointerId: number): number {
-    return this.trackedPointers.get(pointerId)?.lastX as number;
+
+  /**
+   * Returns X coordinate of last moved pointer
+   */
+  public getLastX(): number;
+
+  /**
+   *
+   * @param pointerId
+   * Returns X coordinate of given pointer
+   */
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  public getLastX(pointerId: number): number;
+
+  public getLastX(pointerId?: number): number {
+    if (pointerId) {
+      return this.trackedPointers.get(pointerId)?.lastX as number;
+    } else {
+      return this.trackedPointers.get(this.lastMovedPointerId)?.lastX as number;
+    }
   }
-  public getLastY(pointerId: number): number {
-    return this.trackedPointers.get(pointerId)?.lastY as number;
+
+  /**
+   * Returns Y coordinate of last moved pointer
+   */
+  public getLastY(): number;
+
+  /**
+   *
+   * @param pointerId
+   * Returns Y coordinate of given pointer
+   */
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  public getLastY(pointerId: number): number;
+
+  public getLastY(pointerId?: number): number {
+    if (pointerId) {
+      return this.trackedPointers.get(pointerId)?.lastY as number;
+    } else {
+      return this.trackedPointers.get(this.lastMovedPointerId)?.lastY as number;
+    }
   }
+
+  // Some handlers use these methods to send average values in native event.
+  // This may happen when pointers have already been removed from tracker (i.e. pointerup event).
+  // In situation when NaN would be sent as a response, we return cached value.
+  // That prevents handlers from crashing
   public getLastAvgX(): number {
-    return this.getSumX() / this.trackedPointers.size;
+    const avgX: number = this.getSumX() / this.trackedPointers.size;
+    return isNaN(avgX) ? this.cachedAverages.x : avgX;
   }
   public getLastAvgY(): number {
-    return this.getSumY() / this.trackedPointers.size;
+    const avgY: number = this.getSumY() / this.trackedPointers.size;
+    return isNaN(avgY) ? this.cachedAverages.y : avgY;
   }
   public getSumX(ignoredPointer?: number): number {
     let sumX = 0;
@@ -119,6 +224,11 @@ export default class PointerTracker {
 
   public resetTracker(): void {
     this.trackedPointers.clear();
+    this.lastMovedPointerId = NaN;
+
+    for (let i = 0; i < MAX_POINTERS; ++i) {
+      this.touchEventsIds.set(i, NaN);
+    }
   }
 
   public static shareCommonPointers(

package/src/web/tools/TouchEventManager.ts

@@ -0,0 +1,167 @@
+import {
+  AdaptedEvent,
+  EventTypes,
+  MouseButtons,
+  PointerType,
+  TouchEventType,
+} from '../interfaces';
+import EventManager from './EventManager';
+import { isPointerInBounds } from '../utils';
+
+export default class TouchEventManager extends EventManager {
+  public setListeners(): void {
+    this.view.addEventListener('touchstart', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.DOWN,
+          i,
+          TouchEventType.DOWN
+        );
+
+        // Here we skip stylus, because in case of anything different than touch we want to handle it by using PointerEvents
+        // If we leave stylus to send touch events, handlers will receive every action twice
+        if (
+          !isPointerInBounds(this.view, {
+            x: adaptedEvent.x,
+            y: adaptedEvent.y,
+          }) ||
+          //@ts-ignore touchType field does exist
+          event.changedTouches[i].touchType === 'stylus'
+        ) {
+          continue;
+        }
+
+        this.markAsInBounds(adaptedEvent.pointerId);
+
+        if (++this.activePointersCounter > 1) {
+          adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+          this.onPointerAdd(adaptedEvent);
+        } else {
+          this.onPointerDown(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('touchmove', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.MOVE,
+          i,
+          TouchEventType.MOVE
+        );
+        //@ts-ignore touchType field does exist
+        if (event.changedTouches[i].touchType === 'stylus') {
+          continue;
+        }
+
+        const inBounds: boolean = isPointerInBounds(this.view, {
+          x: adaptedEvent.x,
+          y: adaptedEvent.y,
+        });
+
+        const pointerIndex: number = this.pointersInBounds.indexOf(
+          adaptedEvent.pointerId
+        );
+
+        if (inBounds) {
+          if (pointerIndex < 0) {
+            adaptedEvent.eventType = EventTypes.ENTER;
+            this.onPointerEnter(adaptedEvent);
+            this.markAsInBounds(adaptedEvent.pointerId);
+          } else {
+            this.onPointerMove(adaptedEvent);
+          }
+        } else {
+          if (pointerIndex >= 0) {
+            adaptedEvent.eventType = EventTypes.OUT;
+            this.onPointerOut(adaptedEvent);
+            this.markAsOutOfBounds(adaptedEvent.pointerId);
+          } else {
+            this.onPointerOutOfBounds(adaptedEvent);
+          }
+        }
+      }
+    });
+
+    this.view.addEventListener('touchend', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        // When we call reset on gesture handlers, it also resets their event managers
+        // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
+        // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
+        // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
+        if (this.activePointersCounter === 0) {
+          break;
+        }
+
+        //@ts-ignore touchType field does exist
+        if (event.changedTouches[i].touchType === 'stylus') {
+          continue;
+        }
+
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.UP,
+          i,
+          TouchEventType.UP
+        );
+
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
+
+        if (--this.activePointersCounter > 0) {
+          adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+          this.onPointerRemove(adaptedEvent);
+        } else {
+          this.onPointerUp(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('touchcancel', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.CANCEL,
+          i,
+          TouchEventType.CANCELLED
+        );
+
+        //@ts-ignore touchType field does exist
+        if (event.changedTouches[i].touchType === 'stylus') {
+          continue;
+        }
+
+        this.onPointerCancel(adaptedEvent);
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
+        this.activePointersCounter = 0;
+      }
+    });
+  }
+
+  protected mapEvent(
+    event: TouchEvent,
+    eventType: EventTypes,
+    index: number,
+    touchEventType: TouchEventType
+  ): AdaptedEvent {
+    const rect = this.view.getBoundingClientRect();
+    const clientX = event.changedTouches[index].clientX;
+    const clientY = event.changedTouches[index].clientY;
+
+    return {
+      x: clientX,
+      y: clientY,
+      offsetX: clientX - rect.left,
+      offsetY: clientY - rect.top,
+      pointerId: event.changedTouches[index].identifier,
+      eventType: eventType,
+      pointerType: PointerType.TOUCH,
+      buttons: MouseButtons.NONE,
+      time: event.timeStamp,
+      allTouches: event.touches,
+      changedTouches: event.changedTouches,
+      touchEventType: touchEventType,
+    };
+  }
+}

package/src/web/utils.ts

@@ -0,0 +1,8 @@
+export function isPointerInBounds(
+  view: HTMLElement,
+  { x, y }: { x: number; y: number }
+): boolean {
+  const rect: DOMRect = view.getBoundingClientRect();
+
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}