react-native-gesture-handler/lib/commonjs/web_hammer/GestureHandler.js

Declarative API exposing native platform touch and gesture system to React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _hammerjs = _interopRequireDefault(require("@egjs/hammerjs"));
var _reactNative = require("react-native");
var _State = require("../State");
var _constants = require("./constants");
var NodeManager = _interopRequireWildcard(require("./NodeManager"));
var _ghQueueMicrotask = require("../ghQueueMicrotask");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
/* eslint-disable */

// TODO(TS) Replace with HammerInput if https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50438/files is merged

let gestureInstances = 0;
class GestureHandler {
  isGestureRunning = false;
  view = null;
  hasGestureFailed = false;
  hammer = null;
  initialRotation = null;
  config = {};
  previousState = _State.State.UNDETERMINED;
  pendingGestures = {};
  oldState = _State.State.UNDETERMINED;
  lastSentState = null;
  get id() {
    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;
  }
  get shouldEnableGestureOnSetup() {
    throw new Error('Must override GestureHandler.shouldEnableGestureOnSetup');
  }
  constructor() {
    this.gestureInstance = gestureInstances++;
    this.hasCustomActivationCriteria = false;
  }
  getConfig() {
    return this.config;
  }
  onWaitingEnded(_gesture) {}
  removePendingGesture(id) {
    delete this.pendingGestures[id];
  }
  addPendingGesture(gesture) {
    this.pendingGestures[gesture.id] = gesture;
  }
  isGestureEnabledForEvent(_config, _recognizer, _event) {
    return {
      success: true
    };
  }
  get NativeGestureClass() {
    throw new Error('Must override GestureHandler.NativeGestureClass');
  }
  updateHasCustomActivationCriteria(_config) {
    return true;
  }
  clearSelfAsPending = () => {
    if (Array.isArray(this.config.waitFor)) {
      for (const gesture of this.config.waitFor) {
        gesture.removePendingGesture(this.id);
      }
    }
  };
  updateGestureConfig({
    enabled = true,
    ...props
  }) {
    this.clearSelfAsPending();
    this.config = this.ensureConfig({
      enabled,
      ...props
    });
    this.hasCustomActivationCriteria = this.updateHasCustomActivationCriteria(this.config);
    if (Array.isArray(this.config.waitFor)) {
      for (const gesture of this.config.waitFor) {
        gesture.addPendingGesture(this);
      }
    }
    if (this.hammer) {
      this.sync();
    }
    return this.config;
  }
  destroy = () => {
    this.clearSelfAsPending();
    if (this.hammer) {
      this.hammer.stop(false);
      this.hammer.destroy();
    }
    this.hammer = null;
  };
  isPointInView = ({
    x,
    y
  }) => {
    // @ts-ignore FIXME(TS)
    const rect = this.view.getBoundingClientRect();
    const pointerInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
    return pointerInside;
  };
  getState(type) {
    // @ts-ignore TODO(TS) check if this is needed
    if (type == 0) {
      return 0;
    }
    return _constants.EventMap[type];
  }
  transformEventData(event) {
    const {
      eventType,
      maxPointers: numberOfPointers
    } = event;
    // const direction = DirectionMap[ev.direction];
    const changedTouch = event.changedPointers[0];
    const pointerInside = this.isPointInView({
      x: changedTouch.clientX,
      y: changedTouch.clientY
    });

    // TODO(TS) Remove cast after https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50966 is merged.
    const state = this.getState(eventType);
    if (state !== this.previousState) {
      this.oldState = this.previousState;
      this.previousState = state;
    }
    return {
      nativeEvent: {
        numberOfPointers,
        state,
        pointerInside,
        ...this.transformNativeEvent(event),
        // onHandlerStateChange only
        handlerTag: this.handlerTag,
        target: this.ref,
        // send oldState only when the state was changed, or is different than ACTIVE
        // GestureDetector relies on the presence of `oldState` to differentiate between
        // update events and state change events
        oldState: state !== this.previousState || state != 4 ? this.oldState : undefined
      },
      timeStamp: Date.now()
    };
  }
  transformNativeEvent(_event) {
    return {};
  }
  sendEvent = nativeEvent => {
    const {
      onGestureHandlerEvent,
      onGestureHandlerStateChange
    } = this.propsRef.current;
    const event = this.transformEventData(nativeEvent);
    invokeNullableMethod(onGestureHandlerEvent, event);
    if (this.lastSentState !== event.nativeEvent.state) {
      this.lastSentState = event.nativeEvent.state;
      invokeNullableMethod(onGestureHandlerStateChange, event);
    }
  };
  cancelPendingGestures(event) {
    for (const gesture of Object.values(this.pendingGestures)) {
      if (gesture && gesture.isGestureRunning) {
        gesture.hasGestureFailed = true;
        gesture.cancelEvent(event);
      }
    }
  }
  notifyPendingGestures() {
    for (const gesture of Object.values(this.pendingGestures)) {
      if (gesture) {
        gesture.onWaitingEnded(this);
      }
    }
  }

  // FIXME event is undefined in runtime when firstly invoked (see Draggable example), check other functions taking event as input
  onGestureEnded(event) {
    this.isGestureRunning = false;
    this.cancelPendingGestures(event);
  }
  forceInvalidate(event) {
    if (this.isGestureRunning) {
      this.hasGestureFailed = true;
      this.cancelEvent(event);
    }
  }
  cancelEvent(event) {
    this.notifyPendingGestures();
    this.sendEvent({
      ...event,
      eventType: _hammerjs.default.INPUT_CANCEL,
      isFinal: true
    });
    this.onGestureEnded(event);
  }
  onRawEvent({
    isFirst
  }) {
    if (isFirst) {
      this.hasGestureFailed = false;
    }
  }
  shouldUseTouchEvents(config) {
    return config.simultaneousHandlers?.some(handler => handler.isNative) ?? false;
  }
  setView(ref, propsRef) {
    if (ref == null) {
      this.destroy();
      this.view = null;
      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;

    // @ts-ignore
    this.view = (0, _reactNative.findNodeHandle)(ref);

    // 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 _hammerjs.default.Manager(this.view, {
      inputClass: _hammerjs.default.TouchInput
    }) : new _hammerjs.default.Manager(this.view);
    this.oldState = _State.State.UNDETERMINED;
    this.previousState = _State.State.UNDETERMINED;
    this.lastSentState = null;
    const {
      NativeGestureClass
    } = this;
    // @ts-ignore TODO(TS)
    const gesture = new NativeGestureClass(this.getHammerConfig());
    this.hammer.add(gesture);
    this.hammer.on('hammer.input', ev => {
      if (!this.config.enabled) {
        this.hasGestureFailed = false;
        this.isGestureRunning = false;
        return;
      }
      this.onRawEvent(ev);

      // TODO: Bacon: Check against something other than null
      // The isFirst value is not called when the first rotation is calculated.
      if (this.initialRotation === null && ev.rotation !== 0) {
        this.initialRotation = ev.rotation;
      }
      if (ev.isFinal) {
        // in favor of a willFail otherwise the last frame of the gesture will be captured.
        setTimeout(() => {
          this.initialRotation = null;
          this.hasGestureFailed = false;
        });
      }
    });
    this.setupEvents();
    this.sync();
  }
  setupEvents() {
    // TODO(TS) Hammer types aren't exactly that what we get in runtime
    if (!this.isDiscrete) {
      this.hammer.on(`${this.name}start`, event => this.onStart(event));
      this.hammer.on(`${this.name}end ${this.name}cancel`, event => {
        this.onGestureEnded(event);
      });
    }
    this.hammer.on(this.name, ev => this.onGestureActivated(ev)); // TODO(TS) remove cast after https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50438 is merged
  }
  onStart({
    deltaX,
    deltaY,
    rotation
  }) {
    // Reset the state for the next gesture
    this.oldState = _State.State.UNDETERMINED;
    this.previousState = _State.State.UNDETERMINED;
    this.lastSentState = null;
    this.isGestureRunning = true;
    this.__initialX = deltaX;
    this.__initialY = deltaY;
    this.initialRotation = rotation;
  }
  onGestureActivated(ev) {
    this.sendEvent(ev);
  }
  onSuccess() {}
  _getPendingGestures() {
    if (Array.isArray(this.config.waitFor) && this.config.waitFor.length) {
      // Get the list of gestures that this gesture is still waiting for.
      // Use `=== false` in case a ref that isn't a gesture handler is used.
      const stillWaiting = this.config.waitFor.filter(({
        hasGestureFailed
      }) => hasGestureFailed === false);
      return stillWaiting;
    }
    return [];
  }
  getHammerConfig() {
    const pointers = this.config.minPointers === this.config.maxPointers ? this.config.minPointers : 0;
    return {
      pointers
    };
  }
  sync = () => {
    const gesture = this.hammer.get(this.name);
    if (!gesture) return;
    const enable = (recognizer, inputData) => {
      if (!this.config.enabled) {
        this.isGestureRunning = false;
        this.hasGestureFailed = false;
        return false;
      }

      // Prevent events before the system is ready.
      if (!inputData || !recognizer.options || typeof inputData.maxPointers === 'undefined') {
        return this.shouldEnableGestureOnSetup;
      }
      if (this.hasGestureFailed) {
        return false;
      }
      if (!this.isDiscrete) {
        if (this.isGestureRunning) {
          return true;
        }
        // The built-in hammer.js "waitFor" doesn't work across multiple views.
        // Only process if there are views to wait for.
        this._stillWaiting = this._getPendingGestures();
        // This gesture should continue waiting.
        if (this._stillWaiting.length) {
          // Check to see if one of the gestures you're waiting for has started.
          // If it has then the gesture should fail.
          for (const gesture of this._stillWaiting) {
            // When the target gesture has started, this gesture must force fail.
            if (!gesture.isDiscrete && gesture.isGestureRunning) {
              this.hasGestureFailed = true;
              this.isGestureRunning = false;
              return false;
            }
          }
          // This gesture shouldn't start until the others have finished.
          return false;
        }
      }

      // Use default behaviour
      if (!this.hasCustomActivationCriteria) {
        return true;
      }
      const deltaRotation = this.initialRotation == null ? 0 : inputData.rotation - this.initialRotation;
      // @ts-ignore FIXME(TS)
      const {
        success,
        failed
      } = this.isGestureEnabledForEvent(this.getConfig(), recognizer, {
        ...inputData,
        deltaRotation
      });
      if (failed) {
        this.simulateCancelEvent(inputData);
        this.hasGestureFailed = true;
      }
      return success;
    };
    const params = this.getHammerConfig();
    // @ts-ignore FIXME(TS)
    gesture.set({
      ...params,
      enable
    });
  };
  simulateCancelEvent(_inputData) {}

  // Validate the props
  ensureConfig(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
      }) => 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 => {
        if (typeof handler === 'number') {
          return NodeManager.getHandler(handler);
        } else {
          return NodeManager.getHandler(handler.handlerTag);
        }
      }).filter(v => v);
      if (shouldUseTouchEvents !== this.shouldUseTouchEvents(props)) {
        (0, _ghQueueMicrotask.ghQueueMicrotask)(() => {
          // 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'];
    configProps.forEach(prop => {
      if (typeof props[prop] === 'undefined') {
        props[prop] = Number.NaN;
      }
    });
    return props; // TODO(TS) how to convince TS that props are filled?
  }
}

// TODO(TS) investigate this method
// Used for sending data to a callback or AnimatedEvent
function invokeNullableMethod(method, event) {
  if (method) {
    if (typeof method === 'function') {
      method(event);
    } else {
      // For use with reanimated's AnimatedEvent
      if ('__getHandler' in method && typeof method.__getHandler === 'function') {
        const handler = method.__getHandler();
        invokeNullableMethod(handler, event);
      } else {
        if ('__nodeConfig' in method) {
          const {
            argMapping
          } = method.__nodeConfig;
          if (Array.isArray(argMapping)) {
            for (const [index, [key, value]] of argMapping.entries()) {
              if (key in event.nativeEvent) {
                // @ts-ignore fix method type
                const nativeValue = event.nativeEvent[key];
                if (value && value.setValue) {
                  // Reanimated API
                  value.setValue(nativeValue);
                } else {
                  // RN Animated API
                  method.__nodeConfig.argMapping[index] = [key, nativeValue];
                }
              }
            }
          }
        }
      }
    }
  }
}
function asArray(value) {
  // TODO(TS) use config.waitFor type
  return value == null ? [] : Array.isArray(value) ? value : [value];
}
var _default = exports.default = GestureHandler;
//# sourceMappingURL=GestureHandler.js.map