@amazon-devices/react-native-gesture-handler 4.0.1 → 4.0.2

package/lib/module/web/handlers/GestureHandler.js

@@ -1,682 +0,0 @@
-"use strict";
-
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { State } from '../../State';
-import { TouchEventType, EventTypes } from '../interfaces';
-import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
-import InteractionManager from '../tools/InteractionManager';
-import PointerTracker from '../tools/PointerTracker';
-import { MouseButton } from '../../handlers/gestureHandlerCommon';
-import { PointerType } from '../../PointerType';
-export default class GestureHandler {
-  lastSentState = null;
-  _state = State.UNDETERMINED;
-  _shouldCancelWhenOutside = false;
-  hasCustomActivationCriteria = false;
-  _enabled = false;
-  _config = {
-    enabled: false
-  };
-  _tracker = new PointerTracker();
-
-  // Orchestrator properties
-  _activationIndex = 0;
-  _awaiting = false;
-  _active = false;
-  _shouldResetProgress = false;
-  _pointerType = PointerType.MOUSE;
-  constructor(delegate) {
-    this._delegate = delegate;
-  }
-
-  //
-  // Initializing handler
-  //
-
-  init(viewRef, propsRef) {
-    this.propsRef = propsRef;
-    this.viewRef = viewRef;
-    this.state = State.UNDETERMINED;
-    this.delegate.init(viewRef, this);
-  }
-  attachEventManager(manager) {
-    manager.setOnPointerDown(this.onPointerDown.bind(this));
-    manager.setOnPointerAdd(this.onPointerAdd.bind(this));
-    manager.setOnPointerUp(this.onPointerUp.bind(this));
-    manager.setOnPointerRemove(this.onPointerRemove.bind(this));
-    manager.setOnPointerMove(this.onPointerMove.bind(this));
-    manager.setOnPointerEnter(this.onPointerEnter.bind(this));
-    manager.setOnPointerLeave(this.onPointerLeave.bind(this));
-    manager.setOnPointerCancel(this.onPointerCancel.bind(this));
-    manager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
-    manager.setOnPointerMoveOver(this.onPointerMoveOver.bind(this));
-    manager.setOnPointerMoveOut(this.onPointerMoveOut.bind(this));
-    manager.setOnWheel(this.onWheel.bind(this));
-    manager.registerListeners();
-  }
-
-  //
-  // Resetting handler
-  //
-
-  onCancel() {}
-  onReset() {}
-  resetProgress() {}
-  reset() {
-    this.tracker.resetTracker();
-    this.onReset();
-    this.resetProgress();
-    this.delegate.reset();
-    this.state = State.UNDETERMINED;
-  }
-
-  //
-  // State logic
-  //
-
-  moveToState(newState, sendIfDisabled) {
-    if (this.state === newState) {
-      return;
-    }
-    const oldState = this.state;
-    this.state = newState;
-    if (this.tracker.trackedPointersCount > 0 && this.config.needsPointerData && this.isFinished()) {
-      this.cancelTouches();
-    }
-    GestureHandlerOrchestrator.instance.onHandlerStateChange(this, newState, oldState, sendIfDisabled);
-    this.onStateChange(newState, oldState);
-    if (!this.enabled && this.isFinished()) {
-      this.state = State.UNDETERMINED;
-    }
-  }
-  onStateChange(_newState, _oldState) {}
-  begin() {
-    if (!this.checkHitSlop()) {
-      return;
-    }
-    if (this.state === State.UNDETERMINED) {
-      this.moveToState(State.BEGAN);
-    }
-  }
-
-  /**
-   * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send fail event
-   */
-  fail(sendIfDisabled) {
-    if (this.state === State.ACTIVE || this.state === State.BEGAN) {
-      // Here the order of calling the delegate and moveToState is important.
-      // At this point we can use currentState as previuos state, because immediately after changing cursor we call moveToState method.
-      this.delegate.onFail();
-      this.moveToState(State.FAILED, sendIfDisabled);
-    }
-    this.resetProgress();
-  }
-
-  /**
-   * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send cancel event
-   */
-  cancel(sendIfDisabled) {
-    if (this.state === State.ACTIVE || this.state === State.UNDETERMINED || this.state === State.BEGAN) {
-      this.onCancel();
-
-      // Same as above - order matters
-      this.delegate.onCancel();
-      this.moveToState(State.CANCELLED, sendIfDisabled);
-    }
-  }
-  activate(force = false) {
-    if ((this.config.manualActivation !== true || force) && (this.state === State.UNDETERMINED || this.state === State.BEGAN)) {
-      this.delegate.onActivate();
-      this.moveToState(State.ACTIVE);
-    }
-  }
-  end() {
-    if (this.state === State.BEGAN || this.state === State.ACTIVE) {
-      // Same as above - order matters
-      this.delegate.onEnd();
-      this.moveToState(State.END);
-    }
-    this.resetProgress();
-  }
-
-  //
-  // Methods for orchestrator
-  //
-
-  getShouldResetProgress() {
-    return this.shouldResetProgress;
-  }
-  setShouldResetProgress(value) {
-    this.shouldResetProgress = value;
-  }
-  shouldWaitForHandlerFailure(handler) {
-    if (handler === this) {
-      return false;
-    }
-    return InteractionManager.instance.shouldWaitForHandlerFailure(this, handler);
-  }
-  shouldRequireToWaitForFailure(handler) {
-    if (handler === this) {
-      return false;
-    }
-    return InteractionManager.instance.shouldRequireHandlerToWaitForFailure(this, handler);
-  }
-  shouldRecognizeSimultaneously(handler) {
-    if (handler === this) {
-      return true;
-    }
-    return InteractionManager.instance.shouldRecognizeSimultaneously(this, handler);
-  }
-  shouldBeCancelledByOther(handler) {
-    if (handler === this) {
-      return false;
-    }
-    return InteractionManager.instance.shouldHandlerBeCancelledBy(this, handler);
-  }
-
-  //
-  // Event actions
-  //
-
-  onPointerDown(event) {
-    GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(this);
-    this.pointerType = event.pointerType;
-    if (this.pointerType === PointerType.TOUCH) {
-      GestureHandlerOrchestrator.instance.cancelMouseAndPenGestures(this);
-    }
-
-    // TODO: Bring back touch events along with introducing `handleDown` method that will handle handler specific stuff
-  }
-  // Adding another pointer to existing ones
-  onPointerAdd(event) {
-    this.tryToSendTouchEvent(event);
-  }
-  onPointerUp(event) {
-    this.tryToSendTouchEvent(event);
-  }
-  // Removing pointer, when there is more than one pointers
-  onPointerRemove(event) {
-    this.tryToSendTouchEvent(event);
-  }
-  onPointerMove(event) {
-    this.tryToSendMoveEvent(false, event);
-  }
-  onPointerLeave(event) {
-    if (this.shouldCancelWhenOutside) {
-      switch (this.state) {
-        case State.ACTIVE:
-          this.cancel();
-          break;
-        case State.BEGAN:
-          this.fail();
-          break;
-      }
-      return;
-    }
-    this.tryToSendTouchEvent(event);
-  }
-  onPointerEnter(event) {
-    this.tryToSendTouchEvent(event);
-  }
-  onPointerCancel(event) {
-    this.tryToSendTouchEvent(event);
-    this.cancel();
-    this.reset();
-  }
-  onPointerOutOfBounds(event) {
-    this.tryToSendMoveEvent(true, event);
-  }
-  onPointerMoveOver(_event) {
-    // Used only by hover gesture handler atm
-  }
-  onPointerMoveOut(_event) {
-    // Used only by hover gesture handler atm
-  }
-  onWheel(_event) {
-    // Used only by pan gesture handler
-  }
-  tryToSendMoveEvent(out, event) {
-    if (out && this.shouldCancelWhenOutside || !this.enabled) {
-      return;
-    }
-    if (this.active) {
-      this.sendEvent(this.state, this.state);
-    }
-    this.tryToSendTouchEvent(event);
-  }
-  tryToSendTouchEvent(event) {
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
-  }
-  sendTouchEvent(event) {
-    if (!this.enabled) {
-      return;
-    }
-    const {
-      onGestureHandlerEvent
-    } = this.propsRef.current;
-    const touchEvent = this.transformTouchEvent(event);
-    if (touchEvent) {
-      invokeNullableMethod(onGestureHandlerEvent, touchEvent);
-    }
-  }
-
-  //
-  // Events Sending
-  //
-
-  sendEvent = (newState, oldState) => {
-    const {
-      onGestureHandlerEvent,
-      onGestureHandlerStateChange
-    } = this.propsRef.current;
-    const resultEvent = this.transformEventData(newState, oldState);
-
-    // In the new API oldState field has to be undefined, unless we send event state changed
-    // Here the order is flipped to avoid workarounds such as making backup of the state and setting it to undefined first, then changing it back
-    // Flipping order with setting oldState to undefined solves issue, when events were being sent twice instead of once
-    // However, this may cause trouble in the future (but for now we don't know that)
-
-    if (this.lastSentState !== newState) {
-      this.lastSentState = newState;
-      invokeNullableMethod(onGestureHandlerStateChange, resultEvent);
-    }
-    if (this.state === State.ACTIVE) {
-      resultEvent.nativeEvent.oldState = undefined;
-      invokeNullableMethod(onGestureHandlerEvent, resultEvent);
-    }
-  };
-  transformEventData(newState, oldState) {
-    return {
-      nativeEvent: {
-        numberOfPointers: this.tracker.trackedPointersCount,
-        state: newState,
-        pointerInside: this.delegate.isPointerInBounds(this.tracker.getAbsoluteCoordsAverage()),
-        ...this.transformNativeEvent(),
-        handlerTag: this.handlerTag,
-        target: this.viewRef,
-        oldState: newState !== oldState ? oldState : undefined,
-        pointerType: this.pointerType
-      },
-      timeStamp: Date.now()
-    };
-  }
-  transformTouchEvent(event) {
-    const rect = this.delegate.measureView();
-    const all = [];
-    const changed = [];
-    const trackerData = this.tracker.trackedPointers;
-
-    // This if handles edge case where all pointers have been cancelled
-    // When pointercancel is triggered, reset method is called. This means that tracker will be reset after first pointer being cancelled
-    // The problem is, that handler will receive another pointercancel event from the rest of the pointers
-    // To avoid crashing, we don't send event if tracker tracks no pointers, i.e. has been reset
-    if (trackerData.size === 0 || !trackerData.has(event.pointerId)) {
-      return;
-    }
-    trackerData.forEach((element, key) => {
-      const id = this.tracker.getMappedTouchEventId(key);
-      all.push({
-        id: id,
-        x: element.abosoluteCoords.x - rect.pageX,
-        y: element.abosoluteCoords.y - rect.pageY,
-        absoluteX: element.abosoluteCoords.x,
-        absoluteY: element.abosoluteCoords.y
-      });
-    });
-
-    // Each pointer sends its own event, so we want changed touches to contain only the pointer that has changed.
-    // However, if the event is cancel, we want to cancel all pointers to avoid crashes
-    if (event.eventType !== EventTypes.CANCEL) {
-      changed.push({
-        id: this.tracker.getMappedTouchEventId(event.pointerId),
-        x: event.x - rect.pageX,
-        y: event.y - rect.pageY,
-        absoluteX: event.x,
-        absoluteY: event.y
-      });
-    } else {
-      trackerData.forEach((element, key) => {
-        const id = this.tracker.getMappedTouchEventId(key);
-        changed.push({
-          id: id,
-          x: element.abosoluteCoords.x - rect.pageX,
-          y: element.abosoluteCoords.y - rect.pageY,
-          absoluteX: element.abosoluteCoords.x,
-          absoluteY: element.abosoluteCoords.y
-        });
-      });
-    }
-    let eventType = TouchEventType.UNDETERMINED;
-    switch (event.eventType) {
-      case EventTypes.DOWN:
-      case EventTypes.ADDITIONAL_POINTER_DOWN:
-        eventType = TouchEventType.DOWN;
-        break;
-      case EventTypes.UP:
-      case EventTypes.ADDITIONAL_POINTER_UP:
-        eventType = TouchEventType.UP;
-        break;
-      case EventTypes.MOVE:
-        eventType = TouchEventType.MOVE;
-        break;
-      case EventTypes.CANCEL:
-        eventType = TouchEventType.CANCELLED;
-        break;
-    }
-
-    // Here, when we receive up event, we want to decrease number of touches
-    // That's because we want handler to send information that there's one pointer less
-    // However, we still want this pointer to be present in allTouches array, so that its data can be accessed
-    let numberOfTouches = all.length;
-    if (event.eventType === EventTypes.UP || event.eventType === EventTypes.ADDITIONAL_POINTER_UP) {
-      --numberOfTouches;
-    }
-    return {
-      nativeEvent: {
-        handlerTag: this.handlerTag,
-        state: this.state,
-        eventType: eventType,
-        changedTouches: changed,
-        allTouches: all,
-        numberOfTouches: numberOfTouches,
-        pointerType: this.pointerType
-      },
-      timeStamp: Date.now()
-    };
-  }
-  cancelTouches() {
-    const rect = this.delegate.measureView();
-    const all = [];
-    const changed = [];
-    const trackerData = this.tracker.trackedPointers;
-    if (trackerData.size === 0) {
-      return;
-    }
-    trackerData.forEach((element, key) => {
-      const id = this.tracker.getMappedTouchEventId(key);
-      all.push({
-        id: id,
-        x: element.abosoluteCoords.x - rect.pageX,
-        y: element.abosoluteCoords.y - rect.pageY,
-        absoluteX: element.abosoluteCoords.x,
-        absoluteY: element.abosoluteCoords.y
-      });
-      changed.push({
-        id: id,
-        x: element.abosoluteCoords.x - rect.pageX,
-        y: element.abosoluteCoords.y - rect.pageY,
-        absoluteX: element.abosoluteCoords.x,
-        absoluteY: element.abosoluteCoords.y
-      });
-    });
-    const cancelEvent = {
-      nativeEvent: {
-        handlerTag: this.handlerTag,
-        state: this.state,
-        eventType: TouchEventType.CANCELLED,
-        changedTouches: changed,
-        allTouches: all,
-        numberOfTouches: all.length,
-        pointerType: this.pointerType
-      },
-      timeStamp: Date.now()
-    };
-    const {
-      onGestureHandlerEvent
-    } = this.propsRef.current;
-    invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
-  }
-  transformNativeEvent() {
-    // Those properties are shared by most handlers and if not this method will be overriden
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    const lastRelativeCoords = this.tracker.getRelativeCoordsAverage();
-    return {
-      x: lastRelativeCoords.x,
-      y: lastRelativeCoords.y,
-      absoluteX: lastCoords.x,
-      absoluteY: lastCoords.y
-    };
-  }
-
-  //
-  // Handling config
-  //
-
-  updateGestureConfig({
-    enabled = true,
-    ...props
-  }) {
-    this._config = {
-      enabled: enabled,
-      ...props
-    };
-    if (this.enabled !== enabled) {
-      this.delegate.onEnabledChange(enabled);
-    }
-    this.enabled = enabled;
-    if (this.config.shouldCancelWhenOutside !== undefined) {
-      this.shouldCancelWhenOutside = this.config.shouldCancelWhenOutside;
-    }
-    this.validateHitSlops();
-    if (this.enabled) {
-      return;
-    }
-    switch (this.state) {
-      case State.ACTIVE:
-        this.fail(true);
-        break;
-      case State.UNDETERMINED:
-        GestureHandlerOrchestrator.instance.removeHandlerFromOrchestrator(this);
-        break;
-      default:
-        this.cancel(true);
-        break;
-    }
-  }
-  checkCustomActivationCriteria(criterias) {
-    for (const key in this.config) {
-      if (criterias.indexOf(key) >= 0) {
-        this.hasCustomActivationCriteria = true;
-      }
-    }
-  }
-  validateHitSlops() {
-    if (!this.config.hitSlop) {
-      return;
-    }
-    if (this.config.hitSlop.left !== undefined && this.config.hitSlop.right !== undefined && this.config.hitSlop.width !== undefined) {
-      throw new Error('HitSlop Error: Cannot define left, right and width at the same time');
-    }
-    if (this.config.hitSlop.width !== undefined && this.config.hitSlop.left === undefined && this.config.hitSlop.right === undefined) {
-      throw new Error('HitSlop Error: When width is defined, either left or right has to be defined');
-    }
-    if (this.config.hitSlop.height !== undefined && this.config.hitSlop.top !== undefined && this.config.hitSlop.bottom !== undefined) {
-      throw new Error('HitSlop Error: Cannot define top, bottom and height at the same time');
-    }
-    if (this.config.hitSlop.height !== undefined && this.config.hitSlop.top === undefined && this.config.hitSlop.bottom === undefined) {
-      throw new Error('HitSlop Error: When height is defined, either top or bottom has to be defined');
-    }
-  }
-  checkHitSlop() {
-    if (!this.config.hitSlop) {
-      return true;
-    }
-    const {
-      width,
-      height
-    } = this.delegate.measureView();
-    let left = 0;
-    let top = 0;
-    let right = width;
-    let bottom = height;
-    if (this.config.hitSlop.horizontal !== undefined) {
-      left -= this.config.hitSlop.horizontal;
-      right += this.config.hitSlop.horizontal;
-    }
-    if (this.config.hitSlop.vertical !== undefined) {
-      top -= this.config.hitSlop.vertical;
-      bottom += this.config.hitSlop.vertical;
-    }
-    if (this.config.hitSlop.left !== undefined) {
-      left = -this.config.hitSlop.left;
-    }
-    if (this.config.hitSlop.right !== undefined) {
-      right = width + this.config.hitSlop.right;
-    }
-    if (this.config.hitSlop.top !== undefined) {
-      top = -this.config.hitSlop.top;
-    }
-    if (this.config.hitSlop.bottom !== undefined) {
-      bottom = height + this.config.hitSlop.bottom;
-    }
-    if (this.config.hitSlop.width !== undefined) {
-      if (this.config.hitSlop.left !== undefined) {
-        right = left + this.config.hitSlop.width;
-      } else if (this.config.hitSlop.right !== undefined) {
-        left = right - this.config.hitSlop.width;
-      }
-    }
-    if (this.config.hitSlop.height !== undefined) {
-      if (this.config.hitSlop.top !== undefined) {
-        bottom = top + this.config.hitSlop.height;
-      } else if (this.config.hitSlop.bottom !== undefined) {
-        top = bottom - this.config.hitSlop.height;
-      }
-    }
-    const rect = this.delegate.measureView();
-    const lastCoords = this.tracker.getLastAbsoluteCoords();
-    if (!lastCoords) {
-      return false;
-    }
-    const offsetX = lastCoords.x - rect.pageX;
-    const offsetY = lastCoords.y - rect.pageY;
-    return offsetX >= left && offsetX <= right && offsetY >= top && offsetY <= bottom;
-  }
-  isButtonInConfig(mouseButton) {
-    return !mouseButton || !this.config.mouseButton && mouseButton === MouseButton.LEFT || this.config.mouseButton && mouseButton & this.config.mouseButton;
-  }
-  resetConfig() {}
-  onDestroy() {
-    GestureHandlerOrchestrator.instance.removeHandlerFromOrchestrator(this);
-    this.delegate.destroy(this.config);
-  }
-
-  //
-  // Getters and setters
-  //
-
-  get handlerTag() {
-    return this._handlerTag;
-  }
-  set handlerTag(value) {
-    this._handlerTag = value;
-  }
-  get config() {
-    return this._config;
-  }
-  get delegate() {
-    return this._delegate;
-  }
-  get tracker() {
-    return this._tracker;
-  }
-  get state() {
-    return this._state;
-  }
-  set state(value) {
-    this._state = value;
-  }
-  get shouldCancelWhenOutside() {
-    return this._shouldCancelWhenOutside;
-  }
-  set shouldCancelWhenOutside(value) {
-    this._shouldCancelWhenOutside = value;
-  }
-  get enabled() {
-    return this._enabled;
-  }
-  set enabled(value) {
-    this._enabled = value;
-  }
-  get pointerType() {
-    return this._pointerType;
-  }
-  set pointerType(value) {
-    this._pointerType = value;
-  }
-  get active() {
-    return this._active;
-  }
-  set active(value) {
-    this._active = value;
-  }
-  get awaiting() {
-    return this._awaiting;
-  }
-  set awaiting(value) {
-    this._awaiting = value;
-  }
-  get activationIndex() {
-    return this._activationIndex;
-  }
-  set activationIndex(value) {
-    this._activationIndex = value;
-  }
-  get shouldResetProgress() {
-    return this._shouldResetProgress;
-  }
-  set shouldResetProgress(value) {
-    this._shouldResetProgress = value;
-  }
-  getTrackedPointersID() {
-    return this.tracker.trackedPointersIDs;
-  }
-  isFinished() {
-    return this.state === State.END || this.state === State.FAILED || this.state === State.CANCELLED;
-  }
-}
-function invokeNullableMethod(method, event) {
-  if (!method) {
-    return;
-  }
-  if (typeof method === 'function') {
-    method(event);
-    return;
-  }
-  if ('__getHandler' in method && typeof method.__getHandler === 'function') {
-    const handler = method.__getHandler();
-    invokeNullableMethod(handler, event);
-    return;
-  }
-  if (!('__nodeConfig' in method)) {
-    return;
-  }
-  const {
-    argMapping
-  } = method.__nodeConfig;
-  if (!Array.isArray(argMapping)) {
-    return;
-  }
-  for (const [index, [key, value]] of argMapping.entries()) {
-    if (!(key in event.nativeEvent)) {
-      continue;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const nativeValue = event.nativeEvent[key];
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    if (value?.setValue) {
-      // Reanimated API
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      value.setValue(nativeValue);
-    } else {
-      // RN Animated API
-      method.__nodeConfig.argMapping[index] = [key, nativeValue];
-    }
-  }
-  return;
-}
-//# sourceMappingURL=GestureHandler.js.map

package/lib/module/web/handlers/HoverGestureHandler.js

@@ -1,39 +0,0 @@
-"use strict";
-
-import { State } from '../../State';
-import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
-import GestureHandler from './GestureHandler';
-export default class HoverGestureHandler extends GestureHandler {
-  transformNativeEvent() {
-    return {
-      ...super.transformNativeEvent(),
-      stylusData: this.stylusData
-    };
-  }
-  onPointerMoveOver(event) {
-    GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(this);
-    this.tracker.addToTracker(event);
-    this.stylusData = event.stylusData;
-    super.onPointerMoveOver(event);
-    if (this.state === State.UNDETERMINED) {
-      this.begin();
-      this.activate();
-    }
-  }
-  onPointerMoveOut(event) {
-    this.tracker.removeFromTracker(event.pointerId);
-    this.stylusData = event.stylusData;
-    super.onPointerMoveOut(event);
-    this.end();
-  }
-  onPointerMove(event) {
-    this.tracker.track(event);
-    this.stylusData = event.stylusData;
-    super.onPointerMove(event);
-  }
-  onPointerCancel(event) {
-    super.onPointerCancel(event);
-    this.reset();
-  }
-}
-//# sourceMappingURL=HoverGestureHandler.js.map