Add 'reverse' option to wheel gesture

[jeroenkroese]

This PR adds a reverse option to the wheel gesture, which inverts the direction of wheel scrolling. A few years ago, a similar PR https://github.com/pmndrs/use-gesture/pull/171 has been closed with the reason that the inversion could easily be done in userland.

In my scenario, I'm using multiple gestures (drag, pinch-to-zoom, and wheel) to navigate around a canvas element, and I'm using the from and bounds properties to limit the canvas movement. This led to some complications when I tried to invert the direction of the wheel scroll. Without having the reverse option, it would require a complex bounds calculation which would be the inverse of the bounds which I'm already calculating for the drag gesture. This was my first approach, however I ran into some weird behaviour which is was not able to easily fix.

The reverse option that is introduced by this PR allows developers in the invert the wheel gesture, while allowing to use the same bounds calculation that is used by the drag gesture. This will make it easier for developers that wish to implement drag and wheel gesture behaviour similar to something like excalidraw.com.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 7f07adb25ac8eb53e3b6c9cc80fdea3e040a9218

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7f07adb25ac8eb53e3b6c9cc80fdea3e040a9218:

Sandbox	Source
gesture-drag	Configuration
gesture-drag-target	Configuration
gesture-nested	Configuration
gesture-drag-vanilla	Configuration
gesture-move	Configuration
gesture-pinch	Configuration
gesture-multiple-pinch	Configuration
gesture-three	Configuration
gesture-card-zoom	Configuration
gesture-viewpager	Configuration

[jeroenkroese]

@dbismut could you please take a look?

[dbismut]

Hi @jeroenkroese thanks for the PR. Unfortunately I don't have a lot of time to dedicate to OSS atm. What's the benefit of this vs using the transform option beyond simplicity?

https://use-gesture.netlify.app/docs/options/#transform

[jeroenkroese]

Hi @dbismut, I'm sorry for the late reply to your swift response. I got distracted.

I've created a simple reproduction of what I'm trying to achieve. Unfortunately, I could not get it working using the transform option. It seems that the wheel gesture doesn't output anything when the transform option has been configured.

https://codesandbox.io/p/sandbox/use-gesture-zoom-reverse-23npzv?file=%2Fsrc%2FApp.js

[jeroenkroese]

Hi @dbismut, I just noticed that I'd left the codesandbox on private. It should be public now.

Do you think this behaviour should be accomplishable by using the transform option? In that case I think there might be a bug, as I could not get it working. I would appreciate if you could take a quick look.

https://codesandbox.io/p/sandbox/use-gesture-zoom-reverse-23npzv