react-native-gesture-handler 2.4.1 → 2.6.0

package/src/web/constants.ts

@@ -1,20 +1,4 @@
-import Hammer from '@egjs/hammerjs';
-
-import { State } from '../State';
-
-export const CONTENT_TOUCHES_DELAY = 240;
-export const CONTENT_TOUCHES_QUICK_TAP_END_DELAY = 50;
-export const MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD = 0.1;
-export const MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD = 7;
-export const DEG_RAD = Math.PI / 180;
-
-// Map Hammer values to RNGH
-export const EventMap = {
-  [Hammer.INPUT_START]: State.BEGAN,
-  [Hammer.INPUT_MOVE]: State.ACTIVE,
-  [Hammer.INPUT_END]: State.END,
-  [Hammer.INPUT_CANCEL]: State.FAILED,
-} as const;
+export const DEFAULT_TOUCH_SLOP = 15;
 
 export const Direction = {
   RIGHT: 1,
@@ -22,27 +6,3 @@ export const Direction = {
   UP: 4,
   DOWN: 8,
 };
-
-export const DirectionMap = {
-  [Hammer.DIRECTION_RIGHT]: Direction.RIGHT,
-  [Hammer.DIRECTION_LEFT]: Direction.LEFT,
-  [Hammer.DIRECTION_UP]: Direction.UP,
-  [Hammer.DIRECTION_DOWN]: Direction.DOWN,
-};
-
-export const HammerInputNames = {
-  [Hammer.INPUT_START]: 'START',
-  [Hammer.INPUT_MOVE]: 'MOVE',
-  [Hammer.INPUT_END]: 'END',
-  [Hammer.INPUT_CANCEL]: 'CANCEL',
-};
-export const HammerDirectionNames = {
-  [Hammer.DIRECTION_HORIZONTAL]: 'HORIZONTAL',
-  [Hammer.DIRECTION_UP]: 'UP',
-  [Hammer.DIRECTION_DOWN]: 'DOWN',
-  [Hammer.DIRECTION_VERTICAL]: 'VERTICAL',
-  [Hammer.DIRECTION_NONE]: 'NONE',
-  [Hammer.DIRECTION_ALL]: 'ALL',
-  [Hammer.DIRECTION_RIGHT]: 'RIGHT',
-  [Hammer.DIRECTION_LEFT]: 'LEFT',
-};

package/src/web/detectors/RotationGestureDetector.ts

@@ -0,0 +1,199 @@
+import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import PointerTracker from '../tools/PointerTracker';
+
+export interface RotationGestureListener {
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => boolean;
+  onRotationEnd: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => void;
+}
+
+export default class RotationGestureDetector
+  implements RotationGestureListener {
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => boolean;
+  onRotationEnd: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => void;
+
+  private currentTime = 0;
+  private previousTime = 0;
+
+  private previousAngle = 0;
+  private rotation = 0;
+
+  private anchorX = 0;
+  private anchorY = 0;
+
+  private isInProgress = false;
+
+  private keyPointers: number[] = [NaN, NaN];
+
+  constructor(callbacks: RotationGestureListener) {
+    this.onRotationBegin = callbacks.onRotationBegin;
+    this.onRotation = callbacks.onRotation;
+    this.onRotationEnd = callbacks.onRotationEnd;
+  }
+
+  private updateCurrent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): void {
+    this.previousTime = this.currentTime;
+    this.currentTime = event.time;
+
+    const [firstPointerID, secondPointerID] = this.keyPointers;
+
+    const firstPointerX: number = tracker.getLastX(firstPointerID);
+    const firstPointerY: number = tracker.getLastY(firstPointerID);
+    const secondPointerX: number = tracker.getLastX(secondPointerID);
+    const secondPointerY: number = tracker.getLastY(secondPointerID);
+
+    const vectorX: number = secondPointerX - firstPointerX;
+    const vectorY: number = secondPointerY - firstPointerY;
+
+    this.anchorX = (firstPointerX + secondPointerX) / 2;
+    this.anchorY = (firstPointerY + secondPointerY) / 2;
+
+    //Angle diff should be positive when rotating in clockwise direction
+    const angle: number = -Math.atan2(vectorY, vectorX);
+    this.rotation = Number.isNaN(this.previousAngle)
+      ? 0
+      : this.previousAngle - angle;
+
+    this.previousAngle = angle;
+
+    if (this.rotation > Math.PI) {
+      this.rotation -= Math.PI;
+    } else if (this.rotation < -Math.PI) {
+      this.rotation += Math.PI;
+    }
+
+    if (this.rotation > Math.PI / 2) {
+      this.rotation -= Math.PI;
+    } else if (this.rotation < -Math.PI / 2) {
+      this.rotation += Math.PI;
+    }
+  }
+
+  private finish(event: AdaptedPointerEvent): void {
+    if (!this.isInProgress) {
+      return;
+    }
+
+    this.isInProgress = false;
+    this.keyPointers = [NaN, NaN];
+    this.onRotationEnd(this, event);
+  }
+
+  private setKeyPointers(tracker: PointerTracker): void {
+    if (this.keyPointers[0] && this.keyPointers[1]) {
+      return;
+    }
+
+    const pointerIDs: IterableIterator<number> = tracker.getData().keys();
+
+    this.keyPointers[0] = pointerIDs.next().value as number;
+    this.keyPointers[1] = pointerIDs.next().value as number;
+  }
+
+  public onTouchEvent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): boolean {
+    this.adaptEvent(event, tracker);
+
+    switch (event.eventType) {
+      case EventTypes.DOWN:
+        this.isInProgress = false;
+        break;
+
+      case EventTypes.ADDITIONAL_POINTER_DOWN:
+        if (this.isInProgress) {
+          break;
+        }
+
+        this.isInProgress = true;
+
+        this.previousTime = event.time;
+        this.previousAngle = NaN;
+
+        this.setKeyPointers(tracker);
+
+        this.updateCurrent(event, tracker);
+        this.onRotationBegin(this);
+        break;
+
+      case EventTypes.MOVE:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        this.updateCurrent(event, tracker);
+        this.onRotation(this, event);
+
+        break;
+
+      case EventTypes.ADDITIONAL_POINTER_UP:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        if (this.keyPointers.indexOf(event.pointerId) >= 0) {
+          this.finish(event);
+        }
+
+        break;
+
+      case EventTypes.UP:
+        this.finish(event);
+        break;
+    }
+
+    return true;
+  }
+
+  private adaptEvent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): void {
+    if (
+      tracker.getTrackedPointersCount() &&
+      event.eventType === EventTypes.DOWN
+    ) {
+      event.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+    }
+
+    if (
+      tracker.getTrackedPointersCount() > 1 &&
+      event.eventType === EventTypes.UP
+    ) {
+      event.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+    }
+  }
+
+  public getTimeDelta(): number {
+    return this.currentTime + this.previousTime;
+  }
+
+  public getAnchorX(): number {
+    return this.anchorX;
+  }
+
+  public getAnchorY(): number {
+    return this.anchorY;
+  }
+
+  public getRotation(): number {
+    return this.rotation;
+  }
+}

package/src/web/detectors/ScaleGestureDetector.ts

@@ -0,0 +1,208 @@
+import { DEFAULT_TOUCH_SLOP } from '../constants';
+import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+
+import PointerTracker from '../tools/PointerTracker';
+
+export interface ScaleGestureListener {
+  onScaleBegin: (detector: ScaleGestureDetector) => boolean;
+  onScale: (
+    detector: ScaleGestureDetector,
+    event: AdaptedPointerEvent
+  ) => boolean;
+  onScaleEnd: (
+    detector: ScaleGestureDetector,
+    event: AdaptedPointerEvent
+  ) => void;
+}
+
+export default class ScaleGestureDetector implements ScaleGestureListener {
+  public onScaleBegin: (detector: ScaleGestureDetector) => boolean;
+  public onScale: (
+    detector: ScaleGestureDetector,
+    event: AdaptedPointerEvent
+  ) => boolean;
+  public onScaleEnd: (
+    detector: ScaleGestureDetector,
+    event: AdaptedPointerEvent
+  ) => void;
+
+  private focusX!: number;
+  private focusY!: number;
+
+  private currentSpan!: number;
+  private prevSpan!: number;
+  private initialSpan!: number;
+
+  private currentTime!: number;
+  private prevTime!: number;
+
+  private inProgress = false;
+
+  private spanSlop: number;
+  private minSpan: number;
+
+  public constructor(callbacks: ScaleGestureListener) {
+    this.onScaleBegin = callbacks.onScaleBegin;
+    this.onScale = callbacks.onScale;
+    this.onScaleEnd = callbacks.onScaleEnd;
+
+    this.spanSlop = DEFAULT_TOUCH_SLOP * 2;
+    this.minSpan = 0;
+  }
+
+  public onTouchEvent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): boolean {
+    this.adaptEvent(event, tracker);
+
+    this.currentTime = event.time;
+
+    const action: EventTypes = event.eventType;
+    const numOfPointers = tracker.getTrackedPointersCount();
+
+    const streamComplete: boolean =
+      action === EventTypes.UP ||
+      action === EventTypes.ADDITIONAL_POINTER_UP ||
+      action === EventTypes.CANCEL;
+
+    if (action === EventTypes.DOWN || streamComplete) {
+      if (this.inProgress) {
+        this.onScaleEnd(this, event);
+        this.inProgress = false;
+        this.initialSpan = 0;
+      }
+
+      if (streamComplete) {
+        return true;
+      }
+    }
+
+    const configChanged: boolean =
+      action === EventTypes.DOWN ||
+      action === EventTypes.ADDITIONAL_POINTER_UP ||
+      action === EventTypes.ADDITIONAL_POINTER_DOWN;
+
+    const pointerUp = action === EventTypes.ADDITIONAL_POINTER_UP;
+
+    const ignoredPointer: number | undefined = pointerUp
+      ? event.pointerId
+      : undefined;
+
+    //Determine focal point
+
+    const div: number = pointerUp ? numOfPointers - 1 : numOfPointers;
+
+    const sumX = tracker.getSumX(ignoredPointer);
+    const sumY = tracker.getSumY(ignoredPointer);
+
+    const focusX = sumX / div;
+    const focusY = sumY / div;
+
+    //Determine average deviation from focal point
+
+    let devSumX = 0;
+    let devSumY = 0;
+
+    tracker.getData().forEach((value, key) => {
+      if (key === ignoredPointer) {
+        return;
+      }
+
+      devSumX += Math.abs(value.lastX - focusX);
+      devSumY += Math.abs(value.lastY - focusY);
+    });
+
+    const devX: number = devSumX / div;
+    const devY: number = devSumY / div;
+
+    const spanX: number = devX * 2;
+    const spanY: number = devY * 2;
+
+    const span = Math.hypot(spanX, spanY);
+
+    //Begin/end events
+    const wasInProgress: boolean = this.inProgress;
+    this.focusX = focusX;
+    this.focusY = focusY;
+
+    if (this.inProgress && (span < this.minSpan || configChanged)) {
+      this.onScaleEnd(this, event);
+      this.inProgress = false;
+      this.initialSpan = span;
+    }
+
+    if (configChanged) {
+      this.initialSpan = this.prevSpan = this.currentSpan = span;
+    }
+
+    if (
+      !this.inProgress &&
+      span >= this.minSpan &&
+      (wasInProgress || Math.abs(span - this.initialSpan) > this.spanSlop)
+    ) {
+      this.prevSpan = this.currentSpan = span;
+      this.prevTime = this.currentTime;
+      this.inProgress = this.onScaleBegin(this);
+    }
+
+    //Handle motion
+    if (action !== EventTypes.MOVE) {
+      return true;
+    }
+
+    this.currentSpan = span;
+
+    if (this.inProgress && !this.onScale(this, event)) {
+      return true;
+    }
+
+    this.prevSpan = this.currentSpan;
+    this.prevTime = this.currentTime;
+
+    return true;
+  }
+
+  private adaptEvent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): void {
+    if (
+      tracker.getTrackedPointersCount() > 1 &&
+      event.eventType === EventTypes.DOWN
+    ) {
+      event.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+    }
+
+    if (
+      tracker.getTrackedPointersCount() > 1 &&
+      event.eventType === EventTypes.UP
+    ) {
+      event.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+    }
+  }
+
+  public getCurrentSpan(): number {
+    return this.currentSpan;
+  }
+
+  public getFocusX(): number {
+    return this.focusX;
+  }
+
+  public getFocusY(): number {
+    return this.focusY;
+  }
+
+  public getTimeDelta(): number {
+    return this.currentTime - this.prevTime;
+  }
+
+  public getScaleFactor(numOfPointers: number): number {
+    if (numOfPointers < 2) {
+      return 1;
+    }
+
+    return this.prevSpan > 0 ? this.currentSpan / this.prevSpan : 1;
+  }
+}

package/src/web/handlers/FlingGestureHandler.ts

@@ -0,0 +1,146 @@
+import { State } from '../../State';
+import { Direction } from '../constants';
+import { AdaptedPointerEvent } from '../interfaces';
+
+import GestureHandler from './GestureHandler';
+
+const DEFAULT_MAX_DURATION_MS = 800;
+const DEFAULT_MIN_ACCEPTABLE_DELTA = 160;
+const DEFAULT_DIRECTION = Direction.RIGHT;
+const DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1;
+
+export default class FlingGestureHandler extends GestureHandler {
+  private numberOfPointersRequired = DEFAULT_NUMBER_OF_TOUCHES_REQUIRED;
+  private direction = DEFAULT_DIRECTION;
+
+  private maxDurationMs = DEFAULT_MAX_DURATION_MS;
+  private minAcceptableDelta = DEFAULT_MIN_ACCEPTABLE_DELTA;
+  private delayTimeout!: number;
+
+  private startX = 0;
+  private startY = 0;
+
+  private maxNumberOfPointersSimultaneously = 0;
+
+  public init(ref: number, propsRef: React.RefObject<unknown>): void {
+    super.init(ref, propsRef);
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+
+    this.enabled = enabled;
+
+    if (this.config.direction) {
+      this.direction = this.config.direction;
+    }
+
+    if (this.config.numberOfPointers) {
+      this.numberOfPointersRequired = this.config.numberOfPointers;
+    }
+  }
+
+  protected transformNativeEvent(event: AdaptedPointerEvent) {
+    return {
+      x: event.offsetX,
+      y: event.offsetY,
+      absoluteX: event.x,
+      absoluteY: event.y,
+    };
+  }
+
+  private startFling(event: AdaptedPointerEvent): void {
+    this.startX = event.x;
+    this.startY = event.y;
+
+    this.begin(event);
+
+    this.maxNumberOfPointersSimultaneously = 1;
+
+    this.delayTimeout = setTimeout(() => this.fail(event), this.maxDurationMs);
+  }
+
+  private tryEndFling(event: AdaptedPointerEvent): boolean {
+    if (
+      this.maxNumberOfPointersSimultaneously ===
+        this.numberOfPointersRequired &&
+      ((this.direction & Direction.RIGHT &&
+        event.x - this.startX > this.minAcceptableDelta) ||
+        (this.direction & Direction.LEFT &&
+          this.startX - event.x > this.minAcceptableDelta) ||
+        (this.direction & Direction.UP &&
+          this.startY - event.y > this.minAcceptableDelta) ||
+        (this.direction & Direction.DOWN &&
+          event.y - this.startY > this.minAcceptableDelta))
+    ) {
+      clearTimeout(this.delayTimeout);
+      this.activate(event);
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private endFling(event: AdaptedPointerEvent) {
+    if (!this.tryEndFling(event)) {
+      this.fail(event);
+    }
+  }
+
+  protected onPointerDown(event: AdaptedPointerEvent): void {
+    super.onPointerDown(event);
+
+    this.tracker.addToTracker(event);
+
+    if (this.currentState === State.UNDETERMINED) {
+      this.startFling(event);
+    }
+
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+
+    this.tryEndFling(event);
+
+    if (
+      this.tracker.getTrackedPointersCount() >
+      this.maxNumberOfPointersSimultaneously
+    ) {
+      this.maxNumberOfPointersSimultaneously = this.tracker.getTrackedPointersCount();
+    }
+  }
+
+  protected onPointerMove(event: AdaptedPointerEvent): void {
+    this.tracker.track(event);
+
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+
+    this.tryEndFling(event);
+
+    super.onPointerMove(event);
+  }
+
+  protected onPointerUp(event: AdaptedPointerEvent): void {
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+
+    this.endFling(event);
+  }
+
+  protected activate(event: AdaptedPointerEvent, force?: boolean): void {
+    super.activate(event, force);
+    this.end(event);
+  }
+
+  protected resetConfig(): void {
+    super.resetConfig();
+    this.numberOfPointersRequired = DEFAULT_NUMBER_OF_TOUCHES_REQUIRED;
+    this.direction = DEFAULT_DIRECTION;
+  }
+}