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

package/lib/module/web/tools/GestureHandlerOrchestrator.js

@@ -1,261 +0,0 @@
-"use strict";
-
-import { PointerType } from '../../PointerType';
-import { State } from '../../State';
-import PointerTracker from './PointerTracker';
-export default class GestureHandlerOrchestrator {
-  gestureHandlers = [];
-  awaitingHandlers = [];
-  awaitingHandlersTags = new Set();
-  handlingChangeSemaphore = 0;
-  activationIndex = 0;
-
-  // Private beacuse of Singleton
-  // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
-  constructor() {}
-  scheduleFinishedHandlersCleanup() {
-    if (this.handlingChangeSemaphore === 0) {
-      this.cleanupFinishedHandlers();
-    }
-  }
-  cleanHandler(handler) {
-    handler.reset();
-    handler.active = false;
-    handler.awaiting = false;
-    handler.activationIndex = Number.MAX_VALUE;
-  }
-  removeHandlerFromOrchestrator(handler) {
-    const indexInGestureHandlers = this.gestureHandlers.indexOf(handler);
-    const indexInAwaitingHandlers = this.awaitingHandlers.indexOf(handler);
-    if (indexInGestureHandlers >= 0) {
-      this.gestureHandlers.splice(indexInGestureHandlers, 1);
-    }
-    if (indexInAwaitingHandlers >= 0) {
-      this.awaitingHandlers.splice(indexInAwaitingHandlers, 1);
-      this.awaitingHandlersTags.delete(handler.handlerTag);
-    }
-  }
-  cleanupFinishedHandlers() {
-    const handlersToRemove = new Set();
-    for (let i = this.gestureHandlers.length - 1; i >= 0; --i) {
-      const handler = this.gestureHandlers[i];
-      if (this.isFinished(handler.state) && !handler.awaiting) {
-        this.cleanHandler(handler);
-        handlersToRemove.add(handler);
-      }
-    }
-    this.gestureHandlers = this.gestureHandlers.filter(handler => !handlersToRemove.has(handler));
-  }
-  hasOtherHandlerToWaitFor(handler) {
-    const hasToWaitFor = otherHandler => {
-      return !this.isFinished(otherHandler.state) && this.shouldHandlerWaitForOther(handler, otherHandler);
-    };
-    return this.gestureHandlers.some(hasToWaitFor);
-  }
-  shouldBeCancelledByFinishedHandler(handler) {
-    const shouldBeCancelled = otherHandler => {
-      return this.shouldHandlerWaitForOther(handler, otherHandler) && otherHandler.state === State.END;
-    };
-    return this.gestureHandlers.some(shouldBeCancelled);
-  }
-  tryActivate(handler) {
-    if (this.shouldBeCancelledByFinishedHandler(handler)) {
-      handler.cancel();
-      return;
-    }
-    if (this.hasOtherHandlerToWaitFor(handler)) {
-      this.addAwaitingHandler(handler);
-      return;
-    }
-    const handlerState = handler.state;
-    if (handlerState === State.CANCELLED || handlerState === State.FAILED) {
-      return;
-    }
-    if (this.shouldActivate(handler)) {
-      this.makeActive(handler);
-      return;
-    }
-    if (handlerState === State.ACTIVE) {
-      handler.fail();
-      return;
-    }
-    if (handlerState === State.BEGAN) {
-      handler.cancel();
-    }
-  }
-  shouldActivate(handler) {
-    const shouldBeCancelledBy = otherHandler => {
-      return this.shouldHandlerBeCancelledBy(handler, otherHandler);
-    };
-    return !this.gestureHandlers.some(shouldBeCancelledBy);
-  }
-  cleanupAwaitingHandlers(handler) {
-    const shouldWait = otherHandler => {
-      return !otherHandler.awaiting && this.shouldHandlerWaitForOther(otherHandler, handler);
-    };
-    for (const otherHandler of this.awaitingHandlers) {
-      if (shouldWait(otherHandler)) {
-        this.cleanHandler(otherHandler);
-        this.awaitingHandlersTags.delete(otherHandler.handlerTag);
-      }
-    }
-    this.awaitingHandlers = this.awaitingHandlers.filter(otherHandler => this.awaitingHandlersTags.has(otherHandler.handlerTag));
-  }
-  onHandlerStateChange(handler, newState, oldState, sendIfDisabled) {
-    if (!handler.enabled && !sendIfDisabled) {
-      return;
-    }
-    this.handlingChangeSemaphore += 1;
-    if (this.isFinished(newState)) {
-      for (const otherHandler of this.awaitingHandlers) {
-        if (!this.shouldHandlerWaitForOther(otherHandler, handler) || !this.awaitingHandlersTags.has(otherHandler.handlerTag)) {
-          continue;
-        }
-        if (newState !== State.END) {
-          this.tryActivate(otherHandler);
-          continue;
-        }
-        otherHandler.cancel();
-        if (otherHandler.state === 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.awaiting = false;
-      }
-    }
-    if (newState === State.ACTIVE) {
-      this.tryActivate(handler);
-    } else if (oldState === State.ACTIVE || oldState === State.END) {
-      if (handler.active) {
-        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.includes(handler)) {
-      this.cleanupAwaitingHandlers(handler);
-    }
-  }
-  makeActive(handler) {
-    const currentState = handler.state;
-    handler.active = true;
-    handler.shouldResetProgress = true;
-    handler.activationIndex = this.activationIndex++;
-    for (let i = this.gestureHandlers.length - 1; i >= 0; --i) {
-      if (this.shouldHandlerBeCancelledBy(this.gestureHandlers[i], handler)) {
-        this.gestureHandlers[i].cancel();
-      }
-    }
-    for (const otherHandler of this.awaitingHandlers) {
-      if (this.shouldHandlerBeCancelledBy(otherHandler, handler)) {
-        otherHandler.awaiting = false;
-      }
-    }
-    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.awaiting) {
-      return;
-    }
-    handler.awaiting = false;
-    this.awaitingHandlers = this.awaitingHandlers.filter(otherHandler => otherHandler !== handler);
-  }
-  addAwaitingHandler(handler) {
-    if (this.awaitingHandlers.includes(handler)) {
-      return;
-    }
-    this.awaitingHandlers.push(handler);
-    this.awaitingHandlersTags.add(handler.handlerTag);
-    handler.awaiting = true;
-    handler.activationIndex = this.activationIndex++;
-  }
-  recordHandlerIfNotPresent(handler) {
-    if (this.gestureHandlers.includes(handler)) {
-      return;
-    }
-    this.gestureHandlers.push(handler);
-    handler.active = false;
-    handler.awaiting = false;
-    handler.activationIndex = Number.MAX_SAFE_INTEGER;
-  }
-  shouldHandlerWaitForOther(handler, otherHandler) {
-    return handler !== otherHandler && (handler.shouldWaitForHandlerFailure(otherHandler) || otherHandler.shouldRequireToWaitForFailure(handler));
-  }
-  canRunSimultaneously(gh1, gh2) {
-    return gh1 === gh2 || gh1.shouldRecognizeSimultaneously(gh2) || gh2.shouldRecognizeSimultaneously(gh1);
-  }
-  shouldHandlerBeCancelledBy(handler, otherHandler) {
-    if (this.canRunSimultaneously(handler, otherHandler)) {
-      return false;
-    }
-    if (handler.awaiting || handler.state === State.ACTIVE) {
-      return handler.shouldBeCancelledByOther(otherHandler);
-    }
-    const handlerPointers = handler.getTrackedPointersID();
-    const otherPointers = otherHandler.getTrackedPointersID();
-    if (!PointerTracker.shareCommonPointers(handlerPointers, otherPointers) && handler.delegate.view !== otherHandler.delegate.view) {
-      return this.checkOverlap(handler, otherHandler);
-    }
-    return true;
-  }
-  checkOverlap(handler, otherHandler) {
-    // 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 isPointerWithinBothBounds = pointer => {
-      const point = handler.tracker.getLastAbsoluteCoords(pointer);
-      return point && handler.delegate.isPointerInBounds(point) && otherHandler.delegate.isPointerInBounds(point);
-    };
-    return handler.getTrackedPointersID().some(isPointerWithinBothBounds);
-  }
-  isFinished(state) {
-    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
-  cancelMouseAndPenGestures(currentHandler) {
-    this.gestureHandlers.forEach(handler => {
-      if (handler.pointerType !== PointerType.MOUSE && handler.pointerType !== PointerType.STYLUS) {
-        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.tracker.resetTracker();
-      }
-    });
-  }
-  static get instance() {
-    if (!GestureHandlerOrchestrator._instance) {
-      GestureHandlerOrchestrator._instance = new GestureHandlerOrchestrator();
-    }
-    return GestureHandlerOrchestrator._instance;
-  }
-}
-//# sourceMappingURL=GestureHandlerOrchestrator.js.map

package/lib/module/web/tools/GestureHandlerWebDelegate.js

@@ -1,159 +0,0 @@
-"use strict";
-
-import findNodeHandle from '../../findNodeHandle';
-import PointerEventManager from './PointerEventManager';
-import { State } from '../../State';
-import { isPointerInBounds } from '../utils';
-import { MouseButton } from '../../handlers/gestureHandlerCommon';
-import KeyboardEventManager from './KeyboardEventManager';
-import WheelEventManager from './WheelEventManager';
-export class GestureHandlerWebDelegate {
-  isInitialized = false;
-  eventManagers = [];
-  defaultViewStyles = {
-    userSelect: '',
-    touchAction: ''
-  };
-  init(viewRef, handler) {
-    if (!viewRef) {
-      throw new Error(`Cannot find HTML Element for handler ${handler.handlerTag}`);
-    }
-    this.isInitialized = true;
-    this.gestureHandler = handler;
-    this.view = findNodeHandle(viewRef);
-    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
-  }) {
-    return isPointerInBounds(this.view, {
-      x,
-      y
-    });
-  }
-  measureView() {
-    const rect = this.view.getBoundingClientRect();
-    return {
-      pageX: rect.left,
-      pageY: rect.top,
-      width: rect.width,
-      height: rect.height
-    };
-  }
-  reset() {
-    this.eventManagers.forEach(manager => manager.resetManager());
-  }
-  tryResetCursor() {
-    const config = this.gestureHandler.config;
-    if (config.activeCursor && config.activeCursor !== 'auto' && this.gestureHandler.state === State.ACTIVE) {
-      this.view.style.cursor = 'auto';
-    }
-  }
-  shouldDisableContextMenu(config) {
-    return config.enableContextMenu === undefined && this.gestureHandler.isButtonInConfig(MouseButton.RIGHT) || config.enableContextMenu === false;
-  }
-  addContextMenuListeners(config) {
-    if (this.shouldDisableContextMenu(config)) {
-      this.view.addEventListener('contextmenu', this.disableContextMenu);
-    } else if (config.enableContextMenu) {
-      this.view.addEventListener('contextmenu', this.enableContextMenu);
-    }
-  }
-  removeContextMenuListeners(config) {
-    if (this.shouldDisableContextMenu(config)) {
-      this.view.removeEventListener('contextmenu', this.disableContextMenu);
-    } else if (config.enableContextMenu) {
-      this.view.removeEventListener('contextmenu', this.enableContextMenu);
-    }
-  }
-  disableContextMenu(e) {
-    e.preventDefault();
-  }
-  enableContextMenu(e) {
-    e.stopPropagation();
-  }
-  setUserSelect(isHandlerEnabled) {
-    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;
-  }
-  setTouchAction(isHandlerEnabled) {
-    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;
-  }
-  setContextMenu(isHandlerEnabled) {
-    const config = this.gestureHandler.config;
-    if (isHandlerEnabled) {
-      this.addContextMenuListeners(config);
-    } else {
-      this.removeContextMenuListeners(config);
-    }
-  }
-  onEnabledChange(enabled) {
-    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() {
-    // no-op for now
-  }
-  onActivate() {
-    const config = this.gestureHandler.config;
-    if ((!this.view.style.cursor || this.view.style.cursor === 'auto') && config.activeCursor) {
-      this.view.style.cursor = config.activeCursor;
-    }
-  }
-  onEnd() {
-    this.tryResetCursor();
-  }
-  onCancel() {
-    this.tryResetCursor();
-  }
-  onFail() {
-    this.tryResetCursor();
-  }
-  destroy(config) {
-    this.removeContextMenuListeners(config);
-    this.eventManagers.forEach(manager => {
-      manager.unregisterListeners();
-    });
-  }
-  get view() {
-    return this._view;
-  }
-  set view(value) {
-    this._view = value;
-  }
-}
-//# sourceMappingURL=GestureHandlerWebDelegate.js.map

package/lib/module/web/tools/InteractionManager.js

@@ -1,91 +0,0 @@
-"use strict";
-
-export default class InteractionManager {
-  waitForRelations = new Map();
-  simultaneousRelations = new Map();
-  blocksHandlersRelations = new Map();
-
-  // Private becaues of singleton
-  // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
-  constructor() {}
-  configureInteractions(handler, config) {
-    this.dropRelationsForHandlerWithTag(handler.handlerTag);
-    if (config.waitFor) {
-      const waitFor = [];
-      config.waitFor.forEach(otherHandler => {
-        // 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 = [];
-      config.simultaneousHandlers.forEach(otherHandler => {
-        if (typeof otherHandler === 'number') {
-          simultaneousHandlers.push(otherHandler);
-        } else {
-          simultaneousHandlers.push(otherHandler.handlerTag);
-        }
-      });
-      this.simultaneousRelations.set(handler.handlerTag, simultaneousHandlers);
-    }
-    if (config.blocksHandlers) {
-      const blocksHandlers = [];
-      config.blocksHandlers.forEach(otherHandler => {
-        if (typeof otherHandler === 'number') {
-          blocksHandlers.push(otherHandler);
-        } else {
-          blocksHandlers.push(otherHandler.handlerTag);
-        }
-      });
-      this.blocksHandlersRelations.set(handler.handlerTag, blocksHandlers);
-    }
-  }
-  shouldWaitForHandlerFailure(handler, otherHandler) {
-    const waitFor = this.waitForRelations.get(handler.handlerTag);
-    return waitFor?.find(tag => {
-      return tag === otherHandler.handlerTag;
-    }) !== undefined;
-  }
-  shouldRecognizeSimultaneously(handler, otherHandler) {
-    const simultaneousHandlers = this.simultaneousRelations.get(handler.handlerTag);
-    return simultaneousHandlers?.find(tag => {
-      return tag === otherHandler.handlerTag;
-    }) !== undefined;
-  }
-  shouldRequireHandlerToWaitForFailure(handler, otherHandler) {
-    const waitFor = this.blocksHandlersRelations.get(handler.handlerTag);
-    return waitFor?.find(tag => {
-      return tag === otherHandler.handlerTag;
-    }) !== undefined;
-  }
-  shouldHandlerBeCancelledBy(_handler, otherHandler) {
-    // 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;
-  }
-  dropRelationsForHandlerWithTag(handlerTag) {
-    this.waitForRelations.delete(handlerTag);
-    this.simultaneousRelations.delete(handlerTag);
-    this.blocksHandlersRelations.delete(handlerTag);
-  }
-  reset() {
-    this.waitForRelations.clear();
-    this.simultaneousRelations.clear();
-    this.blocksHandlersRelations.clear();
-  }
-  static get instance() {
-    if (!this._instance) {
-      this._instance = new InteractionManager();
-    }
-    return this._instance;
-  }
-}
-//# sourceMappingURL=InteractionManager.js.map

package/lib/module/web/tools/KeyboardEventManager.js

@@ -1,102 +0,0 @@
-"use strict";
-
-import { EventTypes } from '../interfaces';
-import EventManager from './EventManager';
-import { PointerType } from '../../PointerType';
-export default class KeyboardEventManager extends EventManager {
-  static activationKeys = ['Enter', ' '];
-  static cancelationKeys = ['Tab'];
-  isPressed = false;
-  static registeredStaticListeners = false;
-  static instances = new Set();
-  static keyUpStaticCallback = event => {
-    // 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);
-    });
-  };
-  keyDownCallback = event => {
-    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);
-  };
-  onKeyUp = event => {
-    if (KeyboardEventManager.activationKeys.indexOf(event.key) === -1 || !this.isPressed) {
-      return;
-    }
-    this.dispatchEvent(event, EventTypes.UP);
-  };
-  dispatchEvent(event, eventType) {
-    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;
-    }
-  }
-  registerListeners() {
-    this.view.addEventListener('keydown', this.keyDownCallback);
-    KeyboardEventManager.instances.add(this);
-    if (!KeyboardEventManager.registeredStaticListeners) {
-      KeyboardEventManager.registeredStaticListeners = true;
-      document.addEventListener('keyup', KeyboardEventManager.keyUpStaticCallback, {
-        capture: true
-      });
-    }
-  }
-  unregisterListeners() {
-    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;
-    }
-  }
-  mapEvent(event, eventType) {
-    const viewRect = event.target.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
-    };
-  }
-}
-//# sourceMappingURL=KeyboardEventManager.js.map