react-native-gesture-handler 2.26.0 → 2.27.1

package/lib/typescript/web/utils.js

@@ -0,0 +1,233 @@
+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));
+}

package/lib/typescript/web_hammer/DiscreteGestureHandler.d.ts

@@ -18,4 +18,3 @@ declare abstract class DiscreteGestureHandler extends GestureHandler {
     };
 }
 export default DiscreteGestureHandler;
-//# sourceMappingURL=DiscreteGestureHandler.d.ts.map

package/lib/typescript/web_hammer/DiscreteGestureHandler.js

@@ -0,0 +1,48 @@
+/* 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;

package/lib/typescript/web_hammer/DraggingGestureHandler.d.ts

@@ -13,4 +13,3 @@ declare abstract class DraggingGestureHandler extends GestureHandler {
     };
 }
 export default DraggingGestureHandler;
-//# sourceMappingURL=DraggingGestureHandler.d.ts.map

package/lib/typescript/web_hammer/DraggingGestureHandler.js

@@ -0,0 +1,25 @@
+/* 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;

package/lib/typescript/web_hammer/Errors.d.ts

@@ -1,4 +1,3 @@
 export declare class GesturePropError extends Error {
     constructor(name: string, value: unknown, expectedType: string);
 }
-//# sourceMappingURL=Errors.d.ts.map

package/lib/typescript/web_hammer/Errors.js

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

package/lib/typescript/web_hammer/FlingGestureHandler.d.ts

@@ -41,4 +41,3 @@ declare class FlingGestureHandler extends DraggingGestureHandler {
     }>;
 }
 export default FlingGestureHandler;
-//# sourceMappingURL=FlingGestureHandler.d.ts.map

package/lib/typescript/web_hammer/FlingGestureHandler.js

@@ -0,0 +1,119 @@
+/* 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;

package/lib/typescript/web_hammer/GestureHandler.d.ts

@@ -143,4 +143,3 @@ declare abstract class GestureHandler {
     ensureConfig(config: Config): Required<Config>;
 }
 export default GestureHandler;
-//# sourceMappingURL=GestureHandler.d.ts.map