react-native-gesture-handler 2.16.0-rc.0 → 2.16.1

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -1,5 +1,5 @@
 import { findNodeHandle } from 'react-native';
-import type GestureHandler from '../handlers/GestureHandler';
+import type IGestureHandler from '../handlers/IGestureHandler';
 import {
   GestureHandlerDelegate,
   MeasureResult,
@@ -9,20 +9,21 @@ import TouchEventManager from './TouchEventManager';
 import { State } from '../../State';
 import { isPointerInBounds } from '../utils';
 import EventManager from './EventManager';
-import { Config, MouseButton } from '../interfaces';
+import { Config } from '../interfaces';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
 
 export class GestureHandlerWebDelegate
-  implements GestureHandlerDelegate<HTMLElement>
+  implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
 {
   private view!: HTMLElement;
-  private gestureHandler!: GestureHandler;
+  private gestureHandler!: IGestureHandler;
   private eventManagers: EventManager<unknown>[] = [];
 
   getView(): HTMLElement {
     return this.view;
   }
 
-  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()}`
@@ -32,10 +33,6 @@ export class GestureHandlerWebDelegate
     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();
 
     this.addContextMenuListeners(config);
@@ -48,6 +45,10 @@ export class GestureHandlerWebDelegate
       this.view.style['userSelect'] = config.userSelect;
     }
 
+    this.view.style['touchAction'] = config.touchAction ?? 'none';
+    //@ts-ignore This one disables default events on Safari
+    this.view.style['WebkitTouchCallout'] = 'none';
+
     this.eventManagers.push(new PointerEventManager(this.view));
     this.eventManagers.push(new TouchEventManager(this.view));
 
@@ -150,5 +151,9 @@ export class GestureHandlerWebDelegate
 
   public destroy(config: Config): void {
     this.removeContextMenuListeners(config);
+
+    this.eventManagers.forEach((manager) => {
+      manager.unregisterListeners();
+    });
   }
 }

package/src/web/tools/InteractionManager.ts

@@ -1,4 +1,5 @@
-import GestureHandler from '../handlers/GestureHandler';
+import type IGestureHandler from '../handlers/IGestureHandler';
+import { State } from '../../State';
 import { Config, Handler } from '../interfaces';
 
 export default class InteractionManager {
@@ -11,7 +12,7 @@ export default class InteractionManager {
   // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
   private constructor() {}
 
-  public configureInteractions(handler: GestureHandler, config: Config) {
+  public configureInteractions(handler: IGestureHandler, config: Config) {
     this.dropRelationsForHandlerWithTag(handler.getTag());
 
     if (config.waitFor) {
@@ -57,8 +58,8 @@ export default class InteractionManager {
   }
 
   public shouldWaitForHandlerFailure(
-    handler: GestureHandler,
-    otherHandler: GestureHandler
+    handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
     const waitFor: number[] | undefined = this.waitForRelations.get(
       handler.getTag()
@@ -72,8 +73,8 @@ export default class InteractionManager {
   }
 
   public shouldRecognizeSimultaneously(
-    handler: GestureHandler,
-    otherHandler: GestureHandler
+    handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
     const simultaneousHandlers: number[] | undefined =
       this.simultaneousRelations.get(handler.getTag());
@@ -86,8 +87,8 @@ export default class InteractionManager {
   }
 
   public shouldRequireHandlerToWaitForFailure(
-    handler: GestureHandler,
-    otherHandler: GestureHandler
+    handler: IGestureHandler,
+    otherHandler: IGestureHandler
   ): boolean {
     const waitFor: number[] | undefined = this.blocksHandlersRelations.get(
       handler.getTag()
@@ -101,11 +102,16 @@ export default class InteractionManager {
   }
 
   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.getState() === State.ACTIVE;
+    const isButton = otherHandler.isButton?.() === true;
+
+    return isNativeHandler && isActive && !isButton;
   }
 
   public dropRelationsForHandlerWithTag(handlerTag: number): void {

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}`);

package/src/web/tools/PointerEventManager.ts

@@ -1,5 +1,6 @@
-import { AdaptedEvent, EventTypes, MouseButton } from '../interfaces';
 import EventManager from './EventManager';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import { AdaptedEvent, EventTypes, Point } from '../interfaces';
 import { PointerTypeMapping, isPointerInBounds } from '../utils';
 import { PointerType } from '../../PointerType';
 
@@ -12,6 +13,7 @@ const PointerTypes = {
 export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
   private readonly mouseButtonsMapper = new Map<number, MouseButton>();
+  private lastPosition: Point;
 
   constructor(view: HTMLElement) {
     super(view);
@@ -21,200 +23,213 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     this.mouseButtonsMapper.set(2, MouseButton.RIGHT);
     this.mouseButtonsMapper.set(3, MouseButton.BUTTON_4);
     this.mouseButtonsMapper.set(4, MouseButton.BUTTON_5);
+
+    this.lastPosition = {
+      x: -Infinity,
+      y: -Infinity,
+    };
   }
 
-  public setListeners(): void {
-    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-      if (
-        !isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })
-      ) {
-        return;
-      }
+  private pointerDownCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.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 (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
+      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);
+    }
+  };
+
+  private pointerUpCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.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 (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
+      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);
+    }
+  };
+
+  private pointerMoveCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
+
+    // Stylus triggers `pointermove` event when it detects changes in pressure. Since it is very sensitive to those changes,
+    // it constantly sends events, even though there was no change in position. To fix that we check whether
+    // pointer has actually moved and if not, we do not send event.
+    if (
+      event.pointerType === PointerTypes.Stylus &&
+      event.x === this.lastPosition.x &&
+      event.y === this.lastPosition.y
+    ) {
+      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) &&
+      !POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)
+    ) {
+      target.setPointerCapture(event.pointerId);
+    }
+
+    const inBounds: boolean = isPointerInBounds(this.view, {
+      x: adaptedEvent.x,
+      y: adaptedEvent.y,
+    });
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
-      const target = event.target as HTMLElement;
+    const pointerIndex: number = this.pointersInBounds.indexOf(
+      adaptedEvent.pointerId
+    );
 
-      if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
-        target.setPointerCapture(adaptedEvent.pointerId);
+    if (inBounds) {
+      if (pointerIndex < 0) {
+        adaptedEvent.eventType = EventTypes.ENTER;
+        this.onPointerEnter(adaptedEvent);
+        this.markAsInBounds(adaptedEvent.pointerId);
+      } else {
+        this.onPointerMove(adaptedEvent);
       }
-
-      this.markAsInBounds(adaptedEvent.pointerId);
-      this.trackedPointers.add(adaptedEvent.pointerId);
-
-      if (++this.activePointersCounter > 1) {
-        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
-        this.onPointerAdd(adaptedEvent);
+    } else {
+      if (pointerIndex >= 0) {
+        adaptedEvent.eventType = EventTypes.LEAVE;
+        this.onPointerLeave(adaptedEvent);
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
       } else {
-        this.onPointerDown(adaptedEvent);
+        this.onPointerOutOfBounds(adaptedEvent);
       }
-    });
+    }
 
-    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
+    this.lastPosition.x = event.x;
+    this.lastPosition.y = event.y;
+  };
 
-      // 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;
-      }
+  private pointerCancelCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
-      const target = event.target as HTMLElement;
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.CANCEL);
 
-      if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
-        target.releasePointerCapture(adaptedEvent.pointerId);
-      }
+    this.onPointerCancel(adaptedEvent);
+    this.markAsOutOfBounds(adaptedEvent.pointerId);
+    this.activePointersCounter = 0;
+    this.trackedPointers.clear();
+  };
 
-      this.markAsOutOfBounds(adaptedEvent.pointerId);
-      this.trackedPointers.delete(adaptedEvent.pointerId);
+  private pointerEnterCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
 
-      if (--this.activePointersCounter > 0) {
-        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
-        this.onPointerRemove(adaptedEvent);
-      } else {
-        this.onPointerUp(adaptedEvent);
-      }
-    });
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
 
-    const lastPosition: { x: number | null; y: number | null } = {
-      x: null,
-      y: null,
-    };
+    this.onPointerMoveOver(adaptedEvent);
+  };
 
-    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
+  private pointerLeaveCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
 
-      // Stylus triggers `pointermove` event when it detects changes in pressure. Since it is very sensitive to those changes,
-      // it constantly sends events, even though there was no change in position. To fix that we check whether
-      // pointer has actually moved and if not, we do not send event.
-      if (
-        event.pointerType === PointerTypes.Stylus &&
-        event.x === lastPosition.x &&
-        event.y === lastPosition.y
-      ) {
-        return;
-      }
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
-      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) &&
-        !POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)
-      ) {
-        target.setPointerCapture(event.pointerId);
-      }
+    this.onPointerMoveOut(adaptedEvent);
+  };
 
-      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);
-        }
-      }
-
-      lastPosition.x = event.x;
-      lastPosition.y = event.y;
-    });
-
-    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(
-        event,
-        EventTypes.CANCEL
-      );
+  private lostPointerCaptureCallback = (event: PointerEvent) => {
+    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.markAsOutOfBounds(adaptedEvent.pointerId);
+
       this.activePointersCounter = 0;
       this.trackedPointers.clear();
-    });
+    }
+  };
+
+  public registerListeners(): void {
+    this.view.addEventListener('pointerdown', this.pointerDownCallback);
+    this.view.addEventListener('pointerup', this.pointerUpCallback);
+    this.view.addEventListener('pointermove', this.pointerMoveCallback);
+    this.view.addEventListener('pointercancel', this.pointerCancelCallback);
 
     // 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 === PointerTypes.Touch) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
-
-      this.onPointerMoveOver(adaptedEvent);
-    });
-
-    this.view.addEventListener('pointerleave', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
-
-      this.onPointerMoveOut(adaptedEvent);
-    });
-
+    this.view.addEventListener('pointerenter', this.pointerEnterCallback);
+    this.view.addEventListener('pointerleave', this.pointerLeaveCallback);
     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();
-        }
-      }
+      this.lostPointerCaptureCallback
+    );
+  }
+
+  public unregisterListeners(): void {
+    this.view.removeEventListener('pointerdown', this.pointerDownCallback);
+    this.view.removeEventListener('pointerup', this.pointerUpCallback);
+    this.view.removeEventListener('pointermove', this.pointerMoveCallback);
+    this.view.removeEventListener('pointercancel', this.pointerCancelCallback);
+    this.view.removeEventListener('pointerenter', this.pointerEnterCallback);
+    this.view.removeEventListener('pointerleave', this.pointerLeaveCallback);
+    this.view.removeEventListener(
+      'lostpointercapture',
+      this.lostPointerCaptureCallback
     );
   }