@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0

package/src/web/tools/Vector.ts

@@ -0,0 +1,59 @@
+import { DiagonalDirections, Directions } from '../../Directions';
+import { MINIMAL_RECOGNIZABLE_MAGNITUDE } from '../constants';
+import PointerTracker from './PointerTracker';
+
+export default class Vector {
+  private readonly x;
+  private readonly y;
+  private readonly unitX;
+  private readonly unitY;
+  private readonly _magnitude;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+
+    this._magnitude = Math.hypot(this.x, this.y);
+    const isMagnitudeSufficient =
+      this._magnitude > MINIMAL_RECOGNIZABLE_MAGNITUDE;
+
+    this.unitX = isMagnitudeSufficient ? this.x / this._magnitude : 0;
+    this.unitY = isMagnitudeSufficient ? this.y / this._magnitude : 0;
+  }
+
+  static fromDirection(direction: Directions | DiagonalDirections): Vector {
+    return DirectionToVectorMappings.get(direction) ?? new Vector(0, 0);
+  }
+
+  static fromVelocity(tracker: PointerTracker, pointerId: number) {
+    const velocity = tracker.getVelocity(pointerId);
+    return velocity ? new Vector(velocity.x, velocity.y) : null;
+  }
+
+  public get magnitude() {
+    return this._magnitude;
+  }
+
+  computeSimilarity(vector: Vector) {
+    return this.unitX * vector.unitX + this.unitY * vector.unitY;
+  }
+
+  isSimilar(vector: Vector, threshold: number) {
+    return this.computeSimilarity(vector) > threshold;
+  }
+}
+
+const DirectionToVectorMappings = new Map<
+  Directions | DiagonalDirections,
+  Vector
+>([
+  [Directions.LEFT, new Vector(-1, 0)],
+  [Directions.RIGHT, new Vector(1, 0)],
+  [Directions.UP, new Vector(0, -1)],
+  [Directions.DOWN, new Vector(0, 1)],
+
+  [DiagonalDirections.UP_RIGHT, new Vector(1, -1)],
+  [DiagonalDirections.DOWN_RIGHT, new Vector(1, 1)],
+  [DiagonalDirections.UP_LEFT, new Vector(-1, -1)],
+  [DiagonalDirections.DOWN_LEFT, new Vector(-1, 1)],
+]);

package/src/web/tools/VelocityTracker.ts

@@ -18,12 +18,12 @@ export default class VelocityTracker {
     this.samples.push(event);
   }
 
-  /// Returns an estimate of the velocity of the object being tracked by the
-  /// tracker given the current information available to the tracker.
-  ///
-  /// Information is added using [addPosition].
-  ///
-  /// Returns null if there is no data on which to base an estimate.
+  // Returns an estimate of the velocity of the object being tracked by the
+  // tracker given the current information available to the tracker.
+  //
+  // Information is added using [addPosition].
+  //
+  // Returns null if there is no data on which to base an estimate.
   private getVelocityEstimate(): [number, number] | null {
     const x = [];
     const y = [];
@@ -84,7 +84,7 @@ export default class VelocityTracker {
     return null;
   }
 
-  public getVelocity(): [number, number] {
+  public get velocity(): [number, number] {
     const estimate = this.getVelocityEstimate();
     if (estimate !== null) {
       return estimate;

package/src/web/tools/WheelEventManager.ts

@@ -0,0 +1,48 @@
+import EventManager from './EventManager';
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import { PointerType } from '../../PointerType';
+
+export default class WheelEventManager extends EventManager<HTMLElement> {
+  private wheelDelta = { x: 0, y: 0 };
+
+  private resetDelta = (_event: PointerEvent) => {
+    this.wheelDelta = { x: 0, y: 0 };
+  };
+
+  private wheelCallback = (event: WheelEvent) => {
+    this.wheelDelta.x += event.deltaX;
+    this.wheelDelta.y += event.deltaY;
+
+    const adaptedEvent = this.mapEvent(event);
+    this.onWheel(adaptedEvent);
+  };
+
+  public registerListeners(): void {
+    this.view.addEventListener('pointermove', this.resetDelta);
+    this.view.addEventListener('wheel', this.wheelCallback);
+  }
+
+  public unregisterListeners(): void {
+    this.view.removeEventListener('pointermove', this.resetDelta);
+    this.view.removeEventListener('wheel', this.wheelCallback);
+  }
+
+  protected mapEvent(event: WheelEvent): AdaptedEvent {
+    return {
+      x: event.clientX + this.wheelDelta.x,
+      y: event.clientY + this.wheelDelta.y,
+      offsetX: event.offsetX - event.deltaX,
+      offsetY: event.offsetY - event.deltaY,
+      pointerId: -1,
+      eventType: EventTypes.MOVE,
+      pointerType: PointerType.OTHER,
+      time: event.timeStamp,
+      // @ts-ignore It does exist, but it's deprecated
+      wheelDeltaY: event.wheelDeltaY,
+    };
+  }
+
+  public resetManager(): void {
+    super.resetManager();
+  }
+}

package/src/web/utils.ts

@@ -1,8 +1,293 @@
-export function isPointerInBounds(
-  view: HTMLElement,
-  { x, y }: { x: number; y: number }
-): boolean {
+import { PointerType } from '../PointerType';
+import type {
+  GestureHandlerRef,
+  Point,
+  StylusData,
+  SVGRef,
+} from './interfaces';
+
+export function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {
   const rect: DOMRect = view.getBoundingClientRect();
 
   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],
+]);
+
+export const degToRad = (degrees: number) => (degrees * Math.PI) / 180;
+
+export const coneToDeviation = (degrees: number) =>
+  Math.cos(degToRad(degrees / 2));
+
+export function calculateViewScale(view: HTMLElement) {
+  const styles = getComputedStyle(view);
+
+  const resultScales = {
+    scaleX: 1,
+    scaleY: 1,
+  };
+
+  // Get scales from scale property
+  if (styles.scale !== undefined && styles.scale !== 'none') {
+    const scales = styles.scale.split(' ');
+
+    if (scales[0]) {
+      resultScales.scaleX = parseFloat(scales[0]);
+    }
+
+    resultScales.scaleY = scales[1]
+      ? parseFloat(scales[1])
+      : parseFloat(scales[0]);
+  }
+
+  // Get scales from transform property
+  const matrixElements = new RegExp(/matrix\((.+)\)/).exec(
+    styles.transform
+  )?.[1];
+
+  if (matrixElements) {
+    const matrixElementsArray = matrixElements.split(', ');
+
+    resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
+    resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
+  }
+
+  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 };
+}
+
+export const RNSVGElements = new Set([
+  'Circle',
+  'ClipPath',
+  'Ellipse',
+  'ForeignObject',
+  'G',
+  'Image',
+  'Line',
+  'Marker',
+  'Mask',
+  'Path',
+  'Pattern',
+  'Polygon',
+  'Polyline',
+  'Rect',
+  'Svg',
+  'Symbol',
+  'TSpan',
+  'Text',
+  'TextPath',
+  'Use',
+]);
+
+// This function helps us determine whether given node is SVGElement or not. In our implementation of
+// findNodeHandle, we can encounter such element in 2 forms - SVG tag or ref to SVG Element. Since Gesture Handler
+// does not depend on SVG, we use our simplified SVGRef type that has `elementRef` field. This is something that is present
+// in actual SVG ref object.
+//
+// In order to make sure that node passed into this function is in fact SVG element, first we check if its constructor name
+// corresponds to one of the possible SVG elements. Then we also check if `elementRef` field exists.
+// By doing both steps we decrease probability of detecting situations where, for example, user makes custom `Circle` and
+// we treat it as SVG.
+export function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef) {
+  const componentClassName = Object.getPrototypeOf(viewRef).constructor.name;
+
+  return (
+    RNSVGElements.has(componentClassName) &&
+    Object.hasOwn(viewRef, 'elementRef')
+  );
+}
+
+// This function checks if given node is SVGElement. Unlike the function above, this one
+// operates on React Nodes, not DOM nodes.
+//
+// Second condition was introduced to handle case where SVG element was wrapped with
+// `createAnimatedComponent` from Reanimated.
+export function isRNSVGNode(node: any) {
+  // If `ref` has `rngh` field, it means that component comes from Gesture Handler. This is a special case for
+  // `Text` component, which is present in `RNSVGElements` set, yet we don't want to treat it as SVG.
+  if (node.ref?.rngh) {
+    return false;
+  }
+
+  return (
+    Object.getPrototypeOf(node?.type)?.name === 'WebShape' ||
+    RNSVGElements.has(node?.type?.displayName)
+  );
+}

package/src/web_hammer/DiscreteGestureHandler.ts

@@ -1,4 +1,4 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 import GestureHandler from './GestureHandler';
 import { TEST_MAX_IF_NOT_NAN } from './utils';

package/src/web_hammer/DraggingGestureHandler.ts

@@ -1,4 +1,4 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 import GestureHandler, { HammerInputExt } from './GestureHandler';
 import { PixelRatio } from 'react-native';

package/src/web_hammer/FlingGestureHandler.ts

@@ -1,4 +1,4 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 import Hammer from '@egjs/hammerjs';
 

package/src/web_hammer/GestureHandler.ts

@@ -1,4 +1,4 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 import Hammer from '@egjs/hammerjs';
 import { findNodeHandle } from 'react-native';
@@ -6,6 +6,7 @@ import { findNodeHandle } from 'react-native';
 import { State } from '../State';
 import { EventMap } from './constants';
 import * as NodeManager from './NodeManager';
+import { ghQueueMicrotask } from '../ghQueueMicrotask';
 
 // TODO(TS) Replace with HammerInput if https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50438/files is merged
 export type HammerInputExt = Omit<HammerInput, 'destroy' | 'handler' | 'init'>;
@@ -282,6 +283,7 @@ abstract class GestureHandler {
     this.propsRef = propsRef;
     this.ref = ref;
 
+    // @ts-ignore
     this.view = findNodeHandle(ref);
 
     // When the browser starts handling the gesture (e.g. scrolling), it sends a pointercancel event and stops
@@ -508,7 +510,7 @@ abstract class GestureHandler {
         .filter((v) => v);
 
       if (shouldUseTouchEvents !== this.shouldUseTouchEvents(props)) {
-        queueMicrotask(() => {
+        ghQueueMicrotask(() => {
           // if the undelying event API needs to be changed, we need to unmount and mount
           // the hammer instance again.
           this.destroy();
@@ -537,7 +539,7 @@ abstract class GestureHandler {
       'activeOffsetYStart',
       'activeOffsetYEnd',
     ] as const;
-    configProps.forEach((prop: typeof configProps[number]) => {
+    configProps.forEach((prop: (typeof configProps)[number]) => {
       if (typeof props[prop] === 'undefined') {
         props[prop] = Number.NaN;
       }

package/src/web_hammer/LongPressGestureHandler.ts

@@ -1,4 +1,4 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 import Hammer from '@egjs/hammerjs';
 

package/src/web_hammer/NodeManager.ts

@@ -1,10 +1,4 @@
-import { ValueOf } from '../typeUtils';
-import { HammerGestures } from '../RNGestureHandlerModule.web';
-
-const gestures: Record<
-  number,
-  InstanceType<ValueOf<typeof HammerGestures>>
-> = {};
+export const gestures: Record<number, any> = {};
 
 export function getHandler(tag: number) {
   if (tag in gestures) {
@@ -14,10 +8,7 @@ export function getHandler(tag: number) {
   throw new Error(`No handler for tag ${tag}`);
 }
 
-export function createGestureHandler(
-  handlerTag: number,
-  handler: InstanceType<ValueOf<typeof HammerGestures>>
-) {
+export function createGestureHandler(handlerTag: number, handler: any) {
   if (handlerTag in gestures) {
     throw new Error(`Handler with tag ${handlerTag} already exists`);
   }

package/src/web_hammer/PressGestureHandler.ts

@@ -87,10 +87,13 @@ class PressGestureHandler extends DiscreteGestureHandler {
     this.isGestureRunning = true;
     clearTimeout(this.visualFeedbackTimer);
     this.initialEvent = ev;
-    this.visualFeedbackTimer = fireAfterInterval(() => {
-      this.sendGestureStartedEvent(this.initialEvent as HammerInputExt);
-      this.initialEvent = null;
-    }, this.shouldDelayTouchForEvent(ev) && CONTENT_TOUCHES_DELAY);
+    this.visualFeedbackTimer = fireAfterInterval(
+      () => {
+        this.sendGestureStartedEvent(this.initialEvent as HammerInputExt);
+        this.initialEvent = null;
+      },
+      this.shouldDelayTouchForEvent(ev) && CONTENT_TOUCHES_DELAY
+    );
   }
 
   sendGestureStartedEvent(ev: HammerInputExt) {