react-native-gesture-handler 2.16.1 → 2.17.0

package/src/web/detectors/ScaleGestureDetector.ts

@@ -76,11 +76,10 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
 
     const div: number = pointerUp ? numOfPointers - 1 : numOfPointers;
 
-    const sumX = tracker.getSumX(ignoredPointer);
-    const sumY = tracker.getSumY(ignoredPointer);
+    const coordsSum = tracker.getAbsoluteCoordsSum();
 
-    const focusX = sumX / div;
-    const focusY = sumY / div;
+    const focusX = coordsSum.x / div;
+    const focusY = coordsSum.y / div;
 
     //Determine average deviation from focal point
 
@@ -92,8 +91,8 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
         return;
       }
 
-      devSumX += Math.abs(value.lastX - focusX);
-      devSumY += Math.abs(value.lastY - focusY);
+      devSumX += Math.abs(value.abosoluteCoords.x - focusX);
+      devSumY += Math.abs(value.abosoluteCoords.y - focusY);
     });
 
     const devX: number = devSumX / div;

package/src/web/handlers/FlingGestureHandler.ts

@@ -114,6 +114,8 @@ export default class FlingGestureHandler extends GestureHandler {
 
     super.onPointerDown(event);
     this.newPointerAction();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {

package/src/web/handlers/GestureHandler.ts

@@ -289,32 +289,21 @@ export default abstract class GestureHandler implements IGestureHandler {
       GestureHandlerOrchestrator.getInstance().cancelMouseAndPenGestures(this);
     }
 
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    // TODO: Bring back touch events along with introducing `handleDown` method that will handle handler specific stuff
   }
   // Adding another pointer to existing ones
   protected onPointerAdd(event: AdaptedEvent): void {
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendTouchEvent(event);
   }
   protected onPointerUp(event: AdaptedEvent): void {
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendTouchEvent(event);
   }
   // Removing pointer, when there is more than one pointers
   protected onPointerRemove(event: AdaptedEvent): void {
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendTouchEvent(event);
   }
   protected onPointerMove(event: AdaptedEvent): void {
-    this.tryToSendMoveEvent(false);
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendMoveEvent(false, event);
   }
   protected onPointerLeave(event: AdaptedEvent): void {
     if (this.shouldCancelWhenOutside) {
@@ -329,28 +318,19 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
 
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendTouchEvent(event);
   }
   protected onPointerEnter(event: AdaptedEvent): void {
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendTouchEvent(event);
   }
   protected onPointerCancel(event: AdaptedEvent): void {
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendTouchEvent(event);
 
     this.cancel();
     this.reset();
   }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
-    this.tryToSendMoveEvent(true);
-    if (this.config.needsPointerData) {
-      this.sendTouchEvent(event);
-    }
+    this.tryToSendMoveEvent(true, event);
   }
   protected onPointerMoveOver(_event: AdaptedEvent): void {
     // used only by hover gesture handler atm
@@ -358,14 +338,22 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected onPointerMoveOut(_event: AdaptedEvent): void {
     // used only by hover gesture handler atm
   }
-  private tryToSendMoveEvent(out: boolean): void {
-    if (
-      this.enabled &&
-      this.active &&
-      (!out || (out && !this.shouldCancelWhenOutside))
-    ) {
+  private tryToSendMoveEvent(out: boolean, event: AdaptedEvent): void {
+    if ((out && this.shouldCancelWhenOutside) || !this.enabled) {
+      return;
+    }
+
+    if (this.active) {
       this.sendEvent(this.currentState, this.currentState);
     }
+
+    this.tryToSendTouchEvent(event);
+  }
+
+  protected tryToSendTouchEvent(event: AdaptedEvent): void {
+    if (this.config.needsPointerData) {
+      this.sendTouchEvent(event);
+    }
   }
 
   public sendTouchEvent(event: AdaptedEvent): void {
@@ -417,10 +405,9 @@ export default abstract class GestureHandler implements IGestureHandler {
       nativeEvent: {
         numberOfPointers: this.tracker.getTrackedPointersCount(),
         state: newState,
-        pointerInside: this.delegate.isPointerInBounds({
-          x: this.tracker.getLastAvgX(),
-          y: this.tracker.getLastAvgY(),
-        }),
+        pointerInside: this.delegate.isPointerInBounds(
+          this.tracker.getAbsoluteCoordsAverage()
+        ),
         ...this.transformNativeEvent(),
         handlerTag: this.handlerTag,
         target: this.viewRef,
@@ -454,10 +441,10 @@ export default abstract class GestureHandler implements IGestureHandler {
 
       all.push({
         id: id,
-        x: element.lastX - rect.pageX,
-        y: element.lastY - rect.pageY,
-        absoluteX: element.lastX,
-        absoluteY: element.lastY,
+        x: element.abosoluteCoords.x - rect.pageX,
+        y: element.abosoluteCoords.y - rect.pageY,
+        absoluteX: element.abosoluteCoords.x,
+        absoluteY: element.abosoluteCoords.y,
       });
     });
 
@@ -477,10 +464,10 @@ export default abstract class GestureHandler implements IGestureHandler {
 
         changed.push({
           id: id,
-          x: element.lastX - rect.pageX,
-          y: element.lastY - rect.pageY,
-          absoluteX: element.lastX,
-          absoluteY: element.lastY,
+          x: element.abosoluteCoords.x - rect.pageX,
+          y: element.abosoluteCoords.y - rect.pageY,
+          absoluteX: element.abosoluteCoords.x,
+          absoluteY: element.abosoluteCoords.y,
         });
       });
     }
@@ -524,6 +511,7 @@ export default abstract class GestureHandler implements IGestureHandler {
         changedTouches: changed,
         allTouches: all,
         numberOfTouches: numberOfTouches,
+        pointerType: this.pointerType,
       },
       timeStamp: Date.now(),
     };
@@ -546,18 +534,18 @@ export default abstract class GestureHandler implements IGestureHandler {
 
       all.push({
         id: id,
-        x: element.lastX - rect.pageX,
-        y: element.lastY - rect.pageY,
-        absoluteX: element.lastX,
-        absoluteY: element.lastY,
+        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.lastX - rect.pageX,
-        y: element.lastY - rect.pageY,
-        absoluteX: element.lastX,
-        absoluteY: element.lastY,
+        x: element.abosoluteCoords.x - rect.pageX,
+        y: element.abosoluteCoords.y - rect.pageY,
+        absoluteX: element.abosoluteCoords.x,
+        absoluteY: element.abosoluteCoords.y,
       });
     });
 
@@ -569,6 +557,7 @@ export default abstract class GestureHandler implements IGestureHandler {
         changedTouches: changed,
         allTouches: all,
         numberOfTouches: all.length,
+        pointerType: this.pointerType,
       },
       timeStamp: Date.now(),
     };
@@ -581,13 +570,14 @@ export default abstract class GestureHandler implements IGestureHandler {
 
   protected transformNativeEvent(): Record<string, unknown> {
     // those properties are shared by most handlers and if not this method will be overriden
-    const rect = this.delegate.measureView();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    const lastRelativeCoords = this.tracker.getRelativeCoordsAverage();
 
     return {
-      x: this.tracker.getLastAvgX() - rect.pageX,
-      y: this.tracker.getLastAvgY() - rect.pageY,
-      absoluteX: this.tracker.getLastAvgX(),
-      absoluteY: this.tracker.getLastAvgY(),
+      x: lastRelativeCoords.x,
+      y: lastRelativeCoords.y,
+      absoluteX: lastCoords.x,
+      absoluteY: lastCoords.y,
     };
   }
 
@@ -732,8 +722,9 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
 
     const rect = this.delegate.measureView();
-    const offsetX: number = this.tracker.getLastX() - rect.pageX;
-    const offsetY: number = this.tracker.getLastY() - rect.pageY;
+    const { x, y } = this.tracker.getLastAbsoluteCoords();
+    const offsetX: number = x - rect.pageX;
+    const offsetY: number = y - rect.pageY;
 
     if (
       offsetX >= left &&

package/src/web/handlers/LongPressGestureHandler.ts

@@ -67,6 +67,8 @@ export default class LongPressGestureHandler extends GestureHandler {
     this.tryBegin(event);
     this.tryActivate();
     this.checkDistanceFail(event);
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerMove(event: AdaptedEvent): void {

package/src/web/handlers/ManualGestureHandler.ts

@@ -14,6 +14,8 @@ export default class ManualGestureHandler extends GestureHandler {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.begin();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -53,6 +53,8 @@ export default class NativeViewGestureHandler extends GestureHandler {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.newPointerAction();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -62,8 +64,9 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   private newPointerAction(): void {
-    this.startX = this.tracker.getLastAvgX();
-    this.startY = this.tracker.getLastAvgY();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.startX = lastCoords.x;
+    this.startY = lastCoords.y;
 
     if (this.currentState !== State.UNDETERMINED) {
       return;
@@ -78,8 +81,9 @@ export default class NativeViewGestureHandler extends GestureHandler {
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
 
-    const dx = this.startX - this.tracker.getLastAvgX();
-    const dy = this.startY - this.tracker.getLastAvgY();
+    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) {

package/src/web/handlers/PanGestureHandler.ts

@@ -219,14 +219,17 @@ export default class PanGestureHandler extends GestureHandler {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.startX = this.lastX;
     this.startY = this.lastY;
 
     this.tryBegin(event);
     this.checkBegan();
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -237,8 +240,9 @@ 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();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -256,10 +260,10 @@ export default class PanGestureHandler extends GestureHandler {
 
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
-
     if (this.currentState === State.ACTIVE) {
-      this.lastX = this.tracker.getLastAvgX();
-      this.lastY = this.tracker.getLastAvgY();
+      const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+      this.lastX = lastCoords.x;
+      this.lastY = lastCoords.y;
     }
 
     this.tracker.removeFromTracker(event.pointerId);
@@ -271,6 +275,7 @@ export default class PanGestureHandler extends GestureHandler {
       this.fail();
     }
   }
+
   protected onPointerRemove(event: AdaptedEvent): void {
     super.onPointerRemove(event);
     this.tracker.removeFromTracker(event.pointerId);
@@ -278,8 +283,9 @@ 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();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -297,10 +303,13 @@ export default class PanGestureHandler extends GestureHandler {
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
-    this.velocityX = this.tracker.getVelocityX(event.pointerId);
-    this.velocityY = this.tracker.getVelocityY(event.pointerId);
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
+
+    const velocity = this.tracker.getVelocity(event.pointerId);
+    this.velocityX = velocity.x;
+    this.velocityY = velocity.y;
 
     this.checkBegan();
 
@@ -314,10 +323,13 @@ export default class PanGestureHandler extends GestureHandler {
 
     this.tracker.track(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
-    this.velocityX = this.tracker.getVelocityX(event.pointerId);
-    this.velocityY = this.tracker.getVelocityY(event.pointerId);
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
+
+    const velocity = this.tracker.getVelocity(event.pointerId);
+    this.velocityX = velocity.x;
+    this.velocityY = velocity.y;
 
     this.checkBegan();
 
@@ -451,8 +463,9 @@ export default class PanGestureHandler extends GestureHandler {
         }, this.activateAfterLongPress);
       }
     } else {
-      this.velocityX = this.tracker.getVelocityX(event.pointerId);
-      this.velocityY = this.tracker.getVelocityY(event.pointerId);
+      const velocity = this.tracker.getVelocity(event.pointerId);
+      this.velocityX = velocity.x;
+      this.velocityY = velocity.y;
     }
   }
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -71,6 +71,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 {

package/src/web/handlers/RotationGestureHandler.ts

@@ -78,6 +78,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 {

package/src/web/handlers/TapGestureHandler.ts

@@ -121,6 +121,8 @@ export default class TapGestureHandler extends GestureHandler {
     this.lastY = event.y;
 
     this.updateState(event);
+
+    this.tryToSendTouchEvent(event);
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
@@ -131,19 +133,22 @@ 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();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
-    this.startX = this.tracker.getLastAvgX();
-    this.startY = this.tracker.getLastAvgY();
+    this.startX = lastCoords.x;
+    this.startY = lastCoords.y;
 
     this.updateState(event);
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.tracker.removeFromTracker(event.pointerId);
 
@@ -157,8 +162,9 @@ 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();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -170,8 +176,9 @@ export default class TapGestureHandler extends GestureHandler {
     this.trySettingPosition(event);
     this.tracker.track(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.updateState(event);
 
@@ -182,8 +189,9 @@ export default class TapGestureHandler extends GestureHandler {
     this.trySettingPosition(event);
     this.tracker.track(event);
 
-    this.lastX = this.tracker.getLastAvgX();
-    this.lastY = this.tracker.getLastAvgY();
+    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+    this.lastX = lastCoords.x;
+    this.lastY = lastCoords.y;
 
     this.updateState(event);
 

package/src/web/interfaces.ts

@@ -113,6 +113,7 @@ interface NativeTouchEvent extends Record<string, TouchNativeArgs> {
   changedTouches: PointerData[];
   allTouches: PointerData[];
   numberOfTouches: number;
+  pointerType: PointerType;
 }
 
 export interface ResultEvent extends Record<string, NativeEvent | number> {

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -335,13 +335,7 @@ export default class GestureHandlerOrchestrator {
     // TODO: Find better way to handle that issue, for example by activation order and handler cancelling
 
     const isPointerWithinBothBounds = (pointer: number) => {
-      const handlerX: number = handler.getTracker().getLastX(pointer);
-      const handlerY: number = handler.getTracker().getLastY(pointer);
-
-      const point = {
-        x: handlerX,
-        y: handlerY,
-      };
+      const point = handler.getTracker().getLastAbsoluteCoords(pointer);
 
       return (
         handler.getDelegate().isPointerInBounds(point) &&

package/src/web/tools/PointerEventManager.ts

@@ -1,7 +1,11 @@
 import EventManager from './EventManager';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { AdaptedEvent, EventTypes, Point } from '../interfaces';
-import { PointerTypeMapping, isPointerInBounds } from '../utils';
+import {
+  PointerTypeMapping,
+  calculateViewScale,
+  isPointerInBounds,
+} from '../utils';
 import { PointerType } from '../../PointerType';
 
 const POINTER_CAPTURE_EXCLUDE_LIST = new Set<string>(['SELECT', 'INPUT']);
@@ -234,11 +238,14 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   }
 
   protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
+    const rect = this.view.getBoundingClientRect();
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
     return {
       x: event.clientX,
       y: event.clientY,
-      offsetX: event.offsetX,
-      offsetY: event.offsetY,
+      offsetX: (event.clientX - rect.left) / scaleX,
+      offsetY: (event.clientY - rect.top) / scaleY,
       pointerId: event.pointerId,
       eventType: eventType,
       pointerType: