feat: expose direction property on gesture event

[uncvrd]

Feature Request

Hi! I have a specific use case where I have an instagram stories-esque image carousel in my app. I am using Ionic Gestures to listen for pan events when swiping to the next image. The issue I have is that I am unable to disable a swipe gesture in a specific direction on the x axis.

For example, when the user opens their stories, they should not be able to swipe backwards because they are watching their first story. I figured I could use the canStart event for this. However, the GestureDetail's deltaX value is 0 since it is triggered right at the beginning of the gesture event (e.g. no delta has been registered).

I was wondering if we could have some sort of API that would allow us to prevent gestures in a negative of positive direction on an axis? Or is there a better way to do what I'm explaining?

Notice the black screen when I try to swipe back? I am at index 0 and should not be allowed to swipe back like that.

For example here's my React Gesture:

const swipeGesture = createGesture({
            el: cubeRef.current!,
            gestureName: 'swipe-gesture',
            direction: 'x',
            gesturePriority: 50,
            onMove: (ev) => onMove(ev),
            onEnd: (ev) => onEnd(ev)
        });
        swipeGesture.enable(true);

I use react-spring for my transition animations:

const onMove = (ev: GestureDetail) => {
    
            const currentRotate = index * 90 * -1;
            const convert = linearConversion([0, width], [currentRotate, currentRotate + 90]);
            let v = convert(ev.deltaX);

            // prevent current drag event from transitioning more than 90 degrees
            if (v > currentRotate + 90) {
                v = currentRotate + 90;
            } else if (v < currentRotate - 90) {
                v = currentRotate - 90;
            }
           
            // this is where the transition animation occurs, I am setting my css `translateY` to the value of `rotateY` defined here
            set({
                rotateY: v,
                immediate: true,
            });
        };

In my code I can check to see if the user is at index === 0, if so, I would like to prevent pan gestures that result in a positive deltaX event.

Describe Preferred Solution

A very rough idea is to have an API like:

axis: 'positive' | 'negative' | 'both'

If it was possible to use canStart for this, I would do something like:

const canStart = (ev: GestureDetail) => {
    // if we are on the first item and the user tries to swipe backwards
    if (index === 0 && ev.deltaX > 0) {
        return false
    }
    // else allow start
    return true;
}

Describe Alternatives

I've tried to swipeGesture.enable(false) within my onMove() method with hopes that an onEnd() event would be called, so that I could re-enable the gesture once they let go but that doesn't work either.

Any thoughts on this would be super helpful, thank you!

Ionic version:

[x] 5.1.0