react-native-gesture-handler 2.25.0 → 2.26.0

package/lib/module/web/handlers/NativeViewGestureHandler.ts

@@ -0,0 +1,175 @@
+import { Platform } from 'react-native';
+import { State } from '../../State';
+import { DEFAULT_TOUCH_SLOP } from '../constants';
+import { AdaptedEvent, Config } from '../interfaces';
+
+import GestureHandler from './GestureHandler';
+export default class NativeViewGestureHandler extends GestureHandler {
+  private buttonRole!: boolean;
+
+  // TODO: Implement logic for activation on start
+  // @ts-ignore Logic yet to be implemented
+  private shouldActivateOnStart = false;
+  private disallowInterruption = false;
+
+  private startX = 0;
+  private startY = 0;
+  private minDistSq = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
+
+  public init(ref: number, propsRef: React.RefObject<unknown>): void {
+    super.init(ref, propsRef);
+
+    this.shouldCancelWhenOutside = true;
+
+    if (Platform.OS !== 'web') {
+      return;
+    }
+
+    const view = this.delegate.view as HTMLElement;
+
+    this.restoreViewStyles(view);
+    this.buttonRole = view.getAttribute('role') === 'button';
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+
+    if (this.config.shouldActivateOnStart !== undefined) {
+      this.shouldActivateOnStart = this.config.shouldActivateOnStart;
+    }
+    if (this.config.disallowInterruption !== undefined) {
+      this.disallowInterruption = this.config.disallowInterruption;
+    }
+
+    const view = this.delegate.view as HTMLElement;
+    this.restoreViewStyles(view);
+  }
+
+  private restoreViewStyles(view: HTMLElement) {
+    if (!view) {
+      return;
+    }
+
+    view.style['touchAction'] = 'auto';
+    // @ts-ignore Turns on defualt touch behavior on Safari
+    view.style['WebkitTouchCallout'] = 'auto';
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+    this.newPointerAction();
+
+    this.tryToSendTouchEvent(event);
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+    this.newPointerAction();
+  }
+
+  private newPointerAction(): void {
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.startX = lastCoords.x;
+    this.startY = lastCoords.y;
+
+    if (this.state !== State.UNDETERMINED) {
+      return;
+    }
+
+    this.begin();
+
+    const view = this.delegate.view as HTMLElement;
+    const isRNGHText = view.hasAttribute('rnghtext');
+
+    if (this.buttonRole || isRNGHText) {
+      this.activate();
+    }
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    const dx = this.startX - lastCoords.x;
+    const dy = this.startY - lastCoords.y;
+    const distSq = dx * dx + dy * dy;
+
+    if (distSq >= this.minDistSq) {
+      if (this.buttonRole && this.state === State.ACTIVE) {
+        this.cancel();
+      } else if (!this.buttonRole && this.state === State.BEGAN) {
+        this.activate();
+      }
+    }
+  }
+
+  protected onPointerLeave(): void {
+    if (this.state === State.BEGAN || this.state === State.ACTIVE) {
+      this.cancel();
+    }
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.onUp(event);
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.onUp(event);
+  }
+
+  private onUp(event: AdaptedEvent): void {
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (this.tracker.trackedPointersCount === 0) {
+      if (this.state === State.ACTIVE) {
+        this.end();
+      } else {
+        this.fail();
+      }
+    }
+  }
+
+  public shouldRecognizeSimultaneously(handler: GestureHandler): boolean {
+    if (super.shouldRecognizeSimultaneously(handler)) {
+      return true;
+    }
+
+    if (
+      handler instanceof NativeViewGestureHandler &&
+      handler.state === State.ACTIVE &&
+      handler.disallowsInterruption()
+    ) {
+      return false;
+    }
+
+    const canBeInterrupted = !this.disallowInterruption;
+
+    if (
+      this.state === State.ACTIVE &&
+      handler.state === State.ACTIVE &&
+      canBeInterrupted
+    ) {
+      return false;
+    }
+
+    return (
+      this.state === State.ACTIVE && canBeInterrupted && handler.handlerTag > 0
+    );
+  }
+
+  public shouldBeCancelledByOther(_handler: GestureHandler): boolean {
+    return !this.disallowInterruption;
+  }
+
+  public disallowsInterruption(): boolean {
+    return this.disallowInterruption;
+  }
+
+  public isButton(): boolean {
+    return this.buttonRole;
+  }
+}

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

@@ -1,4 +1,4 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+"use strict";
 
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
@@ -8,68 +8,34 @@ const DEFAULT_MIN_POINTERS = 1;
 const DEFAULT_MAX_POINTERS = 10;
 const DEFAULT_MIN_DIST_SQ = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
 export default class PanGestureHandler extends GestureHandler {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "customActivationProperties", ['activeOffsetXStart', 'activeOffsetXEnd', 'failOffsetXStart', 'failOffsetXEnd', 'activeOffsetYStart', 'activeOffsetYEnd', 'failOffsetYStart', 'failOffsetYEnd', 'minVelocityX', 'minVelocityY', 'minVelocity']);
-
-    _defineProperty(this, "velocityX", 0);
-
-    _defineProperty(this, "velocityY", 0);
-
-    _defineProperty(this, "minDistSq", DEFAULT_MIN_DIST_SQ);
-
-    _defineProperty(this, "activeOffsetXStart", -Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "activeOffsetXEnd", Number.MIN_SAFE_INTEGER);
-
-    _defineProperty(this, "failOffsetXStart", Number.MIN_SAFE_INTEGER);
-
-    _defineProperty(this, "failOffsetXEnd", Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "activeOffsetYStart", Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "activeOffsetYEnd", Number.MIN_SAFE_INTEGER);
-
-    _defineProperty(this, "failOffsetYStart", Number.MIN_SAFE_INTEGER);
-
-    _defineProperty(this, "failOffsetYEnd", Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "minVelocityX", Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "minVelocityY", Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "minVelocitySq", Number.MAX_SAFE_INTEGER);
-
-    _defineProperty(this, "minPointers", DEFAULT_MIN_POINTERS);
-
-    _defineProperty(this, "maxPointers", DEFAULT_MAX_POINTERS);
-
-    _defineProperty(this, "startX", 0);
-
-    _defineProperty(this, "startY", 0);
-
-    _defineProperty(this, "offsetX", 0);
-
-    _defineProperty(this, "offsetY", 0);
-
-    _defineProperty(this, "lastX", 0);
-
-    _defineProperty(this, "lastY", 0);
-
-    _defineProperty(this, "stylusData", void 0);
-
-    _defineProperty(this, "activateAfterLongPress", 0);
-
-    _defineProperty(this, "activationTimeout", 0);
-
-    _defineProperty(this, "enableTrackpadTwoFingerGesture", false);
-
-    _defineProperty(this, "endWheelTimeout", 0);
-
-    _defineProperty(this, "wheelDevice", WheelDevice.UNDETERMINED);
-  }
-
+  customActivationProperties = ['activeOffsetXStart', 'activeOffsetXEnd', 'failOffsetXStart', 'failOffsetXEnd', 'activeOffsetYStart', 'activeOffsetYEnd', 'failOffsetYStart', 'failOffsetYEnd', 'minVelocityX', 'minVelocityY', 'minVelocity'];
+  velocityX = 0;
+  velocityY = 0;
+  minDistSq = DEFAULT_MIN_DIST_SQ;
+  activeOffsetXStart = -Number.MAX_SAFE_INTEGER;
+  activeOffsetXEnd = Number.MIN_SAFE_INTEGER;
+  failOffsetXStart = Number.MIN_SAFE_INTEGER;
+  failOffsetXEnd = Number.MAX_SAFE_INTEGER;
+  activeOffsetYStart = Number.MAX_SAFE_INTEGER;
+  activeOffsetYEnd = Number.MIN_SAFE_INTEGER;
+  failOffsetYStart = Number.MIN_SAFE_INTEGER;
+  failOffsetYEnd = Number.MAX_SAFE_INTEGER;
+  minVelocityX = Number.MAX_SAFE_INTEGER;
+  minVelocityY = Number.MAX_SAFE_INTEGER;
+  minVelocitySq = Number.MAX_SAFE_INTEGER;
+  minPointers = DEFAULT_MIN_POINTERS;
+  maxPointers = DEFAULT_MAX_POINTERS;
+  startX = 0;
+  startY = 0;
+  offsetX = 0;
+  offsetY = 0;
+  lastX = 0;
+  lastY = 0;
+  activateAfterLongPress = 0;
+  activationTimeout = 0;
+  enableTrackpadTwoFingerGesture = false;
+  endWheelTimeout = 0;
+  wheelDevice = WheelDevice.UNDETERMINED;
   updateGestureConfig({
     enabled = true,
     ...props
@@ -80,107 +46,82 @@ export default class PanGestureHandler extends GestureHandler {
       ...props
     });
     this.checkCustomActivationCriteria(this.customActivationProperties);
-
     if (this.config.minDist !== undefined) {
       this.minDistSq = this.config.minDist * this.config.minDist;
     } else if (this.hasCustomActivationCriteria) {
       this.minDistSq = Number.MAX_SAFE_INTEGER;
     }
-
     if (this.config.minPointers !== undefined) {
       this.minPointers = this.config.minPointers;
     }
-
     if (this.config.maxPointers !== undefined) {
       this.maxPointers = this.config.maxPointers;
     }
-
     if (this.config.minVelocity !== undefined) {
       this.minVelocityX = this.config.minVelocity;
       this.minVelocityY = this.config.minVelocity;
     }
-
     if (this.config.minVelocityX !== undefined) {
       this.minVelocityX = this.config.minVelocityX;
     }
-
     if (this.config.minVelocityY !== undefined) {
       this.minVelocityY = this.config.minVelocityY;
     }
-
     if (this.config.activateAfterLongPress !== undefined) {
       this.activateAfterLongPress = this.config.activateAfterLongPress;
     }
-
     if (this.config.activeOffsetXStart !== undefined) {
       this.activeOffsetXStart = this.config.activeOffsetXStart;
-
       if (this.config.activeOffsetXEnd === undefined) {
         this.activeOffsetXEnd = Number.MAX_SAFE_INTEGER;
       }
     }
-
     if (this.config.activeOffsetXEnd !== undefined) {
       this.activeOffsetXEnd = this.config.activeOffsetXEnd;
-
       if (this.config.activeOffsetXStart === undefined) {
         this.activeOffsetXStart = Number.MIN_SAFE_INTEGER;
       }
     }
-
     if (this.config.failOffsetXStart !== undefined) {
       this.failOffsetXStart = this.config.failOffsetXStart;
-
       if (this.config.failOffsetXEnd === undefined) {
         this.failOffsetXEnd = Number.MAX_SAFE_INTEGER;
       }
     }
-
     if (this.config.failOffsetXEnd !== undefined) {
       this.failOffsetXEnd = this.config.failOffsetXEnd;
-
       if (this.config.failOffsetXStart === undefined) {
         this.failOffsetXStart = Number.MIN_SAFE_INTEGER;
       }
     }
-
     if (this.config.activeOffsetYStart !== undefined) {
       this.activeOffsetYStart = this.config.activeOffsetYStart;
-
       if (this.config.activeOffsetYEnd === undefined) {
         this.activeOffsetYEnd = Number.MAX_SAFE_INTEGER;
       }
     }
-
     if (this.config.activeOffsetYEnd !== undefined) {
       this.activeOffsetYEnd = this.config.activeOffsetYEnd;
-
       if (this.config.activeOffsetYStart === undefined) {
         this.activeOffsetYStart = Number.MIN_SAFE_INTEGER;
       }
     }
-
     if (this.config.failOffsetYStart !== undefined) {
       this.failOffsetYStart = this.config.failOffsetYStart;
-
       if (this.config.failOffsetYEnd === undefined) {
         this.failOffsetYEnd = Number.MAX_SAFE_INTEGER;
       }
     }
-
     if (this.config.failOffsetYEnd !== undefined) {
       this.failOffsetYEnd = this.config.failOffsetYEnd;
-
       if (this.config.failOffsetYStart === undefined) {
         this.failOffsetYStart = Number.MIN_SAFE_INTEGER;
       }
     }
-
     if (this.config.enableTrackpadTwoFingerGesture !== undefined) {
       this.enableTrackpadTwoFingerGesture = this.config.enableTrackpadTwoFingerGesture;
     }
   }
-
   resetConfig() {
     super.resetConfig();
     this.activeOffsetXStart = -Number.MAX_SAFE_INTEGER;
@@ -199,11 +140,11 @@ export default class PanGestureHandler extends GestureHandler {
     this.maxPointers = DEFAULT_MAX_POINTERS;
     this.activateAfterLongPress = 0;
   }
-
   transformNativeEvent() {
     const translationX = this.getTranslationX();
     const translationY = this.getTranslationY();
-    return { ...super.transformNativeEvent(),
+    return {
+      ...super.transformNativeEvent(),
       translationX: isNaN(translationX) ? 0 : translationX,
       translationY: isNaN(translationY) ? 0 : translationY,
       velocityX: this.velocityX,
@@ -211,25 +152,21 @@ export default class PanGestureHandler extends GestureHandler {
       stylusData: this.stylusData
     };
   }
-
   getTranslationX() {
     return this.lastX - this.startX + this.offsetX;
   }
-
   getTranslationY() {
     return this.lastY - this.startY + this.offsetY;
   }
-
   clearActivationTimeout() {
     clearTimeout(this.activationTimeout);
-  } // Events Handling
-
+  }
 
+  // Events Handling
   onPointerDown(event) {
     if (!this.isButtonInConfig(event.button)) {
       return;
     }
-
     this.tracker.addToTracker(event);
     this.stylusData = event.stylusData;
     super.onPointerDown(event);
@@ -242,7 +179,6 @@ export default class PanGestureHandler extends GestureHandler {
     this.checkBegan();
     this.tryToSendTouchEvent(event);
   }
-
   onPointerAdd(event) {
     this.tracker.addToTracker(event);
     super.onPointerAdd(event);
@@ -254,7 +190,6 @@ export default class PanGestureHandler extends GestureHandler {
     this.lastY = lastCoords.y;
     this.startX = this.lastX;
     this.startY = this.lastY;
-
     if (this.tracker.trackedPointersCount > this.maxPointers) {
       if (this.state === State.ACTIVE) {
         this.cancel();
@@ -265,23 +200,18 @@ export default class PanGestureHandler extends GestureHandler {
       this.checkBegan();
     }
   }
-
   onPointerUp(event) {
     this.stylusData = event.stylusData;
     super.onPointerUp(event);
-
     if (this.state === State.ACTIVE) {
       const lastCoords = this.tracker.getAbsoluteCoordsAverage();
       this.lastX = lastCoords.x;
       this.lastY = lastCoords.y;
     }
-
     this.tracker.removeFromTracker(event.pointerId);
-
     if (this.tracker.trackedPointersCount === 0) {
       this.clearActivationTimeout();
     }
-
     if (this.state === State.ACTIVE) {
       this.end();
     } else {
@@ -289,7 +219,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.fail();
     }
   }
-
   onPointerRemove(event) {
     super.onPointerRemove(event);
     this.tracker.removeFromTracker(event.pointerId);
@@ -300,12 +229,10 @@ export default class PanGestureHandler extends GestureHandler {
     this.lastY = lastCoords.y;
     this.startX = this.lastX;
     this.startY = this.lastY;
-
     if (!(this.state === State.ACTIVE && this.tracker.trackedPointersCount < this.minPointers)) {
       this.checkBegan();
     }
   }
-
   onPointerMove(event) {
     this.tracker.track(event);
     this.stylusData = event.stylusData;
@@ -318,12 +245,10 @@ export default class PanGestureHandler extends GestureHandler {
     this.checkBegan();
     super.onPointerMove(event);
   }
-
   onPointerOutOfBounds(event) {
     if (this.shouldCancelWhenOutside) {
       return;
     }
-
     this.tracker.track(event);
     this.stylusData = event.stylusData;
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
@@ -333,12 +258,10 @@ export default class PanGestureHandler extends GestureHandler {
     this.velocityX = velocity.x;
     this.velocityY = velocity.y;
     this.checkBegan();
-
     if (this.state === State.ACTIVE) {
       super.onPointerOutOfBounds(event);
     }
   }
-
   scheduleWheelEnd(event) {
     clearTimeout(this.endWheelTimeout);
     this.endWheelTimeout = setTimeout(() => {
@@ -347,24 +270,19 @@ export default class PanGestureHandler extends GestureHandler {
         this.tracker.removeFromTracker(event.pointerId);
         this.state = State.UNDETERMINED;
       }
-
       this.wheelDevice = WheelDevice.UNDETERMINED;
     }, 30);
   }
-
   onWheel(event) {
     if (this.wheelDevice === WheelDevice.MOUSE || !this.enableTrackpadTwoFingerGesture) {
       return;
     }
-
     if (this.state === State.UNDETERMINED) {
       this.wheelDevice = event.wheelDeltaY % 120 !== 0 ? WheelDevice.TOUCHPAD : WheelDevice.MOUSE;
-
       if (this.wheelDevice === WheelDevice.MOUSE) {
         this.scheduleWheelEnd(event);
         return;
       }
-
       this.tracker.addToTracker(event);
       const lastCoords = this.tracker.getAbsoluteCoordsAverage();
       this.lastX = lastCoords.x;
@@ -374,7 +292,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.begin();
       this.activate();
     }
-
     this.tracker.track(event);
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
     this.lastX = lastCoords.x;
@@ -385,75 +302,55 @@ export default class PanGestureHandler extends GestureHandler {
     this.tryToSendMoveEvent(false, event);
     this.scheduleWheelEnd(event);
   }
-
   shouldActivate() {
     const dx = this.getTranslationX();
-
     if (this.activeOffsetXStart !== Number.MAX_SAFE_INTEGER && dx < this.activeOffsetXStart) {
       return true;
     }
-
     if (this.activeOffsetXEnd !== Number.MIN_SAFE_INTEGER && dx > this.activeOffsetXEnd) {
       return true;
     }
-
     const dy = this.getTranslationY();
-
     if (this.activeOffsetYStart !== Number.MAX_SAFE_INTEGER && dy < this.activeOffsetYStart) {
       return true;
     }
-
     if (this.activeOffsetYEnd !== Number.MIN_SAFE_INTEGER && dy > this.activeOffsetYEnd) {
       return true;
     }
-
     const distanceSq = dx * dx + dy * dy;
-
     if (this.minDistSq !== Number.MAX_SAFE_INTEGER && distanceSq >= this.minDistSq) {
       return true;
     }
-
     const vx = this.velocityX;
-
     if (this.minVelocityX !== Number.MAX_SAFE_INTEGER && (this.minVelocityX < 0 && vx <= this.minVelocityX || this.minVelocityX >= 0 && this.minVelocityX <= vx)) {
       return true;
     }
-
     const vy = this.velocityY;
-
     if (this.minVelocityY !== Number.MAX_SAFE_INTEGER && (this.minVelocityY < 0 && vy <= this.minVelocityY || this.minVelocityY >= 0 && this.minVelocityY <= vy)) {
       return true;
     }
-
     const velocitySq = vx * vx + vy * vy;
     return this.minVelocitySq !== Number.MAX_SAFE_INTEGER && velocitySq >= this.minVelocitySq;
   }
-
   shouldFail() {
     const dx = this.getTranslationX();
     const dy = this.getTranslationY();
     const distanceSq = dx * dx + dy * dy;
-
     if (this.activateAfterLongPress > 0 && distanceSq > DEFAULT_MIN_DIST_SQ) {
       this.clearActivationTimeout();
       return true;
     }
-
     if (this.failOffsetXStart !== Number.MIN_SAFE_INTEGER && dx < this.failOffsetXStart) {
       return true;
     }
-
     if (this.failOffsetXEnd !== Number.MAX_SAFE_INTEGER && dx > this.failOffsetXEnd) {
       return true;
     }
-
     if (this.failOffsetYStart !== Number.MIN_SAFE_INTEGER && dy < this.failOffsetYStart) {
       return true;
     }
-
     return this.failOffsetYEnd !== Number.MAX_SAFE_INTEGER && dy > this.failOffsetYEnd;
   }
-
   tryBegin(event) {
     if (this.state === State.UNDETERMINED && this.tracker.trackedPointersCount >= this.minPointers) {
       this.resetProgress();
@@ -462,7 +359,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.velocityX = 0;
       this.velocityY = 0;
       this.begin();
-
       if (this.activateAfterLongPress > 0) {
         this.activationTimeout = setTimeout(() => {
           this.activate();
@@ -474,7 +370,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.velocityY = velocity.y;
     }
   }
-
   checkBegan() {
     if (this.state === State.BEGAN) {
       if (this.shouldFail()) {
@@ -484,31 +379,24 @@ export default class PanGestureHandler extends GestureHandler {
       }
     }
   }
-
   activate(force = false) {
     if (this.state !== State.ACTIVE) {
       this.resetProgress();
     }
-
     super.activate(force);
   }
-
   onCancel() {
     this.clearActivationTimeout();
   }
-
   onReset() {
     this.clearActivationTimeout();
   }
-
   resetProgress() {
     if (this.state === State.ACTIVE) {
       return;
     }
-
     this.startX = this.lastX;
     this.startY = this.lastY;
   }
-
 }
 //# sourceMappingURL=PanGestureHandler.js.map