@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1

package/src/web/tools/PointerTracker.ts

@@ -0,0 +1,240 @@
+import { AdaptedEvent } from '../interfaces';
+import VelocityTracker from './VelocityTracker';
+
+export interface TrackerElement {
+  lastX: number;
+  lastY: number;
+
+  timeStamp: number;
+
+  velocityX: number;
+  velocityY: number;
+}
+
+const MAX_POINTERS = 20;
+
+export default class PointerTracker {
+  private velocityTracker = new VelocityTracker();
+  private trackedPointers: Map<number, TrackerElement> = new Map<
+    number,
+    TrackerElement
+  >();
+
+  private touchEventsIds: Map<number, number> = new Map<number, number>();
+
+  private lastMovedPointerId: number;
+
+  private cachedAverages: { x: number; y: number } = { x: 0, y: 0 };
+
+  public constructor() {
+    this.lastMovedPointerId = NaN;
+
+    for (let i = 0; i < MAX_POINTERS; ++i) {
+      this.touchEventsIds.set(i, NaN);
+    }
+  }
+
+  public addToTracker(event: AdaptedEvent): void {
+    if (this.trackedPointers.has(event.pointerId)) {
+      return;
+    }
+
+    this.lastMovedPointerId = event.pointerId;
+
+    const newElement: TrackerElement = {
+      lastX: event.x,
+      lastY: event.y,
+      timeStamp: event.time,
+      velocityX: 0,
+      velocityY: 0,
+    };
+
+    this.trackedPointers.set(event.pointerId, newElement);
+    this.mapTouchEventId(event.pointerId);
+
+    this.cachedAverages = {
+      x: this.getLastAvgX(),
+      y: this.getLastAvgY(),
+    };
+  }
+
+  public removeFromTracker(pointerId: number): void {
+    this.trackedPointers.delete(pointerId);
+    this.removeMappedTouchId(pointerId);
+  }
+
+  public track(event: AdaptedEvent): void {
+    const element: TrackerElement = this.trackedPointers.get(
+      event.pointerId
+    ) as TrackerElement;
+
+    if (!element) {
+      return;
+    }
+
+    this.lastMovedPointerId = event.pointerId;
+
+    this.velocityTracker.add(event);
+    const [velocityX, velocityY] = this.velocityTracker.getVelocity();
+
+    element.velocityX = velocityX;
+    element.velocityY = velocityY;
+
+    element.lastX = event.x;
+    element.lastY = event.y;
+
+    this.trackedPointers.set(event.pointerId, element);
+
+    const avgX: number = this.getLastAvgX();
+    const avgY: number = this.getLastAvgY();
+
+    this.cachedAverages = {
+      x: avgX,
+      y: avgY,
+    };
+  }
+
+  //Mapping TouchEvents ID
+  private mapTouchEventId(id: number): void {
+    for (const [mappedId, touchId] of this.touchEventsIds) {
+      if (isNaN(touchId)) {
+        this.touchEventsIds.set(mappedId, id);
+        break;
+      }
+    }
+  }
+
+  private removeMappedTouchId(id: number): void {
+    const mappedId: number = this.getMappedTouchEventId(id);
+    if (!isNaN(mappedId)) {
+      this.touchEventsIds.set(mappedId, NaN);
+    }
+  }
+
+  public getMappedTouchEventId(touchEventId: number): number {
+    for (const [key, value] of this.touchEventsIds.entries()) {
+      if (value === touchEventId) {
+        return key;
+      }
+    }
+
+    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;
+  }
+
+  /**
+   * 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 {
+    if (pointerId !== undefined) {
+      return this.trackedPointers.get(pointerId)?.lastX as number;
+    } else {
+      return this.trackedPointers.get(this.lastMovedPointerId)?.lastX 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 {
+    if (pointerId !== undefined) {
+      return this.trackedPointers.get(pointerId)?.lastY as number;
+    } else {
+      return this.trackedPointers.get(this.lastMovedPointerId)?.lastY as number;
+    }
+  }
+
+  // Some handlers use these methods to send average values in native event.
+  // 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 getLastAvgY(): number {
+    const avgY: number = this.getSumY() / this.trackedPointers.size;
+    return isNaN(avgY) ? this.cachedAverages.y : avgY;
+  }
+  public getSumX(ignoredPointer?: number): number {
+    let sumX = 0;
+
+    this.trackedPointers.forEach((value, key) => {
+      if (key !== ignoredPointer) {
+        sumX += value.lastX;
+      }
+    });
+
+    return sumX;
+  }
+  public getSumY(ignoredPointer?: number): number {
+    let sumY = 0;
+
+    this.trackedPointers.forEach((value, key) => {
+      if (key !== ignoredPointer) {
+        sumY += value.lastY;
+      }
+    });
+
+    return sumY;
+  }
+  public getTrackedPointersCount(): number {
+    return this.trackedPointers.size;
+  }
+  public getTrackedPointersID(): number[] {
+    const keys: number[] = [];
+
+    this.trackedPointers.forEach((_value, key) => {
+      keys.push(key);
+    });
+
+    return keys;
+  }
+
+  public getData(): Map<number, TrackerElement> {
+    return this.trackedPointers;
+  }
+
+  public resetTracker(): void {
+    this.velocityTracker.reset();
+    this.trackedPointers.clear();
+    this.lastMovedPointerId = NaN;
+
+    for (let i = 0; i < MAX_POINTERS; ++i) {
+      this.touchEventsIds.set(i, NaN);
+    }
+  }
+
+  public static shareCommonPointers(
+    stPointers: number[],
+    ndPointers: number[]
+  ): boolean {
+    return stPointers.some((pointerId) => ndPointers.includes(pointerId));
+  }
+}

package/src/web/tools/TouchEventManager.ts

@@ -0,0 +1,167 @@
+import {
+  AdaptedEvent,
+  EventTypes,
+  MouseButtons,
+  PointerType,
+  TouchEventType,
+} from '../interfaces';
+import EventManager from './EventManager';
+import { isPointerInBounds } from '../utils';
+
+export default class TouchEventManager extends EventManager<HTMLElement> {
+  public setListeners(): void {
+    this.view.addEventListener('touchstart', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.DOWN,
+          i,
+          TouchEventType.DOWN
+        );
+
+        // Here we skip stylus, because in case of anything different than touch we want to handle it by using PointerEvents
+        // If we leave stylus to send touch events, handlers will receive every action twice
+        if (
+          !isPointerInBounds(this.view, {
+            x: adaptedEvent.x,
+            y: adaptedEvent.y,
+          }) ||
+          //@ts-ignore touchType field does exist
+          event.changedTouches[i].touchType === 'stylus'
+        ) {
+          continue;
+        }
+
+        this.markAsInBounds(adaptedEvent.pointerId);
+
+        if (++this.activePointersCounter > 1) {
+          adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+          this.onPointerAdd(adaptedEvent);
+        } else {
+          this.onPointerDown(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('touchmove', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.MOVE,
+          i,
+          TouchEventType.MOVE
+        );
+        //@ts-ignore touchType field does exist
+        if (event.changedTouches[i].touchType === 'stylus') {
+          continue;
+        }
+
+        const inBounds: boolean = isPointerInBounds(this.view, {
+          x: adaptedEvent.x,
+          y: adaptedEvent.y,
+        });
+
+        const pointerIndex: number = this.pointersInBounds.indexOf(
+          adaptedEvent.pointerId
+        );
+
+        if (inBounds) {
+          if (pointerIndex < 0) {
+            adaptedEvent.eventType = EventTypes.ENTER;
+            this.onPointerEnter(adaptedEvent);
+            this.markAsInBounds(adaptedEvent.pointerId);
+          } else {
+            this.onPointerMove(adaptedEvent);
+          }
+        } else {
+          if (pointerIndex >= 0) {
+            adaptedEvent.eventType = EventTypes.LEAVE;
+            this.onPointerLeave(adaptedEvent);
+            this.markAsOutOfBounds(adaptedEvent.pointerId);
+          } else {
+            this.onPointerOutOfBounds(adaptedEvent);
+          }
+        }
+      }
+    });
+
+    this.view.addEventListener('touchend', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        // When we call reset on gesture handlers, it also resets their event managers
+        // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
+        // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
+        // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
+        if (this.activePointersCounter === 0) {
+          break;
+        }
+
+        //@ts-ignore touchType field does exist
+        if (event.changedTouches[i].touchType === 'stylus') {
+          continue;
+        }
+
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.UP,
+          i,
+          TouchEventType.UP
+        );
+
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
+
+        if (--this.activePointersCounter > 0) {
+          adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+          this.onPointerRemove(adaptedEvent);
+        } else {
+          this.onPointerUp(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('touchcancel', (event: TouchEvent) => {
+      for (let i = 0; i < event.changedTouches.length; ++i) {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.CANCEL,
+          i,
+          TouchEventType.CANCELLED
+        );
+
+        //@ts-ignore touchType field does exist
+        if (event.changedTouches[i].touchType === 'stylus') {
+          continue;
+        }
+
+        this.onPointerCancel(adaptedEvent);
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
+        this.activePointersCounter = 0;
+      }
+    });
+  }
+
+  protected mapEvent(
+    event: TouchEvent,
+    eventType: EventTypes,
+    index: number,
+    touchEventType: TouchEventType
+  ): AdaptedEvent {
+    const rect = this.view.getBoundingClientRect();
+    const clientX = event.changedTouches[index].clientX;
+    const clientY = event.changedTouches[index].clientY;
+
+    return {
+      x: clientX,
+      y: clientY,
+      offsetX: clientX - rect.left,
+      offsetY: clientY - rect.top,
+      pointerId: event.changedTouches[index].identifier,
+      eventType: eventType,
+      pointerType: PointerType.TOUCH,
+      buttons: MouseButtons.NONE,
+      time: event.timeStamp,
+      allTouches: event.touches,
+      changedTouches: event.changedTouches,
+      touchEventType: touchEventType,
+    };
+  }
+}

package/src/web/tools/VelocityTracker.ts

@@ -0,0 +1,98 @@
+import { AdaptedEvent } from '../interfaces';
+import CircularBuffer from './CircularBuffer';
+import LeastSquareSolver from './LeastSquareSolver';
+
+export default class VelocityTracker {
+  private assumePointerMoveStoppedMilliseconds = 40;
+  private historySize = 20;
+  private horizonMilliseconds = 300;
+  private minSampleSize = 3;
+
+  private samples: CircularBuffer<AdaptedEvent>;
+
+  constructor() {
+    this.samples = new CircularBuffer<AdaptedEvent>(this.historySize);
+  }
+
+  public add(event: AdaptedEvent): void {
+    this.samples.push(event);
+  }
+
+  /// Returns an estimate of the velocity of the object being tracked by the
+  /// tracker given the current information available to the tracker.
+  ///
+  /// Information is added using [addPosition].
+  ///
+  /// Returns null if there is no data on which to base an estimate.
+  private getVelocityEstimate(): [number, number] | null {
+    const x = [];
+    const y = [];
+    const w = [];
+    const time = [];
+
+    let sampleCount = 0;
+    let index = this.samples.size - 1;
+    const newestSample = this.samples.get(index);
+    if (!newestSample) {
+      return null;
+    }
+
+    let previousSample = newestSample;
+
+    // Starting with the most recent PointAtTime sample, iterate backwards while
+    // the samples represent continuous motion.
+    while (sampleCount < this.samples.size) {
+      const sample = this.samples.get(index);
+
+      const age = newestSample.time - sample.time;
+      const delta = Math.abs(sample.time - previousSample.time);
+      previousSample = sample;
+
+      if (
+        age > this.horizonMilliseconds ||
+        delta > this.assumePointerMoveStoppedMilliseconds
+      ) {
+        break;
+      }
+
+      x.push(sample.x);
+      y.push(sample.y);
+      w.push(1);
+      time.push(-age);
+
+      sampleCount++;
+      index--;
+    }
+
+    if (sampleCount >= this.minSampleSize) {
+      const xSolver = new LeastSquareSolver(time, x, w);
+      const xFit = xSolver.solve(2);
+
+      if (xFit !== null) {
+        const ySolver = new LeastSquareSolver(time, y, w);
+        const yFit = ySolver.solve(2);
+
+        if (yFit !== null) {
+          const xVelocity = xFit.coefficients[1] * 1000;
+          const yVelocity = yFit.coefficients[1] * 1000;
+
+          return [xVelocity, yVelocity];
+        }
+      }
+    }
+
+    return null;
+  }
+
+  public getVelocity(): [number, number] {
+    const estimate = this.getVelocityEstimate();
+    if (estimate !== null) {
+      return estimate;
+    }
+    return [0, 0];
+  }
+
+  public reset(): void {
+    this.samples.clear();
+  }
+}

package/src/web/utils.ts

@@ -0,0 +1,8 @@
+export function isPointerInBounds(
+  view: HTMLElement,
+  { x, y }: { x: number; y: number }
+): boolean {
+  const rect: DOMRect = view.getBoundingClientRect();
+
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}

package/src/web_hammer/DiscreteGestureHandler.ts

@@ -0,0 +1,82 @@
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+import GestureHandler from './GestureHandler';
+import { TEST_MAX_IF_NOT_NAN } from './utils';
+
+abstract class DiscreteGestureHandler extends GestureHandler {
+  get isDiscrete() {
+    return true;
+  }
+
+  get shouldEnableGestureOnSetup() {
+    return true;
+  }
+
+  shouldFailUnderCustomCriteria(
+    { x, y, deltaX, deltaY }: any,
+    { maxDeltaX, maxDeltaY, maxDistSq, shouldCancelWhenOutside }: any
+  ) {
+    if (shouldCancelWhenOutside) {
+      if (!this.isPointInView({ x, y })) {
+        return true;
+      }
+    }
+    return (
+      TEST_MAX_IF_NOT_NAN(Math.abs(deltaX), maxDeltaX) ||
+      TEST_MAX_IF_NOT_NAN(Math.abs(deltaY), maxDeltaY) ||
+      TEST_MAX_IF_NOT_NAN(
+        Math.abs(deltaY * deltaY + deltaX * deltaX),
+        maxDistSq
+      )
+    );
+  }
+
+  transformNativeEvent({ center: { x, y } }: any) {
+    // @ts-ignore FIXME(TS)
+    const rect = this.view!.getBoundingClientRect();
+
+    return {
+      absoluteX: x,
+      absoluteY: y,
+      x: x - rect.left,
+      y: y - rect.top,
+    };
+  }
+
+  isGestureEnabledForEvent(
+    {
+      minPointers,
+      maxPointers,
+      maxDeltaX,
+      maxDeltaY,
+      maxDistSq,
+      shouldCancelWhenOutside,
+    }: any,
+    _recognizer: any,
+    { maxPointers: pointerLength, center, deltaX, deltaY }: any
+  ) {
+    const validPointerCount =
+      pointerLength >= minPointers && pointerLength <= maxPointers;
+
+    if (
+      this.shouldFailUnderCustomCriteria(
+        { ...center, deltaX, deltaY },
+        {
+          maxDeltaX,
+          maxDeltaY,
+          maxDistSq,
+          shouldCancelWhenOutside,
+        }
+      ) ||
+      // A user probably won't land a multi-pointer tap on the first tick (so we cannot just cancel each time)
+      // but if the gesture is running and the user adds or subtracts another pointer then it should fail.
+      (!validPointerCount && this.isGestureRunning)
+    ) {
+      return { failed: true };
+    }
+
+    return { success: validPointerCount };
+  }
+}
+
+export default DiscreteGestureHandler;

package/src/web_hammer/DraggingGestureHandler.ts

@@ -0,0 +1,34 @@
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+import GestureHandler, { HammerInputExt } from './GestureHandler';
+import { PixelRatio } from 'react-native';
+
+abstract class DraggingGestureHandler extends GestureHandler {
+  get shouldEnableGestureOnSetup() {
+    return true;
+  }
+
+  transformNativeEvent({
+    deltaX,
+    deltaY,
+    velocityX,
+    velocityY,
+    center: { x, y },
+  }: HammerInputExt) {
+    // @ts-ignore FIXME(TS)
+    const rect = this.view!.getBoundingClientRect();
+    const ratio = PixelRatio.get();
+    return {
+      translationX: deltaX - (this.__initialX || 0),
+      translationY: deltaY - (this.__initialY || 0),
+      absoluteX: x,
+      absoluteY: y,
+      velocityX: velocityX * ratio,
+      velocityY: velocityY * ratio,
+      x: x - rect.left,
+      y: y - rect.top,
+    };
+  }
+}
+
+export default DraggingGestureHandler;

package/src/web_hammer/Errors.ts

@@ -0,0 +1,7 @@
+export class GesturePropError extends Error {
+  constructor(name: string, value: unknown, expectedType: string) {
+    super(
+      `Invalid property \`${name}: ${value}\` expected \`${expectedType}\``
+    );
+  }
+}