Add mouseButton prop

example/src/App.tsx

@@ -16,6 +16,7 @@
 import { TouchablesIndex, TouchableExample } from './release_tests/touchables';
 import Rows from './release_tests/rows';
 import Fling from './release_tests/fling';
+import Buttons from './release_tests/mouseButtons';
 import NestedTouchables from './release_tests/nestedTouchables';
 import NestedButtons from './release_tests/nestedButtons';
 import NestedGestureHandlerRootViewWithModal from './release_tests/nestedGHRootViewWithModal';
@@ -115,6 +116,7 @@
       { name: 'Fling', component: Fling },
       { name: 'Combo', component: ComboWithGHScroll },
       { name: 'Touchables', component: TouchablesIndex as React.ComponentType },
+      { name: 'MouseButtons', component: Buttons },
     ],
   },
   {
@@ -197,7 +199,7 @@
       renderSectionHeader={({ section: { sectionTitle } }) => (
         <Text style={styles.sectionTitle}>{sectionTitle}</Text>
       )}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
     />
   );
 }

example/src/release_tests/mouseButtons/index.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import {
+  Gesture,
+  GestureDetector,
+  GestureType,
+  MouseButton,
+  Directions,
+  ScrollView,
+} from 'react-native-gesture-handler';
+import { StyleSheet, View, Text } from 'react-native';
+
+type TestProps = {
+  name: string;
+  gestureHandlers: GestureType[];
+};
+
+function Test({ name, gestureHandlers }: TestProps) {
+  return (
+    <View style={[{ height: 300 }, styles.center]}>
+      <Text> {name} </Text>
+      <View style={{ flexDirection: 'row' }}>
+        <GestureDetector gesture={gestureHandlers[0]}>
+          <View style={styles.boxLeft} />
+        </GestureDetector>
+        <GestureDetector gesture={gestureHandlers[1]}>
+          <View style={styles.boxMiddle} />
+        </GestureDetector>
+        <GestureDetector gesture={gestureHandlers[2]}>
+          <View style={styles.boxRight} />
+        </GestureDetector>
+      </View>
+      <View style={{ flexDirection: 'row' }}>
+        <GestureDetector gesture={gestureHandlers[3]}>
+          <View style={styles.boxLeftRight} />
+        </GestureDetector>
+        <GestureDetector gesture={gestureHandlers[4]}>
+          <View style={styles.boxAll} />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+function TapTests() {
+  const leftTap = Gesture.Tap()
+    .mouseButton(MouseButton.LEFT)
+    .onEnd(() => console.log('Tap with left'));
+
+  const rightTap = Gesture.Tap()
+    .mouseButton(MouseButton.RIGHT)
+    .onEnd(() => console.log('Tap with right'));
+
+  const middleTap = Gesture.Tap()
+    .mouseButton(MouseButton.MIDDLE)
+    .onEnd(() => console.log('Tap with middle'));
+
+  const leftRightTap = Gesture.Tap()
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onEnd(() => console.log('Tap with left | right'));
+
+  const allTap = Gesture.Tap()
+    .mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
+    .onEnd(() => console.log('Tap with left | middle | right'));
+
+  const gestureHandlers = [leftTap, middleTap, rightTap, leftRightTap, allTap];
+
+  return <Test name={'Tap'} gestureHandlers={gestureHandlers} />;
+}
+
+function PanTests() {
+  const leftPan = Gesture.Pan()
+    .mouseButton(MouseButton.LEFT)
+    .onChange(() => console.log('Panning with left'));
+
+  const rightPan = Gesture.Pan()
+    .mouseButton(MouseButton.RIGHT)
+    .onChange(() => console.log('Panning with right'));
+
+  const middlePan = Gesture.Pan()
+    .mouseButton(MouseButton.MIDDLE)
+    .onChange(() => console.log('Panning with middle'));
+
+  const leftRightPan = Gesture.Pan()
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onChange(() => console.log('Panning with left | right'));
+
+  const allPan = Gesture.Pan()
+    .mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
+    .onChange(() => console.log('Panning with left | middle | right'));
+
+  const gestureHandlers = [leftPan, middlePan, rightPan, leftRightPan, allPan];
+
+  return <Test name={'Pan'} gestureHandlers={gestureHandlers} />;
+}
+
+function LongPressTests() {
+  const leftLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.LEFT)
+    .onStart(() => console.log('LongPress with left'));
+
+  const rightLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.RIGHT)
+    .onStart(() => console.log('LongPress with right'));
+
+  const middleLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.MIDDLE)
+    .onStart(() => console.log('LongPress with middle'));
+
+  const leftRightLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onStart(() => console.log('LongPress with left | right'));
+
+  const allLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
+    .onStart(() => console.log('LongPress with left | middle | right'));
+
+  const gestureHandlers = [
+    leftLongPress,
+    middleLongPress,
+    rightLongPress,
+    leftRightLongPress,
+    allLongPress,
+  ];
+
+  return <Test name={'LongPress'} gestureHandlers={gestureHandlers} />;
+}
+
+function FlingTests() {
+  const leftFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.LEFT)
+    .onStart(() => console.log('Fling with left'));
+
+  const rightFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.RIGHT)
+    .onStart(() => console.log('Fling with right'));
+
+  const middleFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.MIDDLE)
+    .onStart(() => console.log('Fling with middle'));
+
+  const leftRightFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onStart(() => console.log('Fling with left | right'));
+
+  const allFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
+    .onStart(() => console.log('Fling with left | middle | right'));
+
+  const gestureHandlers = [
+    leftFling,
+    middleFling,
+    rightFling,
+    leftRightFling,
+    allFling,
+  ];
+
+  return <Test name={'Fling'} gestureHandlers={gestureHandlers} />;
+}
+
+export default function Buttons() {
+  return (
+    <ScrollView style={{ flex: 1 }}>
+      <TapTests />
+      <PanTests />
+      <LongPressTests />
+      <FlingTests />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  boxLeft: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'darkmagenta',
+  },
+  boxRight: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'darkblue',
+  },
+  boxMiddle: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'darkgreen',
+  },
+  boxLeftRight: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'crimson',
+  },
+  boxAll: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'plum',
+  },
+});

src/handlers/gestureHandlerCommon.ts

@@ -12,6 +12,7 @@ import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MouseButton } from '../web/interfaces';
 
 const commonProps = [
   'id',
@@ -21,6 +22,7 @@ const commonProps = [
   'cancelsTouchesInView',
   'userSelect',
   'activeCursor',
+  'mouseButton',
 ] as const;
 
 const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
@@ -145,6 +147,7 @@ export type CommonGestureConfig = {
   hitSlop?: HitSlop;
   userSelect?: UserSelect;
   activeCursor?: ActiveCursor;
+  mouseButton?: MouseButton;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.

src/handlers/gestures/gesture.ts

@@ -17,6 +17,7 @@ import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
 import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
 import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
 import { isRemoteDebuggingEnabled } from '../../utils';
+import { MouseButton } from '../../web/interfaces';
 
 export type GestureType =
   | BaseGesture<Record<string, unknown>>
@@ -256,6 +257,11 @@ export abstract class BaseGesture<
     return this;
   }
 
+  mouseButton(mouseButton: MouseButton) {
+    this.config.mouseButton = mouseButton;
+    return this;
+  }
+
   runOnJS(runOnJS: boolean) {
     this.config.runOnJS = runOnJS;
     return this;

src/index.ts

@@ -2,6 +2,7 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
+export { MouseButton } from './web/interfaces';
 export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type {

src/web/handlers/FlingGestureHandler.ts

@@ -5,7 +5,7 @@ import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 const DEFAULT_MAX_DURATION_MS = 800;
-const DEFAULT_MIN_ACCEPTABLE_DELTA = 160;
+const DEFAULT_MIN_ACCEPTABLE_DELTA = 35;
 const DEFAULT_DIRECTION = Direction.RIGHT;
 const DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1;
 
@@ -51,6 +51,8 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   private tryEndFling(): boolean {
+    console.log(this.tracker.getLastAvgX(), this.startX);
+
     if (
       this.maxNumberOfPointersSimultaneously ===
         this.numberOfPointersRequired &&
@@ -83,6 +85,10 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.wasPressedButtonCorrect(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     this.keyPointer = event.pointerId;
 

src/web/handlers/GestureHandler.ts

@@ -10,6 +10,7 @@ import {
   PointerType,
   TouchEventType,
   EventTypes,
+  MouseButton,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
@@ -736,6 +737,14 @@ export default abstract class GestureHandler {
     return false;
   }
 
+  protected wasPressedButtonCorrect(mouseButton: MouseButton | undefined) {
+    return (
+      !mouseButton ||
+      (!this.config.mouseButton && mouseButton === MouseButton.LEFT) ||
+      (this.config.mouseButton && mouseButton & this.config.mouseButton)
+    );
+  }
+
   protected resetConfig(): void {}
 
   //

src/web/handlers/LongPressGestureHandler.ts

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

src/web/handlers/PanGestureHandler.ts

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

src/web/handlers/TapGestureHandler.ts

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