react-native-gesture-handler 2.26.0 → 2.27.1

package/lib/typescript/web/tools/GestureHandlerWebDelegate.js

@@ -0,0 +1,169 @@
+import findNodeHandle from '../../findNodeHandle';
+import PointerEventManager from './PointerEventManager';
+import { State } from '../../State';
+import { isPointerInBounds } from '../utils';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import KeyboardEventManager from './KeyboardEventManager';
+import WheelEventManager from './WheelEventManager';
+export class GestureHandlerWebDelegate {
+    isInitialized = false;
+    _view;
+    gestureHandler;
+    eventManagers = [];
+    defaultViewStyles = {
+        userSelect: '',
+        touchAction: '',
+    };
+    init(viewRef, handler) {
+        if (!viewRef) {
+            throw new Error(`Cannot find HTML Element for handler ${handler.handlerTag}`);
+        }
+        this.isInitialized = true;
+        this.gestureHandler = handler;
+        this.view = findNodeHandle(viewRef);
+        this.defaultViewStyles = {
+            userSelect: this.view.style.userSelect,
+            touchAction: this.view.style.touchAction,
+        };
+        const config = handler.config;
+        this.setUserSelect(config.enabled);
+        this.setTouchAction(config.enabled);
+        this.setContextMenu(config.enabled);
+        this.eventManagers.push(new PointerEventManager(this.view));
+        this.eventManagers.push(new KeyboardEventManager(this.view));
+        this.eventManagers.push(new WheelEventManager(this.view));
+        this.eventManagers.forEach((manager) => this.gestureHandler.attachEventManager(manager));
+    }
+    isPointerInBounds({ x, y }) {
+        return isPointerInBounds(this.view, { x, y });
+    }
+    measureView() {
+        const rect = this.view.getBoundingClientRect();
+        return {
+            pageX: rect.left,
+            pageY: rect.top,
+            width: rect.width,
+            height: rect.height,
+        };
+    }
+    reset() {
+        this.eventManagers.forEach((manager) => manager.resetManager());
+    }
+    tryResetCursor() {
+        const config = this.gestureHandler.config;
+        if (config.activeCursor &&
+            config.activeCursor !== 'auto' &&
+            this.gestureHandler.state === State.ACTIVE) {
+            this.view.style.cursor = 'auto';
+        }
+    }
+    shouldDisableContextMenu(config) {
+        return ((config.enableContextMenu === undefined &&
+            this.gestureHandler.isButtonInConfig(MouseButton.RIGHT)) ||
+            config.enableContextMenu === false);
+    }
+    addContextMenuListeners(config) {
+        if (this.shouldDisableContextMenu(config)) {
+            this.view.addEventListener('contextmenu', this.disableContextMenu);
+        }
+        else if (config.enableContextMenu) {
+            this.view.addEventListener('contextmenu', this.enableContextMenu);
+        }
+    }
+    removeContextMenuListeners(config) {
+        if (this.shouldDisableContextMenu(config)) {
+            this.view.removeEventListener('contextmenu', this.disableContextMenu);
+        }
+        else if (config.enableContextMenu) {
+            this.view.removeEventListener('contextmenu', this.enableContextMenu);
+        }
+    }
+    disableContextMenu(e) {
+        e.preventDefault();
+    }
+    enableContextMenu(e) {
+        e.stopPropagation();
+    }
+    setUserSelect(isHandlerEnabled) {
+        const { userSelect } = this.gestureHandler.config;
+        this.view.style['userSelect'] = isHandlerEnabled
+            ? (userSelect ?? 'none')
+            : this.defaultViewStyles.userSelect;
+        this.view.style['webkitUserSelect'] = isHandlerEnabled
+            ? (userSelect ?? 'none')
+            : this.defaultViewStyles.userSelect;
+    }
+    setTouchAction(isHandlerEnabled) {
+        const { touchAction } = this.gestureHandler.config;
+        this.view.style['touchAction'] = isHandlerEnabled
+            ? (touchAction ?? 'none')
+            : this.defaultViewStyles.touchAction;
+        // @ts-ignore This one disables default events on Safari
+        this.view.style['WebkitTouchCallout'] = isHandlerEnabled
+            ? (touchAction ?? 'none')
+            : this.defaultViewStyles.touchAction;
+    }
+    setContextMenu(isHandlerEnabled) {
+        const config = this.gestureHandler.config;
+        if (isHandlerEnabled) {
+            this.addContextMenuListeners(config);
+        }
+        else {
+            this.removeContextMenuListeners(config);
+        }
+    }
+    onEnabledChange(enabled) {
+        if (!this.isInitialized) {
+            return;
+        }
+        this.setUserSelect(enabled);
+        this.setTouchAction(enabled);
+        this.setContextMenu(enabled);
+        if (enabled) {
+            this.eventManagers.forEach((manager) => {
+                // It may look like managers will be registered twice when handler is mounted for the first time.
+                // However, `init` method is called AFTER `updateGestureConfig` - it means that delegate has not
+                // been initialized yet, so this code won't be executed.
+                //
+                // Also, because we use defined functions, not lambdas, they will not be registered multiple times.
+                manager.registerListeners();
+            });
+        }
+        else {
+            this.eventManagers.forEach((manager) => {
+                manager.unregisterListeners();
+            });
+        }
+    }
+    onBegin() {
+        // no-op for now
+    }
+    onActivate() {
+        const config = this.gestureHandler.config;
+        if ((!this.view.style.cursor || this.view.style.cursor === 'auto') &&
+            config.activeCursor) {
+            this.view.style.cursor = config.activeCursor;
+        }
+    }
+    onEnd() {
+        this.tryResetCursor();
+    }
+    onCancel() {
+        this.tryResetCursor();
+    }
+    onFail() {
+        this.tryResetCursor();
+    }
+    destroy(config) {
+        this.removeContextMenuListeners(config);
+        this.eventManagers.forEach((manager) => {
+            manager.unregisterListeners();
+        });
+    }
+    get view() {
+        return this._view;
+    }
+    set view(value) {
+        this._view = value;
+    }
+}

package/lib/typescript/web/tools/InteractionManager.d.ts

@@ -15,4 +15,3 @@ export default class InteractionManager {
     reset(): void;
     static get instance(): InteractionManager;
 }
-//# sourceMappingURL=InteractionManager.d.ts.map

package/lib/typescript/web/tools/InteractionManager.js

@@ -0,0 +1,91 @@
+export default class InteractionManager {
+    static _instance;
+    waitForRelations = new Map();
+    simultaneousRelations = new Map();
+    blocksHandlersRelations = new Map();
+    // Private becaues of singleton
+    // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
+    constructor() { }
+    configureInteractions(handler, config) {
+        this.dropRelationsForHandlerWithTag(handler.handlerTag);
+        if (config.waitFor) {
+            const waitFor = [];
+            config.waitFor.forEach((otherHandler) => {
+                // New API reference
+                if (typeof otherHandler === 'number') {
+                    waitFor.push(otherHandler);
+                }
+                else {
+                    // Old API reference
+                    waitFor.push(otherHandler.handlerTag);
+                }
+            });
+            this.waitForRelations.set(handler.handlerTag, waitFor);
+        }
+        if (config.simultaneousHandlers) {
+            const simultaneousHandlers = [];
+            config.simultaneousHandlers.forEach((otherHandler) => {
+                if (typeof otherHandler === 'number') {
+                    simultaneousHandlers.push(otherHandler);
+                }
+                else {
+                    simultaneousHandlers.push(otherHandler.handlerTag);
+                }
+            });
+            this.simultaneousRelations.set(handler.handlerTag, simultaneousHandlers);
+        }
+        if (config.blocksHandlers) {
+            const blocksHandlers = [];
+            config.blocksHandlers.forEach((otherHandler) => {
+                if (typeof otherHandler === 'number') {
+                    blocksHandlers.push(otherHandler);
+                }
+                else {
+                    blocksHandlers.push(otherHandler.handlerTag);
+                }
+            });
+            this.blocksHandlersRelations.set(handler.handlerTag, blocksHandlers);
+        }
+    }
+    shouldWaitForHandlerFailure(handler, otherHandler) {
+        const waitFor = this.waitForRelations.get(handler.handlerTag);
+        return (waitFor?.find((tag) => {
+            return tag === otherHandler.handlerTag;
+        }) !== undefined);
+    }
+    shouldRecognizeSimultaneously(handler, otherHandler) {
+        const simultaneousHandlers = this.simultaneousRelations.get(handler.handlerTag);
+        return (simultaneousHandlers?.find((tag) => {
+            return tag === otherHandler.handlerTag;
+        }) !== undefined);
+    }
+    shouldRequireHandlerToWaitForFailure(handler, otherHandler) {
+        const waitFor = this.blocksHandlersRelations.get(handler.handlerTag);
+        return (waitFor?.find((tag) => {
+            return tag === otherHandler.handlerTag;
+        }) !== undefined);
+    }
+    shouldHandlerBeCancelledBy(_handler, otherHandler) {
+        // We check constructor name instead of using `instanceof` in order do avoid circular dependencies
+        const isNativeHandler = otherHandler.constructor.name === 'NativeViewGestureHandler';
+        const isActive = otherHandler.active;
+        const isButton = otherHandler.isButton?.() === true;
+        return isNativeHandler && isActive && !isButton;
+    }
+    dropRelationsForHandlerWithTag(handlerTag) {
+        this.waitForRelations.delete(handlerTag);
+        this.simultaneousRelations.delete(handlerTag);
+        this.blocksHandlersRelations.delete(handlerTag);
+    }
+    reset() {
+        this.waitForRelations.clear();
+        this.simultaneousRelations.clear();
+        this.blocksHandlersRelations.clear();
+    }
+    static get instance() {
+        if (!this._instance) {
+            this._instance = new InteractionManager();
+        }
+        return this._instance;
+    }
+}

package/lib/typescript/web/tools/KeyboardEventManager.d.ts

@@ -11,4 +11,3 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
     unregisterListeners(): void;
     protected mapEvent(event: KeyboardEvent, eventType: EventTypes): AdaptedEvent;
 }
-//# sourceMappingURL=KeyboardEventManager.d.ts.map

package/lib/typescript/web/tools/KeyboardEventManager.js

@@ -0,0 +1,73 @@
+import { EventTypes } from '../interfaces';
+import EventManager from './EventManager';
+import { PointerType } from '../../PointerType';
+export default class KeyboardEventManager extends EventManager {
+    activationKeys = ['Enter', ' '];
+    cancelationKeys = ['Tab'];
+    isPressed = false;
+    keyDownCallback = (event) => {
+        if (this.cancelationKeys.indexOf(event.key) !== -1 && this.isPressed) {
+            this.dispatchEvent(event, EventTypes.CANCEL);
+            return;
+        }
+        if (this.activationKeys.indexOf(event.key) === -1) {
+            return;
+        }
+        this.dispatchEvent(event, EventTypes.DOWN);
+    };
+    keyUpCallback = (event) => {
+        if (this.activationKeys.indexOf(event.key) === -1 || !this.isPressed) {
+            return;
+        }
+        this.dispatchEvent(event, EventTypes.UP);
+    };
+    dispatchEvent(event, eventType) {
+        if (!(event.target instanceof HTMLElement)) {
+            return;
+        }
+        const adaptedEvent = this.mapEvent(event, eventType);
+        switch (eventType) {
+            case EventTypes.UP:
+                this.isPressed = false;
+                this.onPointerUp(adaptedEvent);
+                break;
+            case EventTypes.DOWN:
+                this.isPressed = true;
+                this.onPointerDown(adaptedEvent);
+                break;
+            case EventTypes.CANCEL:
+                this.isPressed = false;
+                this.onPointerCancel(adaptedEvent);
+                break;
+        }
+    }
+    registerListeners() {
+        this.view.addEventListener('keydown', this.keyDownCallback);
+        this.view.addEventListener('keyup', this.keyUpCallback);
+    }
+    unregisterListeners() {
+        this.view.removeEventListener('keydown', this.keyDownCallback);
+        this.view.removeEventListener('keyup', this.keyUpCallback);
+    }
+    mapEvent(event, eventType) {
+        const viewRect = event.target.getBoundingClientRect();
+        const viewportPosition = {
+            x: viewRect?.x + viewRect?.width / 2,
+            y: viewRect?.y + viewRect?.height / 2,
+        };
+        const relativePosition = {
+            x: viewRect?.width / 2,
+            y: viewRect?.height / 2,
+        };
+        return {
+            x: viewportPosition.x,
+            y: viewportPosition.y,
+            offsetX: relativePosition.x,
+            offsetY: relativePosition.y,
+            pointerId: 0,
+            eventType: eventType,
+            pointerType: PointerType.KEY,
+            time: event.timeStamp,
+        };
+    }
+}

package/lib/typescript/web/tools/LeastSquareSolver.d.ts

@@ -10,4 +10,3 @@ export default class LeastSquareSolver {
     solve(degree: number): PolynomialFit | null;
 }
 export {};
-//# sourceMappingURL=LeastSquareSolver.d.ts.map

package/lib/typescript/web/tools/LeastSquareSolver.js

@@ -0,0 +1,147 @@
+// Implementation taken from Flutter's LeastSquareSolver
+// https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/gestures/lsq_solver.dart
+class Vector {
+    offset;
+    length;
+    elements;
+    constructor(length) {
+        this.offset = 0;
+        this.length = length;
+        this.elements = new Array(length);
+    }
+    static fromVOL(values, offset, length) {
+        const result = new Vector(0);
+        result.offset = offset;
+        result.length = length;
+        result.elements = values;
+        return result;
+    }
+    get(index) {
+        return this.elements[this.offset + index];
+    }
+    set(index, value) {
+        this.elements[this.offset + index] = value;
+    }
+    dot(other) {
+        let result = 0;
+        for (let i = 0; i < this.length; i++) {
+            result += this.get(i) * other.get(i);
+        }
+        return result;
+    }
+    norm() {
+        return Math.sqrt(this.dot(this));
+    }
+}
+class Matrix {
+    columns;
+    elements;
+    constructor(rows, columns) {
+        this.columns = columns;
+        this.elements = new Array(rows * columns);
+    }
+    get(row, column) {
+        return this.elements[row * this.columns + column];
+    }
+    set(row, column, value) {
+        this.elements[row * this.columns + column] = value;
+    }
+    getRow(row) {
+        return Vector.fromVOL(this.elements, row * this.columns, this.columns);
+    }
+}
+// An nth degree polynomial fit to a dataset.
+class PolynomialFit {
+    // The polynomial coefficients of the fit.
+    //
+    // For each `i`, the element `coefficients[i]` is the coefficient of
+    // the `i`-th power of the variable.
+    coefficients;
+    // Creates a polynomial fit of the given degree.
+    //
+    // There are n + 1 coefficients in a fit of degree n.
+    constructor(degree) {
+        this.coefficients = new Array(degree + 1);
+    }
+}
+const precisionErrorTolerance = 1e-10;
+// Uses the least-squares algorithm to fit a polynomial to a set of data.
+export default class LeastSquareSolver {
+    // The x-coordinates of each data point.
+    x;
+    // The y-coordinates of each data point.
+    y;
+    // The weight to use for each data point.
+    w;
+    // Creates a least-squares solver.
+    //
+    // The [x], [y], and [w] arguments must not be null.
+    constructor(x, y, w) {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+    }
+    // Fits a polynomial of the given degree to the data points.
+    //
+    // When there is not enough data to fit a curve null is returned.
+    solve(degree) {
+        if (degree > this.x.length) {
+            // Not enough data to fit a curve.
+            return null;
+        }
+        const result = new PolynomialFit(degree);
+        // Shorthands for the purpose of notation equivalence to original C++ code.
+        const m = this.x.length;
+        const n = degree + 1;
+        // Expand the X vector to a matrix A, pre-multiplied by the weights.
+        const a = new Matrix(n, m);
+        for (let h = 0; h < m; h++) {
+            a.set(0, h, this.w[h]);
+            for (let i = 1; i < n; i++) {
+                a.set(i, h, a.get(i - 1, h) * this.x[h]);
+            }
+        }
+        // Apply the Gram-Schmidt process to A to obtain its QR decomposition.
+        // Orthonormal basis, column-major ordVectorer.
+        const q = new Matrix(n, m);
+        // Upper triangular matrix, row-major order.
+        const r = new Matrix(n, m);
+        for (let j = 0; j < n; j += 1) {
+            for (let h = 0; h < m; h += 1) {
+                q.set(j, h, a.get(j, h));
+            }
+            for (let i = 0; i < j; i += 1) {
+                const dot = q.getRow(j).dot(q.getRow(i));
+                for (let h = 0; h < m; h += 1) {
+                    q.set(j, h, q.get(j, h) - dot * q.get(i, h));
+                }
+            }
+            const norm = q.getRow(j).norm();
+            if (norm < precisionErrorTolerance) {
+                // Vectors are linearly dependent or zero so no solution.
+                return null;
+            }
+            const inverseNorm = 1.0 / norm;
+            for (let h = 0; h < m; h += 1) {
+                q.set(j, h, q.get(j, h) * inverseNorm);
+            }
+            for (let i = 0; i < n; i += 1) {
+                r.set(j, i, i < j ? 0.0 : q.getRow(j).dot(a.getRow(i)));
+            }
+        }
+        // Solve R B = Qt W Y to find B. This is easy because R is upper triangular.
+        // We just work from bottom-right to top-left calculating B's coefficients.
+        const wy = new Vector(m);
+        for (let h = 0; h < m; h += 1) {
+            wy.set(h, this.y[h] * this.w[h]);
+        }
+        for (let i = n - 1; i >= 0; i -= 1) {
+            result.coefficients[i] = q.getRow(i).dot(wy);
+            for (let j = n - 1; j > i; j -= 1) {
+                result.coefficients[i] -= r.get(i, j) * result.coefficients[j];
+            }
+            result.coefficients[i] /= r.get(i, i);
+        }
+        return result;
+    }
+}

package/lib/typescript/web/tools/NodeManager.d.ts

@@ -10,4 +10,3 @@ export default abstract class NodeManager {
         [x: number]: import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default | import("../handlers/ManualGestureHandler").default | import("../handlers/HoverGestureHandler").default;
     };
 }
-//# sourceMappingURL=NodeManager.d.ts.map

package/lib/typescript/web/tools/NodeManager.js

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export default class NodeManager {
+    static gestures = {};
+    static getHandler(tag) {
+        if (tag in this.gestures) {
+            return this.gestures[tag];
+        }
+        throw new Error(`No handler for tag ${tag}`);
+    }
+    static createGestureHandler(handlerTag, handler) {
+        if (handlerTag in this.gestures) {
+            throw new Error(`Handler with tag ${handlerTag} already exists. Please ensure that no Gesture instance is used across multiple GestureDetectors.`);
+        }
+        this.gestures[handlerTag] = handler;
+        this.gestures[handlerTag].handlerTag = handlerTag;
+    }
+    static dropGestureHandler(handlerTag) {
+        if (!(handlerTag in this.gestures)) {
+            return;
+        }
+        this.gestures[handlerTag].onDestroy();
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete this.gestures[handlerTag];
+    }
+    static get nodes() {
+        return { ...this.gestures };
+    }
+}

package/lib/typescript/web/tools/PointerEventManager.d.ts

@@ -17,4 +17,3 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;
     resetManager(): void;
 }
-//# sourceMappingURL=PointerEventManager.d.ts.map