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

package/src/specs/NativeRNGestureHandlerModule.ts

@@ -0,0 +1,26 @@
+import { TurboModuleRegistry, TurboModule } from 'react-native';
+import { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Spec extends TurboModule {
+  handleSetJSResponder: (tag: Double, blockNativeResponder: boolean) => void;
+  handleClearJSResponder: () => void;
+  createGestureHandler: (
+    handlerName: string,
+    handlerTag: Double,
+    // Record<> is not supported by codegen
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    config: Object
+  ) => void;
+  attachGestureHandler: (
+    handlerTag: Double,
+    newView: Double,
+    actionType: Double
+  ) => void;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  updateGestureHandler: (handlerTag: Double, newConfig: Object) => void;
+  dropGestureHandler: (handlerTag: Double) => void;
+  install: () => boolean;
+  flushOperations: () => void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNGestureHandlerModule');

package/src/web/handlers/FlingGestureHandler.ts

@@ -83,6 +83,10 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     this.keyPointer = event.pointerId;
 

package/src/web/handlers/GestureHandler.ts

@@ -7,15 +7,16 @@ import {
   ResultEvent,
   PointerData,
   ResultTouchEvent,
-  PointerType,
   TouchEventType,
   EventTypes,
+  MouseButton,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import { PointerType } from '../../PointerType';
 
 export default abstract class GestureHandler {
   private lastSentState: State | null = null;
@@ -37,7 +38,7 @@ export default abstract class GestureHandler {
   protected awaiting = false;
   protected active = false;
   protected shouldResetProgress = false;
-  protected pointerType: PointerType = PointerType.NONE;
+  protected pointerType: PointerType = PointerType.MOUSE;
 
   protected delegate: GestureHandlerDelegate<unknown>;
 
@@ -117,6 +118,10 @@ export default abstract class GestureHandler {
     );
 
     this.onStateChange(newState, oldState);
+
+    if (!this.enabled && this.isFinished()) {
+      this.currentState = State.UNDETERMINED;
+    }
   }
 
   protected onStateChange(_newState: State, _oldState: State): void {}
@@ -416,6 +421,7 @@ export default abstract class GestureHandler {
         handlerTag: this.handlerTag,
         target: this.viewRef,
         oldState: newState !== oldState ? oldState : undefined,
+        pointerType: this.pointerType,
       },
       timeStamp: Date.now(),
     };
@@ -736,8 +742,20 @@ export default abstract class GestureHandler {
     return false;
   }
 
+  public isButtonInConfig(mouseButton: MouseButton | undefined) {
+    return (
+      !mouseButton ||
+      (!this.config.mouseButton && mouseButton === MouseButton.LEFT) ||
+      (this.config.mouseButton && mouseButton & this.config.mouseButton)
+    );
+  }
+
   protected resetConfig(): void {}
 
+  public onDestroy(): void {
+    this.delegate.destroy(this.config);
+  }
+
   //
   // Getters and setters
   //

package/src/web/handlers/LongPressGestureHandler.ts

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { State } from '../../State';
 import { AdaptedEvent, Config } from '../interfaces';
 
@@ -22,11 +21,11 @@ export default class LongPressGestureHandler extends GestureHandler {
   private activationTimeout: number | undefined;
 
   public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
-
-    if (Platform.OS === 'web') {
-      (this.delegate.getView() as HTMLElement).oncontextmenu = () => false;
+    if (this.config.enableContextMenu === undefined) {
+      this.config.enableContextMenu = false;
     }
+
+    super.init(ref, propsRef);
   }
 
   protected transformNativeEvent() {
@@ -59,6 +58,10 @@ export default class LongPressGestureHandler extends GestureHandler {
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.tryBegin(event);

package/src/web/handlers/PanGestureHandler.ts

@@ -211,6 +211,10 @@ export default class PanGestureHandler extends GestureHandler {
 
   //EventsHandling
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
 

package/src/web/handlers/TapGestureHandler.ts

@@ -105,6 +105,10 @@ export default class TapGestureHandler extends GestureHandler {
 
   //Handling Events
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
 

package/src/web/interfaces.ts

@@ -1,6 +1,7 @@
 import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
+import { PointerType } from '../PointerType';
 
 export interface HitSlop {
   left?: number;
@@ -37,6 +38,8 @@ export interface Config extends Record<string, ConfigArgs> {
   shouldCancelWhenOutside?: boolean;
   userSelect?: UserSelect;
   activeCursor?: ActiveCursor;
+  mouseButton?: MouseButton;
+  enableContextMenu?: boolean;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;
@@ -77,6 +80,7 @@ interface NativeEvent extends Record<string, NativeEventArgs> {
   handlerTag: number;
   target: number;
   oldState?: State;
+  pointerType: PointerType;
 }
 
 export interface PointerData {
@@ -122,22 +126,20 @@ export interface AdaptedEvent {
   pointerId: number;
   eventType: EventTypes;
   pointerType: PointerType;
-  buttons: number;
   time: number;
+  button?: MouseButton;
   allTouches?: TouchList;
   changedTouches?: TouchList;
   touchEventType?: TouchEventType;
 }
 
-export enum MouseButtons {
-  NONE,
-  LEFT,
-  RIGHT,
-  LEFT_RIGHT,
-  SCROLL,
-  SCROLL_LEFT,
-  SCROLL_RIGHT,
-  SCROLL_LEFT_RIGHT,
+export enum MouseButton {
+  LEFT = 1,
+  RIGHT = 2,
+  MIDDLE = 4,
+  BUTTON_4 = 8,
+  BUTTON_5 = 16,
+  ALL = 31,
 }
 
 export enum EventTypes {
@@ -158,10 +160,3 @@ export enum TouchEventType {
   UP,
   CANCELLED,
 }
-
-export enum PointerType {
-  NONE = 'none',
-  MOUSE = 'mouse',
-  TOUCH = 'touch',
-  PEN = 'pen',
-}

package/src/web/tools/GestureHandlerDelegate.ts

@@ -1,4 +1,5 @@
 import type GestureHandler from '../handlers/GestureHandler';
+import { Config } from '../interfaces';
 
 export interface MeasureResult {
   pageX: number;
@@ -20,4 +21,6 @@ export interface GestureHandlerDelegate<T> {
   onEnd(): void;
   onCancel(): void;
   onFail(): void;
+
+  destroy(config: Config): void;
 }

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -1,5 +1,5 @@
+import { PointerType } from '../../PointerType';
 import { State } from '../../State';
-import { PointerType } from '../interfaces';
 
 import GestureHandler from '../handlers/GestureHandler';
 import PointerTracker from './PointerTracker';
@@ -359,7 +359,7 @@ export default class GestureHandlerOrchestrator {
     this.gestureHandlers.forEach((handler: GestureHandler) => {
       if (
         handler.getPointerType() !== PointerType.MOUSE &&
-        handler.getPointerType() !== PointerType.PEN
+        handler.getPointerType() !== PointerType.STYLUS
       ) {
         return;
       }

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -9,6 +9,7 @@ import TouchEventManager from './TouchEventManager';
 import { State } from '../../State';
 import { isPointerInBounds } from '../utils';
 import EventManager from './EventManager';
+import { Config, MouseButton } from '../interfaces';
 
 export class GestureHandlerWebDelegate
   implements GestureHandlerDelegate<HTMLElement>
@@ -37,6 +38,8 @@ export class GestureHandlerWebDelegate
 
     const config = handler.getConfig();
 
+    this.addContextMenuListeners(config);
+
     if (!config.userSelect) {
       this.view.style['webkitUserSelect'] = 'none';
       this.view.style['userSelect'] = 'none';
@@ -86,6 +89,38 @@ export class GestureHandlerWebDelegate
     }
   }
 
+  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();
+  }
+
   onBegin(): void {
     // no-op for now
   }
@@ -112,4 +147,8 @@ export class GestureHandlerWebDelegate
   onFail(): void {
     this.tryResetCursor();
   }
+
+  public destroy(config: Config): void {
+    this.removeContextMenuListeners(config);
+  }
 }

package/src/web/tools/NodeManager.ts

@@ -21,7 +21,9 @@ 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;
@@ -33,6 +35,8 @@ export default abstract class NodeManager {
       return;
     }
 
+    this.gestures[handlerTag].onDestroy();
+
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete this.gestures[handlerTag];
   }

package/src/web/tools/PointerEventManager.ts

@@ -1,15 +1,31 @@
-import { AdaptedEvent, EventTypes, PointerType } from '../interfaces';
+import { AdaptedEvent, EventTypes, MouseButton } from '../interfaces';
 import EventManager from './EventManager';
-import { isPointerInBounds } from '../utils';
+import { PointerTypeMapping, isPointerInBounds } from '../utils';
+import { PointerType } from '../../PointerType';
 
 const POINTER_CAPTURE_EXCLUDE_LIST = new Set<string>(['SELECT', 'INPUT']);
+const PointerTypes = {
+  Touch: 'touch',
+  Stylus: 'pen',
+};
 
 export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
+  private readonly mouseButtonsMapper = new Map<number, MouseButton>();
+
+  constructor(view: HTMLElement) {
+    super(view);
+
+    this.mouseButtonsMapper.set(0, MouseButton.LEFT);
+    this.mouseButtonsMapper.set(1, MouseButton.MIDDLE);
+    this.mouseButtonsMapper.set(2, MouseButton.RIGHT);
+    this.mouseButtonsMapper.set(3, MouseButton.BUTTON_4);
+    this.mouseButtonsMapper.set(4, MouseButton.BUTTON_5);
+  }
 
   public setListeners(): void {
     this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      if (event.pointerType === PointerTypes.Touch) {
         return;
       }
       if (
@@ -37,7 +53,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     });
 
     this.view.addEventListener('pointerup', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      if (event.pointerType === PointerTypes.Touch) {
         return;
       }
 
@@ -67,8 +83,24 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       }
     });
 
+    const lastPosition: { x: number | null; y: number | null } = {
+      x: null,
+      y: null,
+    };
+
     this.view.addEventListener('pointermove', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      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;
       }
 
@@ -120,10 +152,13 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
           this.onPointerOutOfBounds(adaptedEvent);
         }
       }
+
+      lastPosition.x = event.x;
+      lastPosition.y = event.y;
     });
 
     this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      if (event.pointerType === PointerTypes.Touch) {
         return;
       }
 
@@ -144,7 +179,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     // mapping them to onPointerMoveOver and onPointerMoveOut respectively.
 
     this.view.addEventListener('pointerenter', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      if (event.pointerType === PointerTypes.Touch) {
         return;
       }
 
@@ -154,7 +189,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     });
 
     this.view.addEventListener('pointerleave', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      if (event.pointerType === PointerTypes.Touch) {
         return;
       }
 
@@ -191,8 +226,9 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       offsetY: event.offsetY,
       pointerId: event.pointerId,
       eventType: eventType,
-      pointerType: event.pointerType as PointerType,
-      buttons: event.buttons,
+      pointerType:
+        PointerTypeMapping.get(event.pointerType) ?? PointerType.OTHER,
+      button: this.mouseButtonsMapper.get(event.button),
       time: event.timeStamp,
     };
   }

package/src/web/tools/TouchEventManager.ts

@@ -1,12 +1,7 @@
-import {
-  AdaptedEvent,
-  EventTypes,
-  MouseButtons,
-  PointerType,
-  TouchEventType,
-} from '../interfaces';
+import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 import EventManager from './EventManager';
 import { isPointerInBounds } from '../utils';
+import { PointerType } from '../../PointerType';
 
 export default class TouchEventManager extends EventManager<HTMLElement> {
   public setListeners(): void {
@@ -157,7 +152,6 @@ export default class TouchEventManager extends EventManager<HTMLElement> {
       pointerId: event.changedTouches[index].identifier,
       eventType: eventType,
       pointerType: PointerType.TOUCH,
-      buttons: MouseButtons.NONE,
       time: event.timeStamp,
       allTouches: event.touches,
       changedTouches: event.changedTouches,

package/src/web/utils.ts

@@ -1,3 +1,5 @@
+import { PointerType } from '../PointerType';
+
 export function isPointerInBounds(
   view: HTMLElement,
   { x, y }: { x: number; y: number }
@@ -6,3 +8,10 @@ export function isPointerInBounds(
 
   return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
 }
+
+export const PointerTypeMapping = new Map<string, PointerType>([
+  ['mouse', PointerType.MOUSE],
+  ['touch', PointerType.TOUCH],
+  ['pen', PointerType.STYLUS],
+  ['none', PointerType.OTHER],
+]);

package/ios/Handlers/RNPinchHandler.m

@@ -1,95 +0,0 @@
-
-
-//
-//  RNPinchHandler.m
-//  RNGestureHandler
-//
-//  Created by Krzysztof Magiera on 12/10/2017.
-//  Copyright © 2017 Software Mansion. All rights reserved.
-//
-
-#import "RNPinchHandler.h"
-
-#if !TARGET_OS_TV
-@interface RNBetterPinchRecognizer : UIPinchGestureRecognizer
-
-- (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler;
-
-@end
-
-@implementation RNBetterPinchRecognizer {
-  __weak RNGestureHandler *_gestureHandler;
-}
-
-- (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler
-{
-  if ((self = [super initWithTarget:self action:@selector(handleGesture:)])) {
-    _gestureHandler = gestureHandler;
-  }
-  return self;
-}
-
-- (void)handleGesture:(UIGestureRecognizer *)recognizer
-{
-  if (self.state == UIGestureRecognizerStateBegan) {
-    self.scale = 1;
-  }
-  [_gestureHandler handleGesture:recognizer];
-}
-
-- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesBegan:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesBegan:touches withEvent:event];
-}
-
-- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesMoved:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesMoved:touches withEvent:event];
-}
-
-- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesEnded:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesEnded:touches withEvent:event];
-}
-
-- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesCancelled:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesCancelled:touches withEvent:event];
-}
-
-- (void)reset
-{
-  [_gestureHandler.pointerTracker reset];
-  [super reset];
-}
-
-@end
-#endif
-
-@implementation RNPinchGestureHandler
-
-- (instancetype)initWithTag:(NSNumber *)tag
-{
-  if ((self = [super initWithTag:tag])) {
-#if !TARGET_OS_TV
-    _recognizer = [[RNBetterPinchRecognizer alloc] initWithGestureHandler:self];
-#endif
-  }
-  return self;
-}
-
-#if !TARGET_OS_TV
-- (RNGestureHandlerEventExtraData *)eventExtraData:(UIPinchGestureRecognizer *)recognizer
-{
-  return [RNGestureHandlerEventExtraData forPinch:recognizer.scale
-                                   withFocalPoint:[recognizer locationInView:recognizer.view]
-                                     withVelocity:recognizer.velocity
-                              withNumberOfTouches:recognizer.numberOfTouches];
-}
-#endif
-
-@end

package/ios/Handlers/RNRotationHandler.m

@@ -1,93 +0,0 @@
-//
-//  RNRotationHandler.m
-//  RNGestureHandler
-//
-//  Created by Krzysztof Magiera on 12/10/2017.
-//  Copyright © 2017 Software Mansion. All rights reserved.
-//
-
-#import "RNRotationHandler.h"
-
-#if !TARGET_OS_TV
-@interface RNBetterRotationRecognizer : UIRotationGestureRecognizer
-
-- (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler;
-
-@end
-
-@implementation RNBetterRotationRecognizer {
-  __weak RNGestureHandler *_gestureHandler;
-}
-
-- (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler
-{
-  if ((self = [super initWithTarget:self action:@selector(handleGesture:)])) {
-    _gestureHandler = gestureHandler;
-  }
-  return self;
-}
-
-- (void)handleGesture:(UIGestureRecognizer *)recognizer
-{
-  if (self.state == UIGestureRecognizerStateBegan) {
-    self.rotation = 0;
-  }
-  [_gestureHandler handleGesture:recognizer];
-}
-
-- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesBegan:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesBegan:touches withEvent:event];
-}
-
-- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesMoved:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesMoved:touches withEvent:event];
-}
-
-- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesEnded:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesEnded:touches withEvent:event];
-}
-
-- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesCancelled:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesCancelled:touches withEvent:event];
-}
-
-- (void)reset
-{
-  [_gestureHandler.pointerTracker reset];
-  [super reset];
-}
-
-@end
-#endif
-
-@implementation RNRotationGestureHandler
-
-- (instancetype)initWithTag:(NSNumber *)tag
-{
-  if ((self = [super initWithTag:tag])) {
-#if !TARGET_OS_TV
-    _recognizer = [[RNBetterRotationRecognizer alloc] initWithGestureHandler:self];
-#endif
-  }
-  return self;
-}
-
-#if !TARGET_OS_TV
-- (RNGestureHandlerEventExtraData *)eventExtraData:(UIRotationGestureRecognizer *)recognizer
-{
-  return [RNGestureHandlerEventExtraData forRotation:recognizer.rotation
-                                     withAnchorPoint:[recognizer locationInView:recognizer.view]
-                                        withVelocity:recognizer.velocity
-                                 withNumberOfTouches:recognizer.numberOfTouches];
-}
-#endif
-
-@end

package/ios/RNGestureHandlerModule.h

@@ -1,7 +0,0 @@
-#import <React/RCTBridgeModule.h>
-#import <React/RCTEventEmitter.h>
-#import <React/RCTUIManager.h>
-
-@interface RNGestureHandlerModule : RCTEventEmitter <RCTBridgeModule>
-
-@end