@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1

package/src/web_hammer/NativeViewGestureHandler.ts

@@ -0,0 +1,47 @@
+import DiscreteGestureHandler from './DiscreteGestureHandler';
+import { HammerInputExt } from './GestureHandler';
+import * as NodeManager from './NodeManager';
+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) {
+      // if (this.ref instanceof ScrollView) {
+      if (TEST_MIN_IF_NOT_NAN(VEC_LEN_SQ({ x: ev.deltaX, y: ev.deltaY }), 10)) {
+        // @ts-ignore FIXME(TS) config type
+        if (this.config.disallowInterruption) {
+          const gestures = Object.values(NodeManager.getNodes()).filter(
+            (gesture) => {
+              const { handlerTag, view, isGestureRunning } = gesture;
+              return (
+                // Check if this gesture isn't self
+                handlerTag !== this.handlerTag &&
+                // Ensure the gesture needs to be cancelled
+                isGestureRunning &&
+                // ScrollView can cancel discrete gestures like taps and presses
+                gesture instanceof DiscreteGestureHandler &&
+                // Ensure a view exists and is a child of the current view
+                view &&
+                // @ts-ignore FIXME(TS) view type
+                this.view.contains(view)
+              );
+            }
+          );
+          // Cancel all of the gestures that passed the filter
+          for (const gesture of gestures) {
+            // TODO: Bacon: Send some cached event.
+            gesture.forceInvalidate(ev);
+          }
+        }
+      }
+    }
+  }
+}
+
+export default NativeViewGestureHandler;

package/src/web_hammer/NodeManager.ts

@@ -0,0 +1,42 @@
+import { ValueOf } from '../typeUtils';
+import { HammerGestures } from '../RNGestureHandlerModule.web';
+
+const gestures: Record<
+  number,
+  InstanceType<ValueOf<typeof HammerGestures>>
+> = {};
+
+export function getHandler(tag: number) {
+  if (tag in gestures) {
+    return gestures[tag];
+  }
+
+  throw new Error(`No handler for tag ${tag}`);
+}
+
+export function createGestureHandler(
+  handlerTag: number,
+  handler: InstanceType<ValueOf<typeof HammerGestures>>
+) {
+  if (handlerTag in gestures) {
+    throw new Error(`Handler with tag ${handlerTag} already exists`);
+  }
+  gestures[handlerTag] = handler;
+  // @ts-ignore no types for web handlers yet
+  gestures[handlerTag].handlerTag = handlerTag;
+}
+
+export function dropGestureHandler(handlerTag: number) {
+  // Since React 18, there are cases where componentWillUnmount gets called twice in a row
+  // so skip this if the tag was already removed.
+  if (!(handlerTag in gestures)) {
+    return;
+  }
+  getHandler(handlerTag).destroy();
+  // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+  delete gestures[handlerTag];
+}
+
+export function getNodes() {
+  return { ...gestures };
+}

package/src/web_hammer/PanGestureHandler.ts

@@ -0,0 +1,226 @@
+import Hammer from '@egjs/hammerjs';
+
+import {
+  EventMap,
+  MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD,
+  MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD,
+} from './constants';
+import DraggingGestureHandler from './DraggingGestureHandler';
+import { isValidNumber, isnan, TEST_MIN_IF_NOT_NAN, VEC_LEN_SQ } from './utils';
+import { State } from '../State';
+
+import { Config, HammerInputExt } from './GestureHandler';
+class PanGestureHandler extends DraggingGestureHandler {
+  get name() {
+    return 'pan';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Pan;
+  }
+
+  getHammerConfig() {
+    return {
+      ...super.getHammerConfig(),
+      direction: this.getDirection(),
+    };
+  }
+
+  getState(type: keyof typeof EventMap) {
+    const nextState = super.getState(type);
+    // Ensure that the first state sent is `BEGAN` and not `ACTIVE`
+    if (
+      this.previousState === State.UNDETERMINED &&
+      nextState === State.ACTIVE
+    ) {
+      return State.BEGAN;
+    }
+    return nextState;
+  }
+
+  getDirection() {
+    const config = this.getConfig();
+    const {
+      activeOffsetXStart,
+      activeOffsetXEnd,
+      activeOffsetYStart,
+      activeOffsetYEnd,
+      minDist,
+    } = config;
+    let directions: number[] = [];
+    let horizontalDirections = [];
+
+    if (!isnan(minDist)) {
+      return Hammer.DIRECTION_ALL;
+    }
+
+    if (!isnan(activeOffsetXStart)) {
+      horizontalDirections.push(Hammer.DIRECTION_LEFT);
+    }
+    if (!isnan(activeOffsetXEnd)) {
+      horizontalDirections.push(Hammer.DIRECTION_RIGHT);
+    }
+    if (horizontalDirections.length === 2) {
+      horizontalDirections = [Hammer.DIRECTION_HORIZONTAL];
+    }
+
+    directions = directions.concat(horizontalDirections);
+    let verticalDirections = [];
+
+    if (!isnan(activeOffsetYStart)) {
+      verticalDirections.push(Hammer.DIRECTION_UP);
+    }
+    if (!isnan(activeOffsetYEnd)) {
+      verticalDirections.push(Hammer.DIRECTION_DOWN);
+    }
+
+    if (verticalDirections.length === 2) {
+      verticalDirections = [Hammer.DIRECTION_VERTICAL];
+    }
+
+    directions = directions.concat(verticalDirections);
+
+    if (!directions.length) {
+      return Hammer.DIRECTION_NONE;
+    }
+    if (
+      directions[0] === Hammer.DIRECTION_HORIZONTAL &&
+      directions[1] === Hammer.DIRECTION_VERTICAL
+    ) {
+      return Hammer.DIRECTION_ALL;
+    }
+    if (horizontalDirections.length && verticalDirections.length) {
+      return Hammer.DIRECTION_ALL;
+    }
+
+    return directions[0];
+  }
+
+  getConfig() {
+    if (!this.hasCustomActivationCriteria) {
+      // Default config
+      // If no params have been defined then this config should emulate the native gesture as closely as possible.
+      return {
+        minDistSq: 10,
+      };
+    }
+    return this.config;
+  }
+
+  shouldFailUnderCustomCriteria(
+    { deltaX, deltaY }: HammerInputExt,
+    criteria: any
+  ) {
+    return (
+      (!isnan(criteria.failOffsetXStart) &&
+        deltaX < criteria.failOffsetXStart) ||
+      (!isnan(criteria.failOffsetXEnd) && deltaX > criteria.failOffsetXEnd) ||
+      (!isnan(criteria.failOffsetYStart) &&
+        deltaY < criteria.failOffsetYStart) ||
+      (!isnan(criteria.failOffsetYEnd) && deltaY > criteria.failOffsetYEnd)
+    );
+  }
+
+  shouldActivateUnderCustomCriteria(
+    { deltaX, deltaY, velocity }: any,
+    criteria: any
+  ) {
+    return (
+      (!isnan(criteria.activeOffsetXStart) &&
+        deltaX < criteria.activeOffsetXStart) ||
+      (!isnan(criteria.activeOffsetXEnd) &&
+        deltaX > criteria.activeOffsetXEnd) ||
+      (!isnan(criteria.activeOffsetYStart) &&
+        deltaY < criteria.activeOffsetYStart) ||
+      (!isnan(criteria.activeOffsetYEnd) &&
+        deltaY > criteria.activeOffsetYEnd) ||
+      TEST_MIN_IF_NOT_NAN(
+        VEC_LEN_SQ({ x: deltaX, y: deltaY }),
+        criteria.minDistSq
+      ) ||
+      TEST_MIN_IF_NOT_NAN(velocity.x, criteria.minVelocityX) ||
+      TEST_MIN_IF_NOT_NAN(velocity.y, criteria.minVelocityY) ||
+      TEST_MIN_IF_NOT_NAN(VEC_LEN_SQ(velocity), criteria.minVelocitySq)
+    );
+  }
+
+  shouldMultiFingerPanFail({
+    pointerLength,
+    scale,
+    deltaRotation,
+  }: {
+    deltaRotation: number;
+    pointerLength: number;
+    scale: number;
+  }) {
+    if (pointerLength <= 1) {
+      return false;
+    }
+
+    // Test if the pan had too much pinching or rotating.
+    const deltaScale = Math.abs(scale - 1);
+    const absDeltaRotation = Math.abs(deltaRotation);
+    if (deltaScale > MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD) {
+      // > If the threshold doesn't seem right.
+      // You can log the value which it failed at here:
+      return true;
+    }
+    if (absDeltaRotation > MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD) {
+      // > If the threshold doesn't seem right.
+      // You can log the value which it failed at here:
+      return true;
+    }
+
+    return false;
+  }
+
+  updateHasCustomActivationCriteria(
+    criteria: Config & { minVelocityX?: number; minVelocityY?: number }
+  ) {
+    return (
+      isValidNumber(criteria.minDistSq) ||
+      isValidNumber(criteria.minVelocityX) ||
+      isValidNumber(criteria.minVelocityY) ||
+      isValidNumber(criteria.minVelocitySq) ||
+      isValidNumber(criteria.activeOffsetXStart) ||
+      isValidNumber(criteria.activeOffsetXEnd) ||
+      isValidNumber(criteria.activeOffsetYStart) ||
+      isValidNumber(criteria.activeOffsetYEnd)
+    );
+  }
+
+  isGestureEnabledForEvent(
+    props: any,
+    _recognizer: any,
+    inputData: HammerInputExt & { deltaRotation: number }
+  ) {
+    if (this.shouldFailUnderCustomCriteria(inputData, props)) {
+      return { failed: true };
+    }
+
+    const velocity = { x: inputData.velocityX, y: inputData.velocityY };
+    if (
+      this.hasCustomActivationCriteria &&
+      this.shouldActivateUnderCustomCriteria(
+        { deltaX: inputData.deltaX, deltaY: inputData.deltaY, velocity },
+        props
+      )
+    ) {
+      if (
+        this.shouldMultiFingerPanFail({
+          pointerLength: inputData.maxPointers,
+          scale: inputData.scale,
+          deltaRotation: inputData.deltaRotation,
+        })
+      ) {
+        return {
+          failed: true,
+        };
+      }
+      return { success: true };
+    }
+    return { success: false };
+  }
+}
+
+export default PanGestureHandler;

package/src/web_hammer/PinchGestureHandler.ts

@@ -0,0 +1,25 @@
+import Hammer from '@egjs/hammerjs';
+import { HammerInputExt } from './GestureHandler';
+
+import IndiscreteGestureHandler from './IndiscreteGestureHandler';
+
+class PinchGestureHandler extends IndiscreteGestureHandler {
+  get name() {
+    return 'pinch';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Pinch;
+  }
+
+  transformNativeEvent({ scale, velocity, center }: HammerInputExt) {
+    return {
+      focalX: center.x,
+      focalY: center.y,
+      velocity,
+      scale,
+    };
+  }
+}
+
+export default PinchGestureHandler;

package/src/web_hammer/PressGestureHandler.ts

@@ -0,0 +1,167 @@
+import Hammer from '@egjs/hammerjs';
+
+import { State } from '../State';
+import {
+  CONTENT_TOUCHES_DELAY,
+  CONTENT_TOUCHES_QUICK_TAP_END_DELAY,
+  HammerInputNames,
+} from './constants';
+import DiscreteGestureHandler from './DiscreteGestureHandler';
+import { Config, HammerInputExt } from './GestureHandler';
+import { fireAfterInterval, isValidNumber, isnan } from './utils';
+
+class PressGestureHandler extends DiscreteGestureHandler {
+  private visualFeedbackTimer: any;
+  private initialEvent: HammerInputExt | null = null;
+  get name() {
+    return 'press';
+  }
+
+  get minDurationMs() {
+    // @ts-ignore FIXME(TS)
+    return isnan(this.config.minDurationMs) ? 5 : this.config.minDurationMs;
+  }
+
+  get maxDist() {
+    return isnan(this.config.maxDist) ? 9 : this.config.maxDist;
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Press;
+  }
+
+  shouldDelayTouches = true;
+
+  simulateCancelEvent(inputData: HammerInputExt) {
+    // Long press never starts so we can't rely on the running event boolean.
+    this.hasGestureFailed = true;
+    this.cancelEvent(inputData);
+  }
+
+  updateHasCustomActivationCriteria({
+    shouldCancelWhenOutside,
+    maxDistSq,
+  }: Config & { shouldCancelWhenOutside: boolean }) {
+    return shouldCancelWhenOutside || !isValidNumber(maxDistSq);
+  }
+
+  getState(type: keyof typeof HammerInputNames): State {
+    return {
+      [Hammer.INPUT_START]: State.BEGAN,
+      [Hammer.INPUT_MOVE]: State.ACTIVE,
+      [Hammer.INPUT_END]: State.END,
+      [Hammer.INPUT_CANCEL]: State.CANCELLED,
+    }[type];
+  }
+
+  getConfig() {
+    if (!this.hasCustomActivationCriteria) {
+      // Default config
+      // If no params have been defined then this config should emulate the native gesture as closely as possible.
+      return {
+        shouldCancelWhenOutside: true,
+        maxDistSq: 10,
+      };
+    }
+    return this.config;
+  }
+
+  getHammerConfig() {
+    return {
+      ...super.getHammerConfig(),
+      // threshold: this.maxDist,
+      time: this.minDurationMs,
+    };
+  }
+
+  onGestureActivated(ev: HammerInputExt) {
+    this.onGestureStart(ev);
+  }
+
+  shouldDelayTouchForEvent({ pointerType }: HammerInputExt) {
+    // Don't disable event for mouse input
+    return this.shouldDelayTouches && pointerType === 'touch';
+  }
+
+  onGestureStart(ev: HammerInputExt) {
+    this.isGestureRunning = true;
+    clearTimeout(this.visualFeedbackTimer);
+    this.initialEvent = ev;
+    this.visualFeedbackTimer = fireAfterInterval(() => {
+      this.sendGestureStartedEvent(this.initialEvent as HammerInputExt);
+      this.initialEvent = null;
+    }, this.shouldDelayTouchForEvent(ev) && CONTENT_TOUCHES_DELAY);
+  }
+
+  sendGestureStartedEvent(ev: HammerInputExt) {
+    clearTimeout(this.visualFeedbackTimer);
+    this.visualFeedbackTimer = null;
+    this.sendEvent({
+      ...ev,
+      eventType: Hammer.INPUT_MOVE,
+      isFirst: true,
+    });
+  }
+
+  forceInvalidate(event: HammerInputExt) {
+    super.forceInvalidate(event);
+    clearTimeout(this.visualFeedbackTimer);
+    this.visualFeedbackTimer = null;
+    this.initialEvent = null;
+  }
+
+  onRawEvent(ev: HammerInputExt) {
+    super.onRawEvent(ev);
+    if (this.isGestureRunning) {
+      if (ev.isFinal) {
+        let timeout;
+        if (this.visualFeedbackTimer) {
+          // Aesthetic timing for a quick tap.
+          // We haven't activated the tap right away to emulate iOS `delaysContentTouches`
+          // Now we must send the initial activation event and wait a set amount of time before firing the end event.
+          timeout = CONTENT_TOUCHES_QUICK_TAP_END_DELAY;
+          this.sendGestureStartedEvent(this.initialEvent as HammerInputExt);
+          this.initialEvent = null;
+        }
+        fireAfterInterval(() => {
+          this.sendEvent({
+            ...ev,
+            eventType: Hammer.INPUT_END,
+            isFinal: true,
+          });
+          // @ts-ignore -- this should explicitly support undefined
+          this.onGestureEnded();
+        }, timeout);
+      } else {
+        this.sendEvent({
+          ...ev,
+          eventType: Hammer.INPUT_MOVE,
+          isFinal: false,
+        });
+      }
+    }
+  }
+
+  updateGestureConfig({
+    shouldActivateOnStart = false,
+    disallowInterruption = false,
+    shouldCancelWhenOutside = true,
+    minDurationMs = Number.NaN,
+    maxDist = Number.NaN,
+    minPointers = 1,
+    maxPointers = 1,
+    ...props
+  }) {
+    return super.updateGestureConfig({
+      shouldActivateOnStart,
+      disallowInterruption,
+      shouldCancelWhenOutside,
+      minDurationMs,
+      maxDist,
+      minPointers,
+      maxPointers,
+      ...props,
+    });
+  }
+}
+export default PressGestureHandler;

package/src/web_hammer/RotationGestureHandler.ts

@@ -0,0 +1,25 @@
+import Hammer from '@egjs/hammerjs';
+
+import { DEG_RAD } from './constants';
+import { HammerInputExt } from './GestureHandler';
+import IndiscreteGestureHandler from './IndiscreteGestureHandler';
+
+class RotationGestureHandler extends IndiscreteGestureHandler {
+  get name() {
+    return 'rotate';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Rotate;
+  }
+
+  transformNativeEvent({ rotation, velocity, center }: HammerInputExt) {
+    return {
+      rotation: (rotation - (this.initialRotation ?? 0)) * DEG_RAD,
+      anchorX: center.x,
+      anchorY: center.y,
+      velocity,
+    };
+  }
+}
+export default RotationGestureHandler;

package/src/web_hammer/TapGestureHandler.ts

@@ -0,0 +1,172 @@
+import Hammer from '@egjs/hammerjs';
+
+import DiscreteGestureHandler from './DiscreteGestureHandler';
+import { HammerInputExt } from './GestureHandler';
+import { isnan } from './utils';
+
+class TapGestureHandler extends DiscreteGestureHandler {
+  private _shouldFireEndEvent: HammerInputExt | null = null;
+  private _timer: any;
+  private _multiTapTimer: any; // TODO unused?
+  get name() {
+    return 'tap';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Tap;
+  }
+
+  get maxDelayMs() {
+    // @ts-ignore TODO(TS) trace down config
+    return isnan(this.config.maxDelayMs) ? 300 : this.config.maxDelayMs;
+  }
+
+  simulateCancelEvent(inputData: HammerInputExt) {
+    if (this.isGestureRunning) {
+      this.cancelEvent(inputData);
+    }
+  }
+
+  onGestureActivated(ev: HammerInputExt) {
+    if (this.isGestureRunning) {
+      this.onSuccessfulTap(ev);
+    }
+  }
+
+  onSuccessfulTap = (ev: HammerInputExt) => {
+    if (this._getPendingGestures().length) {
+      this._shouldFireEndEvent = ev;
+      return;
+    }
+    if (ev.eventType === Hammer.INPUT_END) {
+      this.sendEvent({ ...ev, eventType: Hammer.INPUT_MOVE });
+    }
+    // When handler gets activated it will turn into State.END immediately.
+    this.sendEvent({ ...ev, isFinal: true });
+    this.onGestureEnded(ev);
+  };
+
+  onRawEvent(ev: HammerInput) {
+    super.onRawEvent(ev);
+
+    // Attempt to create a touch-down event by checking if a valid tap hasn't started yet, then validating the input.
+    if (
+      !this.hasGestureFailed &&
+      !this.isGestureRunning &&
+      // Prevent multi-pointer events from misfiring.
+      !ev.isFinal
+    ) {
+      // Tap Gesture start event
+      const gesture = this.hammer!.get(this.name);
+      // @ts-ignore TODO(TS) trace down config
+      if (gesture.options.enable(gesture, ev)) {
+        clearTimeout(this._multiTapTimer);
+
+        this.onStart(ev);
+        this.sendEvent(ev);
+      }
+    }
+    if (ev.isFinal && ev.maxPointers > 1) {
+      setTimeout(() => {
+        // Handle case where one finger presses slightly
+        // after the first finger on a multi-tap event
+        if (this.isGestureRunning) {
+          this.cancelEvent(ev);
+        }
+      });
+    }
+
+    if (this.hasGestureFailed) {
+      return;
+    }
+    // Hammer doesn't send a `cancel` event for taps.
+    // Manually fail the event.
+    if (ev.isFinal) {
+      // Handle case where one finger presses slightly
+      // after the first finger on a multi-tap event
+      if (ev.maxPointers > 1) {
+        setTimeout(() => {
+          if (this.isGestureRunning) {
+            this.cancelEvent(ev);
+          }
+        });
+      }
+
+      // Clear last timer
+      clearTimeout(this._timer);
+      // Create time out for multi-taps.
+      this._timer = setTimeout(() => {
+        this.hasGestureFailed = true;
+        this.cancelEvent(ev);
+      }, this.maxDelayMs);
+    } else if (!this.hasGestureFailed && !this.isGestureRunning) {
+      // Tap Gesture start event
+      const gesture = this.hammer!.get(this.name);
+      // @ts-ignore TODO(TS) trace down config
+      if (gesture.options.enable(gesture, ev)) {
+        clearTimeout(this._multiTapTimer);
+
+        this.onStart(ev);
+        this.sendEvent(ev);
+      }
+    }
+  }
+
+  getHammerConfig() {
+    return {
+      ...super.getHammerConfig(),
+      event: this.name,
+      // @ts-ignore TODO(TS) trace down config
+      taps: isnan(this.config.numberOfTaps) ? 1 : this.config.numberOfTaps,
+      interval: this.maxDelayMs,
+      time:
+        // @ts-ignore TODO(TS) trace down config
+        isnan(this.config.maxDurationMs) || this.config.maxDurationMs == null
+          ? 250
+          : // @ts-ignore TODO(TS) trace down config
+            this.config.maxDurationMs,
+    };
+  }
+
+  updateGestureConfig({
+    shouldCancelWhenOutside = true,
+    maxDeltaX = Number.NaN,
+    maxDeltaY = Number.NaN,
+    numberOfTaps = 1,
+    minDurationMs = 525,
+    maxDelayMs = Number.NaN,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TODO possibly forgotten to use in updateGestureConfig?
+    maxDurationMs = Number.NaN,
+    maxDist = 2,
+    minPointers = 1,
+    maxPointers = 1,
+    ...props
+  }) {
+    return super.updateGestureConfig({
+      shouldCancelWhenOutside,
+      numberOfTaps,
+      maxDeltaX,
+      maxDeltaY,
+      minDurationMs,
+      maxDelayMs,
+      maxDist,
+      minPointers,
+      maxPointers,
+      ...props,
+    });
+  }
+
+  onGestureEnded(...props: any) {
+    clearTimeout(this._timer);
+    // @ts-ignore TODO(TS) check how onGestureEnded works
+    super.onGestureEnded(...props);
+  }
+
+  onWaitingEnded(_gesture: any) {
+    if (this._shouldFireEndEvent) {
+      this.onSuccessfulTap(this._shouldFireEndEvent);
+      this._shouldFireEndEvent = null;
+    }
+  }
+}
+export default TapGestureHandler;