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

package/lib/module/web/tools/WheelEventManager.js

@@ -1,49 +0,0 @@
-"use strict";
-
-import EventManager from './EventManager';
-import { EventTypes } from '../interfaces';
-import { PointerType } from '../../PointerType';
-export default class WheelEventManager extends EventManager {
-  wheelDelta = {
-    x: 0,
-    y: 0
-  };
-  resetDelta = _event => {
-    this.wheelDelta = {
-      x: 0,
-      y: 0
-    };
-  };
-  wheelCallback = event => {
-    this.wheelDelta.x += event.deltaX;
-    this.wheelDelta.y += event.deltaY;
-    const adaptedEvent = this.mapEvent(event);
-    this.onWheel(adaptedEvent);
-  };
-  registerListeners() {
-    this.view.addEventListener('pointermove', this.resetDelta);
-    this.view.addEventListener('wheel', this.wheelCallback);
-  }
-  unregisterListeners() {
-    this.view.removeEventListener('pointermove', this.resetDelta);
-    this.view.removeEventListener('wheel', this.wheelCallback);
-  }
-  mapEvent(event) {
-    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
-    };
-  }
-  resetManager() {
-    super.resetManager();
-  }
-}
-//# sourceMappingURL=WheelEventManager.js.map

package/lib/module/web/utils.js

@@ -1,223 +0,0 @@
-"use strict";
-
-import { PointerType } from '../PointerType';
-export function isPointerInBounds(view, {
-  x,
-  y
-}) {
-  const rect = view.getBoundingClientRect();
-  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-}
-export const PointerTypeMapping = new Map([['mouse', PointerType.MOUSE], ['touch', PointerType.TOUCH], ['pen', PointerType.STYLUS], ['none', PointerType.OTHER]]);
-export const degToRad = degrees => degrees * Math.PI / 180;
-export const coneToDeviation = degrees => Math.cos(degToRad(degrees / 2));
-export function calculateViewScale(view) {
-  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) {
-  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 = event.azimuthAngle;
-  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
-  const eventAltitudeAngle = 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, tiltY) {
-  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, azimuthAngle) {
-  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) {
-  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) {
-  // 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);
-}
-//# sourceMappingURL=utils.js.map

package/lib/module/web_hammer/DiscreteGestureHandler.js

@@ -1,87 +0,0 @@
-"use strict";
-
-/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
-/* eslint-disable */
-import GestureHandler from './GestureHandler';
-import { TEST_MAX_IF_NOT_NAN } from './utils';
-class DiscreteGestureHandler extends GestureHandler {
-  get isDiscrete() {
-    return true;
-  }
-  get shouldEnableGestureOnSetup() {
-    return true;
-  }
-  shouldFailUnderCustomCriteria({
-    x,
-    y,
-    deltaX,
-    deltaY
-  }, {
-    maxDeltaX,
-    maxDeltaY,
-    maxDistSq,
-    shouldCancelWhenOutside
-  }) {
-    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
-    }
-  }) {
-    // @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
-  }, _recognizer, {
-    maxPointers: pointerLength,
-    center,
-    deltaX,
-    deltaY
-  }) {
-    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;
-//# sourceMappingURL=DiscreteGestureHandler.js.map

package/lib/module/web_hammer/DraggingGestureHandler.js

@@ -1,37 +0,0 @@
-"use strict";
-
-/* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
-/* eslint-disable */
-import GestureHandler from './GestureHandler';
-import { PixelRatio } from 'react-native';
-class DraggingGestureHandler extends GestureHandler {
-  get shouldEnableGestureOnSetup() {
-    return true;
-  }
-  transformNativeEvent({
-    deltaX,
-    deltaY,
-    velocityX,
-    velocityY,
-    center: {
-      x,
-      y
-    }
-  }) {
-    // @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;
-//# sourceMappingURL=DraggingGestureHandler.js.map

package/lib/module/web_hammer/Errors.js

@@ -1,8 +0,0 @@
-"use strict";
-
-export class GesturePropError extends Error {
-  constructor(name, value, expectedType) {
-    super(`Invalid property \`${name}: ${value}\` expected \`${expectedType}\``);
-  }
-}
-//# sourceMappingURL=Errors.js.map

package/lib/module/web_hammer/FlingGestureHandler.js

@@ -1,133 +0,0 @@
-"use strict";
-
-/* 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';
-class FlingGestureHandler extends DraggingGestureHandler {
-  get name() {
-    return 'swipe';
-  }
-  get NativeGestureClass() {
-    return Hammer.Swipe;
-  }
-  onGestureActivated(event) {
-    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) {
-    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) {
-    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
-  }, _recognizer, {
-    maxPointers: pointerLength
-  }) {
-    const validPointerCount = pointerLength === numberOfPointers;
-    if (!validPointerCount && this.isGestureRunning) {
-      return {
-        failed: true
-      };
-    }
-    return {
-      success: validPointerCount
-    };
-  }
-  updateGestureConfig({
-    numberOfPointers = 1,
-    direction,
-    ...props
-  }) {
-    if (isnan(direction) || typeof direction !== 'number') {
-      throw new GesturePropError('direction', direction, 'number');
-    }
-    return super.updateGestureConfig({
-      numberOfPointers,
-      direction,
-      ...props
-    });
-  }
-}
-export default FlingGestureHandler;
-//# sourceMappingURL=FlingGestureHandler.js.map