react-native-gesture-handler 2.6.0 → 2.6.2

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

@@ -3,9 +3,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { findNodeHandle } from 'react-native';
 import { State } from '../../State';
-import EventManager from '../tools/EventManager';
+import { PointerType, TouchEventType, EventTypes } from '../interfaces';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
+import InteractionManager from '../tools/InteractionManager';
+import PointerEventManager from '../tools/PointerEventManager';
 import PointerTracker from '../tools/PointerTracker';
+import TouchEventManager from '../tools/TouchEventManager';
+import { isPointerInBounds } from '../utils';
 export default class GestureHandler {
   // Orchestrator properties
   constructor() {
@@ -23,20 +27,18 @@ export default class GestureHandler {
 
     _defineProperty(this, "propsRef", void 0);
 
+    _defineProperty(this, "handlerTag", void 0);
+
     _defineProperty(this, "config", {
       enabled: false
     });
 
-    _defineProperty(this, "handlerTag", void 0);
-
-    _defineProperty(this, "view", null);
+    _defineProperty(this, "view", void 0);
 
-    _defineProperty(this, "eventManager", void 0);
+    _defineProperty(this, "eventManagers", []);
 
     _defineProperty(this, "tracker", new PointerTracker());
 
-    _defineProperty(this, "interactionManager", void 0);
-
     _defineProperty(this, "activationIndex", 0);
 
     _defineProperty(this, "awaiting", false);
@@ -45,12 +47,14 @@ export default class GestureHandler {
 
     _defineProperty(this, "shouldResetProgress", false);
 
-    _defineProperty(this, "sendEvent", (event, newState, oldState) => {
+    _defineProperty(this, "pointerType", PointerType.NONE);
+
+    _defineProperty(this, "sendEvent", (newState, oldState) => {
       const {
         onGestureHandlerEvent,
         onGestureHandlerStateChange
       } = this.propsRef.current;
-      const resultEvent = this.transformEventData(event, newState, oldState); // In the new API oldState field has to be undefined, unless we send event state changed
+      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)
@@ -76,17 +80,17 @@ export default class GestureHandler {
     this.propsRef = propsRef;
     this.ref = ref;
     this.currentState = State.UNDETERMINED;
-    this.setView(ref);
-    this.setEventManager();
+    this.setView();
+    this.addEventManager(new PointerEventManager(this.view));
+    this.addEventManager(new TouchEventManager(this.view));
   }
 
-  setView(ref) {
-    if (!ref) {
-      this.view = null;
-      return;
+  setView() {
+    if (!this.ref) {
+      throw new Error(`Cannot find HTML Element for handler ${this.handlerTag}`);
     }
 
-    this.view = findNodeHandle(ref);
+    this.view = findNodeHandle(this.ref);
     this.view.style['touchAction'] = 'none';
     this.view.style['webkitUserSelect'] = 'none';
     this.view.style['userSelect'] = 'none'; //@ts-ignore This one disables default events on Safari
@@ -94,24 +98,18 @@ export default class GestureHandler {
     this.view.style['WebkitTouchCallout'] = 'none';
   }
 
-  setEventManager() {
-    if (!this.view) {
-      return;
-    }
-
-    this.eventManager = new EventManager(this.view);
-    this.eventManager.setOnPointerDown(this.onPointerDown.bind(this));
-    this.eventManager.setOnPointerUp(this.onPointerUp.bind(this));
-    this.eventManager.setOnPointerMove(this.onPointerMove.bind(this));
-    this.eventManager.setOnPointerEnter(this.onPointerEnter.bind(this));
-    this.eventManager.setOnPointerOut(this.onPointerOut.bind(this));
-    this.eventManager.setOnPointerCancel(this.onPointerCancel.bind(this));
-    this.eventManager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
-    this.eventManager.setListeners();
-  }
-
-  setInteractionManager(manager) {
-    this.interactionManager = manager;
+  addEventManager(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.setOnPointerOut(this.onPointerOut.bind(this));
+    manager.setOnPointerCancel(this.onPointerCancel.bind(this));
+    manager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
+    manager.setListeners();
+    this.eventManagers.push(manager);
   } //
   // Resetting handler
   //
@@ -126,59 +124,77 @@ export default class GestureHandler {
   reset() {
     this.tracker.resetTracker();
     this.onReset();
+    this.resetProgress();
+    this.eventManagers.forEach(manager => manager.resetManager());
     this.currentState = State.UNDETERMINED;
   } //
   // State logic
   //
 
 
-  moveToState(newState, event) {
+  moveToState(newState, sendIfDisabled) {
     if (this.currentState === newState) {
       return;
     }
 
+    if (this.tracker.getTrackedPointersCount() > 0 && (newState === State.END || newState === State.CANCELLED || newState === State.FAILED)) {
+      this.cancelTouches();
+    }
+
     const oldState = this.currentState;
     this.currentState = newState;
-    GestureHandlerOrchestrator.getInstance().onHandlerStateChange(this, newState, oldState, event);
+    GestureHandlerOrchestrator.getInstance().onHandlerStateChange(this, newState, oldState, sendIfDisabled);
     this.onStateChange(newState, oldState);
   }
 
   onStateChange(_newState, _oldState) {}
 
-  begin(event) {
-    if (!this.checkHitSlop(event)) {
+  begin() {
+    if (!this.checkHitSlop()) {
       return;
     }
 
     if (this.currentState === State.UNDETERMINED) {
-      this.moveToState(State.BEGAN, event);
+      this.moveToState(State.BEGAN);
     }
   }
+  /**
+   * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send fail event
+   */
+
 
-  fail(event) {
+  fail(sendIfDisabled) {
     if (this.currentState === State.ACTIVE || this.currentState === State.BEGAN) {
-      this.moveToState(State.FAILED, event);
+      this.moveToState(State.FAILED, sendIfDisabled);
+      this.view.style.cursor = 'auto';
     }
 
     this.resetProgress();
   }
+  /**
+   * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send cancel event
+   */
 
-  cancel(event) {
+
+  cancel(sendIfDisabled) {
     if (this.currentState === State.ACTIVE || this.currentState === State.UNDETERMINED || this.currentState === State.BEGAN) {
       this.onCancel();
-      this.moveToState(State.CANCELLED, event);
+      this.moveToState(State.CANCELLED, sendIfDisabled);
+      this.view.style.cursor = 'auto';
     }
   }
 
-  activate(event, _force = false) {
+  activate(_force = false) {
     if (this.currentState === State.UNDETERMINED || this.currentState === State.BEGAN) {
-      this.moveToState(State.ACTIVE, event);
+      this.moveToState(State.ACTIVE);
+      this.view.style.cursor = 'grab';
     }
   }
 
-  end(event) {
+  end() {
     if (this.currentState === State.BEGAN || this.currentState === State.ACTIVE) {
-      this.moveToState(State.END, event);
+      this.moveToState(State.END);
+      this.view.style.cursor = 'auto';
     }
 
     this.resetProgress();
@@ -224,7 +240,7 @@ export default class GestureHandler {
       return false;
     }
 
-    return this.interactionManager.shouldWaitForHandlerFailure(this, handler);
+    return InteractionManager.getInstance().shouldWaitForHandlerFailure(this, handler);
   }
 
   shouldRequireToWaitForFailure(handler) {
@@ -232,7 +248,7 @@ export default class GestureHandler {
       return false;
     }
 
-    return this.interactionManager.shouldRequireHandlerToWaitForFailure(this, handler);
+    return InteractionManager.getInstance().shouldRequireHandlerToWaitForFailure(this, handler);
   }
 
   shouldRecognizeSimultaneously(handler) {
@@ -240,7 +256,7 @@ export default class GestureHandler {
       return true;
     }
 
-    return this.interactionManager.shouldRecognizeSimultaneously(this, handler);
+    return InteractionManager.getInstance().shouldRecognizeSimultaneously(this, handler);
   }
 
   shouldBeCancelledByOther(handler) {
@@ -248,59 +264,113 @@ export default class GestureHandler {
       return false;
     }
 
-    return this.interactionManager.shouldHandlerBeCancelledBy(this, handler);
+    return InteractionManager.getInstance().shouldHandlerBeCancelledBy(this, handler);
   } //
   // Event actions
   //
 
 
-  onPointerDown(_event) {
+  onPointerDown(event) {
     GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
+    this.pointerType = event.pointerType;
+
+    if (this.pointerType === PointerType.TOUCH) {
+      GestureHandlerOrchestrator.getInstance().cancelMouseAndPenGestures(this);
+    }
+
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
   } // Adding another pointer to existing ones
 
 
-  onPointerAdd(_event) {}
+  onPointerAdd(event) {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  }
 
-  onPointerUp(_event) {} // Removing pointer, when there is more than one pointers
+  onPointerUp(event) {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  } // Removing pointer, when there is more than one pointers
 
 
-  onPointerRemove(_event) {}
+  onPointerRemove(event) {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  }
 
   onPointerMove(event) {
-    this.tryToSendMoveEvent(event, false);
+    this.tryToSendMoveEvent(false);
+
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
   }
 
-  onPointerOut(_event) {}
+  onPointerOut(event) {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  }
 
-  onPointerEnter(_event) {}
+  onPointerEnter(event) {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  }
 
-  onPointerCancel(_event) {}
+  onPointerCancel(event) {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  }
 
   onPointerOutOfBounds(event) {
-    this.tryToSendMoveEvent(event, true);
+    this.tryToSendMoveEvent(true);
+
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
+  }
+
+  tryToSendMoveEvent(out) {
+    if (this.enabled && this.active && (!out || out && !this.shouldCancellWhenOutside)) {
+      this.sendEvent(this.currentState, this.currentState);
+    }
   }
 
-  tryToSendMoveEvent(event, out) {
-    if (this.currentState === State.ACTIVE && (!out || out && !this.shouldCancellWhenOutside)) {
-      this.sendEvent(event, this.currentState, this.currentState);
+  sendTouchEvent(event) {
+    if (!this.enabled) {
+      return;
+    }
+
+    const {
+      onGestureHandlerEvent
+    } = this.propsRef.current;
+    const touchEvent = this.transformTouchEvent(event);
+
+    if (touchEvent) {
+      invokeNullableMethod(onGestureHandlerEvent, touchEvent);
     }
   } //
   // Events Sending
   //
 
 
-  transformEventData(event, newState, oldState) {
-    var _this$eventManager;
-
+  transformEventData(newState, oldState) {
     return {
       nativeEvent: {
         numberOfPointers: this.tracker.getTrackedPointersCount(),
         state: newState,
-        pointerInside: (_this$eventManager = this.eventManager) === null || _this$eventManager === void 0 ? void 0 : _this$eventManager.isPointerInBounds({
-          x: event.x,
-          y: event.y
+        pointerInside: isPointerInBounds(this.view, {
+          x: this.tracker.getLastAvgX(),
+          y: this.tracker.getLastAvgY()
         }),
-        ...this.transformNativeEvent(event),
+        ...this.transformNativeEvent(),
         handlerTag: this.handlerTag,
         target: this.ref,
         oldState: newState !== oldState ? oldState : undefined
@@ -309,7 +379,143 @@ export default class GestureHandler {
     };
   }
 
-  transformNativeEvent(_event) {
+  transformTouchEvent(event) {
+    var _event$touchEventType;
+
+    const rect = this.view.getBoundingClientRect();
+    const all = [];
+    const changed = [];
+    const trackerData = this.tracker.getData(); // 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.lastX - rect.left,
+        y: element.lastY - rect.top,
+        absoluteX: element.lastX,
+        absoluteY: element.lastY
+      });
+    }); // 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.left,
+        y: event.y - rect.top,
+        absoluteX: event.x,
+        absoluteY: event.y
+      });
+    } else {
+      trackerData.forEach((element, key) => {
+        const id = this.tracker.getMappedTouchEventId(key);
+        changed.push({
+          id: id,
+          x: element.lastX - rect.left,
+          y: element.lastY - rect.top,
+          absoluteX: element.lastX,
+          absoluteY: element.lastY
+        });
+      });
+    }
+
+    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.currentState,
+        eventType: (_event$touchEventType = event.touchEventType) !== null && _event$touchEventType !== void 0 ? _event$touchEventType : eventType,
+        changedTouches: changed,
+        allTouches: all,
+        numberOfTouches: numberOfTouches
+      },
+      timeStamp: Date.now()
+    };
+  }
+
+  cancelTouches() {
+    const rect = this.view.getBoundingClientRect();
+    const all = [];
+    const changed = [];
+    const trackerData = this.tracker.getData();
+
+    if (trackerData.size === 0) {
+      return;
+    }
+
+    trackerData.forEach((element, key) => {
+      const id = this.tracker.getMappedTouchEventId(key);
+      all.push({
+        id: id,
+        x: element.lastX - rect.left,
+        y: element.lastY - rect.top,
+        absoluteX: element.lastX,
+        absoluteY: element.lastY
+      });
+      changed.push({
+        id: id,
+        x: element.lastX - rect.left,
+        y: element.lastY - rect.top,
+        absoluteX: element.lastX,
+        absoluteY: element.lastY
+      });
+    });
+    const cancelEvent = {
+      nativeEvent: {
+        handlerTag: this.handlerTag,
+        state: this.currentState,
+        eventType: TouchEventType.CANCELLED,
+        changedTouches: changed,
+        allTouches: all,
+        numberOfTouches: all.length
+      },
+      timeStamp: Date.now()
+    };
+    const {
+      onGestureHandlerEvent
+    } = this.propsRef.current;
+    invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+  }
+
+  transformNativeEvent() {
     return {};
   } //
   // Handling config
@@ -321,10 +527,29 @@ export default class GestureHandler {
     ...props
   }) {
     this.config = {
-      enabled,
+      enabled: enabled,
       ...props
     };
+    this.enabled = enabled;
     this.validateHitSlops();
+
+    if (this.enabled) {
+      return;
+    }
+
+    switch (this.currentState) {
+      case State.ACTIVE:
+        this.fail(true);
+        break;
+
+      case State.UNDETERMINED:
+        GestureHandlerOrchestrator.getInstance().removeHandlerFromOrchestrator(this);
+        break;
+
+      default:
+        this.cancel(true);
+        break;
+    }
   }
 
   checkCustomActivationCriteria(criterias) {
@@ -357,8 +582,8 @@ export default class GestureHandler {
     }
   }
 
-  checkHitSlop(event) {
-    if (!this.config.hitSlop || !this.view) {
+  checkHitSlop() {
+    if (!this.config.hitSlop) {
       return true;
     }
 
@@ -411,13 +636,25 @@ export default class GestureHandler {
       }
     }
 
-    if (event.offsetX >= left && event.offsetX <= right && event.offsetY >= top && event.offsetY <= bottom) {
+    const rect = this.view.getBoundingClientRect();
+    const offsetX = this.tracker.getLastX() - rect.left;
+    const offsetY = this.tracker.getLastY() - rect.top;
+
+    if (offsetX >= left && offsetX <= right && offsetY >= top && offsetY <= bottom) {
       return true;
     }
 
     return false;
   }
 
+  isPointerInBounds({
+    x,
+    y
+  }) {
+    const rect = this.view.getBoundingClientRect();
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+  }
+
   resetConfig() {} //
   // Getters and setters
   //
@@ -443,8 +680,8 @@ export default class GestureHandler {
     return this.view;
   }
 
-  getEventManager() {
-    return this.eventManager;
+  getEventManagers() {
+    return this.eventManagers;
   }
 
   getTracker() {
@@ -459,14 +696,22 @@ export default class GestureHandler {
     return this.currentState;
   }
 
-  setShouldCancelWhenOutside(flag) {
-    this.shouldCancellWhenOutside = flag;
+  isEnabled() {
+    return this.enabled;
+  }
+
+  setShouldCancelWhenOutside(shouldCancel) {
+    this.shouldCancellWhenOutside = shouldCancel;
   }
 
   getShouldCancelWhenOutside() {
     return this.shouldCancellWhenOutside;
   }
 
+  getPointerType() {
+    return this.pointerType;
+  }
+
 }
 
 function invokeNullableMethod(method, event) {