react-native-gesture-handler 2.4.1 → 2.6.0

package/src/web/interfaces.ts

@@ -0,0 +1,114 @@
+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
+  | Directions
+  | Handler[]
+  | null
+  | undefined;
+
+export interface Config extends Record<string, ConfigArgs> {
+  enabled?: boolean;
+  simultaneousHandlers?: Handler[] | null;
+  waitFor?: Handler[] | null;
+  hitSlop?: HitSlop;
+
+  minPointers?: number;
+  maxPointers?: number;
+  minDist?: number;
+  minDistSq?: number;
+  minVelocity?: number;
+  minVelocityX?: number;
+  minVelocityY?: number;
+  minVelocitySq?: number;
+  maxDist?: number;
+  maxDistSq?: number;
+  failOffsetXStart?: number;
+  failOffsetYStart?: number;
+  failOffsetXEnd?: number;
+  failOffsetYEnd?: number;
+  activeOffsetXStart?: number;
+  activeOffsetXEnd?: number;
+  activeOffsetYStart?: number;
+  activeOffsetYEnd?: number;
+  numberOfPointers?: number;
+  minDurationMs?: number;
+  numberOfTaps?: number;
+  maxDurationMs?: number;
+  maxDelayMs?: number;
+  maxDeltaX?: number;
+  maxDeltaY?: number;
+  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 ResultEvent extends Record<string, NativeEvent | number> {
+  nativeEvent: NativeEvent;
+  timeStamp: number;
+}
+
+export interface PropsRef {
+  onGestureHandlerEvent: () => void;
+  onGestureHandlerStateChange: () => void;
+}
+
+export interface AdaptedPointerEvent {
+  x: number;
+  y: number;
+  offsetX: number;
+  offsetY: number;
+  pointerId: number;
+  eventType: EventTypes;
+  pointerType: string;
+  buttons: number;
+  time: number;
+}
+
+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,
+  OUT,
+  CANCEL,
+}

package/src/web/tools/EventManager.ts

@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import { EventTypes, AdaptedPointerEvent, MouseButtons } from '../interfaces';
+
+export default class EventManager {
+  private activePointers: number[] = [];
+  private readonly view: HTMLElement;
+
+  constructor(view: HTMLElement) {
+    this.view = view;
+  }
+
+  public setListeners() {
+    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
+      if (
+        !this.isPointerInBounds({
+          x: event.clientX,
+          y: event.clientY,
+        })
+      ) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
+        event,
+        EventTypes.DOWN
+      );
+      const target = event.target as HTMLElement;
+
+      target.setPointerCapture(adaptedEvent.pointerId);
+      this.addActivePointer(adaptedEvent.pointerId);
+      this.onPointerDown(adaptedEvent);
+    });
+
+    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
+      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
+        event,
+        EventTypes.UP
+      );
+      const target = event.target as HTMLElement;
+
+      this.onPointerUp(adaptedEvent);
+      target.releasePointerCapture(adaptedEvent.pointerId);
+      this.removeActivePointer(adaptedEvent.pointerId);
+    });
+
+    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
+      if (
+        event.pointerType === 'mouse' &&
+        event.buttons !== MouseButtons.LEFT
+      ) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
+        event,
+        EventTypes.MOVE
+      );
+
+      const inBounds: boolean = this.isPointerInBounds({
+        x: adaptedEvent.x,
+        y: adaptedEvent.y,
+      });
+
+      const pointerIndex: number = this.activePointers.indexOf(
+        adaptedEvent.pointerId
+      );
+
+      if (inBounds) {
+        if (pointerIndex < 0) {
+          adaptedEvent.eventType = EventTypes.ENTER;
+          this.onPointerEnter(adaptedEvent);
+          this.addActivePointer(adaptedEvent.pointerId);
+        } else {
+          this.onPointerMove(adaptedEvent);
+        }
+      } else {
+        if (pointerIndex >= 0) {
+          adaptedEvent.eventType = EventTypes.OUT;
+          this.onPointerOut(adaptedEvent);
+          this.removeActivePointer(adaptedEvent.pointerId);
+        } else {
+          this.onPointerOutOfBounds(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
+      event.preventDefault();
+
+      const adaptedEvent: AdaptedPointerEvent = this.mapEvent(
+        event,
+        EventTypes.CANCEL
+      );
+
+      this.onPointerCancel(adaptedEvent);
+    });
+  }
+
+  private onPointerDown(_event: AdaptedPointerEvent): void {}
+  private onPointerUp(_event: AdaptedPointerEvent): void {}
+  private onPointerMove(_event: AdaptedPointerEvent): void {}
+  private onPointerOut(_event: AdaptedPointerEvent): void {}
+  private onPointerEnter(_event: AdaptedPointerEvent): void {}
+  private onPointerCancel(_event: AdaptedPointerEvent): void {}
+  private onPointerOutOfBounds(_event: AdaptedPointerEvent): void {}
+
+  public setOnPointerDown(
+    callback: (event: AdaptedPointerEvent) => void
+  ): void {
+    this.onPointerDown = callback;
+  }
+  public setOnPointerUp(callback: (event: AdaptedPointerEvent) => void): void {
+    this.onPointerUp = callback;
+  }
+  public setOnPointerMove(
+    callback: (event: AdaptedPointerEvent) => void
+  ): void {
+    this.onPointerMove = callback;
+  }
+  public setOnPointerOut(callback: (event: AdaptedPointerEvent) => void): void {
+    this.onPointerOut = callback;
+  }
+  public setOnPointerEnter(
+    callback: (event: AdaptedPointerEvent) => void
+  ): void {
+    this.onPointerEnter = callback;
+  }
+  public setOnPointerCancel(
+    callback: (event: AdaptedPointerEvent) => void
+  ): void {
+    this.onPointerCancel = callback;
+  }
+  public setOnPointerOutOfBounds(
+    callback: (event: AdaptedPointerEvent) => void
+  ): void {
+    this.onPointerOutOfBounds = callback;
+  }
+
+  private mapEvent(
+    event: PointerEvent,
+    eventType: EventTypes
+  ): AdaptedPointerEvent {
+    return {
+      x: event.clientX,
+      y: event.clientY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY,
+      pointerId: event.pointerId,
+      eventType: eventType,
+      pointerType: event.pointerType,
+      buttons: event.buttons,
+      time: event.timeStamp,
+    };
+  }
+
+  public isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
+    if (!this.view) {
+      return false;
+    }
+
+    const rect: DOMRect = this.view.getBoundingClientRect();
+
+    return (
+      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+    );
+  }
+
+  private addActivePointer(pointerId: number): void {
+    if (this.activePointers.indexOf(pointerId) >= 0) {
+      return;
+    }
+
+    this.activePointers.push(pointerId);
+  }
+
+  private removeActivePointer(pointerId: number): void {
+    const index: number = this.activePointers.indexOf(pointerId);
+
+    if (index < 0) {
+      return;
+    }
+
+    this.activePointers.splice(index, 1);
+  }
+}

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -0,0 +1,329 @@
+import { State } from '../../State';
+import { AdaptedPointerEvent } from '../interfaces';
+
+import GestureHandler from '../handlers/GestureHandler';
+import PointerTracker from './PointerTracker';
+
+export default class GestureHandlerOrchestrator {
+  private static instance: GestureHandlerOrchestrator;
+
+  private gestureHandlers: GestureHandler[] = [];
+  private awaitingHandlers: GestureHandler[] = [];
+  private handlersToCancel: GestureHandler[] = [];
+
+  private handlingChangeSemaphore = 0;
+  private activationIndex = 0;
+
+  // Private beacuse of Singleton
+  // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  private scheduleFinishedHandlersCleanup(): void {
+    if (this.handlingChangeSemaphore === 0) {
+      this.cleanupFinishedHandlers();
+    }
+  }
+
+  private cleanHandler(handler: GestureHandler): void {
+    handler.reset();
+    handler.setActive(false);
+    handler.setAwaiting(false);
+    handler.setActivationIndex(Number.MAX_VALUE);
+  }
+
+  private cleanupFinishedHandlers(): void {
+    for (let i = this.gestureHandlers.length - 1; i >= 0; --i) {
+      const handler = this.gestureHandlers[i];
+      if (!handler) {
+        continue;
+      }
+
+      if (this.isFinished(handler.getState()) && !handler.isAwaiting()) {
+        this.gestureHandlers.splice(i, 1);
+
+        this.cleanHandler(handler);
+      }
+    }
+  }
+
+  private hasOtherHandlerToWaitFor(handler: GestureHandler): boolean {
+    let hasToWait = false;
+    this.gestureHandlers.forEach((otherHandler) => {
+      if (
+        otherHandler &&
+        !this.isFinished(otherHandler.getState()) &&
+        this.shouldHandlerWaitForOther(handler, otherHandler)
+      ) {
+        hasToWait = true;
+        return;
+      }
+    });
+
+    return hasToWait;
+  }
+
+  private tryActivate(
+    handler: GestureHandler,
+    event: AdaptedPointerEvent
+  ): void {
+    if (this.hasOtherHandlerToWaitFor(handler)) {
+      this.addAwaitingHandler(handler);
+    } else {
+      this.makeActive(handler, event);
+    }
+  }
+
+  private cleanupAwaitingHandlers(handler: GestureHandler): void {
+    for (let i = 0; i < this.awaitingHandlers.length; ++i) {
+      if (
+        !this.awaitingHandlers[i].isAwaiting() &&
+        this.shouldHandlerWaitForOther(this.awaitingHandlers[i], handler)
+      ) {
+        this.cleanHandler(this.awaitingHandlers[i]);
+        this.awaitingHandlers.splice(i, 1);
+      }
+    }
+  }
+
+  public onHandlerStateChange(
+    handler: GestureHandler,
+    newState: State,
+    oldState: State,
+    event: AdaptedPointerEvent
+  ): void {
+    this.handlingChangeSemaphore += 1;
+
+    if (this.isFinished(newState)) {
+      this.awaitingHandlers.forEach((otherHandler) => {
+        if (this.shouldHandlerWaitForOther(otherHandler, handler)) {
+          if (newState === State.END) {
+            otherHandler?.cancel(event);
+            otherHandler?.setAwaiting(false);
+          } else {
+            this.tryActivate(otherHandler, event);
+          }
+        }
+      });
+    }
+
+    if (newState === State.ACTIVE) {
+      this.tryActivate(handler, event);
+    } else if (oldState === State.ACTIVE || oldState === State.END) {
+      if (handler.isActive()) {
+        handler.sendEvent(event, newState, oldState);
+      } else if (oldState === State.ACTIVE) {
+        handler.sendEvent(event, newState, State.BEGAN);
+      }
+    } else if (
+      oldState !== State.UNDETERMINED ||
+      newState !== State.CANCELLED
+    ) {
+      handler.sendEvent(event, newState, oldState);
+    }
+
+    this.handlingChangeSemaphore -= 1;
+
+    this.scheduleFinishedHandlersCleanup();
+
+    if (this.awaitingHandlers.indexOf(handler) < 0) {
+      this.cleanupAwaitingHandlers(handler);
+    }
+  }
+
+  private makeActive(
+    handler: GestureHandler,
+    event: AdaptedPointerEvent
+  ): void {
+    const currentState = handler.getState();
+
+    handler.setActive(true);
+    handler.setShouldResetProgress(true);
+    handler.setActivationIndex(this.activationIndex++);
+
+    this.gestureHandlers.forEach((otherHandler) => {
+      // Order of arguments is correct - we check whether current handler should cancel existing handlers
+      if (this.shouldHandlerBeCancelledBy(otherHandler, handler)) {
+        this.handlersToCancel.push(otherHandler);
+      }
+    });
+
+    for (let i = this.handlersToCancel.length - 1; i >= 0; --i) {
+      this.handlersToCancel[i]?.cancel(event);
+    }
+    this.awaitingHandlers.forEach((otherHandler) => {
+      if (this.shouldHandlerBeCancelledBy(otherHandler, handler)) {
+        otherHandler?.cancel(event);
+        otherHandler?.setAwaiting(true);
+      }
+    });
+
+    handler.sendEvent(event, State.ACTIVE, State.BEGAN);
+
+    if (currentState !== State.ACTIVE) {
+      handler.sendEvent(event, State.END, State.ACTIVE);
+      if (currentState !== State.END) {
+        handler.sendEvent(event, State.UNDETERMINED, State.END);
+      }
+    }
+
+    if (handler.isAwaiting()) {
+      handler.setAwaiting(false);
+      handler.end(event);
+    }
+
+    this.handlersToCancel = [];
+  }
+
+  private addAwaitingHandler(handler: GestureHandler): void {
+    let alreadyExists = false;
+
+    this.awaitingHandlers.forEach((otherHandler) => {
+      if (otherHandler === handler) {
+        alreadyExists = true;
+        return;
+      }
+    });
+
+    if (alreadyExists) {
+      return;
+    }
+
+    this.awaitingHandlers.push(handler);
+
+    handler.setAwaiting(true);
+    handler.setActivationIndex(this.activationIndex++);
+  }
+
+  public recordHandlerIfNotPresent(handler: GestureHandler): void {
+    let alreadyExists = false;
+
+    this.gestureHandlers.forEach((otherHandler) => {
+      if (otherHandler === handler) {
+        alreadyExists = true;
+        return;
+      }
+    });
+
+    if (alreadyExists) {
+      return;
+    }
+
+    this.gestureHandlers.push(handler);
+
+    handler.setActive(false);
+    handler.setAwaiting(false);
+    handler.setActivationIndex(Number.MAX_SAFE_INTEGER);
+  }
+
+  private shouldHandlerWaitForOther(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    return (
+      handler !== otherHandler &&
+      (handler.shouldWaitForHandlerFailure(otherHandler) ||
+        otherHandler.shouldRequireToWaitForFailure(handler))
+    );
+  }
+
+  private canRunSimultaneously(
+    gh1: GestureHandler,
+    gh2: GestureHandler
+  ): boolean {
+    return (
+      gh1 === gh2 ||
+      gh1.shouldRecognizeSimultaneously(gh2) ||
+      gh2.shouldRecognizeSimultaneously(gh1)
+    );
+  }
+
+  private shouldHandlerBeCancelledBy(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    const handlerPointers: number[] = handler.getTrackedPointersID();
+    const otherPointers: number[] = otherHandler.getTrackedPointersID();
+
+    if (
+      !PointerTracker.shareCommonPointers(handlerPointers, otherPointers) &&
+      handler.getView() !== otherHandler.getView()
+    ) {
+      return this.checkOverlap(handler, otherHandler);
+    }
+
+    if (this.canRunSimultaneously(handler, otherHandler)) {
+      return false;
+    }
+
+    if (
+      handler !== otherHandler &&
+      (handler.isAwaiting() || handler.getState() === State.ACTIVE)
+    ) {
+      // For now it always returns false
+      return handler.shouldBeCancelledByOther(otherHandler);
+    }
+
+    return true;
+  }
+
+  private checkOverlap(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    // If handlers don't have common pointers, default return value is false.
+    // However, if at least on pointer overlaps with both handlers, we return true
+    // This solves issue in overlapping parents example
+
+    // TODO: Find better way to handle that issue, for example by activation order and handler cancelling
+
+    const handlerPointers: number[] = handler.getTrackedPointersID();
+    const otherPointers: number[] = otherHandler.getTrackedPointersID();
+
+    let overlap = false;
+
+    handlerPointers.forEach((pointer: number) => {
+      const handlerX: number = handler.getTracker().getLastX(pointer);
+      const handlerY: number = handler.getTracker().getLastY(pointer);
+
+      if (
+        handler
+          .getEventManager()
+          .isPointerInBounds({ x: handlerX, y: handlerY }) &&
+        otherHandler
+          .getEventManager()
+          .isPointerInBounds({ x: handlerX, y: handlerY })
+      ) {
+        overlap = true;
+      }
+    });
+
+    otherPointers.forEach((pointer: number) => {
+      const otherX: number = otherHandler.getTracker().getLastX(pointer);
+      const otherY: number = otherHandler.getTracker().getLastY(pointer);
+
+      if (
+        handler.getEventManager().isPointerInBounds({ x: otherX, y: otherY }) &&
+        otherHandler
+          .getEventManager()
+          .isPointerInBounds({ x: otherX, y: otherY })
+      ) {
+        overlap = true;
+      }
+    });
+
+    return overlap;
+  }
+
+  private isFinished(state: State): boolean {
+    return (
+      state === State.END || state === State.FAILED || state === State.CANCELLED
+    );
+  }
+
+  public static getInstance(): GestureHandlerOrchestrator {
+    if (!GestureHandlerOrchestrator.instance)
+      GestureHandlerOrchestrator.instance = new GestureHandlerOrchestrator();
+
+    return GestureHandlerOrchestrator.instance;
+  }
+}