@amazon-devices/react-native-gesture-handler 2.0.1758683737

package/src/web/tools/EventManager.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+
+export default abstract class EventManager<T> {
+  protected readonly view: T;
+  protected pointersInBounds: number[] = [];
+  protected activePointersCounter: number;
+
+  constructor(view: T) {
+    this.view = view;
+    this.activePointersCounter = 0;
+  }
+
+  public abstract setListeners(): void;
+  protected abstract mapEvent(
+    event: Event,
+    eventType: EventTypes,
+    index?: number,
+    touchEventType?: TouchEventType
+  ): AdaptedEvent;
+
+  protected onPointerDown(_event: AdaptedEvent): void {}
+  protected onPointerAdd(_event: AdaptedEvent): void {}
+  protected onPointerUp(_event: AdaptedEvent): void {}
+  protected onPointerRemove(_event: AdaptedEvent): void {}
+  protected onPointerMove(_event: AdaptedEvent): void {}
+  protected onPointerLeave(_event: AdaptedEvent): void {} // called only when pointer is pressed (or touching)
+  protected onPointerEnter(_event: AdaptedEvent): void {} // called only when pointer is pressed (or touching)
+  protected onPointerCancel(_event: AdaptedEvent): void {
+    // When pointer cancel is triggered and there are more pointers on the view, only one pointer is cancelled
+    // Because we want all pointers to be cancelled by that event, we are doing it manually by reseting handler and changing activePointersCounter to 0
+    // Events that correspond to removing the pointer (pointerup, touchend) have condition, that they don't perform any action when activePointersCounter
+    // is equal to 0. This prevents counter from going to negative values, when pointers are removed from view after one of them has been cancelled
+  }
+  protected onPointerOutOfBounds(_event: AdaptedEvent): void {}
+  protected onPointerMoveOver(_event: AdaptedEvent): void {}
+  protected onPointerMoveOut(_event: AdaptedEvent): void {}
+
+  public setOnPointerDown(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerDown = callback;
+  }
+  public setOnPointerAdd(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerAdd = callback;
+  }
+  public setOnPointerUp(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerUp = callback;
+  }
+  public setOnPointerRemove(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerRemove = callback;
+  }
+  public setOnPointerMove(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerMove = callback;
+  }
+  public setOnPointerLeave(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerLeave = callback;
+  }
+  public setOnPointerEnter(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerEnter = callback;
+  }
+  public setOnPointerCancel(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerCancel = callback;
+  }
+  public setOnPointerOutOfBounds(
+    callback: (event: AdaptedEvent) => void
+  ): void {
+    this.onPointerOutOfBounds = callback;
+  }
+  public setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerMoveOver = callback;
+  }
+  public setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void {
+    this.onPointerMoveOut = callback;
+  }
+
+  protected markAsInBounds(pointerId: number): void {
+    if (this.pointersInBounds.indexOf(pointerId) >= 0) {
+      return;
+    }
+
+    this.pointersInBounds.push(pointerId);
+  }
+
+  protected markAsOutOfBounds(pointerId: number): void {
+    const index: number = this.pointersInBounds.indexOf(pointerId);
+
+    if (index < 0) {
+      return;
+    }
+
+    this.pointersInBounds.splice(index, 1);
+  }
+
+  public resetManager(): void {
+    // Reseting activePointersCounter is necessary to make gestures such as pinch work properly
+    // There are gestures that end when there is still one active pointer (like pinch/rotation)
+    // When these gestures end, they are reset, but they still receive events from pointer that is active
+    // This causes trouble, since only onPointerDown registers gesture in orchestrator, and while gestures receive
+    // Events from active pointer after they finished, next pointerdown event will be registered as additional pointer, not the first one
+    // This casues trouble like gestures getting stuck in END state, even though they should have gone to UNDETERMINED
+
+    this.activePointersCounter = 0;
+    this.pointersInBounds = [];
+  }
+}

package/src/web/tools/GestureHandlerDelegate.ts

@@ -0,0 +1,23 @@
+import type GestureHandler from '../handlers/GestureHandler';
+
+export interface MeasureResult {
+  pageX: number;
+  pageY: number;
+  width: number;
+  height: number;
+}
+
+export interface GestureHandlerDelegate<T> {
+  getView(): T;
+
+  init(viewRef: number, handler: GestureHandler): void;
+  isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
+  measureView(): MeasureResult;
+  reset(): void;
+
+  onBegin(): void;
+  onActivate(): void;
+  onEnd(): void;
+  onCancel(): void;
+  onFail(): void;
+}

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -0,0 +1,398 @@
+import { State } from '../../State';
+import { PointerType } 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);
+  }
+
+  public removeHandlerFromOrchestrator(handler: GestureHandler): void {
+    this.gestureHandlers.splice(this.gestureHandlers.indexOf(handler), 1);
+    this.awaitingHandlers.splice(this.awaitingHandlers.indexOf(handler), 1);
+    this.handlersToCancel.splice(this.handlersToCancel.indexOf(handler), 1);
+  }
+
+  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): void {
+    if (this.hasOtherHandlerToWaitFor(handler)) {
+      this.addAwaitingHandler(handler);
+    } else if (
+      handler.getState() !== State.CANCELLED &&
+      handler.getState() !== State.FAILED
+    ) {
+      if (this.shouldActivate(handler)) {
+        this.makeActive(handler);
+      } else {
+        switch (handler.getState()) {
+          case State.ACTIVE:
+            handler.fail();
+            break;
+          case State.BEGAN:
+            handler.cancel();
+        }
+      }
+    }
+  }
+
+  private shouldActivate(handler: GestureHandler): boolean {
+    for (const otherHandler of this.gestureHandlers) {
+      if (this.shouldHandlerBeCancelledBy(handler, otherHandler)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  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,
+    sendIfDisabled?: boolean
+  ): void {
+    if (!handler.isEnabled() && !sendIfDisabled) {
+      return;
+    }
+
+    this.handlingChangeSemaphore += 1;
+
+    if (this.isFinished(newState)) {
+      this.awaitingHandlers.forEach((otherHandler) => {
+        if (this.shouldHandlerWaitForOther(otherHandler, handler)) {
+          if (newState === State.END) {
+            otherHandler?.cancel();
+            if (otherHandler.getState() === State.END) {
+              // Handle edge case, where discrete gestures end immediately after activation thus
+              // their state is set to END and when the gesture they are waiting for activates they
+              // should be cancelled, however `cancel` was never sent as gestures were already in the END state.
+              // Send synthetic BEGAN -> CANCELLED to properly handle JS logic
+              otherHandler.sendEvent(State.CANCELLED, State.BEGAN);
+            }
+            otherHandler?.setAwaiting(false);
+          } else {
+            this.tryActivate(otherHandler);
+          }
+        }
+      });
+    }
+
+    if (newState === State.ACTIVE) {
+      this.tryActivate(handler);
+    } else if (oldState === State.ACTIVE || oldState === State.END) {
+      if (handler.isActive()) {
+        handler.sendEvent(newState, oldState);
+      } else if (
+        oldState === State.ACTIVE &&
+        (newState === State.CANCELLED || newState === State.FAILED)
+      ) {
+        handler.sendEvent(newState, State.BEGAN);
+      }
+    } else if (
+      oldState !== State.UNDETERMINED ||
+      newState !== State.CANCELLED
+    ) {
+      handler.sendEvent(newState, oldState);
+    }
+
+    this.handlingChangeSemaphore -= 1;
+
+    this.scheduleFinishedHandlersCleanup();
+
+    if (this.awaitingHandlers.indexOf(handler) < 0) {
+      this.cleanupAwaitingHandlers(handler);
+    }
+  }
+
+  private makeActive(handler: GestureHandler): 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();
+    }
+    this.awaitingHandlers.forEach((otherHandler) => {
+      if (this.shouldHandlerBeCancelledBy(otherHandler, handler)) {
+        otherHandler?.cancel();
+        otherHandler?.setAwaiting(true);
+      }
+    });
+
+    handler.sendEvent(State.ACTIVE, State.BEGAN);
+
+    if (currentState !== State.ACTIVE) {
+      handler.sendEvent(State.END, State.ACTIVE);
+      if (currentState !== State.END) {
+        handler.sendEvent(State.UNDETERMINED, State.END);
+      }
+    }
+
+    if (handler.isAwaiting()) {
+      handler.setAwaiting(false);
+      for (let i = 0; i < this.awaitingHandlers.length; ++i) {
+        if (this.awaitingHandlers[i] === handler) {
+          this.awaitingHandlers.splice(i, 1);
+        }
+      }
+    }
+
+    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 {
+    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);
+    }
+
+    const handlerPointers: number[] = handler.getTrackedPointersID();
+    const otherPointers: number[] = otherHandler.getTrackedPointersID();
+
+    if (
+      !PointerTracker.shareCommonPointers(handlerPointers, otherPointers) &&
+      handler.getDelegate().getView() !== otherHandler.getDelegate().getView()
+    ) {
+      return this.checkOverlap(handler, 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.getDelegate().isPointerInBounds({ x: handlerX, y: handlerY }) &&
+        otherHandler
+          .getDelegate()
+          .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.getDelegate().isPointerInBounds({ x: otherX, y: otherY }) &&
+        otherHandler.getDelegate().isPointerInBounds({ x: otherX, y: otherY })
+      ) {
+        overlap = true;
+      }
+    });
+
+    return overlap;
+  }
+
+  private isFinished(state: State): boolean {
+    return (
+      state === State.END || state === State.FAILED || state === State.CANCELLED
+    );
+  }
+
+  // This function is called when handler receives touchdown event
+  // If handler is using mouse or pen as a pointer and any handler receives touch event,
+  // mouse/pen event dissappears - it doesn't send onPointerCancel nor onPointerUp (and others)
+  // This became a problem because handler was left at active state without any signal to end or fail
+  // To handle this, when new touch event is received, we loop through active handlers and check which type of
+  // pointer they're using. If there are any handler with mouse/pen as a pointer, we cancel them
+  public cancelMouseAndPenGestures(currentHandler: GestureHandler): void {
+    this.gestureHandlers.forEach((handler: GestureHandler) => {
+      if (
+        handler.getPointerType() !== PointerType.MOUSE &&
+        handler.getPointerType() !== PointerType.PEN
+      ) {
+        return;
+      }
+
+      if (handler !== currentHandler) {
+        handler.cancel();
+      } else {
+        // Handler that received touch event should have its pointer tracker reset
+        // This allows handler to smoothly change from mouse/pen to touch
+        // The drawback is, that when we try to use mouse/pen one more time, it doesn't send onPointerDown at the first time
+        // so it is required to click two times to get handler to work
+        //
+        // However, handler will receive manually created onPointerEnter that is triggered in EventManager in onPointerMove method.
+        // There may be possibility to use that fact to make handler respond properly to first mouse click
+        handler.getTracker().resetTracker();
+      }
+    });
+  }
+
+  public static getInstance(): GestureHandlerOrchestrator {
+    if (!GestureHandlerOrchestrator.instance) {
+      GestureHandlerOrchestrator.instance = new GestureHandlerOrchestrator();
+    }
+
+    return GestureHandlerOrchestrator.instance;
+  }
+}

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -0,0 +1,115 @@
+import { findNodeHandle } from 'react-native';
+import type GestureHandler from '../handlers/GestureHandler';
+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';
+
+export class GestureHandlerWebDelegate
+  implements GestureHandlerDelegate<HTMLElement>
+{
+  private view!: HTMLElement;
+  private gestureHandler!: GestureHandler;
+  private eventManagers: EventManager<unknown>[] = [];
+
+  getView(): HTMLElement {
+    return this.view;
+  }
+
+  init(viewRef: number, handler: GestureHandler): void {
+    if (!viewRef) {
+      throw new Error(
+        `Cannot find HTML Element for handler ${handler.getTag()}`
+      );
+    }
+
+    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';
+
+    const config = handler.getConfig();
+
+    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.eventManagers.push(new PointerEventManager(this.view));
+    this.eventManagers.push(new TouchEventManager(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.getConfig();
+
+    if (
+      config.activeCursor &&
+      config.activeCursor !== 'auto' &&
+      this.gestureHandler.getState() === State.ACTIVE
+    ) {
+      this.view.style.cursor = 'auto';
+    }
+  }
+
+  onBegin(): void {
+    // no-op for now
+  }
+
+  onActivate(): void {
+    const config = this.gestureHandler.getConfig();
+
+    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();
+  }
+}