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

package/src/web/tools/InteractionManager.ts

@@ -0,0 +1,130 @@
+import GestureHandler from '../handlers/GestureHandler';
+import { Config, Handler } from '../interfaces';
+
+export default class InteractionManager {
+  private static instance: InteractionManager;
+  private readonly waitForRelations: Map<number, number[]> = new Map();
+  private readonly simultaneousRelations: Map<number, number[]> = new Map();
+  private readonly blocksHandlersRelations: Map<number, number[]> = new Map();
+
+  // Private becaues of singleton
+  // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  public configureInteractions(handler: GestureHandler, config: Config) {
+    this.dropRelationsForHandlerWithTag(handler.getTag());
+
+    if (config.waitFor) {
+      const waitFor: number[] = [];
+      config.waitFor.forEach((otherHandler: Handler): void => {
+        // New API reference
+        if (typeof otherHandler === 'number') {
+          waitFor.push(otherHandler);
+        } else {
+          // Old API reference
+          waitFor.push(otherHandler.handlerTag);
+        }
+      });
+
+      this.waitForRelations.set(handler.getTag(), waitFor);
+    }
+
+    if (config.simultaneousHandlers) {
+      const simultaneousHandlers: number[] = [];
+      config.simultaneousHandlers.forEach((otherHandler: Handler): void => {
+        if (typeof otherHandler === 'number') {
+          simultaneousHandlers.push(otherHandler);
+        } else {
+          simultaneousHandlers.push(otherHandler.handlerTag);
+        }
+      });
+
+      this.simultaneousRelations.set(handler.getTag(), simultaneousHandlers);
+    }
+
+    if (config.blocksHandlers) {
+      const blocksHandlers: number[] = [];
+      config.blocksHandlers.forEach((otherHandler: Handler): void => {
+        if (typeof otherHandler === 'number') {
+          blocksHandlers.push(otherHandler);
+        } else {
+          blocksHandlers.push(otherHandler.handlerTag);
+        }
+      });
+
+      this.blocksHandlersRelations.set(handler.getTag(), blocksHandlers);
+    }
+  }
+
+  public shouldWaitForHandlerFailure(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    const waitFor: number[] | undefined = this.waitForRelations.get(
+      handler.getTag()
+    );
+
+    return (
+      waitFor?.find((tag: number) => {
+        return tag === otherHandler.getTag();
+      }) !== undefined
+    );
+  }
+
+  public shouldRecognizeSimultaneously(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    const simultaneousHandlers: number[] | undefined =
+      this.simultaneousRelations.get(handler.getTag());
+
+    return (
+      simultaneousHandlers?.find((tag: number) => {
+        return tag === otherHandler.getTag();
+      }) !== undefined
+    );
+  }
+
+  public shouldRequireHandlerToWaitForFailure(
+    handler: GestureHandler,
+    otherHandler: GestureHandler
+  ): boolean {
+    const waitFor: number[] | undefined = this.blocksHandlersRelations.get(
+      handler.getTag()
+    );
+
+    return (
+      waitFor?.find((tag: number) => {
+        return tag === otherHandler.getTag();
+      }) !== undefined
+    );
+  }
+
+  public shouldHandlerBeCancelledBy(
+    _handler: GestureHandler,
+    _otherHandler: GestureHandler
+  ): boolean {
+    //TODO: Implement logic
+    return false;
+  }
+
+  public dropRelationsForHandlerWithTag(handlerTag: number): void {
+    this.waitForRelations.delete(handlerTag);
+    this.simultaneousRelations.delete(handlerTag);
+    this.blocksHandlersRelations.delete(handlerTag);
+  }
+
+  public reset() {
+    this.waitForRelations.clear();
+    this.simultaneousRelations.clear();
+    this.blocksHandlersRelations.clear();
+  }
+
+  public static getInstance(): InteractionManager {
+    if (!this.instance) {
+      this.instance = new InteractionManager();
+    }
+
+    return this.instance;
+  }
+}

package/src/web/tools/LeastSquareSolver.ts

@@ -0,0 +1,182 @@
+// Implementation taken from Flutter's LeastSquareSolver
+// https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/gestures/lsq_solver.dart
+
+class Vector {
+  private offset: number;
+  private length: number;
+  private elements: number[];
+
+  constructor(length: number) {
+    this.offset = 0;
+    this.length = length;
+    this.elements = new Array<number>(length);
+  }
+
+  public static fromVOL(
+    values: number[],
+    offset: number,
+    length: number
+  ): Vector {
+    const result = new Vector(0);
+
+    result.offset = offset;
+    result.length = length;
+    result.elements = values;
+
+    return result;
+  }
+
+  public get(index: number): number {
+    return this.elements[this.offset + index];
+  }
+
+  public set(index: number, value: number): void {
+    this.elements[this.offset + index] = value;
+  }
+
+  public dot(other: Vector): number {
+    let result = 0;
+    for (let i = 0; i < this.length; i++) {
+      result += this.get(i) * other.get(i);
+    }
+    return result;
+  }
+
+  public norm() {
+    return Math.sqrt(this.dot(this));
+  }
+}
+
+class Matrix {
+  private columns: number;
+  private elements: number[];
+
+  constructor(rows: number, columns: number) {
+    this.columns = columns;
+    this.elements = new Array<number>(rows * columns);
+  }
+
+  public get(row: number, column: number): number {
+    return this.elements[row * this.columns + column];
+  }
+
+  public set(row: number, column: number, value: number): void {
+    this.elements[row * this.columns + column] = value;
+  }
+
+  public getRow(row: number): Vector {
+    return Vector.fromVOL(this.elements, row * this.columns, this.columns);
+  }
+}
+
+/// An nth degree polynomial fit to a dataset.
+class PolynomialFit {
+  /// The polynomial coefficients of the fit.
+  ///
+  /// For each `i`, the element `coefficients[i]` is the coefficient of
+  /// the `i`-th power of the variable.
+  public coefficients: number[];
+
+  /// Creates a polynomial fit of the given degree.
+  ///
+  /// There are n + 1 coefficients in a fit of degree n.
+  constructor(degree: number) {
+    this.coefficients = new Array<number>(degree + 1);
+  }
+}
+
+const precisionErrorTolerance = 1e-10;
+
+/// Uses the least-squares algorithm to fit a polynomial to a set of data.
+export default class LeastSquareSolver {
+  /// The x-coordinates of each data point.
+  private x: number[];
+  /// The y-coordinates of each data point.
+  private y: number[];
+  /// The weight to use for each data point.
+  private w: number[];
+
+  /// Creates a least-squares solver.
+  ///
+  /// The [x], [y], and [w] arguments must not be null.
+  constructor(x: number[], y: number[], w: number[]) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+  }
+
+  /// Fits a polynomial of the given degree to the data points.
+  ///
+  /// When there is not enough data to fit a curve null is returned.
+  public solve(degree: number): PolynomialFit | null {
+    if (degree > this.x.length) {
+      // Not enough data to fit a curve.
+      return null;
+    }
+
+    const result = new PolynomialFit(degree);
+
+    // Shorthands for the purpose of notation equivalence to original C++ code.
+    const m = this.x.length;
+    const n = degree + 1;
+
+    // Expand the X vector to a matrix A, pre-multiplied by the weights.
+    const a = new Matrix(n, m);
+    for (let h = 0; h < m; h++) {
+      a.set(0, h, this.w[h]);
+
+      for (let i = 1; i < n; i++) {
+        a.set(i, h, a.get(i - 1, h) * this.x[h]);
+      }
+    }
+
+    // Apply the Gram-Schmidt process to A to obtain its QR decomposition.
+
+    // Orthonormal basis, column-major ordVectorer.
+    const q = new Matrix(n, m);
+    // Upper triangular matrix, row-major order.
+    const r = new Matrix(n, m);
+
+    for (let j = 0; j < n; j += 1) {
+      for (let h = 0; h < m; h += 1) {
+        q.set(j, h, a.get(j, h));
+      }
+      for (let i = 0; i < j; i += 1) {
+        const dot = q.getRow(j).dot(q.getRow(i));
+        for (let h = 0; h < m; h += 1) {
+          q.set(j, h, q.get(j, h) - dot * q.get(i, h));
+        }
+      }
+
+      const norm = q.getRow(j).norm();
+      if (norm < precisionErrorTolerance) {
+        // Vectors are linearly dependent or zero so no solution.
+        return null;
+      }
+
+      const inverseNorm = 1.0 / norm;
+      for (let h = 0; h < m; h += 1) {
+        q.set(j, h, q.get(j, h) * inverseNorm);
+      }
+      for (let i = 0; i < n; i += 1) {
+        r.set(j, i, i < j ? 0.0 : q.getRow(j).dot(a.getRow(i)));
+      }
+    }
+
+    // Solve R B = Qt W Y to find B. This is easy because R is upper triangular.
+    // We just work from bottom-right to top-left calculating B's coefficients.
+    const wy = new Vector(m);
+    for (let h = 0; h < m; h += 1) {
+      wy.set(h, this.y[h] * this.w[h]);
+    }
+    for (let i = n - 1; i >= 0; i -= 1) {
+      result.coefficients[i] = q.getRow(i).dot(wy);
+      for (let j = n - 1; j > i; j -= 1) {
+        result.coefficients[i] -= r.get(i, j) * result.coefficients[j];
+      }
+      result.coefficients[i] /= r.get(i, i);
+    }
+
+    return result;
+  }
+}

package/src/web/tools/NodeManager.ts

@@ -0,0 +1,43 @@
+import { ValueOf } from '../../typeUtils';
+import { Gestures } from '../../RNGestureHandlerModule.web';
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export default abstract class NodeManager {
+  private static gestures: Record<
+    number,
+    InstanceType<ValueOf<typeof Gestures>>
+  > = {};
+
+  public static getHandler(tag: number) {
+    if (tag in this.gestures) {
+      return this.gestures[tag];
+    }
+
+    throw new Error(`No handler for tag ${tag}`);
+  }
+
+  public static createGestureHandler(
+    handlerTag: number,
+    handler: InstanceType<ValueOf<typeof Gestures>>
+  ): void {
+    if (handlerTag in this.gestures) {
+      throw new Error(`Handler with tag ${handlerTag} already exists`);
+    }
+
+    this.gestures[handlerTag] = handler;
+    this.gestures[handlerTag].setTag(handlerTag);
+  }
+
+  public static dropGestureHandler(handlerTag: number): void {
+    if (!(handlerTag in this.gestures)) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete this.gestures[handlerTag];
+  }
+
+  public static getNodes() {
+    return { ...this.gestures };
+  }
+}

package/src/web/tools/PointerEventManager.ts

@@ -0,0 +1,202 @@
+import { AdaptedEvent, EventTypes, PointerType } from '../interfaces';
+import EventManager from './EventManager';
+import { isPointerInBounds } from '../utils';
+
+export default class PointerEventManager extends EventManager<HTMLElement> {
+  private trackedPointers = new Set<number>();
+
+  public setListeners(): void {
+    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+      if (
+        !isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })
+      ) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
+      const target = event.target as HTMLElement;
+
+      if (target instanceof HTMLDivElement) {
+        target.setPointerCapture(adaptedEvent.pointerId);
+      }
+
+      this.markAsInBounds(adaptedEvent.pointerId);
+      this.trackedPointers.add(adaptedEvent.pointerId);
+
+      if (++this.activePointersCounter > 1) {
+        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+        this.onPointerAdd(adaptedEvent);
+      } else {
+        this.onPointerDown(adaptedEvent);
+      }
+    });
+
+    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      // When we call reset on gesture handlers, it also resets their event managers
+      // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
+      // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
+      // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
+      if (this.activePointersCounter === 0) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
+      const target = event.target as HTMLElement;
+
+      if (target instanceof HTMLDivElement) {
+        target.releasePointerCapture(adaptedEvent.pointerId);
+      }
+
+      this.markAsOutOfBounds(adaptedEvent.pointerId);
+      this.trackedPointers.delete(adaptedEvent.pointerId);
+
+      if (--this.activePointersCounter > 0) {
+        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+        this.onPointerRemove(adaptedEvent);
+      } else {
+        this.onPointerUp(adaptedEvent);
+      }
+    });
+
+    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.MOVE);
+      const target = event.target as HTMLElement;
+
+      // You may be wondering why are we setting pointer capture here, when we
+      // already set it in `pointerdown` handler. Well, that's a great question,
+      // for which I don't have an answer. Specification (https://www.w3.org/TR/pointerevents2/#dom-element-setpointercapture)
+      // says that the requirement for `setPointerCapture` to work is that pointer
+      // must be in 'active buttons state`, otherwise it will fail silently, which
+      // is lovely. Obviously, when `pointerdown` is fired, one of the buttons
+      // (when using mouse) is pressed, but that doesn't mean that `setPointerCapture`
+      // will succeed, for some reason. Since it fails silently, we don't actually know
+      // if it worked or not (there's `gotpointercapture` event, but the complexity of
+      // incorporating it here seems stupid), so we just call it again here, every time
+      // pointer moves until it succeeds.
+      // God, I do love web development.
+      if (
+        !target.hasPointerCapture(event.pointerId) &&
+        target instanceof HTMLDivElement
+      ) {
+        target.setPointerCapture(event.pointerId);
+      }
+
+      const inBounds: boolean = isPointerInBounds(this.view, {
+        x: adaptedEvent.x,
+        y: adaptedEvent.y,
+      });
+
+      const pointerIndex: number = this.pointersInBounds.indexOf(
+        adaptedEvent.pointerId
+      );
+
+      if (inBounds) {
+        if (pointerIndex < 0) {
+          adaptedEvent.eventType = EventTypes.ENTER;
+          this.onPointerEnter(adaptedEvent);
+          this.markAsInBounds(adaptedEvent.pointerId);
+        } else {
+          this.onPointerMove(adaptedEvent);
+        }
+      } else {
+        if (pointerIndex >= 0) {
+          adaptedEvent.eventType = EventTypes.LEAVE;
+          this.onPointerLeave(adaptedEvent);
+          this.markAsOutOfBounds(adaptedEvent.pointerId);
+        } else {
+          this.onPointerOutOfBounds(adaptedEvent);
+        }
+      }
+    });
+
+    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(
+        event,
+        EventTypes.CANCEL
+      );
+
+      this.onPointerCancel(adaptedEvent);
+      this.markAsOutOfBounds(adaptedEvent.pointerId);
+      this.activePointersCounter = 0;
+      this.trackedPointers.clear();
+    });
+
+    // onPointerEnter and onPointerLeave are triggered by a custom logic responsible for
+    // handling shouldCancelWhenOutside flag, and are unreliable unless the pointer is down.
+    // We therefore use pointerenter and pointerleave events to handle the hover gesture,
+    // mapping them to onPointerMoveOver and onPointerMoveOut respectively.
+
+    this.view.addEventListener('pointerenter', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
+
+      this.onPointerMoveOver(adaptedEvent);
+    });
+
+    this.view.addEventListener('pointerleave', (event: PointerEvent): void => {
+      if (event.pointerType === PointerType.TOUCH) {
+        return;
+      }
+
+      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
+
+      this.onPointerMoveOut(adaptedEvent);
+    });
+
+    this.view.addEventListener(
+      'lostpointercapture',
+      (event: PointerEvent): void => {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.CANCEL
+        );
+
+        if (this.trackedPointers.has(adaptedEvent.pointerId)) {
+          // in some cases the `pointerup` event is not fired, but `lostpointercapture` is
+          // we simulate the `pointercancel` event here to make sure the gesture handler stops tracking it
+          this.onPointerCancel(adaptedEvent);
+
+          this.activePointersCounter = 0;
+          this.trackedPointers.clear();
+        }
+      }
+    );
+  }
+
+  protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
+    return {
+      x: event.clientX,
+      y: event.clientY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY,
+      pointerId: event.pointerId,
+      eventType: eventType,
+      pointerType: event.pointerType as PointerType,
+      buttons: event.buttons,
+      time: event.timeStamp,
+    };
+  }
+
+  public resetManager(): void {
+    super.resetManager();
+    this.trackedPointers.clear();
+  }
+}