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

package/src/web/detectors/RotationGestureDetector.ts

@@ -0,0 +1,168 @@
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import PointerTracker from '../tools/PointerTracker';
+
+export interface RotationGestureListener {
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (detector: RotationGestureDetector) => boolean;
+  onRotationEnd: (detector: RotationGestureDetector) => void;
+}
+
+export default class RotationGestureDetector
+  implements RotationGestureListener
+{
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (detector: RotationGestureDetector) => boolean;
+  onRotationEnd: (detector: RotationGestureDetector) => 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: AdaptedEvent, 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(): void {
+    if (!this.isInProgress) {
+      return;
+    }
+
+    this.isInProgress = false;
+    this.keyPointers = [NaN, NaN];
+    this.onRotationEnd(this);
+  }
+
+  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: AdaptedEvent, tracker: PointerTracker): boolean {
+    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);
+
+        break;
+
+      case EventTypes.ADDITIONAL_POINTER_UP:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        if (this.keyPointers.indexOf(event.pointerId) >= 0) {
+          this.finish();
+        }
+
+        break;
+
+      case EventTypes.UP:
+        if (this.isInProgress) {
+          this.finish();
+        }
+        break;
+    }
+
+    return true;
+  }
+
+  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;
+  }
+
+  public reset(): void {
+    this.keyPointers = [NaN, NaN];
+    this.isInProgress = false;
+  }
+}

package/src/web/detectors/ScaleGestureDetector.ts

@@ -0,0 +1,172 @@
+import { DEFAULT_TOUCH_SLOP } from '../constants';
+import { AdaptedEvent, EventTypes } from '../interfaces';
+
+import PointerTracker from '../tools/PointerTracker';
+
+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: AdaptedEvent, tracker: PointerTracker): boolean {
+    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);
+        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);
+      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)) {
+      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/src/web/handlers/FlingGestureHandler.ts

@@ -0,0 +1,161 @@
+import { State } from '../../State';
+import { Direction } from '../constants';
+import { AdaptedEvent, Config } 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;
+  private keyPointer = NaN;
+
+  public init(ref: number, propsRef: React.RefObject<unknown>): void {
+    super.init(ref, propsRef);
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+
+    if (this.config.direction) {
+      this.direction = this.config.direction;
+    }
+
+    if (this.config.numberOfPointers) {
+      this.numberOfPointersRequired = this.config.numberOfPointers;
+    }
+  }
+
+  private startFling(): void {
+    this.startX = this.tracker.getLastX(this.keyPointer);
+    this.startY = this.tracker.getLastY(this.keyPointer);
+
+    this.begin();
+
+    this.maxNumberOfPointersSimultaneously = 1;
+
+    this.delayTimeout = setTimeout(() => this.fail(), this.maxDurationMs);
+  }
+
+  private tryEndFling(): boolean {
+    if (
+      this.maxNumberOfPointersSimultaneously ===
+        this.numberOfPointersRequired &&
+      ((this.direction & Direction.RIGHT &&
+        this.tracker.getLastX(this.keyPointer) - this.startX >
+          this.minAcceptableDelta) ||
+        (this.direction & Direction.LEFT &&
+          this.startX - this.tracker.getLastX(this.keyPointer) >
+            this.minAcceptableDelta) ||
+        (this.direction & Direction.UP &&
+          this.startY - this.tracker.getLastY(this.keyPointer) >
+            this.minAcceptableDelta) ||
+        (this.direction & Direction.DOWN &&
+          this.tracker.getLastY(this.keyPointer) - this.startY >
+            this.minAcceptableDelta))
+    ) {
+      clearTimeout(this.delayTimeout);
+      this.activate();
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private endFling() {
+    if (!this.tryEndFling()) {
+      this.fail();
+    }
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    this.keyPointer = event.pointerId;
+
+    super.onPointerDown(event);
+    this.newPointerAction();
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(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();
+    }
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+
+    this.tryEndFling();
+
+    super.onPointerMove(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.onUp(event);
+
+    this.keyPointer = NaN;
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.onUp(event);
+  }
+
+  private onUp(event: AdaptedEvent): void {
+    this.tracker.removeFromTracker(event.pointerId);
+    if (this.currentState !== State.BEGAN) {
+      return;
+    }
+    this.endFling();
+  }
+
+  public activate(force?: boolean): void {
+    super.activate(force);
+    this.end();
+  }
+
+  protected resetConfig(): void {
+    super.resetConfig();
+    this.numberOfPointersRequired = DEFAULT_NUMBER_OF_TOUCHES_REQUIRED;
+    this.direction = DEFAULT_DIRECTION;
+  }
+}