ionic-team / ionic-team/ionic-framework

feat: expose direction property on gesture event

Open
#21,430 9 comments 0 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# 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?

![Swipe Gesture](https://media.giphy.com/media/d7CPFPW6bNC7AG9ASn/giphy.gif)

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**

Contributor guide

Open the contributing guide

Research direction

Start with the createGesture API and GestureDetail behavior described in the issue, focusing on when canStart runs and which gesture values are available. Trace the gesture event entry points and existing direction handling before deciding how the requested direction property should behave. Done means the API supports the stated directional boundary use case and its behavior is covered by the relevant gesture tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.