@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0-rn-83

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -1,52 +1,62 @@
-import { findNodeHandle } from 'react-native';
-import type GestureHandler from '../handlers/GestureHandler';
+import findNodeHandle from '../../findNodeHandle';
+import type IGestureHandler from '../handlers/IGestureHandler';
 import {
   GestureHandlerDelegate,
   MeasureResult,
 } from './GestureHandlerDelegate';
 import PointerEventManager from './PointerEventManager';
-import TouchEventManager from './TouchEventManager';
 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>
+  implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
 {
-  private view!: HTMLElement;
-  private gestureHandler!: GestureHandler;
-  private eventManagers: EventManager<unknown>[] = [];
+  private isInitialized = false;
+  private _view!: HTMLElement;
 
-  getView(): HTMLElement {
-    return this.view;
-  }
+  private gestureHandler!: IGestureHandler;
+  private eventManagers: EventManager<unknown>[] = [];
+  private defaultViewStyles: DefaultViewStyles = {
+    userSelect: '',
+    touchAction: '',
+  };
 
-  init(viewRef: number, handler: GestureHandler): void {
+  init(viewRef: number, handler: IGestureHandler): void {
     if (!viewRef) {
       throw new Error(
-        `Cannot find HTML Element for handler ${handler.getTag()}`
+        `Cannot find HTML Element for handler ${handler.handlerTag}`
       );
     }
 
+    this.isInitialized = true;
+
     this.gestureHandler = handler;
     this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
 
-    this.view.style['touchAction'] = 'none';
-    //@ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = 'none';
+    this.defaultViewStyles = {
+      userSelect: this.view.style.userSelect,
+      touchAction: this.view.style.touchAction,
+    };
 
-    const config = handler.getConfig();
+    const config = handler.config;
 
-    if (!config.userSelect) {
-      this.view.style['webkitUserSelect'] = 'none';
-      this.view.style['userSelect'] = 'none';
-    } else {
-      this.view.style['webkitUserSelect'] = config.userSelect;
-      this.view.style['userSelect'] = config.userSelect;
-    }
+    this.setUserSelect(config.enabled);
+    this.setTouchAction(config.enabled);
+    this.setContextMenu(config.enabled);
 
     this.eventManagers.push(new PointerEventManager(this.view));
-    this.eventManagers.push(new TouchEventManager(this.view));
+    this.eventManagers.push(new KeyboardEventManager(this.view));
+    this.eventManagers.push(new WheelEventManager(this.view));
 
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)
@@ -75,23 +85,110 @@ export class GestureHandlerWebDelegate
   }
 
   tryResetCursor() {
-    const config = this.gestureHandler.getConfig();
+    const config = this.gestureHandler.config;
 
     if (
       config.activeCursor &&
       config.activeCursor !== 'auto' &&
-      this.gestureHandler.getState() === State.ACTIVE
+      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.getConfig();
+    const config = this.gestureHandler.config;
 
     if (
       (!this.view.style.cursor || this.view.style.cursor === 'auto') &&
@@ -112,4 +209,19 @@ export class GestureHandlerWebDelegate
   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,17 +1,18 @@
-import GestureHandler from '../handlers/GestureHandler';
+import type IGestureHandler from '../handlers/IGestureHandler';
 import { Config, Handler } from '../interfaces';
 
 export default class InteractionManager {
-  private static instance: 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());
+  public configureInteractions(handler: IGestureHandler, config: Config) {
+    this.dropRelationsForHandlerWithTag(handler.handlerTag);
 
     if (config.waitFor) {
       const waitFor: number[] = [];
@@ -25,7 +26,7 @@ export default class InteractionManager {
         }
       });
 
-      this.waitForRelations.set(handler.getTag(), waitFor);
+      this.waitForRelations.set(handler.handlerTag, waitFor);
     }
 
     if (config.simultaneousHandlers) {
@@ -38,86 +39,97 @@ export default class InteractionManager {
         }
       });
 
-      this.simultaneousRelations.set(handler.getTag(), simultaneousHandlers);
+      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: GestureHandler,
-    otherHandler: GestureHandler
+    handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
     const waitFor: number[] | undefined = this.waitForRelations.get(
-      handler.getTag()
+      handler.handlerTag
     );
-    if (!waitFor) {
-      return false;
-    }
-
-    let shouldWait = false;
-
-    waitFor.forEach((tag: number): void => {
-      if (tag === otherHandler.getTag()) {
-        shouldWait = true;
-        return; //Returns from callback
-      }
-    });
 
-    return shouldWait;
+    return (
+      waitFor?.find((tag: number) => {
+        return tag === otherHandler.handlerTag;
+      }) !== undefined
+    );
   }
 
   public shouldRecognizeSimultaneously(
-    handler: GestureHandler,
-    otherHandler: GestureHandler
+    handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
     const simultaneousHandlers: number[] | undefined =
-      this.simultaneousRelations.get(handler.getTag());
-    if (!simultaneousHandlers) {
-      return false;
-    }
-
-    let shouldRecognizeSimultaneously = false;
+      this.simultaneousRelations.get(handler.handlerTag);
 
-    simultaneousHandlers.forEach((tag: number): void => {
-      if (tag === otherHandler.getTag()) {
-        shouldRecognizeSimultaneously = true;
-        return;
-      }
-    });
-
-    return shouldRecognizeSimultaneously;
+    return (
+      simultaneousHandlers?.find((tag: number) => {
+        return tag === otherHandler.handlerTag;
+      }) !== undefined
+    );
   }
 
   public shouldRequireHandlerToWaitForFailure(
-    _handler: GestureHandler,
-    _otherHandler: GestureHandler
+    handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
-    //TODO: Implement logic
-    return false;
+    const waitFor: number[] | undefined = this.blocksHandlersRelations.get(
+      handler.handlerTag
+    );
+
+    return (
+      waitFor?.find((tag: number) => {
+        return tag === otherHandler.handlerTag;
+      }) !== undefined
+    );
   }
 
   public shouldHandlerBeCancelledBy(
-    _handler: GestureHandler,
-    _otherHandler: GestureHandler
+    _handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
-    //TODO: Implement logic
-    return false;
+    // 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 getInstance(): InteractionManager {
-    if (!this.instance) {
-      this.instance = new InteractionManager();
+  public static get instance(): InteractionManager {
+    if (!this._instance) {
+      this._instance = new InteractionManager();
     }
 
-    return this.instance;
+    return this._instance;
   }
 }

package/src/web/tools/KeyboardEventManager.ts

@@ -0,0 +1,133 @@
+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

@@ -69,17 +69,17 @@ class Matrix {
   }
 }
 
-/// An nth degree polynomial fit to a dataset.
+// 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.
+  // 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.
+  // 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);
   }
@@ -87,27 +87,27 @@ class PolynomialFit {
 
 const precisionErrorTolerance = 1e-10;
 
-/// Uses the least-squares algorithm to fit a polynomial to a set of data.
+// 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.
+  // The x-coordinates of each data point.
   private x: number[];
-  /// The y-coordinates of each data point.
+  // The y-coordinates of each data point.
   private y: number[];
-  /// The weight to use for each data point.
+  // 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.
+  // 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.
+  // 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.

package/src/web/tools/NodeManager.ts

@@ -1,5 +1,6 @@
 import { ValueOf } from '../../typeUtils';
-import { Gestures } from '../../RNGestureHandlerModule.web';
+import { Gestures } from '../Gestures';
+import type IGestureHandler from '../handlers/IGestureHandler';
 
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export default abstract class NodeManager {
@@ -8,9 +9,9 @@ export default abstract class NodeManager {
     InstanceType<ValueOf<typeof Gestures>>
   > = {};
 
-  public static getHandler(tag: number) {
+  public static getHandler(tag: number): IGestureHandler {
     if (tag in this.gestures) {
-      return this.gestures[tag];
+      return this.gestures[tag] as IGestureHandler;
     }
 
     throw new Error(`No handler for tag ${tag}`);
@@ -21,11 +22,13 @@ export default abstract class NodeManager {
     handler: InstanceType<ValueOf<typeof Gestures>>
   ): void {
     if (handlerTag in this.gestures) {
-      throw new Error(`Handler with tag ${handlerTag} already exists`);
+      throw new Error(
+        `Handler with tag ${handlerTag} already exists. Please ensure that no Gesture instance is used across multiple GestureDetectors.`
+      );
     }
 
     this.gestures[handlerTag] = handler;
-    this.gestures[handlerTag].setTag(handlerTag);
+    this.gestures[handlerTag].handlerTag = handlerTag;
   }
 
   public static dropGestureHandler(handlerTag: number): void {
@@ -33,11 +36,13 @@ export default abstract class NodeManager {
       return;
     }
 
+    this.gestures[handlerTag].onDestroy();
+
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete this.gestures[handlerTag];
   }
 
-  public static getNodes() {
+  public static get nodes() {
     return { ...this.gestures };
   }
 }