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

package/src/web/tools/PointerEventManager.ts

@@ -1,13 +1,13 @@
-import {
-  AdaptedEvent,
-  EventTypes,
-  MouseButton,
-  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>();
@@ -25,7 +25,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
 
   public setListeners(): void {
     this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
+      if (event.pointerType === PointerTypes.Touch) {
         return;
       }
       if (
@@ -53,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;
       }
 
@@ -83,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;
       }
 
@@ -136,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;
       }
 
@@ -160,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;
       }
 
@@ -170,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;
       }
 
@@ -207,7 +226,8 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       offsetY: event.offsetY,
       pointerId: event.pointerId,
       eventType: eventType,
-      pointerType: event.pointerType as PointerType,
+      pointerType:
+        PointerTypeMapping.get(event.pointerType) ?? PointerType.OTHER,
       button: this.mouseButtonsMapper.get(event.button),
       time: event.timeStamp,
     };

package/src/web/tools/TouchEventManager.ts

@@ -1,11 +1,7 @@
-import {
-  AdaptedEvent,
-  EventTypes,
-  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 {

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],
+]);