@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0-rn-83

package/src/web/handlers/PanGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, StylusData, WheelDevice } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -20,6 +20,7 @@ export default class PanGestureHandler extends GestureHandler {
     'failOffsetYEnd',
     'minVelocityX',
     'minVelocityY',
+    'minVelocity',
   ];
 
   public velocityX = 0;
@@ -51,12 +52,14 @@ export default class PanGestureHandler extends GestureHandler {
   private lastX = 0;
   private lastY = 0;
 
+  private stylusData: StylusData | undefined;
+
   private activateAfterLongPress = 0;
   private activationTimeout = 0;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
-  }
+  private enableTrackpadTwoFingerGesture = false;
+  private endWheelTimeout = 0;
+  private wheelDevice = WheelDevice.UNDETERMINED;
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.resetConfig();
@@ -158,6 +161,11 @@ export default class PanGestureHandler extends GestureHandler {
         this.failOffsetYStart = Number.MIN_SAFE_INTEGER;
       }
     }
+
+    if (this.config.enableTrackpadTwoFingerGesture !== undefined) {
+      this.enableTrackpadTwoFingerGesture =
+        this.config.enableTrackpadTwoFingerGesture;
+    }
   }
 
   protected resetConfig(): void {
@@ -195,6 +203,7 @@ export default class PanGestureHandler extends GestureHandler {
       translationY: isNaN(translationY) ? 0 : translationY,
       velocityX: this.velocityX,
       velocityY: this.velocityY,
+      stylusData: this.stylusData,
     };
   }
 
@@ -209,16 +218,40 @@ export default class PanGestureHandler extends GestureHandler {
     clearTimeout(this.activationTimeout);
   }
 
-  //EventsHandling
+  private updateLastCoords() {
+    const { x, y } = this.tracker.getAbsoluteCoordsAverage();
+
+    this.lastX = x;
+    this.lastY = y;
+  }
+
+  private updateVelocity(pointerId: number) {
+    const velocities = this.tracker.getVelocity(pointerId);
+
+    this.velocityX = velocities?.x ?? 0;
+    this.velocityY = velocities?.y ?? 0;
+  }
+
+  // Events Handling
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
+    this.stylusData = event.stylusData;
+
     super.onPointerDown(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    this.updateLastCoords();
+
+    this.startX = this.lastX;
+    this.startY = this.lastY;
 
     this.tryBegin(event);
     this.checkBegan();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -229,14 +262,13 @@ export default class PanGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
 
-    if (this.tracker.getTrackedPointersCount() > this.maxPointers) {
-      if (this.currentState === State.ACTIVE) {
+    if (this.tracker.trackedPointersCount > this.maxPointers) {
+      if (this.state === State.ACTIVE) {
         this.cancel();
       } else {
         this.fail();
@@ -247,16 +279,22 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
-    super.onPointerUp(event);
+    this.stylusData = event.stylusData;
 
-    if (this.currentState === State.ACTIVE) {
-      this.lastX = this.tracker.getLastAvgX();
-      this.lastY = this.tracker.getLastAvgY();
+    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.currentState === State.ACTIVE) {
+    if (this.tracker.trackedPointersCount === 0) {
+      this.clearActivationTimeout();
+    }
+
+    if (this.state === State.ACTIVE) {
       this.end();
     } else {
       this.resetProgress();
@@ -270,16 +308,15 @@ export default class PanGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
 
     if (
       !(
-        this.currentState === State.ACTIVE &&
-        this.tracker.getTrackedPointersCount() < this.minPointers
+        this.state === State.ACTIVE &&
+        this.tracker.trackedPointersCount < this.minPointers
       )
     ) {
       this.checkBegan();
@@ -288,11 +325,10 @@ export default class PanGestureHandler extends GestureHandler {
 
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
-    this.velocityX = this.tracker.getVelocityX(event.pointerId);
-    this.velocityY = this.tracker.getVelocityY(event.pointerId);
+    this.updateLastCoords();
+    this.updateVelocity(event.pointerId);
 
     this.checkBegan();
 
@@ -300,24 +336,75 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
-    if (this.getShouldCancelWhenOutside()) {
+    if (this.shouldCancelWhenOutside) {
       return;
     }
 
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
-    this.velocityX = this.tracker.getVelocityX(event.pointerId);
-    this.velocityY = this.tracker.getVelocityY(event.pointerId);
+    this.updateLastCoords();
+    this.updateVelocity(event.pointerId);
 
     this.checkBegan();
 
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       super.onPointerOutOfBounds(event);
     }
   }
 
+  private scheduleWheelEnd(event: AdaptedEvent) {
+    clearTimeout(this.endWheelTimeout);
+
+    this.endWheelTimeout = setTimeout(() => {
+      if (this.state === State.ACTIVE) {
+        this.end();
+        this.tracker.removeFromTracker(event.pointerId);
+        this.state = State.UNDETERMINED;
+      }
+
+      this.wheelDevice = WheelDevice.UNDETERMINED;
+    }, 30);
+  }
+
+  protected onWheel(event: AdaptedEvent): void {
+    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);
+
+      this.updateLastCoords();
+
+      this.startX = this.lastX;
+      this.startY = this.lastY;
+
+      this.begin();
+      this.activate();
+    }
+    this.tracker.track(event);
+
+    this.updateLastCoords();
+    this.updateVelocity(event.pointerId);
+
+    this.tryToSendMoveEvent(false, event);
+    this.scheduleWheelEnd(event);
+  }
+
   private shouldActivate(): boolean {
     const dx: number = this.getTranslationX();
 
@@ -426,8 +513,8 @@ export default class PanGestureHandler extends GestureHandler {
 
   private tryBegin(event: AdaptedEvent): void {
     if (
-      this.currentState === State.UNDETERMINED &&
-      this.tracker.getTrackedPointersCount() >= this.minPointers
+      this.state === State.UNDETERMINED &&
+      this.tracker.trackedPointersCount >= this.minPointers
     ) {
       this.resetProgress();
       this.offsetX = 0;
@@ -443,13 +530,12 @@ export default class PanGestureHandler extends GestureHandler {
         }, this.activateAfterLongPress);
       }
     } else {
-      this.velocityX = this.tracker.getVelocityX(event.pointerId);
-      this.velocityY = this.tracker.getVelocityY(event.pointerId);
+      this.updateVelocity(event.pointerId);
     }
   }
 
   private checkBegan(): void {
-    if (this.currentState === State.BEGAN) {
+    if (this.state === State.BEGAN) {
       if (this.shouldFail()) {
         this.fail();
       } else if (this.shouldActivate()) {
@@ -459,7 +545,7 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   public activate(force = false): void {
-    if (this.currentState !== State.ACTIVE) {
+    if (this.state !== State.ACTIVE) {
       this.resetProgress();
     }
 
@@ -475,7 +561,7 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   protected resetProgress(): void {
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       return;
     }
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import ScaleGestureDetector, {
@@ -16,24 +16,23 @@ export default class PinchGestureHandler extends GestureHandler {
 
   private scaleDetectorListener: ScaleGestureListener = {
     onScaleBegin: (detector: ScaleGestureDetector): boolean => {
-      this.startingSpan = detector.getCurrentSpan();
+      this.startingSpan = detector.currentSpan;
       return true;
     },
     onScale: (detector: ScaleGestureDetector): boolean => {
       const prevScaleFactor: number = this.scale;
-      this.scale *= detector.getScaleFactor(
-        this.tracker.getTrackedPointersCount()
+      this.scale *= detector.calculateScaleFactor(
+        this.tracker.trackedPointersCount
       );
 
-      const delta = detector.getTimeDelta();
+      const delta = detector.timeDelta;
       if (delta > 0) {
         this.velocity = (this.scale - prevScaleFactor) / delta;
       }
 
       if (
-        Math.abs(this.startingSpan - detector.getCurrentSpan()) >=
-          this.spanSlop &&
-        this.currentState === State.BEGAN
+        Math.abs(this.startingSpan - detector.currentSpan) >= this.spanSlop &&
+        this.state === State.BEGAN
       ) {
         this.activate();
       }
@@ -52,17 +51,13 @@ export default class PinchGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
 
-    this.setShouldCancelWhenOutside(false);
-  }
-
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
+    this.shouldCancelWhenOutside = false;
   }
 
   protected transformNativeEvent() {
     return {
-      focalX: this.scaleGestureDetector.getFocusX(),
-      focalY: this.scaleGestureDetector.getFocusY(),
+      focalX: this.scaleGestureDetector.focusX,
+      focalY: this.scaleGestureDetector.focusY,
       velocity: this.velocity,
       scale: this.scale,
     };
@@ -71,6 +66,8 @@ export default class PinchGestureHandler extends GestureHandler {
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -83,12 +80,12 @@ export default class PinchGestureHandler extends GestureHandler {
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);
-    if (this.currentState !== State.ACTIVE) {
+    if (this.state !== State.ACTIVE) {
       return;
     }
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
 
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       this.end();
     } else {
       this.fail();
@@ -100,16 +97,13 @@ export default class PinchGestureHandler extends GestureHandler {
     this.scaleGestureDetector.onTouchEvent(event, this.tracker);
     this.tracker.removeFromTracker(event.pointerId);
 
-    if (
-      this.currentState === State.ACTIVE &&
-      this.tracker.getTrackedPointersCount() < 2
-    ) {
+    if (this.state === State.ACTIVE && this.tracker.trackedPointersCount < 2) {
       this.end();
     }
   }
 
   protected onPointerMove(event: AdaptedEvent): void {
-    if (this.tracker.getTrackedPointersCount() < 2) {
+    if (this.tracker.trackedPointersCount < 2) {
       return;
     }
     this.tracker.track(event);
@@ -118,7 +112,7 @@ export default class PinchGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
-    if (this.tracker.getTrackedPointersCount() < 2) {
+    if (this.tracker.trackedPointersCount < 2) {
       return;
     }
     this.tracker.track(event);
@@ -128,7 +122,7 @@ export default class PinchGestureHandler extends GestureHandler {
   }
 
   private tryBegin(): void {
-    if (this.currentState !== State.UNDETERMINED) {
+    if (this.state !== State.UNDETERMINED) {
       return;
     }
 
@@ -137,7 +131,7 @@ export default class PinchGestureHandler extends GestureHandler {
   }
 
   public activate(force?: boolean): void {
-    if (this.currentState !== State.ACTIVE) {
+    if (this.state !== State.ACTIVE) {
       this.resetProgress();
     }
 
@@ -149,7 +143,7 @@ export default class PinchGestureHandler extends GestureHandler {
   }
 
   protected resetProgress(): void {
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       return;
     }
     this.velocity = 0;

package/src/web/handlers/RotationGestureHandler.ts

@@ -1,5 +1,5 @@
 import { State } from '../../State';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import RotationGestureDetector, {
@@ -19,9 +19,9 @@ export default class RotationGestureHandler extends GestureHandler {
     onRotationBegin: (_detector: RotationGestureDetector): boolean => true,
     onRotation: (detector: RotationGestureDetector): boolean => {
       const previousRotation: number = this.rotation;
-      this.rotation += detector.getRotation();
+      this.rotation += detector.rotation;
 
-      const delta = detector.getTimeDelta();
+      const delta = detector.timeDelta;
 
       if (delta > 0) {
         this.velocity = (this.rotation - previousRotation) / delta;
@@ -29,7 +29,7 @@ export default class RotationGestureHandler extends GestureHandler {
 
       if (
         Math.abs(this.rotation) >= ROTATION_RECOGNITION_THRESHOLD &&
-        this.currentState === State.BEGAN
+        this.state === State.BEGAN
       ) {
         this.activate();
       }
@@ -47,11 +47,7 @@ export default class RotationGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
 
-    this.setShouldCancelWhenOutside(false);
-  }
-
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
+    this.shouldCancelWhenOutside = false;
   }
 
   protected transformNativeEvent() {
@@ -64,13 +60,13 @@ export default class RotationGestureHandler extends GestureHandler {
   }
 
   public getAnchorX(): number {
-    const anchorX = this.rotationGestureDetector.getAnchorX();
+    const anchorX = this.rotationGestureDetector.anchorX;
 
     return anchorX ? anchorX : this.cachedAnchorX;
   }
 
   public getAnchorY(): number {
-    const anchorY = this.rotationGestureDetector.getAnchorY();
+    const anchorY = this.rotationGestureDetector.anchorY;
 
     return anchorY ? anchorY : this.cachedAnchorY;
   }
@@ -78,6 +74,8 @@ export default class RotationGestureHandler extends GestureHandler {
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -89,7 +87,7 @@ export default class RotationGestureHandler extends GestureHandler {
   }
 
   protected onPointerMove(event: AdaptedEvent): void {
-    if (this.tracker.getTrackedPointersCount() < 2) {
+    if (this.tracker.trackedPointersCount < 2) {
       return;
     }
 
@@ -108,7 +106,7 @@ export default class RotationGestureHandler extends GestureHandler {
   }
 
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
-    if (this.tracker.getTrackedPointersCount() < 2) {
+    if (this.tracker.trackedPointersCount < 2) {
       return;
     }
 
@@ -131,11 +129,11 @@ export default class RotationGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
 
-    if (this.currentState !== State.ACTIVE) {
+    if (this.state !== State.ACTIVE) {
       return;
     }
 
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       this.end();
     } else {
       this.fail();
@@ -149,19 +147,15 @@ export default class RotationGestureHandler extends GestureHandler {
   }
 
   protected tryBegin(): void {
-    if (this.currentState !== State.UNDETERMINED) {
+    if (this.state !== State.UNDETERMINED) {
       return;
     }
 
     this.begin();
   }
 
-  public activate(_force?: boolean): void {
-    super.activate();
-  }
-
   protected onReset(): void {
-    if (this.currentState === State.ACTIVE) {
+    if (this.state === State.ACTIVE) {
       return;
     }
 

package/src/web/handlers/TapGestureHandler.ts

@@ -31,10 +31,6 @@ export default class TapGestureHandler extends GestureHandler {
 
   private tapsSoFar = 0;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
-  }
-
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
@@ -103,8 +99,19 @@ export default class TapGestureHandler extends GestureHandler {
     }
   }
 
-  //Handling Events
+  private updateLastCoords() {
+    const { x, y } = this.tracker.getAbsoluteCoordsAverage();
+
+    this.lastX = x;
+    this.lastY = y;
+  }
+
+  // Handling Events
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
 
@@ -117,6 +124,8 @@ export default class TapGestureHandler extends GestureHandler {
     this.lastY = event.y;
 
     this.updateState(event);
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -127,19 +136,18 @@ export default class TapGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    this.updateLastCoords();
 
-    this.startX = this.tracker.getLastAvgX();
-    this.startY = this.tracker.getLastAvgY();
+    this.startX = this.lastX;
+    this.startY = this.lastY;
 
     this.updateState(event);
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+
+    this.updateLastCoords();
 
     this.tracker.removeFromTracker(event.pointerId);
 
@@ -153,8 +161,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY = this.startY;
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -166,9 +173,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.trySettingPosition(event);
     this.tracker.track(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
-
+    this.updateLastCoords();
     this.updateState(event);
 
     super.onPointerMove(event);
@@ -178,19 +183,15 @@ export default class TapGestureHandler extends GestureHandler {
     this.trySettingPosition(event);
     this.tracker.track(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
-
+    this.updateLastCoords();
     this.updateState(event);
 
     super.onPointerOutOfBounds(event);
   }
 
   private updateState(event: AdaptedEvent): void {
-    if (
-      this.currentMaxNumberOfPointers < this.tracker.getTrackedPointersCount()
-    ) {
-      this.currentMaxNumberOfPointers = this.tracker.getTrackedPointersCount();
+    if (this.currentMaxNumberOfPointers < this.tracker.trackedPointersCount) {
+      this.currentMaxNumberOfPointers = this.tracker.trackedPointersCount;
     }
 
     if (this.shouldFail()) {
@@ -198,7 +199,7 @@ export default class TapGestureHandler extends GestureHandler {
       return;
     }
 
-    switch (this.currentState) {
+    switch (this.state) {
       case State.UNDETERMINED:
         if (event.eventType === EventTypes.DOWN) {
           this.begin();
@@ -219,7 +220,7 @@ export default class TapGestureHandler extends GestureHandler {
   }
 
   private trySettingPosition(event: AdaptedEvent): void {
-    if (this.currentState !== State.UNDETERMINED) {
+    if (this.state !== State.UNDETERMINED) {
       return;
     }