@amazon-devices/react-native-gesture-handler 4.0.1 → 4.0.2

package/src/web/utils.ts

@@ -1,293 +0,0 @@
-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,82 +0,0 @@
-/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
-/* eslint-disable */
-import GestureHandler from './GestureHandler';
-import { TEST_MAX_IF_NOT_NAN } from './utils';
-
-abstract class DiscreteGestureHandler extends GestureHandler {
-  get isDiscrete() {
-    return true;
-  }
-
-  get shouldEnableGestureOnSetup() {
-    return true;
-  }
-
-  shouldFailUnderCustomCriteria(
-    { x, y, deltaX, deltaY }: any,
-    { maxDeltaX, maxDeltaY, maxDistSq, shouldCancelWhenOutside }: any
-  ) {
-    if (shouldCancelWhenOutside) {
-      if (!this.isPointInView({ x, y })) {
-        return true;
-      }
-    }
-    return (
-      TEST_MAX_IF_NOT_NAN(Math.abs(deltaX), maxDeltaX) ||
-      TEST_MAX_IF_NOT_NAN(Math.abs(deltaY), maxDeltaY) ||
-      TEST_MAX_IF_NOT_NAN(
-        Math.abs(deltaY * deltaY + deltaX * deltaX),
-        maxDistSq
-      )
-    );
-  }
-
-  transformNativeEvent({ center: { x, y } }: any) {
-    // @ts-ignore FIXME(TS)
-    const rect = this.view!.getBoundingClientRect();
-
-    return {
-      absoluteX: x,
-      absoluteY: y,
-      x: x - rect.left,
-      y: y - rect.top,
-    };
-  }
-
-  isGestureEnabledForEvent(
-    {
-      minPointers,
-      maxPointers,
-      maxDeltaX,
-      maxDeltaY,
-      maxDistSq,
-      shouldCancelWhenOutside,
-    }: any,
-    _recognizer: any,
-    { maxPointers: pointerLength, center, deltaX, deltaY }: any
-  ) {
-    const validPointerCount =
-      pointerLength >= minPointers && pointerLength <= maxPointers;
-
-    if (
-      this.shouldFailUnderCustomCriteria(
-        { ...center, deltaX, deltaY },
-        {
-          maxDeltaX,
-          maxDeltaY,
-          maxDistSq,
-          shouldCancelWhenOutside,
-        }
-      ) ||
-      // A user probably won't land a multi-pointer tap on the first tick (so we cannot just cancel each time)
-      // but if the gesture is running and the user adds or subtracts another pointer then it should fail.
-      (!validPointerCount && this.isGestureRunning)
-    ) {
-      return { failed: true };
-    }
-
-    return { success: validPointerCount };
-  }
-}
-
-export default DiscreteGestureHandler;

package/src/web_hammer/DraggingGestureHandler.ts

@@ -1,34 +0,0 @@
-/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
-/* eslint-disable */
-import GestureHandler, { HammerInputExt } from './GestureHandler';
-import { PixelRatio } from 'react-native';
-
-abstract class DraggingGestureHandler extends GestureHandler {
-  get shouldEnableGestureOnSetup() {
-    return true;
-  }
-
-  transformNativeEvent({
-    deltaX,
-    deltaY,
-    velocityX,
-    velocityY,
-    center: { x, y },
-  }: HammerInputExt) {
-    // @ts-ignore FIXME(TS)
-    const rect = this.view!.getBoundingClientRect();
-    const ratio = PixelRatio.get();
-    return {
-      translationX: deltaX - (this.__initialX || 0),
-      translationY: deltaY - (this.__initialY || 0),
-      absoluteX: x,
-      absoluteY: y,
-      velocityX: velocityX * ratio,
-      velocityY: velocityY * ratio,
-      x: x - rect.left,
-      y: y - rect.top,
-    };
-  }
-}
-
-export default DraggingGestureHandler;

package/src/web_hammer/Errors.ts

@@ -1,7 +0,0 @@
-export class GesturePropError extends Error {
-  constructor(name: string, value: unknown, expectedType: string) {
-    super(
-      `Invalid property \`${name}: ${value}\` expected \`${expectedType}\``
-    );
-  }
-}

package/src/web_hammer/FlingGestureHandler.ts

@@ -1,134 +0,0 @@
-/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
-/* eslint-disable */
-import Hammer from '@egjs/hammerjs';
-
-import { Direction } from './constants';
-import { GesturePropError } from './Errors';
-import DraggingGestureHandler from './DraggingGestureHandler';
-import { isnan } from './utils';
-import { HammerInputExt } from './GestureHandler';
-
-class FlingGestureHandler extends DraggingGestureHandler {
-  get name() {
-    return 'swipe';
-  }
-
-  get NativeGestureClass() {
-    return Hammer.Swipe;
-  }
-
-  onGestureActivated(event: HammerInputExt) {
-    this.sendEvent({
-      ...event,
-      eventType: Hammer.INPUT_MOVE,
-      isFinal: false,
-      isFirst: true,
-    });
-    this.isGestureRunning = false;
-    this.hasGestureFailed = false;
-    this.sendEvent({
-      ...event,
-      eventType: Hammer.INPUT_END,
-      isFinal: true,
-    });
-  }
-
-  onRawEvent(ev: HammerInputExt) {
-    super.onRawEvent(ev);
-    if (this.hasGestureFailed) {
-      return;
-    }
-    // Hammer doesn't send a `cancel` event for taps.
-    // Manually fail the event.
-    if (ev.isFinal) {
-      setTimeout(() => {
-        if (this.isGestureRunning) {
-          this.cancelEvent(ev);
-        }
-      });
-    } else if (!this.hasGestureFailed && !this.isGestureRunning) {
-      // Tap Gesture start event
-      const gesture = this.hammer!.get(this.name);
-      // @ts-ignore FIXME(TS)
-      if (gesture.options.enable(gesture, ev)) {
-        this.onStart(ev);
-        this.sendEvent(ev);
-      }
-    }
-  }
-
-  getHammerConfig() {
-    return {
-      // @ts-ignore FIXME(TS)
-      pointers: this.config.numberOfPointers,
-      direction: this.getDirection(),
-    };
-  }
-
-  getTargetDirections(direction: number) {
-    const directions = [];
-    if (direction & Direction.RIGHT) {
-      directions.push(Hammer.DIRECTION_RIGHT);
-    }
-    if (direction & Direction.LEFT) {
-      directions.push(Hammer.DIRECTION_LEFT);
-    }
-    if (direction & Direction.UP) {
-      directions.push(Hammer.DIRECTION_UP);
-    }
-    if (direction & Direction.DOWN) {
-      directions.push(Hammer.DIRECTION_DOWN);
-    }
-    // const hammerDirection = directions.reduce((a, b) => a | b, 0);
-    return directions;
-  }
-
-  getDirection() {
-    // @ts-ignore FIXME(TS)
-    const { direction } = this.getConfig();
-
-    let directions = [];
-    if (direction & Direction.RIGHT) {
-      directions.push(Hammer.DIRECTION_HORIZONTAL);
-    }
-    if (direction & Direction.LEFT) {
-      directions.push(Hammer.DIRECTION_HORIZONTAL);
-    }
-    if (direction & Direction.UP) {
-      directions.push(Hammer.DIRECTION_VERTICAL);
-    }
-    if (direction & Direction.DOWN) {
-      directions.push(Hammer.DIRECTION_VERTICAL);
-    }
-    directions = [...new Set(directions)];
-
-    if (directions.length === 0) return Hammer.DIRECTION_NONE;
-    if (directions.length === 1) return directions[0];
-    return Hammer.DIRECTION_ALL;
-  }
-
-  isGestureEnabledForEvent(
-    { numberOfPointers }: any,
-    _recognizer: any,
-    { maxPointers: pointerLength }: any
-  ) {
-    const validPointerCount = pointerLength === numberOfPointers;
-    if (!validPointerCount && this.isGestureRunning) {
-      return { failed: true };
-    }
-    return { success: validPointerCount };
-  }
-
-  updateGestureConfig({ numberOfPointers = 1, direction, ...props }: any) {
-    if (isnan(direction) || typeof direction !== 'number') {
-      throw new GesturePropError('direction', direction, 'number');
-    }
-    return super.updateGestureConfig({
-      numberOfPointers,
-      direction,
-      ...props,
-    });
-  }
-}
-
-export default FlingGestureHandler;