@react-native-oh-tpl/react-native-gesture-handler 2.14.8-rc.1 → 2.14.13

package/harmony/gesture_handler/src/main/ets/core/VelocityTracker.ts

@@ -0,0 +1,106 @@
+import { IncomingEvent } from './IncomingEvent';
+import { CircularBuffer } from './CircularBuffer';
+import { LeastSquareSolver } from './LeastSquareSolver';
+
+export interface TrackerElement {
+  lastX: number;
+  lastY: number;
+  timeStamp: number;
+  velocityX: number;
+  velocityY: number;
+}
+
+export class VelocityTracker {
+  private assumePointerMoveStoppedMilliseconds = 40;
+  private historySize = 20;
+  private horizonMilliseconds = 300;
+  private minSampleSize = 3;
+
+  private samples: CircularBuffer<IncomingEvent>;
+
+  constructor() {
+    this.samples = new CircularBuffer<IncomingEvent>(this.historySize);
+  }
+
+  public add(event: IncomingEvent): 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/harmony/gesture_handler/src/main/ets/core/View.ts

@@ -0,0 +1,21 @@
+export type Tag = number
+
+export type BoundingBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export interface View {
+  getTag(): Tag
+
+  isPositionInBounds({x, y}: {
+    x: number;
+    y: number
+  }): boolean
+
+  getBoundingRect(): BoundingBox
+
+  hasButtonRole(): boolean
+}

package/harmony/gesture_handler/src/main/ets/core/ViewFinder.ts

@@ -0,0 +1,11 @@
+import { Tag, View } from "./View"
+
+export interface ViewFinder {
+    getTouchableViewsAt(
+      pointRelativeToRoot: {
+        x: number,
+        y: number
+      },
+      rootTag: Tag
+    ): View[]
+  }

package/harmony/gesture_handler/src/main/ets/core/ViewRegistry.ts

@@ -0,0 +1,8 @@
+import { Tag, View } from "./View"
+import { ViewFinder } from "./ViewFinder"
+
+export interface ViewRegistry extends ViewFinder {
+  getViewByTag(viewTag: Tag): View | undefined
+  save(view: View): void
+  deleteByTag(viewTag: Tag): void
+}

package/harmony/gesture_handler/src/main/ets/core/index.ts

@@ -0,0 +1,15 @@
+export * from "./OutgoingEventDispatcher"
+export * from "./OutgoingEvent"
+export * from "./RNGHLogger"
+export * from "./View"
+export * from "./Vector2D"
+export * from "./GestureHandler"
+export * from "./IncomingEvent"
+export * from "./GestureHandlerOrchestrator"
+export * from "./InteractionManager"
+export * from "./PointerTracker"
+export * from "./RNGHError"
+export * from "./State"
+export * from "./GestureHandlerRegistry"
+export * from "./ViewFinder"
+export * from "./ViewRegistry"

package/harmony/gesture_handler/src/main/ets/detectors/ScaleGestureDetector.ts

@@ -0,0 +1,169 @@
+import { DEFAULT_TOUCH_SLOP, IncomingEvent, EventType, PointerTracker } from '../core';
+
+export interface ScaleGestureListener {
+  onScaleBegin: (detector: ScaleGestureDetector) => boolean;
+  onScale: (detector: ScaleGestureDetector) => boolean;
+  onScaleEnd: (detector: ScaleGestureDetector) => void;
+}
+
+export default class ScaleGestureDetector implements ScaleGestureListener {
+  public onScaleBegin: (detector: ScaleGestureDetector) => boolean;
+  public onScale: (detector: ScaleGestureDetector) => boolean;
+  public onScaleEnd: (detector: ScaleGestureDetector) => 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: IncomingEvent, tracker: PointerTracker): boolean {
+    this.currentTime = event.time;
+
+    const action: EventType = event.eventType;
+    const numOfPointers = tracker.getTrackedPointersCount();
+
+    const streamComplete: boolean =
+      action === EventType.UP ||
+      action === EventType.ADDITIONAL_POINTER_UP ||
+      action === EventType.CANCEL;
+
+    if (action === EventType.DOWN || streamComplete) {
+      if (this.inProgress) {
+        this.onScaleEnd(this);
+        this.inProgress = false;
+        this.initialSpan = 0;
+      }
+
+      if (streamComplete) {
+        return true;
+      }
+    }
+
+    const configChanged: boolean =
+      action === EventType.DOWN ||
+      action === EventType.ADDITIONAL_POINTER_UP ||
+      action === EventType.ADDITIONAL_POINTER_DOWN;
+
+    const pointerUp = action === EventType.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);
+      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 !== EventType.MOVE) {
+      return true;
+    }
+
+    this.currentSpan = span;
+
+    if (this.inProgress && !this.onScale(this)) {
+      return true;
+    }
+
+    this.prevSpan = this.currentSpan;
+    this.prevTime = this.currentTime;
+
+    return true;
+  }
+
+  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/harmony/gesture_handler/src/main/ets/gesture-handlers/FlingGestureHandler.ts

@@ -0,0 +1,211 @@
+import {
+  GestureHandler,
+  State,
+  DiagonalDirections,
+  Directions,
+  Vector2D,
+  IncomingEvent,
+  GestureHandlerDependencies
+} from '../core';
+
+const DEFAULT_MAX_DURATION_MS = 800;
+const DEFAULT_MIN_VELOCITY = 700;
+/**
+ * DEFAULT_ALIGNMENT_CONE defines the angular tolerance for fling gestures in degrees.
+ *               *
+ *           *
+ *       *
+ *   *------------>
+ *       *
+ *           *
+ *               *
+ */
+const DEFAULT_ALIGNMENT_CONE = 30;
+const DEFAULT_DIRECTION: Directions = Directions.RIGHT;
+const DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1;
+const AXIAL_DEVIATION_COSINE = coneToDeviation(DEFAULT_ALIGNMENT_CONE);
+const DIAGONAL_DEVIATION_COSINE = coneToDeviation(90 - DEFAULT_ALIGNMENT_CONE);
+
+export class FlingGestureHandler extends GestureHandler {
+  constructor(deps: GestureHandlerDependencies) {
+    super({ ...deps, logger: deps.logger.cloneWithPrefix("FlingGestureHandler") })
+  }
+
+  getDefaultConfig() {
+    return {}
+  }
+
+  private get direction(): Directions {
+    return this.config.direction ?? DEFAULT_DIRECTION
+  }
+
+  private get numberOfPointersRequired() {
+    return this.config.numberOfPointers ?? DEFAULT_NUMBER_OF_TOUCHES_REQUIRED
+  }
+
+  private get maxDurationMs() {
+    return this.config.maxDurationMs ?? DEFAULT_MAX_DURATION_MS
+  }
+
+  private get minVelocity() {
+    return this.config.minVelocity ?? DEFAULT_MIN_VELOCITY
+  }
+
+  private delayTimeout!: number;
+  private maxNumberOfPointersSimultaneously = 0;
+  private keyPointer = NaN;
+
+  private startFling(): void {
+    this.logger.info("startFling")
+    this.begin();
+
+    this.maxNumberOfPointersSimultaneously = 1;
+
+    this.delayTimeout = setTimeout(() => this.fail(), this.maxDurationMs);
+  }
+
+  private tryEndFling(): boolean {
+    const logger = this.logger.cloneWithPrefix("tryEndFling")
+    const velocityVector = this.tracker.getVelocity(this.keyPointer);
+
+    const getAlignment = (
+      direction: Directions | DiagonalDirections,
+      minimalAlignmentCosine: number
+    ) => {
+      return (
+        (direction & this.direction) === direction &&
+          velocityVector.computeCosine(
+            Vector2D.fromDirection(direction),
+          ) > minimalAlignmentCosine
+      );
+    };
+
+    const axialDirectionsList = Object.values(Directions);
+    const diagonalDirectionsList = Object.values(DiagonalDirections);
+
+    // list of alignments to all activated directions
+    const axialAlignmentList = axialDirectionsList.map((direction) =>
+    getAlignment(direction, AXIAL_DEVIATION_COSINE)
+    );
+
+    const diagonalAlignmentList = diagonalDirectionsList.map((direction) =>
+    getAlignment(direction, DIAGONAL_DEVIATION_COSINE)
+    );
+
+    const isAligned =
+      axialAlignmentList.some(Boolean) || diagonalAlignmentList.some(Boolean);
+
+    const isFast = velocityVector.magnitude > this.minVelocity;
+
+    if (
+      this.maxNumberOfPointersSimultaneously ===
+      this.numberOfPointersRequired &&
+        isAligned &&
+        isFast
+    ) {
+      clearTimeout(this.delayTimeout);
+      this.activate();
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private endFling() {
+    this.logger.info("endFling")
+    if (!this.tryEndFling()) {
+      this.fail();
+    }
+  }
+
+  public onPointerDown(event: IncomingEvent): void {
+    this.tracker.addToTracker(event);
+    this.keyPointer = event.pointerId;
+
+    super.onPointerDown(event);
+    this.newPointerAction();
+  }
+
+  public onAdditionalPointerAdd(event: IncomingEvent): void {
+    this.tracker.addToTracker(event);
+    super.onAdditionalPointerAdd(event);
+    this.newPointerAction();
+  }
+
+  private newPointerAction(): void {
+    if (this.currentState === State.UNDETERMINED) {
+      this.startFling();
+    }
+
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+
+    this.tryEndFling();
+
+    if (
+      this.tracker.getTrackedPointersCount() >
+      this.maxNumberOfPointersSimultaneously
+    ) {
+      this.maxNumberOfPointersSimultaneously =
+        this.tracker.getTrackedPointersCount();
+    }
+  }
+
+  private pointerMoveAction(event: IncomingEvent): void {
+    this.logger.cloneWithPrefix("pointerMoveAction").info(JSON.stringify(event))
+    this.tracker.track(event);
+
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+
+    this.tryEndFling();
+  }
+
+  public onPointerMove(event: IncomingEvent): void {
+    this.pointerMoveAction(event);
+    super.onPointerMove(event);
+  }
+
+  public onPointerOutOfBounds(event: IncomingEvent): void {
+    this.pointerMoveAction(event);
+    super.onPointerOutOfBounds(event);
+  }
+
+  public onPointerUp(event: IncomingEvent): void {
+    super.onPointerUp(event);
+    this.onUp(event);
+
+    this.keyPointer = NaN;
+  }
+
+  public onAdditionalPointerRemove(event: IncomingEvent): void {
+    super.onAdditionalPointerRemove(event);
+    this.onUp(event);
+  }
+
+  private onUp(event: IncomingEvent): void {
+    const logger = this.logger.cloneWithPrefix("onUp")
+    logger.info("start")
+    if (this.currentState === State.BEGAN) {
+      this.endFling();
+    }
+    logger.info(`removeFromTracker: pointerId=${event.pointerId}`)
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+
+  public activate(): void {
+    super.activate();
+    this.end();
+  }
+}
+
+function coneToDeviation(degrees: number) {
+  return Math.cos(degToRad(degrees / 2));
+}
+
+function degToRad(degrees: number) {
+  return (degrees * Math.PI) / 180;
+}

package/harmony/gesture_handler/src/main/ets/gesture-handlers/GestureHandlerFactory.ts

@@ -0,0 +1,64 @@
+import {
+  RNGHLogger,
+  InteractionManager,
+  RNGHError,
+  PointerTracker,
+  GestureHandler,
+  GestureHandlerDependencies,
+  ScrollLocker,
+  GestureHandlerOrchestrator,
+  RNGestureResponder
+} from "../core"
+import { TapGestureHandler } from './TapGestureHandler';
+import { PanGestureHandler } from "./PanGestureHandler"
+import { PinchGestureHandler } from "./PinchGestureHandler"
+import { NativeViewGestureHandler } from "./NativeViewGestureHandler"
+import { ManualGestureHandler } from './ManualGestureHandler';
+import { LongPressGestureHandler } from "./LongPressGestureHandler"
+import { FlingGestureHandler } from "./FlingGestureHandler"
+import { RotationGestureHandler } from "./RotationGestureHandler"
+
+export class GestureHandlerFactory {
+  private orchestrator: GestureHandlerOrchestrator
+  private logger: RNGHLogger
+
+  constructor(private cleanLogger: RNGHLogger, private scrollLocker: ScrollLocker, private interactionManager: InteractionManager, private rnGestureResponder: RNGestureResponder) {
+    this.logger = cleanLogger.cloneWithPrefix("Factory")
+    this.orchestrator = new GestureHandlerOrchestrator(cleanLogger.cloneWithPrefix("Orchestrator"))
+  }
+
+  create(handlerName: string, handlerTag: number): GestureHandler {
+    this.logger.info(`create ${handlerName} with handlerTag: ${handlerTag}`)
+    const deps: GestureHandlerDependencies = {
+      tracker: new PointerTracker(),
+      orchestrator: this.orchestrator,
+      handlerTag,
+      interactionManager: this.interactionManager,
+      logger: this.cleanLogger.cloneWithPrefix("GestureHandler"),
+      scrollLocker: this.scrollLocker,
+      rnGestureResponder: this.rnGestureResponder,
+    }
+    switch (handlerName) {
+      case "TapGestureHandler":
+        return new TapGestureHandler(deps)
+      case "PanGestureHandler":
+        return new PanGestureHandler(deps)
+      case "PinchGestureHandler":
+        return new PinchGestureHandler(deps)
+      case "NativeViewGestureHandler":
+        return new NativeViewGestureHandler(deps)
+      case "ManualGestureHandler":
+        return new ManualGestureHandler(deps)
+      case "LongPressGestureHandler":
+        return new LongPressGestureHandler(deps)
+      case "FlingGestureHandler":
+        return new FlingGestureHandler(deps)
+      case "RotationGestureHandler":
+        return new RotationGestureHandler(deps)
+      default:
+        const msg = `Unknown handler type: ${handlerName}`
+        this.logger.info(msg)
+        throw new RNGHError(msg)
+    }
+  }
+}