react-native-gesture-handler 2.26.0 → 2.27.1

package/lib/typescript/web/handlers/GestureHandler.js

@@ -0,0 +1,656 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { State } from '../../State';
+import { TouchEventType, EventTypes, } from '../interfaces';
+import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
+import InteractionManager from '../tools/InteractionManager';
+import PointerTracker from '../tools/PointerTracker';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import { PointerType } from '../../PointerType';
+export default class GestureHandler {
+    lastSentState = null;
+    _state = State.UNDETERMINED;
+    _shouldCancelWhenOutside = false;
+    hasCustomActivationCriteria = false;
+    _enabled = false;
+    viewRef;
+    propsRef;
+    _handlerTag;
+    _config = { enabled: false };
+    _tracker = new PointerTracker();
+    // Orchestrator properties
+    _activationIndex = 0;
+    _awaiting = false;
+    _active = false;
+    _shouldResetProgress = false;
+    _pointerType = PointerType.MOUSE;
+    _delegate;
+    constructor(delegate) {
+        this._delegate = delegate;
+    }
+    //
+    // Initializing handler
+    //
+    init(viewRef, propsRef) {
+        this.propsRef = propsRef;
+        this.viewRef = viewRef;
+        this.state = State.UNDETERMINED;
+        this.delegate.init(viewRef, this);
+    }
+    attachEventManager(manager) {
+        manager.setOnPointerDown(this.onPointerDown.bind(this));
+        manager.setOnPointerAdd(this.onPointerAdd.bind(this));
+        manager.setOnPointerUp(this.onPointerUp.bind(this));
+        manager.setOnPointerRemove(this.onPointerRemove.bind(this));
+        manager.setOnPointerMove(this.onPointerMove.bind(this));
+        manager.setOnPointerEnter(this.onPointerEnter.bind(this));
+        manager.setOnPointerLeave(this.onPointerLeave.bind(this));
+        manager.setOnPointerCancel(this.onPointerCancel.bind(this));
+        manager.setOnPointerOutOfBounds(this.onPointerOutOfBounds.bind(this));
+        manager.setOnPointerMoveOver(this.onPointerMoveOver.bind(this));
+        manager.setOnPointerMoveOut(this.onPointerMoveOut.bind(this));
+        manager.setOnWheel(this.onWheel.bind(this));
+        manager.registerListeners();
+    }
+    //
+    // Resetting handler
+    //
+    onCancel() { }
+    onReset() { }
+    resetProgress() { }
+    reset() {
+        this.tracker.resetTracker();
+        this.onReset();
+        this.resetProgress();
+        this.delegate.reset();
+        this.state = State.UNDETERMINED;
+    }
+    //
+    // State logic
+    //
+    moveToState(newState, sendIfDisabled) {
+        if (this.state === newState) {
+            return;
+        }
+        const oldState = this.state;
+        this.state = newState;
+        if (this.tracker.trackedPointersCount > 0 &&
+            this.config.needsPointerData &&
+            this.isFinished()) {
+            this.cancelTouches();
+        }
+        GestureHandlerOrchestrator.instance.onHandlerStateChange(this, newState, oldState, sendIfDisabled);
+        this.onStateChange(newState, oldState);
+        if (!this.enabled && this.isFinished()) {
+            this.state = State.UNDETERMINED;
+        }
+    }
+    onStateChange(_newState, _oldState) { }
+    begin() {
+        if (!this.checkHitSlop()) {
+            return;
+        }
+        if (this.state === State.UNDETERMINED) {
+            this.moveToState(State.BEGAN);
+        }
+    }
+    /**
+     * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send fail event
+     */
+    fail(sendIfDisabled) {
+        if (this.state === State.ACTIVE || this.state === State.BEGAN) {
+            // Here the order of calling the delegate and moveToState is important.
+            // At this point we can use currentState as previuos state, because immediately after changing cursor we call moveToState method.
+            this.delegate.onFail();
+            this.moveToState(State.FAILED, sendIfDisabled);
+        }
+        this.resetProgress();
+    }
+    /**
+     * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send cancel event
+     */
+    cancel(sendIfDisabled) {
+        if (this.state === State.ACTIVE ||
+            this.state === State.UNDETERMINED ||
+            this.state === State.BEGAN) {
+            this.onCancel();
+            // Same as above - order matters
+            this.delegate.onCancel();
+            this.moveToState(State.CANCELLED, sendIfDisabled);
+        }
+    }
+    activate(force = false) {
+        if ((this.config.manualActivation !== true || force) &&
+            (this.state === State.UNDETERMINED || this.state === State.BEGAN)) {
+            this.delegate.onActivate();
+            this.moveToState(State.ACTIVE);
+        }
+    }
+    end() {
+        if (this.state === State.BEGAN || this.state === State.ACTIVE) {
+            // Same as above - order matters
+            this.delegate.onEnd();
+            this.moveToState(State.END);
+        }
+        this.resetProgress();
+    }
+    //
+    // Methods for orchestrator
+    //
+    getShouldResetProgress() {
+        return this.shouldResetProgress;
+    }
+    setShouldResetProgress(value) {
+        this.shouldResetProgress = value;
+    }
+    shouldWaitForHandlerFailure(handler) {
+        if (handler === this) {
+            return false;
+        }
+        return InteractionManager.instance.shouldWaitForHandlerFailure(this, handler);
+    }
+    shouldRequireToWaitForFailure(handler) {
+        if (handler === this) {
+            return false;
+        }
+        return InteractionManager.instance.shouldRequireHandlerToWaitForFailure(this, handler);
+    }
+    shouldRecognizeSimultaneously(handler) {
+        if (handler === this) {
+            return true;
+        }
+        return InteractionManager.instance.shouldRecognizeSimultaneously(this, handler);
+    }
+    shouldBeCancelledByOther(handler) {
+        if (handler === this) {
+            return false;
+        }
+        return InteractionManager.instance.shouldHandlerBeCancelledBy(this, handler);
+    }
+    //
+    // Event actions
+    //
+    onPointerDown(event) {
+        GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(this);
+        this.pointerType = event.pointerType;
+        if (this.pointerType === PointerType.TOUCH) {
+            GestureHandlerOrchestrator.instance.cancelMouseAndPenGestures(this);
+        }
+        // TODO: Bring back touch events along with introducing `handleDown` method that will handle handler specific stuff
+    }
+    // Adding another pointer to existing ones
+    onPointerAdd(event) {
+        this.tryToSendTouchEvent(event);
+    }
+    onPointerUp(event) {
+        this.tryToSendTouchEvent(event);
+    }
+    // Removing pointer, when there is more than one pointers
+    onPointerRemove(event) {
+        this.tryToSendTouchEvent(event);
+    }
+    onPointerMove(event) {
+        this.tryToSendMoveEvent(false, event);
+    }
+    onPointerLeave(event) {
+        if (this.shouldCancelWhenOutside) {
+            switch (this.state) {
+                case State.ACTIVE:
+                    this.cancel();
+                    break;
+                case State.BEGAN:
+                    this.fail();
+                    break;
+            }
+            return;
+        }
+        this.tryToSendTouchEvent(event);
+    }
+    onPointerEnter(event) {
+        this.tryToSendTouchEvent(event);
+    }
+    onPointerCancel(event) {
+        this.tryToSendTouchEvent(event);
+        this.cancel();
+        this.reset();
+    }
+    onPointerOutOfBounds(event) {
+        this.tryToSendMoveEvent(true, event);
+    }
+    onPointerMoveOver(_event) {
+        // Used only by hover gesture handler atm
+    }
+    onPointerMoveOut(_event) {
+        // Used only by hover gesture handler atm
+    }
+    onWheel(_event) {
+        // Used only by pan gesture handler
+    }
+    tryToSendMoveEvent(out, event) {
+        if ((out && this.shouldCancelWhenOutside) || !this.enabled) {
+            return;
+        }
+        if (this.active) {
+            this.sendEvent(this.state, this.state);
+        }
+        this.tryToSendTouchEvent(event);
+    }
+    tryToSendTouchEvent(event) {
+        if (this.config.needsPointerData) {
+            this.sendTouchEvent(event);
+        }
+    }
+    sendTouchEvent(event) {
+        if (!this.enabled) {
+            return;
+        }
+        const { onGestureHandlerEvent } = this.propsRef
+            .current;
+        const touchEvent = this.transformTouchEvent(event);
+        if (touchEvent) {
+            invokeNullableMethod(onGestureHandlerEvent, touchEvent);
+        }
+    }
+    //
+    // Events Sending
+    //
+    sendEvent = (newState, oldState) => {
+        const { onGestureHandlerEvent, onGestureHandlerStateChange } = this.propsRef.current;
+        const resultEvent = this.transformEventData(newState, oldState);
+        // In the new API oldState field has to be undefined, unless we send event state changed
+        // Here the order is flipped to avoid workarounds such as making backup of the state and setting it to undefined first, then changing it back
+        // Flipping order with setting oldState to undefined solves issue, when events were being sent twice instead of once
+        // However, this may cause trouble in the future (but for now we don't know that)
+        if (this.lastSentState !== newState) {
+            this.lastSentState = newState;
+            invokeNullableMethod(onGestureHandlerStateChange, resultEvent);
+        }
+        if (this.state === State.ACTIVE) {
+            resultEvent.nativeEvent.oldState = undefined;
+            invokeNullableMethod(onGestureHandlerEvent, resultEvent);
+        }
+    };
+    transformEventData(newState, oldState) {
+        return {
+            nativeEvent: {
+                numberOfPointers: this.tracker.trackedPointersCount,
+                state: newState,
+                pointerInside: this.delegate.isPointerInBounds(this.tracker.getAbsoluteCoordsAverage()),
+                ...this.transformNativeEvent(),
+                handlerTag: this.handlerTag,
+                target: this.viewRef,
+                oldState: newState !== oldState ? oldState : undefined,
+                pointerType: this.pointerType,
+            },
+            timeStamp: Date.now(),
+        };
+    }
+    transformTouchEvent(event) {
+        const rect = this.delegate.measureView();
+        const all = [];
+        const changed = [];
+        const trackerData = this.tracker.trackedPointers;
+        // This if handles edge case where all pointers have been cancelled
+        // When pointercancel is triggered, reset method is called. This means that tracker will be reset after first pointer being cancelled
+        // The problem is, that handler will receive another pointercancel event from the rest of the pointers
+        // To avoid crashing, we don't send event if tracker tracks no pointers, i.e. has been reset
+        if (trackerData.size === 0 || !trackerData.has(event.pointerId)) {
+            return;
+        }
+        trackerData.forEach((element, key) => {
+            const id = this.tracker.getMappedTouchEventId(key);
+            all.push({
+                id: id,
+                x: element.abosoluteCoords.x - rect.pageX,
+                y: element.abosoluteCoords.y - rect.pageY,
+                absoluteX: element.abosoluteCoords.x,
+                absoluteY: element.abosoluteCoords.y,
+            });
+        });
+        // Each pointer sends its own event, so we want changed touches to contain only the pointer that has changed.
+        // However, if the event is cancel, we want to cancel all pointers to avoid crashes
+        if (event.eventType !== EventTypes.CANCEL) {
+            changed.push({
+                id: this.tracker.getMappedTouchEventId(event.pointerId),
+                x: event.x - rect.pageX,
+                y: event.y - rect.pageY,
+                absoluteX: event.x,
+                absoluteY: event.y,
+            });
+        }
+        else {
+            trackerData.forEach((element, key) => {
+                const id = this.tracker.getMappedTouchEventId(key);
+                changed.push({
+                    id: id,
+                    x: element.abosoluteCoords.x - rect.pageX,
+                    y: element.abosoluteCoords.y - rect.pageY,
+                    absoluteX: element.abosoluteCoords.x,
+                    absoluteY: element.abosoluteCoords.y,
+                });
+            });
+        }
+        let eventType = TouchEventType.UNDETERMINED;
+        switch (event.eventType) {
+            case EventTypes.DOWN:
+            case EventTypes.ADDITIONAL_POINTER_DOWN:
+                eventType = TouchEventType.DOWN;
+                break;
+            case EventTypes.UP:
+            case EventTypes.ADDITIONAL_POINTER_UP:
+                eventType = TouchEventType.UP;
+                break;
+            case EventTypes.MOVE:
+                eventType = TouchEventType.MOVE;
+                break;
+            case EventTypes.CANCEL:
+                eventType = TouchEventType.CANCELLED;
+                break;
+        }
+        // Here, when we receive up event, we want to decrease number of touches
+        // That's because we want handler to send information that there's one pointer less
+        // However, we still want this pointer to be present in allTouches array, so that its data can be accessed
+        let numberOfTouches = all.length;
+        if (event.eventType === EventTypes.UP ||
+            event.eventType === EventTypes.ADDITIONAL_POINTER_UP) {
+            --numberOfTouches;
+        }
+        return {
+            nativeEvent: {
+                handlerTag: this.handlerTag,
+                state: this.state,
+                eventType: eventType,
+                changedTouches: changed,
+                allTouches: all,
+                numberOfTouches: numberOfTouches,
+                pointerType: this.pointerType,
+            },
+            timeStamp: Date.now(),
+        };
+    }
+    cancelTouches() {
+        const rect = this.delegate.measureView();
+        const all = [];
+        const changed = [];
+        const trackerData = this.tracker.trackedPointers;
+        if (trackerData.size === 0) {
+            return;
+        }
+        trackerData.forEach((element, key) => {
+            const id = this.tracker.getMappedTouchEventId(key);
+            all.push({
+                id: id,
+                x: element.abosoluteCoords.x - rect.pageX,
+                y: element.abosoluteCoords.y - rect.pageY,
+                absoluteX: element.abosoluteCoords.x,
+                absoluteY: element.abosoluteCoords.y,
+            });
+            changed.push({
+                id: id,
+                x: element.abosoluteCoords.x - rect.pageX,
+                y: element.abosoluteCoords.y - rect.pageY,
+                absoluteX: element.abosoluteCoords.x,
+                absoluteY: element.abosoluteCoords.y,
+            });
+        });
+        const cancelEvent = {
+            nativeEvent: {
+                handlerTag: this.handlerTag,
+                state: this.state,
+                eventType: TouchEventType.CANCELLED,
+                changedTouches: changed,
+                allTouches: all,
+                numberOfTouches: all.length,
+                pointerType: this.pointerType,
+            },
+            timeStamp: Date.now(),
+        };
+        const { onGestureHandlerEvent } = this.propsRef
+            .current;
+        invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+    }
+    transformNativeEvent() {
+        // Those properties are shared by most handlers and if not this method will be overriden
+        const lastCoords = this.tracker.getAbsoluteCoordsAverage();
+        const lastRelativeCoords = this.tracker.getRelativeCoordsAverage();
+        return {
+            x: lastRelativeCoords.x,
+            y: lastRelativeCoords.y,
+            absoluteX: lastCoords.x,
+            absoluteY: lastCoords.y,
+        };
+    }
+    //
+    // Handling config
+    //
+    updateGestureConfig({ enabled = true, ...props }) {
+        this._config = { enabled: enabled, ...props };
+        this.enabled = enabled;
+        this.delegate.onEnabledChange(enabled);
+        if (this.config.shouldCancelWhenOutside !== undefined) {
+            this.shouldCancelWhenOutside = this.config.shouldCancelWhenOutside;
+        }
+        this.validateHitSlops();
+        if (this.enabled) {
+            return;
+        }
+        switch (this.state) {
+            case State.ACTIVE:
+                this.fail(true);
+                break;
+            case State.UNDETERMINED:
+                GestureHandlerOrchestrator.instance.removeHandlerFromOrchestrator(this);
+                break;
+            default:
+                this.cancel(true);
+                break;
+        }
+    }
+    checkCustomActivationCriteria(criterias) {
+        for (const key in this.config) {
+            if (criterias.indexOf(key) >= 0) {
+                this.hasCustomActivationCriteria = true;
+            }
+        }
+    }
+    validateHitSlops() {
+        if (!this.config.hitSlop) {
+            return;
+        }
+        if (this.config.hitSlop.left !== undefined &&
+            this.config.hitSlop.right !== undefined &&
+            this.config.hitSlop.width !== undefined) {
+            throw new Error('HitSlop Error: Cannot define left, right and width at the same time');
+        }
+        if (this.config.hitSlop.width !== undefined &&
+            this.config.hitSlop.left === undefined &&
+            this.config.hitSlop.right === undefined) {
+            throw new Error('HitSlop Error: When width is defined, either left or right has to be defined');
+        }
+        if (this.config.hitSlop.height !== undefined &&
+            this.config.hitSlop.top !== undefined &&
+            this.config.hitSlop.bottom !== undefined) {
+            throw new Error('HitSlop Error: Cannot define top, bottom and height at the same time');
+        }
+        if (this.config.hitSlop.height !== undefined &&
+            this.config.hitSlop.top === undefined &&
+            this.config.hitSlop.bottom === undefined) {
+            throw new Error('HitSlop Error: When height is defined, either top or bottom has to be defined');
+        }
+    }
+    checkHitSlop() {
+        if (!this.config.hitSlop) {
+            return true;
+        }
+        const { width, height } = this.delegate.measureView();
+        let left = 0;
+        let top = 0;
+        let right = width;
+        let bottom = height;
+        if (this.config.hitSlop.horizontal !== undefined) {
+            left -= this.config.hitSlop.horizontal;
+            right += this.config.hitSlop.horizontal;
+        }
+        if (this.config.hitSlop.vertical !== undefined) {
+            top -= this.config.hitSlop.vertical;
+            bottom += this.config.hitSlop.vertical;
+        }
+        if (this.config.hitSlop.left !== undefined) {
+            left = -this.config.hitSlop.left;
+        }
+        if (this.config.hitSlop.right !== undefined) {
+            right = width + this.config.hitSlop.right;
+        }
+        if (this.config.hitSlop.top !== undefined) {
+            top = -this.config.hitSlop.top;
+        }
+        if (this.config.hitSlop.bottom !== undefined) {
+            bottom = width + this.config.hitSlop.bottom;
+        }
+        if (this.config.hitSlop.width !== undefined) {
+            if (this.config.hitSlop.left !== undefined) {
+                right = left + this.config.hitSlop.width;
+            }
+            else if (this.config.hitSlop.right !== undefined) {
+                left = right - this.config.hitSlop.width;
+            }
+        }
+        if (this.config.hitSlop.height !== undefined) {
+            if (this.config.hitSlop.top !== undefined) {
+                bottom = top + this.config.hitSlop.height;
+            }
+            else if (this.config.hitSlop.bottom !== undefined) {
+                top = bottom - this.config.hitSlop.height;
+            }
+        }
+        const rect = this.delegate.measureView();
+        const lastCoords = this.tracker.getLastAbsoluteCoords();
+        if (!lastCoords) {
+            return false;
+        }
+        const offsetX = lastCoords.x - rect.pageX;
+        const offsetY = lastCoords.y - rect.pageY;
+        return (offsetX >= left && offsetX <= right && offsetY >= top && offsetY <= bottom);
+    }
+    isButtonInConfig(mouseButton) {
+        return (!mouseButton ||
+            (!this.config.mouseButton && mouseButton === MouseButton.LEFT) ||
+            (this.config.mouseButton && mouseButton & this.config.mouseButton));
+    }
+    resetConfig() { }
+    onDestroy() {
+        this.delegate.destroy(this.config);
+    }
+    //
+    // Getters and setters
+    //
+    get handlerTag() {
+        return this._handlerTag;
+    }
+    set handlerTag(value) {
+        this._handlerTag = value;
+    }
+    get config() {
+        return this._config;
+    }
+    get delegate() {
+        return this._delegate;
+    }
+    get tracker() {
+        return this._tracker;
+    }
+    get state() {
+        return this._state;
+    }
+    set state(value) {
+        this._state = value;
+    }
+    get shouldCancelWhenOutside() {
+        return this._shouldCancelWhenOutside;
+    }
+    set shouldCancelWhenOutside(value) {
+        this._shouldCancelWhenOutside = value;
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(value) {
+        this._enabled = value;
+    }
+    get pointerType() {
+        return this._pointerType;
+    }
+    set pointerType(value) {
+        this._pointerType = value;
+    }
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        this._active = value;
+    }
+    get awaiting() {
+        return this._awaiting;
+    }
+    set awaiting(value) {
+        this._awaiting = value;
+    }
+    get activationIndex() {
+        return this._activationIndex;
+    }
+    set activationIndex(value) {
+        this._activationIndex = value;
+    }
+    get shouldResetProgress() {
+        return this._shouldResetProgress;
+    }
+    set shouldResetProgress(value) {
+        this._shouldResetProgress = value;
+    }
+    getTrackedPointersID() {
+        return this.tracker.trackedPointersIDs;
+    }
+    isFinished() {
+        return (this.state === State.END ||
+            this.state === State.FAILED ||
+            this.state === State.CANCELLED);
+    }
+}
+function invokeNullableMethod(method, event) {
+    if (!method) {
+        return;
+    }
+    if (typeof method === 'function') {
+        method(event);
+        return;
+    }
+    if ('__getHandler' in method && typeof method.__getHandler === 'function') {
+        const handler = method.__getHandler();
+        invokeNullableMethod(handler, event);
+        return;
+    }
+    if (!('__nodeConfig' in method)) {
+        return;
+    }
+    const { argMapping } = method.__nodeConfig;
+    if (!Array.isArray(argMapping)) {
+        return;
+    }
+    for (const [index, [key, value]] of argMapping.entries()) {
+        if (!(key in event.nativeEvent)) {
+            continue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const nativeValue = event.nativeEvent[key];
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (value?.setValue) {
+            // Reanimated API
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+            value.setValue(nativeValue);
+        }
+        else {
+            // RN Animated API
+            method.__nodeConfig.argMapping[index] = [key, nativeValue];
+        }
+    }
+    return;
+}

package/lib/typescript/web/handlers/HoverGestureHandler.d.ts

@@ -8,4 +8,3 @@ export default class HoverGestureHandler extends GestureHandler {
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerCancel(event: AdaptedEvent): void;
 }
-//# sourceMappingURL=HoverGestureHandler.d.ts.map

package/lib/typescript/web/handlers/HoverGestureHandler.js

@@ -0,0 +1,37 @@
+import { State } from '../../State';
+import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
+import GestureHandler from './GestureHandler';
+export default class HoverGestureHandler extends GestureHandler {
+    stylusData;
+    transformNativeEvent() {
+        return {
+            ...super.transformNativeEvent(),
+            stylusData: this.stylusData,
+        };
+    }
+    onPointerMoveOver(event) {
+        GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(this);
+        this.tracker.addToTracker(event);
+        this.stylusData = event.stylusData;
+        super.onPointerMoveOver(event);
+        if (this.state === State.UNDETERMINED) {
+            this.begin();
+            this.activate();
+        }
+    }
+    onPointerMoveOut(event) {
+        this.tracker.removeFromTracker(event.pointerId);
+        this.stylusData = event.stylusData;
+        super.onPointerMoveOut(event);
+        this.end();
+    }
+    onPointerMove(event) {
+        this.tracker.track(event);
+        this.stylusData = event.stylusData;
+        super.onPointerMove(event);
+    }
+    onPointerCancel(event) {
+        super.onPointerCancel(event);
+        this.reset();
+    }
+}

package/lib/typescript/web/handlers/IGestureHandler.d.ts

@@ -35,4 +35,3 @@ export default interface IGestureHandler {
     updateGestureConfig: (config: Config) => void;
     isButton?: () => boolean;
 }
-//# sourceMappingURL=IGestureHandler.d.ts.map

package/lib/typescript/web/handlers/IGestureHandler.js

@@ -0,0 +1 @@
+export {};