react-native-gesture-handler 2.5.0 → 2.6.0

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;
+  }
+}