react-native-gesture-handler 2.4.1 → 2.6.0

package/src/web/tools/InteractionManager.ts

@@ -0,0 +1,108 @@
+import GestureHandler from '../handlers/GestureHandler';
+import { Config, Handler } from '../interfaces';
+
+export default class InteractionManager {
+  private readonly waitForRelations: Map<number, number[]> = new Map();
+  private readonly simultaneousRelations: Map<number, number[]> = new Map();
+
+  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);
+        } else {
+          waitFor.push(handler.handlerTag);
+        }
+      });
+
+      this.waitForRelations.set(handler.getTag(), waitFor);
+    }
+
+    if (config.simultaneousHandlers) {
+      const simultaneousHandlers: number[] = [];
+      config.simultaneousHandlers.forEach((handler: Handler): void => {
+        if (typeof handler === 'number') {
+          simultaneousHandlers.push(handler);
+        } else {
+          simultaneousHandlers.push(handler.handlerTag);
+        }
+      });
+
+      this.simultaneousRelations.set(handler.getTag(), simultaneousHandlers);
+    }
+    handler.setInteractionManager(this);
+  }
+
+  public shouldWaitForHandlerFailure(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    const waitFor: number[] | undefined = this.waitForRelations.get(
+      handler.getTag()
+    );
+    if (!waitFor) {
+      return false;
+    }
+
+    let shouldWait = false;
+
+    waitFor.forEach((tag: number): void => {
+      if (tag === otherHandler.getTag()) {
+        shouldWait = true;
+        return; //Returns from callback
+      }
+    });
+
+    return shouldWait;
+  }
+
+  public shouldRecognizeSimultaneously(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    const simultaneousHandlers:
+      | number[]
+      | undefined = this.simultaneousRelations.get(handler.getTag());
+    if (!simultaneousHandlers) {
+      return false;
+    }
+
+    let shouldRecognizeSimultaneously = false;
+
+    simultaneousHandlers.forEach((tag: number): void => {
+      if (tag === otherHandler.getTag()) {
+        shouldRecognizeSimultaneously = true;
+        return;
+      }
+    });
+
+    return shouldRecognizeSimultaneously;
+  }
+
+  public shouldRequireHandlerToWaitForFailure(
+    _handler: GestureHandler,
+    _otherHandler: GestureHandler
+  ): boolean {
+    return false;
+  }
+
+  public shouldHandlerBeCancelledBy(
+    _handler: GestureHandler,
+    _otherHandler: GestureHandler
+  ): boolean {
+    return false;
+  }
+
+  public dropRelationsForHandlerWithTag(handlerTag: number): void {
+    this.waitForRelations.delete(handlerTag);
+    this.simultaneousRelations.delete(handlerTag);
+  }
+
+  public reset() {
+    this.waitForRelations.clear();
+    this.simultaneousRelations.clear();
+  }
+}

package/src/web/tools/NodeManager.ts

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

package/src/web/tools/PointerTracker.ts

@@ -0,0 +1,130 @@
+import { AdaptedPointerEvent } from '../interfaces';
+
+interface TrackerElement {
+  lastX: number;
+  lastY: number;
+
+  timeStamp: number;
+
+  velocityX: number;
+  velocityY: number;
+}
+
+const VELOCITY_FACTOR = 0.2;
+
+export default class PointerTracker {
+  private trackedPointers: Map<number, TrackerElement> = new Map<
+    number,
+    TrackerElement
+  >();
+
+  public addToTracker(event: AdaptedPointerEvent): void {
+    if (this.trackedPointers.has(event.pointerId)) {
+      return;
+    }
+
+    const newElement: TrackerElement = {
+      lastX: event.x,
+      lastY: event.y,
+      timeStamp: event.time,
+      velocityX: 0,
+      velocityY: 0,
+    };
+
+    this.trackedPointers.set(event.pointerId, newElement);
+  }
+
+  public removeFromTracker(pointerId: number): void {
+    this.trackedPointers.delete(pointerId);
+  }
+
+  public track(event: AdaptedPointerEvent): void {
+    const element: TrackerElement = this.trackedPointers.get(
+      event.pointerId
+    ) as TrackerElement;
+
+    if (!element) {
+      return;
+    }
+
+    const dx = event.x - element.lastX;
+    const dy = event.y - element.lastY;
+    const dt = event.time - element.timeStamp;
+
+    element.velocityX = (dx / dt) * 1000 * VELOCITY_FACTOR;
+    element.velocityY = (dy / dt) * 1000 * VELOCITY_FACTOR;
+
+    element.lastX = event.x;
+    element.lastY = event.y;
+
+    this.trackedPointers.set(event.pointerId, element);
+  }
+
+  public getVelocityX(pointerId: number): number {
+    return this.trackedPointers.get(pointerId)?.velocityX as number;
+  }
+  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;
+  }
+  public getLastY(pointerId: number): number {
+    return this.trackedPointers.get(pointerId)?.lastY as number;
+  }
+  public getLastAvgX(): number {
+    return this.getSumX() / this.trackedPointers.size;
+  }
+  public getLastAvgY(): number {
+    return this.getSumY() / this.trackedPointers.size;
+  }
+  public getSumX(ignoredPointer?: number): number {
+    let sumX = 0;
+
+    this.trackedPointers.forEach((value, key) => {
+      if (key !== ignoredPointer) {
+        sumX += value.lastX;
+      }
+    });
+
+    return sumX;
+  }
+  public getSumY(ignoredPointer?: number): number {
+    let sumY = 0;
+
+    this.trackedPointers.forEach((value, key) => {
+      if (key !== ignoredPointer) {
+        sumY += value.lastY;
+      }
+    });
+
+    return sumY;
+  }
+  public getTrackedPointersCount(): number {
+    return this.trackedPointers.size;
+  }
+  public getTrackedPointersID(): number[] {
+    const keys: number[] = [];
+
+    this.trackedPointers.forEach((_value, key) => {
+      keys.push(key);
+    });
+
+    return keys;
+  }
+
+  public getData(): Map<number, TrackerElement> {
+    return this.trackedPointers;
+  }
+
+  public resetTracker(): void {
+    this.trackedPointers.clear();
+  }
+
+  public static shareCommonPointers(
+    stPointers: number[],
+    ndPointers: number[]
+  ): boolean {
+    return stPointers.some((pointerId) => ndPointers.includes(pointerId));
+  }
+}

package/src/{web → web_hammer}/GestureHandler.ts

@@ -29,6 +29,7 @@ export type Config = Partial<{
   activeOffsetYStart: number;
   activeOffsetYEnd: number;
   waitFor: any[] | null;
+  simultaneousHandlers: any[] | null;
 }>;
 
 type NativeEvent = ReturnType<GestureHandler['transformEventData']>;
@@ -61,6 +62,12 @@ abstract class GestureHandler {
     return `${this.name}${this.gestureInstance}`;
   }
 
+  // a simple way to check if GestureHandler is NativeViewGestureHandler, since importing it
+  // here to use instanceof would cause import cycle
+  get isNative() {
+    return false;
+  }
+
   get isDiscrete() {
     return false;
   }
@@ -115,7 +122,7 @@ abstract class GestureHandler {
   updateGestureConfig({ enabled = true, ...props }) {
     this.clearSelfAsPending();
 
-    this.config = ensureConfig({ enabled, ...props });
+    this.config = this.ensureConfig({ enabled, ...props });
     this.hasCustomActivationCriteria = this.updateHasCustomActivationCriteria(
       this.config
     );
@@ -259,6 +266,12 @@ abstract class GestureHandler {
     }
   }
 
+  shouldUseTouchEvents(config: Config) {
+    return (
+      config.simultaneousHandlers?.some((handler) => handler.isNative) ?? false
+    );
+  }
+
   setView(ref: Parameters<typeof findNodeHandle>['0'], propsRef: any) {
     if (ref == null) {
       this.destroy();
@@ -266,11 +279,22 @@ abstract class GestureHandler {
       return;
     }
 
+    // @ts-ignore window doesn't exist on global type as we don't want to use Node types
+    const SUPPORTS_TOUCH = 'ontouchstart' in window;
     this.propsRef = propsRef;
     this.ref = ref;
 
     this.view = findNodeHandle(ref);
-    this.hammer = new Hammer.Manager(this.view as any);
+
+    // When the browser starts handling the gesture (e.g. scrolling), it sends a pointercancel event and stops
+    // sending additional pointer events. This is not the case with touch events, so if the gesture is simultaneous
+    // with a NativeGestureHandler, we need to check if touch events are supported and use them if possible.
+    this.hammer =
+      SUPPORTS_TOUCH && this.shouldUseTouchEvents(this.config)
+        ? new Hammer.Manager(this.view as any, {
+            inputClass: Hammer.TouchInput,
+          })
+        : new Hammer.Manager(this.view as any);
 
     this.oldState = State.UNDETERMINED;
     this.previousState = State.UNDETERMINED;
@@ -446,6 +470,82 @@ abstract class GestureHandler {
   };
 
   simulateCancelEvent(_inputData: any) {}
+
+  // Validate the props
+  ensureConfig(config: Config): Required<Config> {
+    const props = { ...config };
+
+    // TODO(TS) We use ! to assert that if property is present then value is not empty (null, undefined)
+    if ('minDist' in config) {
+      props.minDist = config.minDist;
+      props.minDistSq = props.minDist! * props.minDist!;
+    }
+    if ('minVelocity' in config) {
+      props.minVelocity = config.minVelocity;
+      props.minVelocitySq = props.minVelocity! * props.minVelocity!;
+    }
+    if ('maxDist' in config) {
+      props.maxDist = config.maxDist;
+      props.maxDistSq = config.maxDist! * config.maxDist!;
+    }
+    if ('waitFor' in config) {
+      props.waitFor = asArray(config.waitFor)
+        .map(({ handlerTag }: { handlerTag: number }) =>
+          NodeManager.getHandler(handlerTag)
+        )
+        .filter((v) => v);
+    } else {
+      props.waitFor = null;
+    }
+    if ('simultaneousHandlers' in config) {
+      const shouldUseTouchEvents = this.shouldUseTouchEvents(this.config);
+      props.simultaneousHandlers = asArray(config.simultaneousHandlers)
+        .map((handler: number | GestureHandler) => {
+          if (typeof handler === 'number') {
+            return NodeManager.getHandler(handler);
+          } else {
+            return NodeManager.getHandler(handler.handlerTag);
+          }
+        })
+        .filter((v) => v);
+
+      if (shouldUseTouchEvents !== this.shouldUseTouchEvents(props)) {
+        requestAnimationFrame(() => {
+          // if the undelying event API needs to be changed, we need to unmount and mount
+          // the hammer instance again.
+          this.destroy();
+          this.setView(this.ref, this.propsRef);
+        });
+      }
+    } else {
+      props.simultaneousHandlers = null;
+    }
+
+    const configProps = [
+      'minPointers',
+      'maxPointers',
+      'minDist',
+      'maxDist',
+      'maxDistSq',
+      'minVelocitySq',
+      'minDistSq',
+      'minVelocity',
+      'failOffsetXStart',
+      'failOffsetYStart',
+      'failOffsetXEnd',
+      'failOffsetYEnd',
+      'activeOffsetXStart',
+      'activeOffsetXEnd',
+      'activeOffsetYStart',
+      'activeOffsetYEnd',
+    ] as const;
+    configProps.forEach((prop: typeof configProps[number]) => {
+      if (typeof props[prop] === 'undefined') {
+        props[prop] = Number.NaN;
+      }
+    });
+    return props as Required<Config>; // TODO(TS) how to convince TS that props are filled?
+  }
 }
 
 // TODO(TS) investigate this method
@@ -492,59 +592,6 @@ function invokeNullableMethod(
   }
 }
 
-// Validate the props
-function ensureConfig(config: Config): Required<Config> {
-  const props = { ...config };
-
-  // TODO(TS) We use ! to assert that if property is present then value is not empty (null, undefined)
-  if ('minDist' in config) {
-    props.minDist = config.minDist;
-    props.minDistSq = props.minDist! * props.minDist!;
-  }
-  if ('minVelocity' in config) {
-    props.minVelocity = config.minVelocity;
-    props.minVelocitySq = props.minVelocity! * props.minVelocity!;
-  }
-  if ('maxDist' in config) {
-    props.maxDist = config.maxDist;
-    props.maxDistSq = config.maxDist! * config.maxDist!;
-  }
-  if ('waitFor' in config) {
-    props.waitFor = asArray(config.waitFor)
-      .map(({ handlerTag }: { handlerTag: number }) =>
-        NodeManager.getHandler(handlerTag)
-      )
-      .filter((v) => v);
-  } else {
-    props.waitFor = null;
-  }
-
-  const configProps = [
-    'minPointers',
-    'maxPointers',
-    'minDist',
-    'maxDist',
-    'maxDistSq',
-    'minVelocitySq',
-    'minDistSq',
-    'minVelocity',
-    'failOffsetXStart',
-    'failOffsetYStart',
-    'failOffsetXEnd',
-    'failOffsetYEnd',
-    'activeOffsetXStart',
-    'activeOffsetXEnd',
-    'activeOffsetYStart',
-    'activeOffsetYEnd',
-  ] as const;
-  configProps.forEach((prop: typeof configProps[number]) => {
-    if (typeof props[prop] === 'undefined') {
-      props[prop] = Number.NaN;
-    }
-  });
-  return props as Required<Config>; // TODO(TS) how to convince TS that props are filled?
-}
-
 function asArray<T>(value: T | T[]) {
   // TODO(TS) use config.waitFor type
   return value == null ? [] : Array.isArray(value) ? value : [value];

package/src/{web → web_hammer}/NativeViewGestureHandler.ts

@@ -5,6 +5,10 @@ import PressGestureHandler from './PressGestureHandler';
 import { TEST_MIN_IF_NOT_NAN, VEC_LEN_SQ } from './utils';
 
 class NativeViewGestureHandler extends PressGestureHandler {
+  get isNative() {
+    return true;
+  }
+
   onRawEvent(ev: HammerInputExt) {
     super.onRawEvent(ev);
     if (!ev.isFinal) {

package/src/{web → web_hammer}/NodeManager.ts

@@ -1,7 +1,10 @@
 import { ValueOf } from '../typeUtils';
-import { Gestures } from '../RNGestureHandlerModule.web';
+import { HammerGestures } from '../RNGestureHandlerModule.web';
 
-const gestures: Record<number, InstanceType<ValueOf<typeof Gestures>>> = {};
+const gestures: Record<
+  number,
+  InstanceType<ValueOf<typeof HammerGestures>>
+> = {};
 
 export function getHandler(tag: number) {
   if (tag in gestures) return gestures[tag];
@@ -11,7 +14,7 @@ export function getHandler(tag: number) {
 
 export function createGestureHandler(
   handlerTag: number,
-  handler: InstanceType<ValueOf<typeof Gestures>>
+  handler: InstanceType<ValueOf<typeof HammerGestures>>
 ) {
   if (handlerTag in gestures) {
     throw new Error(`Handler with tag ${handlerTag} already exists`);

package/src/web_hammer/constants.ts

@@ -0,0 +1,48 @@
+import Hammer from '@egjs/hammerjs';
+
+import { State } from '../State';
+
+export const CONTENT_TOUCHES_DELAY = 240;
+export const CONTENT_TOUCHES_QUICK_TAP_END_DELAY = 50;
+export const MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD = 0.1;
+export const MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD = 7;
+export const DEG_RAD = Math.PI / 180;
+
+// Map Hammer values to RNGH
+export const EventMap = {
+  [Hammer.INPUT_START]: State.BEGAN,
+  [Hammer.INPUT_MOVE]: State.ACTIVE,
+  [Hammer.INPUT_END]: State.END,
+  [Hammer.INPUT_CANCEL]: State.FAILED,
+} as const;
+
+export const Direction = {
+  RIGHT: 1,
+  LEFT: 2,
+  UP: 4,
+  DOWN: 8,
+};
+
+export const DirectionMap = {
+  [Hammer.DIRECTION_RIGHT]: Direction.RIGHT,
+  [Hammer.DIRECTION_LEFT]: Direction.LEFT,
+  [Hammer.DIRECTION_UP]: Direction.UP,
+  [Hammer.DIRECTION_DOWN]: Direction.DOWN,
+};
+
+export const HammerInputNames = {
+  [Hammer.INPUT_START]: 'START',
+  [Hammer.INPUT_MOVE]: 'MOVE',
+  [Hammer.INPUT_END]: 'END',
+  [Hammer.INPUT_CANCEL]: 'CANCEL',
+};
+export const HammerDirectionNames = {
+  [Hammer.DIRECTION_HORIZONTAL]: 'HORIZONTAL',
+  [Hammer.DIRECTION_UP]: 'UP',
+  [Hammer.DIRECTION_DOWN]: 'DOWN',
+  [Hammer.DIRECTION_VERTICAL]: 'VERTICAL',
+  [Hammer.DIRECTION_NONE]: 'NONE',
+  [Hammer.DIRECTION_ALL]: 'ALL',
+  [Hammer.DIRECTION_RIGHT]: 'RIGHT',
+  [Hammer.DIRECTION_LEFT]: 'LEFT',
+};

package/src/{web → web_hammer}/utils.ts

@@ -20,5 +20,5 @@ export function fireAfterInterval(
     method();
     return null;
   }
-  return setTimeout(() => method(), interval);
+  return setTimeout(() => method(), interval as number);
 }

package/android/src/main/jni/Android.mk

@@ -1,53 +0,0 @@
-GESTURE_HANDLER_MAIN_THIS_DIR := $(call my-dir)
-
-include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
-
-# libreact_render_uimanager
-include $(CLEAR_VARS)
-LOCAL_MODULE := libreact_render_uimanager
-LOCAL_SRC_FILES := $(REACT_NDK_EXPORT_DIR)/$(TARGET_ARCH_ABI)/libreact_render_uimanager.so
-LOCAL_EXPORT_C_INCLUDES := \
-  $(REACT_COMMON_DIR)/react/renderer/uimanager
-include $(PREBUILT_SHARED_LIBRARY)
-# end libreact_render_uimanager
-
-include $(GESTURE_HANDLER_MAIN_THIS_DIR)/../../../build/generated/source/codegen/jni/Android.mk
-
-include $(CLEAR_VARS)
-
-LOCAL_PATH := $(GESTURE_HANDLER_MAIN_THIS_DIR)
-LOCAL_MODULE := rngesturehandler_modules
-
-LOCAL_C_INCLUDES := $(LOCAL_PATH) $(GENERATED_SRC_DIR)/codegen/jni
-LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
-LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) $(GENERATED_SRC_DIR)/codegen/jni
-
-# Please note as one of the library listed is libreact_codegen_samplelibrary
-# This name will be generated as libreact_codegen_<library-name>
-# where <library-name> is the one you specified in the Gradle configuration
-LOCAL_SHARED_LIBRARIES := libjsi \
-    libfbjni \
-    libglog \
-    libfolly_json \
-    libyoga \
-    libreact_nativemodule_core \
-    libturbomodulejsijni \
-    librrc_view \
-    libreact_render_core \
-    libreact_render_graphics \
-    libfabricjni \
-    libfolly_futures \
-    libreact_debug \
-    libreact_render_componentregistry \
-    libreact_render_debug \
-    libruntimeexecutor \
-    libreact_render_mapbuffer \
-    libreact_render_uimanager \
-    libreact_codegen_rncore \
-    libreact_codegen_rngesturehandler
-
-LOCAL_CFLAGS := \
-    -DLOG_TAG=\"ReactNative\"
-LOCAL_CFLAGS += -fexceptions -frtti -std=c++17 -Wall
-
-include $(BUILD_SHARED_LIBRARY)

package/android/src/main/jni/OnLoad.cpp

@@ -1,9 +0,0 @@
-#include <fbjni/fbjni.h>
-
-#include "RNGestureHandlerComponentsRegistry.h"
-
-JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
-  return facebook::jni::initialize(vm, [] {
-    facebook::react::RNGestureHandlerComponentsRegistry::registerNatives();
-  });
-}