react-native-gesture-handler 2.16.2 → 2.17.0

package/src/web/tools/PointerTracker.ts

@@ -1,12 +1,10 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Point } from '../interfaces';
 import VelocityTracker from './VelocityTracker';
 
 export interface TrackerElement {
-  lastX: number;
-  lastY: number;
-
-  timeStamp: number;
-
+  abosoluteCoords: Point;
+  relativeCoords: Point;
+  timestamp: number;
   velocityX: number;
   velocityY: number;
 }
@@ -24,7 +22,8 @@ export default class PointerTracker {
 
   private lastMovedPointerId: number;
 
-  private cachedAverages: { x: number; y: number } = { x: 0, y: 0 };
+  private cachedAbsoluteAverages: { x: number; y: number } = { x: 0, y: 0 };
+  private cachedRelativeAverages: { x: number; y: number } = { x: 0, y: 0 };
 
   public constructor() {
     this.lastMovedPointerId = NaN;
@@ -42,9 +41,9 @@ export default class PointerTracker {
     this.lastMovedPointerId = event.pointerId;
 
     const newElement: TrackerElement = {
-      lastX: event.x,
-      lastY: event.y,
-      timeStamp: event.time,
+      abosoluteCoords: { x: event.x, y: event.y },
+      relativeCoords: { x: event.offsetX, y: event.offsetY },
+      timestamp: event.time,
       velocityX: 0,
       velocityY: 0,
     };
@@ -52,10 +51,8 @@ export default class PointerTracker {
     this.trackedPointers.set(event.pointerId, newElement);
     this.mapTouchEventId(event.pointerId);
 
-    this.cachedAverages = {
-      x: this.getLastAvgX(),
-      y: this.getLastAvgY(),
-    };
+    this.cachedAbsoluteAverages = this.getAbsoluteCoordsAverage();
+    this.cachedRelativeAverages = this.getRelativeCoordsAverage();
   }
 
   public removeFromTracker(pointerId: number): void {
@@ -80,18 +77,13 @@ export default class PointerTracker {
     element.velocityX = velocityX;
     element.velocityY = velocityY;
 
-    element.lastX = event.x;
-    element.lastY = event.y;
+    element.abosoluteCoords = { x: event.x, y: event.y };
+    element.relativeCoords = { x: event.offsetX, y: event.offsetY };
 
     this.trackedPointers.set(event.pointerId, element);
 
-    const avgX: number = this.getLastAvgX();
-    const avgY: number = this.getLastAvgY();
-
-    this.cachedAverages = {
-      x: avgX,
-      y: avgY,
-    };
+    this.cachedAbsoluteAverages = this.getAbsoluteCoordsAverage();
+    this.cachedRelativeAverages = this.getRelativeCoordsAverage();
   }
 
   //Mapping TouchEvents ID
@@ -121,52 +113,42 @@ export default class PointerTracker {
     return NaN;
   }
 
-  public getVelocityX(pointerId: number): number {
-    return this.trackedPointers.get(pointerId)?.velocityX as number;
-  }
-  public getVelocityY(pointerId: number): number {
-    return this.trackedPointers.get(pointerId)?.velocityY as number;
+  public getVelocity(pointerId: number) {
+    return {
+      x: this.trackedPointers.get(pointerId)?.velocityX as number,
+      y: this.trackedPointers.get(pointerId)?.velocityY as number,
+    };
   }
 
-  /**
-   * Returns X coordinate of last moved pointer
-   */
-  public getLastX(): number;
-
-  /**
-   *
-   * @param pointerId
-   * Returns X coordinate of given pointer
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  public getLastX(pointerId: number): number;
-
-  public getLastX(pointerId?: number): number {
+  public getLastAbsoluteCoords(pointerId?: number) {
     if (pointerId !== undefined) {
-      return this.trackedPointers.get(pointerId)?.lastX as number;
+      return {
+        x: this.trackedPointers.get(pointerId)?.abosoluteCoords.x as number,
+        y: this.trackedPointers.get(pointerId)?.abosoluteCoords.y as number,
+      };
     } else {
-      return this.trackedPointers.get(this.lastMovedPointerId)?.lastX as number;
+      return {
+        x: this.trackedPointers.get(this.lastMovedPointerId)?.abosoluteCoords
+          .x as number,
+        y: this.trackedPointers.get(this.lastMovedPointerId)?.abosoluteCoords
+          .y as number,
+      };
     }
   }
 
-  /**
-   * Returns Y coordinate of last moved pointer
-   */
-  public getLastY(): number;
-
-  /**
-   *
-   * @param pointerId
-   * Returns Y coordinate of given pointer
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  public getLastY(pointerId: number): number;
-
-  public getLastY(pointerId?: number): number {
+  public getLastRelativeCoords(pointerId?: number) {
     if (pointerId !== undefined) {
-      return this.trackedPointers.get(pointerId)?.lastY as number;
+      return {
+        x: this.trackedPointers.get(pointerId)?.relativeCoords.x as number,
+        y: this.trackedPointers.get(pointerId)?.relativeCoords.y as number,
+      };
     } else {
-      return this.trackedPointers.get(this.lastMovedPointerId)?.lastY as number;
+      return {
+        x: this.trackedPointers.get(this.lastMovedPointerId)?.relativeCoords
+          .x as number,
+        y: this.trackedPointers.get(this.lastMovedPointerId)?.relativeCoords
+          .y as number,
+      };
     }
   }
 
@@ -174,39 +156,64 @@ export default class PointerTracker {
   // This may happen when pointers have already been removed from tracker (i.e. pointerup event).
   // In situation when NaN would be sent as a response, we return cached value.
   // That prevents handlers from crashing
-  public getLastAvgX(): number {
-    const avgX: number = this.getSumX() / this.trackedPointers.size;
-    return isNaN(avgX) ? this.cachedAverages.x : avgX;
+  public getAbsoluteCoordsAverage() {
+    const coordsSum = this.getAbsoluteCoordsSum();
+
+    const avgX = coordsSum.x / this.trackedPointers.size;
+    const avgY = coordsSum.y / this.trackedPointers.size;
+
+    const averages = {
+      x: isNaN(avgX) ? this.cachedAbsoluteAverages.x : avgX,
+      y: isNaN(avgY) ? this.cachedAbsoluteAverages.y : avgY,
+    };
+
+    return averages;
   }
-  public getLastAvgY(): number {
-    const avgY: number = this.getSumY() / this.trackedPointers.size;
-    return isNaN(avgY) ? this.cachedAverages.y : avgY;
+
+  public getRelativeCoordsAverage() {
+    const coordsSum = this.getRelativeCoordsSum();
+
+    const avgX = coordsSum.x / this.trackedPointers.size;
+    const avgY = coordsSum.y / this.trackedPointers.size;
+
+    const averages = {
+      x: isNaN(avgX) ? this.cachedRelativeAverages.x : avgX,
+      y: isNaN(avgY) ? this.cachedRelativeAverages.y : avgY,
+    };
+
+    return averages;
   }
-  public getSumX(ignoredPointer?: number): number {
-    let sumX = 0;
+
+  public getAbsoluteCoordsSum(ignoredPointer?: number) {
+    const sum = { x: 0, y: 0 };
 
     this.trackedPointers.forEach((value, key) => {
       if (key !== ignoredPointer) {
-        sumX += value.lastX;
+        sum.x += value.abosoluteCoords.x;
+        sum.y += value.abosoluteCoords.y;
       }
     });
 
-    return sumX;
+    return sum;
   }
-  public getSumY(ignoredPointer?: number): number {
-    let sumY = 0;
+
+  public getRelativeCoordsSum(ignoredPointer?: number) {
+    const sum = { x: 0, y: 0 };
 
     this.trackedPointers.forEach((value, key) => {
       if (key !== ignoredPointer) {
-        sumY += value.lastY;
+        sum.x += value.relativeCoords.x;
+        sum.y += value.relativeCoords.y;
       }
     });
 
-    return sumY;
+    return sum;
   }
+
   public getTrackedPointersCount(): number {
     return this.trackedPointers.size;
   }
+
   public getTrackedPointersID(): number[] {
     const keys: number[] = [];
 

package/src/web/tools/TouchEventManager.ts

@@ -1,6 +1,6 @@
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 import EventManager from './EventManager';
-import { isPointerInBounds } from '../utils';
+import { calculateViewScale, isPointerInBounds } from '../utils';
 import { PointerType } from '../../PointerType';
 
 export default class TouchEventManager extends EventManager<HTMLElement> {
@@ -156,11 +156,13 @@ export default class TouchEventManager extends EventManager<HTMLElement> {
     const clientX = event.changedTouches[index].clientX;
     const clientY = event.changedTouches[index].clientY;
 
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
     return {
       x: clientX,
       y: clientY,
-      offsetX: clientX - rect.left,
-      offsetY: clientY - rect.top,
+      offsetX: (clientX - rect.left) / scaleX,
+      offsetY: (clientY - rect.top) / scaleY,
       pointerId: event.changedTouches[index].identifier,
       eventType: eventType,
       pointerType: PointerType.TOUCH,

package/src/web/tools/Vector.ts

@@ -25,10 +25,8 @@ export default class Vector {
   }
 
   static fromVelocity(tracker: PointerTracker, pointerId: number) {
-    return new Vector(
-      tracker.getVelocityX(pointerId),
-      tracker.getVelocityY(pointerId)
-    );
+    const velocity = tracker.getVelocity(pointerId);
+    return new Vector(velocity.x, velocity.y);
   }
 
   get magnitude() {

package/src/web/utils.ts

@@ -18,3 +18,37 @@ export const degToRad = (degrees: number) => (degrees * Math.PI) / 180;
 
 export const coneToDeviation = (degrees: number) =>
   Math.cos(degToRad(degrees / 2));
+
+export function calculateViewScale(view: HTMLElement) {
+  const styles = getComputedStyle(view);
+
+  const resultScales = {
+    scaleX: 1,
+    scaleY: 1,
+  };
+
+  const scales = styles.scale.split(' ');
+
+  if (scales[0] !== 'none') {
+    resultScales.scaleX = parseFloat(scales[0]);
+  }
+
+  if (scales[1]) {
+    resultScales.scaleY = parseFloat(scales[1]);
+  }
+
+  const matrixElements = new RegExp(/matrix\((.+)\)/).exec(
+    styles.transform
+  )?.[1];
+
+  if (!matrixElements) {
+    return resultScales;
+  }
+
+  const matrixElementsArray = matrixElements.split(', ');
+
+  resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
+  resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
+
+  return resultScales;
+}