@amazon-devices/react-native-gesture-handler 4.0.1 → 4.0.2

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -1,227 +0,0 @@
-import findNodeHandle from '../../findNodeHandle';
-import type IGestureHandler from '../handlers/IGestureHandler';
-import {
-  GestureHandlerDelegate,
-  MeasureResult,
-} from './GestureHandlerDelegate';
-import PointerEventManager from './PointerEventManager';
-import { State } from '../../State';
-import { isPointerInBounds } from '../utils';
-import EventManager from './EventManager';
-import { Config } from '../interfaces';
-import { MouseButton } from '../../handlers/gestureHandlerCommon';
-import KeyboardEventManager from './KeyboardEventManager';
-import WheelEventManager from './WheelEventManager';
-
-interface DefaultViewStyles {
-  userSelect: string;
-  touchAction: string;
-}
-
-export class GestureHandlerWebDelegate
-  implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
-{
-  private isInitialized = false;
-  private _view!: HTMLElement;
-
-  private gestureHandler!: IGestureHandler;
-  private eventManagers: EventManager<unknown>[] = [];
-  private defaultViewStyles: DefaultViewStyles = {
-    userSelect: '',
-    touchAction: '',
-  };
-
-  init(viewRef: number, handler: IGestureHandler): void {
-    if (!viewRef) {
-      throw new Error(
-        `Cannot find HTML Element for handler ${handler.handlerTag}`
-      );
-    }
-
-    this.isInitialized = true;
-
-    this.gestureHandler = handler;
-    this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
-
-    this.defaultViewStyles = {
-      userSelect: this.view.style.userSelect,
-      touchAction: this.view.style.touchAction,
-    };
-
-    const config = handler.config;
-
-    this.setUserSelect(config.enabled);
-    this.setTouchAction(config.enabled);
-    this.setContextMenu(config.enabled);
-
-    this.eventManagers.push(new PointerEventManager(this.view));
-    this.eventManagers.push(new KeyboardEventManager(this.view));
-    this.eventManagers.push(new WheelEventManager(this.view));
-
-    this.eventManagers.forEach((manager) =>
-      this.gestureHandler.attachEventManager(manager)
-    );
-  }
-
-  isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
-    return isPointerInBounds(this.view, { x, y });
-  }
-
-  measureView(): MeasureResult {
-    const rect = this.view.getBoundingClientRect();
-
-    return {
-      pageX: rect.left,
-      pageY: rect.top,
-      width: rect.width,
-      height: rect.height,
-    };
-  }
-
-  reset(): void {
-    this.eventManagers.forEach((manager: EventManager<unknown>) =>
-      manager.resetManager()
-    );
-  }
-
-  tryResetCursor() {
-    const config = this.gestureHandler.config;
-
-    if (
-      config.activeCursor &&
-      config.activeCursor !== 'auto' &&
-      this.gestureHandler.state === State.ACTIVE
-    ) {
-      this.view.style.cursor = 'auto';
-    }
-  }
-
-  private shouldDisableContextMenu(config: Config) {
-    return (
-      (config.enableContextMenu === undefined &&
-        this.gestureHandler.isButtonInConfig(MouseButton.RIGHT)) ||
-      config.enableContextMenu === false
-    );
-  }
-
-  private addContextMenuListeners(config: Config): void {
-    if (this.shouldDisableContextMenu(config)) {
-      this.view.addEventListener('contextmenu', this.disableContextMenu);
-    } else if (config.enableContextMenu) {
-      this.view.addEventListener('contextmenu', this.enableContextMenu);
-    }
-  }
-
-  private removeContextMenuListeners(config: Config): void {
-    if (this.shouldDisableContextMenu(config)) {
-      this.view.removeEventListener('contextmenu', this.disableContextMenu);
-    } else if (config.enableContextMenu) {
-      this.view.removeEventListener('contextmenu', this.enableContextMenu);
-    }
-  }
-
-  private disableContextMenu(this: void, e: MouseEvent): void {
-    e.preventDefault();
-  }
-
-  private enableContextMenu(this: void, e: MouseEvent): void {
-    e.stopPropagation();
-  }
-
-  private setUserSelect(isHandlerEnabled: boolean) {
-    const { userSelect } = this.gestureHandler.config;
-
-    this.view.style['userSelect'] = isHandlerEnabled
-      ? (userSelect ?? 'none')
-      : this.defaultViewStyles.userSelect;
-
-    this.view.style['webkitUserSelect'] = isHandlerEnabled
-      ? (userSelect ?? 'none')
-      : this.defaultViewStyles.userSelect;
-  }
-
-  private setTouchAction(isHandlerEnabled: boolean) {
-    const { touchAction } = this.gestureHandler.config;
-
-    this.view.style['touchAction'] = isHandlerEnabled
-      ? (touchAction ?? 'none')
-      : this.defaultViewStyles.touchAction;
-
-    // @ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = isHandlerEnabled
-      ? (touchAction ?? 'none')
-      : this.defaultViewStyles.touchAction;
-  }
-
-  private setContextMenu(isHandlerEnabled: boolean) {
-    const config = this.gestureHandler.config;
-
-    if (isHandlerEnabled) {
-      this.addContextMenuListeners(config);
-    } else {
-      this.removeContextMenuListeners(config);
-    }
-  }
-
-  onEnabledChange(enabled: boolean): void {
-    if (!this.isInitialized) {
-      return;
-    }
-
-    this.setUserSelect(enabled);
-    this.setTouchAction(enabled);
-    this.setContextMenu(enabled);
-
-    if (enabled) {
-      this.eventManagers.forEach((manager) => {
-        manager.registerListeners();
-      });
-    } else {
-      this.eventManagers.forEach((manager) => {
-        manager.unregisterListeners();
-      });
-    }
-  }
-
-  onBegin(): void {
-    // no-op for now
-  }
-
-  onActivate(): void {
-    const config = this.gestureHandler.config;
-
-    if (
-      (!this.view.style.cursor || this.view.style.cursor === 'auto') &&
-      config.activeCursor
-    ) {
-      this.view.style.cursor = config.activeCursor;
-    }
-  }
-
-  onEnd(): void {
-    this.tryResetCursor();
-  }
-
-  onCancel(): void {
-    this.tryResetCursor();
-  }
-
-  onFail(): void {
-    this.tryResetCursor();
-  }
-
-  public destroy(config: Config): void {
-    this.removeContextMenuListeners(config);
-
-    this.eventManagers.forEach((manager) => {
-      manager.unregisterListeners();
-    });
-  }
-
-  public get view() {
-    return this._view;
-  }
-  public set view(value: HTMLElement) {
-    this._view = value;
-  }
-}

package/src/web/tools/InteractionManager.ts

@@ -1,135 +0,0 @@
-import type IGestureHandler from '../handlers/IGestureHandler';
-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: IGestureHandler, config: Config) {
-    this.dropRelationsForHandlerWithTag(handler.handlerTag);
-
-    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.handlerTag, 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.handlerTag, 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.handlerTag, blocksHandlers);
-    }
-  }
-
-  public shouldWaitForHandlerFailure(
-    handler: IGestureHandler,
-    otherHandler: IGestureHandler
-  ): boolean {
-    const waitFor: number[] | undefined = this.waitForRelations.get(
-      handler.handlerTag
-    );
-
-    return (
-      waitFor?.find((tag: number) => {
-        return tag === otherHandler.handlerTag;
-      }) !== undefined
-    );
-  }
-
-  public shouldRecognizeSimultaneously(
-    handler: IGestureHandler,
-    otherHandler: IGestureHandler
-  ): boolean {
-    const simultaneousHandlers: number[] | undefined =
-      this.simultaneousRelations.get(handler.handlerTag);
-
-    return (
-      simultaneousHandlers?.find((tag: number) => {
-        return tag === otherHandler.handlerTag;
-      }) !== undefined
-    );
-  }
-
-  public shouldRequireHandlerToWaitForFailure(
-    handler: IGestureHandler,
-    otherHandler: IGestureHandler
-  ): boolean {
-    const waitFor: number[] | undefined = this.blocksHandlersRelations.get(
-      handler.handlerTag
-    );
-
-    return (
-      waitFor?.find((tag: number) => {
-        return tag === otherHandler.handlerTag;
-      }) !== undefined
-    );
-  }
-
-  public shouldHandlerBeCancelledBy(
-    _handler: IGestureHandler,
-    otherHandler: IGestureHandler
-  ): boolean {
-    // We check constructor name instead of using `instanceof` in order do avoid circular dependencies
-    const isNativeHandler =
-      otherHandler.constructor.name === 'NativeViewGestureHandler';
-    const isActive = otherHandler.active;
-    const isButton = otherHandler.isButton?.() === true;
-
-    return isNativeHandler && isActive && !isButton;
-  }
-
-  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 get instance(): InteractionManager {
-    if (!this._instance) {
-      this._instance = new InteractionManager();
-    }
-
-    return this._instance;
-  }
-}

package/src/web/tools/KeyboardEventManager.ts

@@ -1,133 +0,0 @@
-import { AdaptedEvent, EventTypes } from '../interfaces';
-import EventManager from './EventManager';
-import { PointerType } from '../../PointerType';
-
-export default class KeyboardEventManager extends EventManager<HTMLElement> {
-  private static activationKeys = ['Enter', ' '];
-  private static cancelationKeys = ['Tab'];
-  private isPressed = false;
-  private static registeredStaticListeners = false;
-  private static instances: Set<KeyboardEventManager> = new Set();
-
-  private static keyUpStaticCallback = (event: KeyboardEvent): void => {
-    // We need a global listener, as in some cases, keyUp event gets stop-propagated.
-    // Then, if we used only component-level listeners the gesture would never end,
-    // causing other gestues to fail.
-
-    if (this.activationKeys.indexOf(event.key) === -1) {
-      return;
-    }
-
-    this.instances.forEach((item) => {
-      item.onKeyUp(event);
-    });
-  };
-
-  private keyDownCallback = (event: KeyboardEvent): void => {
-    if (
-      KeyboardEventManager.cancelationKeys.indexOf(event.key) !== -1 &&
-      this.isPressed
-    ) {
-      this.dispatchEvent(event, EventTypes.CANCEL);
-      return;
-    }
-
-    if (KeyboardEventManager.activationKeys.indexOf(event.key) === -1) {
-      return;
-    }
-
-    this.dispatchEvent(event, EventTypes.DOWN);
-  };
-
-  private onKeyUp = (event: KeyboardEvent): void => {
-    if (
-      KeyboardEventManager.activationKeys.indexOf(event.key) === -1 ||
-      !this.isPressed
-    ) {
-      return;
-    }
-
-    this.dispatchEvent(event, EventTypes.UP);
-  };
-
-  private dispatchEvent(event: KeyboardEvent, eventType: EventTypes) {
-    if (!(event.target instanceof HTMLElement)) {
-      return;
-    }
-
-    const adaptedEvent = this.mapEvent(event, eventType);
-
-    switch (eventType) {
-      case EventTypes.UP:
-        this.isPressed = false;
-        this.onPointerUp(adaptedEvent);
-        break;
-      case EventTypes.DOWN:
-        this.isPressed = true;
-        this.onPointerDown(adaptedEvent);
-        break;
-      case EventTypes.CANCEL:
-        this.isPressed = false;
-        this.onPointerCancel(adaptedEvent);
-        break;
-    }
-  }
-
-  public registerListeners(): void {
-    this.view.addEventListener('keydown', this.keyDownCallback);
-
-    KeyboardEventManager.instances.add(this);
-
-    if (!KeyboardEventManager.registeredStaticListeners) {
-      KeyboardEventManager.registeredStaticListeners = true;
-      document.addEventListener(
-        'keyup',
-        KeyboardEventManager.keyUpStaticCallback,
-        { capture: true }
-      );
-    }
-  }
-
-  public unregisterListeners(): void {
-    this.view.removeEventListener('keydown', this.keyDownCallback);
-
-    KeyboardEventManager.instances.delete(this);
-
-    if (KeyboardEventManager.instances.size === 0) {
-      document.removeEventListener(
-        'keyup',
-        KeyboardEventManager.keyUpStaticCallback,
-        { capture: true }
-      );
-      KeyboardEventManager.registeredStaticListeners = false;
-    }
-  }
-
-  protected mapEvent(
-    event: KeyboardEvent,
-    eventType: EventTypes
-  ): AdaptedEvent {
-    const viewRect = (event.target as HTMLElement).getBoundingClientRect();
-
-    const viewportPosition = {
-      x: viewRect?.x + viewRect?.width / 2,
-      y: viewRect?.y + viewRect?.height / 2,
-    };
-
-    const relativePosition = {
-      x: viewRect?.width / 2,
-      y: viewRect?.height / 2,
-    };
-
-    return {
-      x: viewportPosition.x,
-      y: viewportPosition.y,
-      offsetX: relativePosition.x,
-      offsetY: relativePosition.y,
-      pointerId: 0,
-      eventType: eventType,
-      pointerType: PointerType.KEY,
-      time: event.timeStamp,
-    };
-  }
-}

package/src/web/tools/LeastSquareSolver.ts

@@ -1,182 +0,0 @@
-// 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;
-  }
-}