react-native-gesture-handler 2.19.0 → 2.20.0

package/src/handlers/GestureHandlerEventPayload.ts

@@ -1,3 +1,5 @@
+import { StylusData } from '../web/interfaces';
+
 export type FlingGestureHandlerEventPayload = {
   x: number;
   y: number;
@@ -120,6 +122,11 @@ export type PanGestureHandlerEventPayload = {
    * value is expressed in point units per second.
    */
   velocityY: number;
+
+  /**
+   * Object containing additional stylus data.
+   */
+  stylusData: StylusData | undefined;
 };
 
 export type PinchGestureHandlerEventPayload = {
@@ -182,3 +189,38 @@ export type RotationGestureHandlerEventPayload = {
    */
   velocity: number;
 };
+
+export type HoverGestureHandlerEventPayload = {
+  /**
+   * X coordinate of the current position of the pointer relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  x: number;
+
+  /**
+   * Y coordinate of the current position of the pointer relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  y: number;
+
+  /**
+   * X coordinate of the current position of the pointer relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `x` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteX: number;
+
+  /**
+   * Y coordinate of the current position of the pointer relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `y` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteY: number;
+
+  /**
+   * Object containing additional stylus data.
+   */
+  stylusData: StylusData | undefined;
+};

package/src/handlers/createHandler.tsx

@@ -529,6 +529,7 @@ export default function createHandler<
             ? {
                 handlerType: name,
                 handlerTag: this.handlerTag,
+                enabled: this.props.enabled,
               }
             : {}),
           testID: this.props.testID ?? child.props.testID,

package/src/handlers/gestures/gesture.ts

@@ -18,6 +18,7 @@ import type {
   RotationGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
   NativeViewGestureHandlerPayload,
+  HoverGestureHandlerEventPayload,
 } from '../GestureHandlerEventPayload';
 import { isRemoteDebuggingEnabled } from '../../utils';
 
@@ -31,7 +32,8 @@ export type GestureType =
   | BaseGesture<PinchGestureHandlerEventPayload>
   | BaseGesture<FlingGestureHandlerEventPayload>
   | BaseGesture<ForceTouchGestureHandlerEventPayload>
-  | BaseGesture<NativeViewGestureHandlerPayload>;
+  | BaseGesture<NativeViewGestureHandlerPayload>
+  | BaseGesture<HoverGestureHandlerEventPayload>;
 
 export type GestureRef =
   | number

package/src/handlers/gestures/hoverGesture.ts

@@ -1,12 +1,6 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
-
-export type HoverGestureHandlerEventPayload = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
+import type { HoverGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 
 export type HoverGestureChangeEventPayload = {
   changeX: number;

package/src/jestUtils/jestUtils.ts

@@ -138,6 +138,7 @@ const handlersDefaultEvents: DefaultEventsMapping = {
     velocityX: 3,
     velocityY: 0,
     numberOfPointers: 1,
+    stylusData: undefined,
   },
   [pinchHandlerName]: {
     focalX: 0,
@@ -404,6 +405,7 @@ interface HandlerData {
   emitEvent: EventEmitter;
   handlerType: HandlerNames;
   handlerTag: number;
+  enabled: boolean | undefined;
 }
 function getHandlerData(
   componentOrGesture: ReactTestInstance | GestureType
@@ -416,6 +418,7 @@ function getHandlerData(
       },
       handlerType: gesture.handlerName as HandlerNames,
       handlerTag: gesture.handlerTag,
+      enabled: gesture.config.enabled,
     };
   }
   const gestureHandlerComponent = componentOrGesture;
@@ -425,6 +428,7 @@ function getHandlerData(
     },
     handlerType: gestureHandlerComponent.props.handlerType as HandlerNames,
     handlerTag: gestureHandlerComponent.props.handlerTag as number,
+    enabled: gestureHandlerComponent.props.enabled,
   };
 }
 type AllGestures =
@@ -466,9 +470,13 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   componentOrGesture: ReactTestInstance | GestureType,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
-  const { emitEvent, handlerType, handlerTag } =
+  const { emitEvent, handlerType, handlerTag, enabled } =
     getHandlerData(componentOrGesture);
 
+  if (enabled === false) {
+    return;
+  }
+
   let _ = fillMissingStatesTransitions(
     eventList,
     isDiscreteHandler(handlerType)

package/src/web/handlers/GestureHandler.ts

@@ -507,7 +507,7 @@ export default abstract class GestureHandler implements IGestureHandler {
       nativeEvent: {
         handlerTag: this.handlerTag,
         state: this.currentState,
-        eventType: event.touchEventType ?? eventType,
+        eventType: eventType,
         changedTouches: changed,
         allTouches: all,
         numberOfTouches: numberOfTouches,

package/src/web/handlers/HoverGestureHandler.ts

@@ -1,13 +1,22 @@
 import { State } from '../../State';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, StylusData } from '../interfaces';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import GestureHandler from './GestureHandler';
 
 export default class HoverGestureHandler extends GestureHandler {
+  private stylusData: StylusData | undefined;
+
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
   }
 
+  protected transformNativeEvent(): Record<string, unknown> {
+    return {
+      ...super.transformNativeEvent(),
+      stylusData: this.stylusData,
+    };
+  }
+
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
   }
@@ -16,6 +25,7 @@ export default class HoverGestureHandler extends GestureHandler {
     GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
 
     this.tracker.addToTracker(event);
+    this.stylusData = event.stylusData;
     super.onPointerMoveOver(event);
 
     if (this.getState() === State.UNDETERMINED) {
@@ -25,7 +35,9 @@ export default class HoverGestureHandler extends GestureHandler {
   }
 
   protected onPointerMoveOut(event: AdaptedEvent): void {
-    this.tracker.addToTracker(event);
+    this.tracker.removeFromTracker(event.pointerId);
+    this.stylusData = event.stylusData;
+
     super.onPointerMoveOut(event);
 
     this.end();
@@ -33,6 +45,8 @@ export default class HoverGestureHandler extends GestureHandler {
 
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
+
     super.onPointerMove(event);
   }
 

package/src/web/handlers/PanGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, StylusData } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -52,6 +52,8 @@ export default class PanGestureHandler extends GestureHandler {
   private lastX = 0;
   private lastY = 0;
 
+  private stylusData: StylusData | undefined;
+
   private activateAfterLongPress = 0;
   private activationTimeout = 0;
 
@@ -196,6 +198,7 @@ export default class PanGestureHandler extends GestureHandler {
       translationY: isNaN(translationY) ? 0 : translationY,
       velocityX: this.velocityX,
       velocityY: this.velocityY,
+      stylusData: this.stylusData,
     };
   }
 
@@ -217,6 +220,8 @@ export default class PanGestureHandler extends GestureHandler {
     }
 
     this.tracker.addToTracker(event);
+    this.stylusData = event.stylusData;
+
     super.onPointerDown(event);
 
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
@@ -259,6 +264,8 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
+    this.stylusData = event.stylusData;
+
     super.onPointerUp(event);
     if (this.currentState === State.ACTIVE) {
       const lastCoords = this.tracker.getAbsoluteCoordsAverage();
@@ -306,6 +313,7 @@ export default class PanGestureHandler extends GestureHandler {
 
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
 
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
     this.lastX = lastCoords.x;
@@ -326,6 +334,7 @@ export default class PanGestureHandler extends GestureHandler {
     }
 
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
 
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
     this.lastX = lastCoords.x;

package/src/web/interfaces.ts

@@ -132,6 +132,14 @@ export interface PropsRef {
   onGestureHandlerStateChange: () => void;
 }
 
+export interface StylusData {
+  tiltX: number;
+  tiltY: number;
+  azimuthAngle: number;
+  altitudeAngle: number;
+  pressure: number;
+}
+
 export interface AdaptedEvent {
   x: number;
   y: number;
@@ -142,9 +150,7 @@ export interface AdaptedEvent {
   pointerType: PointerType;
   time: number;
   button?: MouseButton;
-  allTouches?: TouchList;
-  changedTouches?: TouchList;
-  touchEventType?: TouchEventType;
+  stylusData?: StylusData;
 }
 
 export enum EventTypes {

package/src/web/tools/EventManager.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+import { AdaptedEvent, EventTypes } from '../interfaces';
 
 type PointerEventCallback = (event: AdaptedEvent) => void;
 
@@ -18,9 +18,7 @@ export default abstract class EventManager<T> {
 
   protected abstract mapEvent(
     event: Event,
-    eventType: EventTypes,
-    index?: number,
-    touchEventType?: TouchEventType
+    eventType: EventTypes
   ): AdaptedEvent;
 
   protected onPointerDown(_event: AdaptedEvent): void {}

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -5,7 +5,6 @@ import {
   MeasureResult,
 } from './GestureHandlerDelegate';
 import PointerEventManager from './PointerEventManager';
-import TouchEventManager from './TouchEventManager';
 import { State } from '../../State';
 import { isPointerInBounds } from '../utils';
 import EventManager from './EventManager';
@@ -58,7 +57,6 @@ export class GestureHandlerWebDelegate
     this.setContextMenu(config.enabled);
 
     this.eventManagers.push(new PointerEventManager(this.view));
-    this.eventManagers.push(new TouchEventManager(this.view));
     this.eventManagers.push(new KeyboardEventManager(this.view));
 
     this.eventManagers.forEach((manager) =>

package/src/web/tools/PointerEventManager.ts

@@ -4,15 +4,12 @@ import { AdaptedEvent, EventTypes, Point } from '../interfaces';
 import {
   PointerTypeMapping,
   calculateViewScale,
+  tryExtractStylusData,
   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>();
@@ -35,9 +32,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   }
 
   private pointerDownCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
     if (!isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })) {
       return;
     }
@@ -61,10 +55,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   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
@@ -92,21 +82,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   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;
 
@@ -161,10 +136,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   private pointerCancelCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.CANCEL);
 
     this.onPointerCancel(adaptedEvent);
@@ -174,20 +145,12 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   private pointerEnterCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
 
     this.onPointerMoveOver(adaptedEvent);
   };
 
   private pointerLeaveCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
     this.onPointerMoveOut(adaptedEvent);
@@ -252,6 +215,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
         PointerTypeMapping.get(event.pointerType) ?? PointerType.OTHER,
       button: this.mouseButtonsMapper.get(event.button),
       time: event.timeStamp,
+      stylusData: tryExtractStylusData(event),
     };
   }
 

package/src/web/utils.ts

@@ -1,5 +1,5 @@
 import { PointerType } from '../PointerType';
-import { Point } from './interfaces';
+import type { Point, StylusData } from './interfaces';
 
 export function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {
   const rect: DOMRect = view.getBoundingClientRect();
@@ -54,3 +54,176 @@ export function calculateViewScale(view: HTMLElement) {
 
   return resultScales;
 }
+
+export function tryExtractStylusData(
+  event: PointerEvent
+): StylusData | undefined {
+  const pointerType = PointerTypeMapping.get(event.pointerType);
+
+  if (pointerType !== PointerType.STYLUS) {
+    return;
+  }
+
+  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
+  const eventAzimuthAngle: number | undefined = event.azimuthAngle;
+  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
+  const eventAltitudeAngle: number | undefined = event.altitudeAngle;
+
+  if (event.tiltX === 0 && event.tiltY === 0) {
+    // If we are in this branch, it means that either tilt properties are not supported and we have to calculate them from altitude and azimuth angles,
+    // or stylus is perpendicular to the screen and we can use altitude / azimuth instead of tilt
+
+    // If azimuth and altitude are undefined in this branch, it means that we are either perpendicular to the screen,
+    // or that none of the position sets is supported. In that case, we can treat stylus as perpendicular
+    if (eventAzimuthAngle === undefined || eventAltitudeAngle === undefined) {
+      return {
+        tiltX: 0,
+        tiltY: 0,
+        azimuthAngle: Math.PI / 2,
+        altitudeAngle: Math.PI / 2,
+        pressure: event.pressure,
+      };
+    }
+
+    const { tiltX, tiltY } = spherical2tilt(
+      eventAltitudeAngle,
+      eventAzimuthAngle
+    );
+
+    return {
+      tiltX,
+      tiltY,
+      azimuthAngle: eventAzimuthAngle,
+      altitudeAngle: eventAltitudeAngle,
+      pressure: event.pressure,
+    };
+  }
+
+  const { altitudeAngle, azimuthAngle } = tilt2spherical(
+    event.tiltX,
+    event.tiltY
+  );
+
+  return {
+    tiltX: event.tiltX,
+    tiltY: event.tiltY,
+    azimuthAngle,
+    altitudeAngle,
+    pressure: event.pressure,
+  };
+}
+
+// `altitudeAngle` and `azimuthAngle` are experimental properties, which are not supported on Firefox and Safari.
+// Given that, we use `tilt` properties and algorithm that converts one value to another.
+//
+// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle
+function tilt2spherical(tiltX: number, tiltY: number) {
+  const tiltXrad = (tiltX * Math.PI) / 180;
+  const tiltYrad = (tiltY * Math.PI) / 180;
+
+  // calculate azimuth angle
+  let azimuthAngle = 0;
+
+  if (tiltX === 0) {
+    if (tiltY > 0) {
+      azimuthAngle = Math.PI / 2;
+    } else if (tiltY < 0) {
+      azimuthAngle = (3 * Math.PI) / 2;
+    }
+  } else if (tiltY === 0) {
+    if (tiltX < 0) {
+      azimuthAngle = Math.PI;
+    }
+  } else if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {
+    // not enough information to calculate azimuth
+    azimuthAngle = 0;
+  } else {
+    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90
+    const tanX = Math.tan(tiltXrad);
+    const tanY = Math.tan(tiltYrad);
+
+    azimuthAngle = Math.atan2(tanY, tanX);
+    if (azimuthAngle < 0) {
+      azimuthAngle += 2 * Math.PI;
+    }
+  }
+
+  // calculate altitude angle
+  let altitudeAngle = 0;
+
+  if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {
+    altitudeAngle = 0;
+  } else if (tiltX === 0) {
+    altitudeAngle = Math.PI / 2 - Math.abs(tiltYrad);
+  } else if (tiltY === 0) {
+    altitudeAngle = Math.PI / 2 - Math.abs(tiltXrad);
+  } else {
+    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90
+    altitudeAngle = Math.atan(
+      1.0 /
+        Math.sqrt(
+          Math.pow(Math.tan(tiltXrad), 2) + Math.pow(Math.tan(tiltYrad), 2)
+        )
+    );
+  }
+
+  return { altitudeAngle: altitudeAngle, azimuthAngle: azimuthAngle };
+}
+
+// If we are on a platform that doesn't support `tiltX` and `tiltY`, we have to calculate them from `altitude` and `azimuth` angles.
+//
+// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle
+function spherical2tilt(altitudeAngle: number, azimuthAngle: number) {
+  const radToDeg = 180 / Math.PI;
+
+  let tiltXrad = 0;
+  let tiltYrad = 0;
+
+  if (altitudeAngle === 0) {
+    // the pen is in the X-Y plane
+    if (azimuthAngle === 0 || azimuthAngle === 2 * Math.PI) {
+      // pen is on positive X axis
+      tiltXrad = Math.PI / 2;
+    }
+    if (azimuthAngle === Math.PI / 2) {
+      // pen is on positive Y axis
+      tiltYrad = Math.PI / 2;
+    }
+    if (azimuthAngle === Math.PI) {
+      // pen is on negative X axis
+      tiltXrad = -Math.PI / 2;
+    }
+    if (azimuthAngle === (3 * Math.PI) / 2) {
+      // pen is on negative Y axis
+      tiltYrad = -Math.PI / 2;
+    }
+    if (azimuthAngle > 0 && azimuthAngle < Math.PI / 2) {
+      tiltXrad = Math.PI / 2;
+      tiltYrad = Math.PI / 2;
+    }
+    if (azimuthAngle > Math.PI / 2 && azimuthAngle < Math.PI) {
+      tiltXrad = -Math.PI / 2;
+      tiltYrad = Math.PI / 2;
+    }
+    if (azimuthAngle > Math.PI && azimuthAngle < (3 * Math.PI) / 2) {
+      tiltXrad = -Math.PI / 2;
+      tiltYrad = -Math.PI / 2;
+    }
+    if (azimuthAngle > (3 * Math.PI) / 2 && azimuthAngle < 2 * Math.PI) {
+      tiltXrad = Math.PI / 2;
+      tiltYrad = -Math.PI / 2;
+    }
+  }
+
+  if (altitudeAngle !== 0) {
+    const tanAlt = Math.tan(altitudeAngle);
+
+    tiltXrad = Math.atan(Math.cos(azimuthAngle) / tanAlt);
+    tiltYrad = Math.atan(Math.sin(azimuthAngle) / tanAlt);
+  }
+
+  const tiltX = Math.round(tiltXrad * radToDeg);
+  const tiltY = Math.round(tiltYrad * radToDeg);
+
+  return { tiltX, tiltY };
+}