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

package/src/web/handlers/RotationGestureHandler.ts

@@ -0,0 +1,172 @@
+import { State } from '../../State';
+import { AdaptedEvent, Config } from '../interfaces';
+
+import GestureHandler from './GestureHandler';
+import RotationGestureDetector, {
+  RotationGestureListener,
+} from '../detectors/RotationGestureDetector';
+
+const ROTATION_RECOGNITION_THRESHOLD = Math.PI / 36;
+
+export default class RotationGestureHandler extends GestureHandler {
+  private rotation = 0;
+  private velocity = 0;
+
+  private cachedAnchorX = 0;
+  private cachedAnchorY = 0;
+
+  private rotationGestureListener: RotationGestureListener = {
+    onRotationBegin: (_detector: RotationGestureDetector): boolean => true,
+    onRotation: (detector: RotationGestureDetector): boolean => {
+      const previousRotation: number = this.rotation;
+      this.rotation += detector.getRotation();
+
+      const delta = detector.getTimeDelta();
+
+      if (delta > 0) {
+        this.velocity = (this.rotation - previousRotation) / delta;
+      }
+
+      if (
+        Math.abs(this.rotation) >= ROTATION_RECOGNITION_THRESHOLD &&
+        this.currentState === State.BEGAN
+      ) {
+        this.activate();
+      }
+
+      return true;
+    },
+    onRotationEnd: (_detector: RotationGestureDetector): void => {
+      this.end();
+    },
+  };
+
+  private rotationGestureDetector: RotationGestureDetector =
+    new RotationGestureDetector(this.rotationGestureListener);
+
+  public init(ref: number, propsRef: React.RefObject<unknown>): void {
+    super.init(ref, propsRef);
+
+    this.setShouldCancelWhenOutside(false);
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
+  protected transformNativeEvent() {
+    return {
+      rotation: this.rotation ? this.rotation : 0,
+      anchorX: this.getAnchorX(),
+      anchorY: this.getAnchorY(),
+      velocity: this.velocity ? this.velocity : 0,
+    };
+  }
+
+  public getAnchorX(): number {
+    const anchorX = this.rotationGestureDetector.getAnchorX();
+
+    return anchorX ? anchorX : this.cachedAnchorX;
+  }
+
+  public getAnchorY(): number {
+    const anchorY = this.rotationGestureDetector.getAnchorY();
+
+    return anchorY ? anchorY : this.cachedAnchorY;
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+
+    this.tryBegin();
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    if (this.tracker.getTrackedPointersCount() < 2) {
+      return;
+    }
+
+    if (this.getAnchorX()) {
+      this.cachedAnchorX = this.getAnchorX();
+    }
+    if (this.getAnchorY()) {
+      this.cachedAnchorY = this.getAnchorY();
+    }
+
+    this.tracker.track(event);
+
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+
+    super.onPointerMove(event);
+  }
+
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    if (this.tracker.getTrackedPointersCount() < 2) {
+      return;
+    }
+
+    if (this.getAnchorX()) {
+      this.cachedAnchorX = this.getAnchorX();
+    }
+    if (this.getAnchorY()) {
+      this.cachedAnchorY = this.getAnchorY();
+    }
+
+    this.tracker.track(event);
+
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+
+    super.onPointerOutOfBounds(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+
+    if (this.currentState !== State.ACTIVE) {
+      return;
+    }
+
+    if (this.currentState === State.ACTIVE) {
+      this.end();
+    } else {
+      this.fail();
+    }
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.rotationGestureDetector.onTouchEvent(event, this.tracker);
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+
+  protected tryBegin(): void {
+    if (this.currentState !== State.UNDETERMINED) {
+      return;
+    }
+
+    this.begin();
+  }
+
+  public activate(_force?: boolean): void {
+    super.activate();
+  }
+
+  protected onReset(): void {
+    if (this.currentState === State.ACTIVE) {
+      return;
+    }
+
+    this.rotation = 0;
+    this.velocity = 0;
+    this.rotationGestureDetector.reset();
+  }
+}

package/src/web/handlers/TapGestureHandler.ts

@@ -0,0 +1,273 @@
+import { State } from '../../State';
+import { AdaptedEvent, Config, EventTypes } from '../interfaces';
+
+import GestureHandler from './GestureHandler';
+
+const DEFAULT_MAX_DURATION_MS = 500;
+const DEFAULT_MAX_DELAY_MS = 500;
+const DEFAULT_NUMBER_OF_TAPS = 1;
+const DEFAULT_MIN_NUMBER_OF_POINTERS = 1;
+
+export default class TapGestureHandler extends GestureHandler {
+  private maxDeltaX = Number.MIN_SAFE_INTEGER;
+  private maxDeltaY = Number.MIN_SAFE_INTEGER;
+  private maxDistSq = Number.MIN_SAFE_INTEGER;
+  private maxDurationMs = DEFAULT_MAX_DURATION_MS;
+  private maxDelayMs = DEFAULT_MAX_DELAY_MS;
+
+  private numberOfTaps = DEFAULT_NUMBER_OF_TAPS;
+  private minNumberOfPointers = DEFAULT_MIN_NUMBER_OF_POINTERS;
+  private currentMaxNumberOfPointers = 1;
+
+  private startX = 0;
+  private startY = 0;
+  private offsetX = 0;
+  private offsetY = 0;
+  private lastX = 0;
+  private lastY = 0;
+
+  private waitTimeout: number | undefined;
+  private delayTimeout: number | undefined;
+
+  private tapsSoFar = 0;
+
+  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.numberOfTaps !== undefined) {
+      this.numberOfTaps = this.config.numberOfTaps;
+    }
+
+    if (this.config.maxDurationMs !== undefined) {
+      this.maxDurationMs = this.config.maxDurationMs;
+    }
+
+    if (this.config.maxDelayMs !== undefined) {
+      this.maxDelayMs = this.config.maxDelayMs;
+    }
+
+    if (this.config.maxDeltaX !== undefined) {
+      this.maxDeltaX = this.config.maxDeltaX;
+    }
+
+    if (this.config.maxDeltaY !== undefined) {
+      this.maxDeltaY = this.config.maxDeltaY;
+    }
+
+    if (this.config.maxDist !== undefined) {
+      this.maxDistSq = this.config.maxDist * this.config.maxDist;
+    }
+
+    if (this.config.minPointers !== undefined) {
+      this.minNumberOfPointers = this.config.minPointers;
+    }
+  }
+
+  protected resetConfig(): void {
+    super.resetConfig();
+
+    this.maxDeltaX = Number.MIN_SAFE_INTEGER;
+    this.maxDeltaY = Number.MIN_SAFE_INTEGER;
+    this.maxDistSq = Number.MIN_SAFE_INTEGER;
+    this.maxDurationMs = DEFAULT_MAX_DURATION_MS;
+    this.maxDelayMs = DEFAULT_MAX_DELAY_MS;
+    this.numberOfTaps = DEFAULT_NUMBER_OF_TAPS;
+    this.minNumberOfPointers = DEFAULT_MIN_NUMBER_OF_POINTERS;
+  }
+
+  private clearTimeouts(): void {
+    clearTimeout(this.waitTimeout);
+    clearTimeout(this.delayTimeout);
+  }
+
+  private startTap(): void {
+    this.clearTimeouts();
+
+    this.waitTimeout = setTimeout(() => this.fail(), this.maxDurationMs);
+  }
+
+  private endTap(): void {
+    this.clearTimeouts();
+
+    if (
+      ++this.tapsSoFar === this.numberOfTaps &&
+      this.currentMaxNumberOfPointers >= this.minNumberOfPointers
+    ) {
+      this.activate();
+    } else {
+      this.delayTimeout = setTimeout(() => this.fail(), this.maxDelayMs);
+    }
+  }
+
+  //Handling Events
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+
+    this.trySettingPosition(event);
+
+    this.startX = event.x;
+    this.startY = event.y;
+
+    this.lastX = event.x;
+    this.lastY = event.y;
+
+    this.updateState(event);
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    super.onPointerAdd(event);
+    this.tracker.addToTracker(event);
+    this.trySettingPosition(event);
+
+    this.offsetX += this.lastX - this.startX;
+    this.offsetY += this.lastY - this.startY;
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.startX = this.tracker.getLastAvgX();
+    this.startY = this.tracker.getLastAvgY();
+
+    this.updateState(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.tracker.removeFromTracker(event.pointerId);
+
+    this.updateState(event);
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
+    this.offsetX += this.lastX - this.startX;
+    this.offsetY += this.lastY = this.startY;
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.startX = this.lastX;
+    this.startY = this.lastY;
+
+    this.updateState(event);
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.trySettingPosition(event);
+    this.tracker.track(event);
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.updateState(event);
+
+    super.onPointerMove(event);
+  }
+
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.trySettingPosition(event);
+    this.tracker.track(event);
+
+    this.lastX = this.tracker.getLastAvgX();
+    this.lastY = this.tracker.getLastAvgY();
+
+    this.updateState(event);
+
+    super.onPointerOutOfBounds(event);
+  }
+
+  private updateState(event: AdaptedEvent): void {
+    if (
+      this.currentMaxNumberOfPointers < this.tracker.getTrackedPointersCount()
+    ) {
+      this.currentMaxNumberOfPointers = this.tracker.getTrackedPointersCount();
+    }
+
+    if (this.shouldFail()) {
+      this.fail();
+      return;
+    }
+
+    switch (this.currentState) {
+      case State.UNDETERMINED:
+        if (event.eventType === EventTypes.DOWN) {
+          this.begin();
+        }
+        this.startTap();
+        break;
+      case State.BEGAN:
+        if (event.eventType === EventTypes.UP) {
+          this.endTap();
+        }
+        if (event.eventType === EventTypes.DOWN) {
+          this.startTap();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  private trySettingPosition(event: AdaptedEvent): void {
+    if (this.currentState !== State.UNDETERMINED) {
+      return;
+    }
+
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.startX = event.x;
+    this.startY = event.y;
+  }
+
+  private shouldFail(): boolean {
+    const dx = this.lastX - this.startX + this.offsetX;
+
+    if (
+      this.maxDeltaX !== Number.MIN_SAFE_INTEGER &&
+      Math.abs(dx) > this.maxDeltaX
+    ) {
+      return true;
+    }
+
+    const dy = this.lastY - this.startY + this.offsetY;
+    if (
+      this.maxDeltaY !== Number.MIN_SAFE_INTEGER &&
+      Math.abs(dy) > this.maxDeltaY
+    ) {
+      return true;
+    }
+
+    const distSq = dy * dy + dx * dx;
+
+    return (
+      this.maxDistSq !== Number.MIN_SAFE_INTEGER && distSq > this.maxDistSq
+    );
+  }
+
+  public activate(): void {
+    super.activate();
+
+    this.end();
+  }
+
+  protected onCancel(): void {
+    this.resetProgress();
+    this.clearTimeouts();
+  }
+
+  protected resetProgress(): void {
+    this.clearTimeouts();
+    this.tapsSoFar = 0;
+    this.currentMaxNumberOfPointers = 0;
+  }
+}

package/src/web/interfaces.ts

@@ -0,0 +1,167 @@
+import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
+import { Directions } from '../Directions';
+import { State } from '../State';
+
+export interface HitSlop {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+  horizontal?: number;
+  vertical?: number;
+  width?: number;
+  height?: number;
+}
+
+export interface Handler {
+  handlerTag: number;
+}
+
+type ConfigArgs =
+  | number
+  | boolean
+  | HitSlop
+  | UserSelect
+  | ActiveCursor
+  | Directions
+  | Handler[]
+  | null
+  | undefined;
+
+export interface Config extends Record<string, ConfigArgs> {
+  enabled?: boolean;
+  simultaneousHandlers?: Handler[] | null;
+  waitFor?: Handler[] | null;
+  blocksHandlers?: Handler[] | null;
+  hitSlop?: HitSlop;
+  shouldCancelWhenOutside?: boolean;
+  userSelect?: UserSelect;
+  activeCursor?: ActiveCursor;
+
+  activateAfterLongPress?: number;
+  failOffsetXStart?: number;
+  failOffsetYStart?: number;
+  failOffsetXEnd?: number;
+  failOffsetYEnd?: number;
+  activeOffsetXStart?: number;
+  activeOffsetXEnd?: number;
+  activeOffsetYStart?: number;
+  activeOffsetYEnd?: number;
+  minPointers?: number;
+  maxPointers?: number;
+  minDist?: number;
+  minDistSq?: number;
+  minVelocity?: number;
+  minVelocityX?: number;
+  minVelocityY?: number;
+  minVelocitySq?: number;
+  maxDist?: number;
+  maxDistSq?: number;
+  numberOfPointers?: number;
+  minDurationMs?: number;
+  numberOfTaps?: number;
+  maxDurationMs?: number;
+  maxDelayMs?: number;
+  maxDeltaX?: number;
+  maxDeltaY?: number;
+  shouldActivateOnStart?: boolean;
+  disallowInterruption?: boolean;
+  direction?: Directions;
+}
+
+type NativeEventArgs = number | State | boolean | undefined;
+interface NativeEvent extends Record<string, NativeEventArgs> {
+  numberOfPointers: number;
+  state: State;
+  pointerInside: boolean | undefined;
+  handlerTag: number;
+  target: number;
+  oldState?: State;
+}
+
+export interface PointerData {
+  id: number;
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+}
+
+type TouchNativeArgs = number | State | TouchEventType | PointerData[];
+
+interface NativeTouchEvent extends Record<string, TouchNativeArgs> {
+  handlerTag: number;
+  state: State;
+  eventType: TouchEventType;
+  changedTouches: PointerData[];
+  allTouches: PointerData[];
+  numberOfTouches: number;
+}
+
+export interface ResultEvent extends Record<string, NativeEvent | number> {
+  nativeEvent: NativeEvent;
+  timeStamp: number;
+}
+
+export interface ResultTouchEvent
+  extends Record<string, NativeTouchEvent | number> {
+  nativeEvent: NativeTouchEvent;
+  timeStamp: number;
+}
+
+export interface PropsRef {
+  onGestureHandlerEvent: () => void;
+  onGestureHandlerStateChange: () => void;
+}
+
+export interface AdaptedEvent {
+  x: number;
+  y: number;
+  offsetX: number;
+  offsetY: number;
+  pointerId: number;
+  eventType: EventTypes;
+  pointerType: PointerType;
+  buttons: number;
+  time: number;
+  allTouches?: TouchList;
+  changedTouches?: TouchList;
+  touchEventType?: TouchEventType;
+}
+
+export enum MouseButtons {
+  NONE,
+  LEFT,
+  RIGHT,
+  LEFT_RIGHT,
+  SCROLL,
+  SCROLL_LEFT,
+  SCROLL_RIGHT,
+  SCROLL_LEFT_RIGHT,
+}
+
+export enum EventTypes {
+  DOWN,
+  ADDITIONAL_POINTER_DOWN,
+  UP,
+  ADDITIONAL_POINTER_UP,
+  MOVE,
+  ENTER,
+  LEAVE,
+  CANCEL,
+}
+
+export enum TouchEventType {
+  UNDETERMINED,
+  DOWN,
+  MOVE,
+  UP,
+  CANCELLED,
+}
+
+export enum PointerType {
+  NONE = 'none',
+  MOUSE = 'mouse',
+  TOUCH = 'touch',
+  PEN = 'pen',
+}

package/src/web/tools/CircularBuffer.ts

@@ -0,0 +1,42 @@
+export default class CircularBuffer<T> {
+  private bufferSize: number;
+  private buffer: T[];
+  private index: number;
+  private actualSize: number;
+
+  constructor(size: number) {
+    this.bufferSize = size;
+    this.buffer = new Array<T>(size);
+    this.index = 0;
+    this.actualSize = 0;
+  }
+
+  public get size(): number {
+    return this.actualSize;
+  }
+
+  public push(element: T): void {
+    this.buffer[this.index] = element;
+    this.index = (this.index + 1) % this.bufferSize;
+    this.actualSize = Math.min(this.actualSize + 1, this.bufferSize);
+  }
+
+  public get(at: number): T {
+    if (this.actualSize === this.bufferSize) {
+      let index = (this.index + at) % this.bufferSize;
+      if (index < 0) {
+        index += this.bufferSize;
+      }
+
+      return this.buffer[index];
+    } else {
+      return this.buffer[at];
+    }
+  }
+
+  public clear(): void {
+    this.buffer = new Array<T>(this.bufferSize);
+    this.index = 0;
+    this.actualSize = 0;
+  }
+}