Gesture with wheel and drag bugs drag bounds.

[danielx-art]

I have a canvas, and I want to move the camera down or up on the canvas, like scrolling a page, either by actually wheeling (useful on PC) or by dragging (to also be mobile friendly). If I wheel, I want the gesture to clamp at the page beginning or end, and If I drag, I want it to be a little rubberband effect on the same page limits.
Now if I only wheel on the page or only drag everything works fine, but then, If I wheel and then I drag, things break up and sometimes behave weirdly, but the main problem is that the coordinates of the borders on the drag gesture get shifted together with the wheel movement. I tried tracking this shift by introducing a state variable on the main scope of my component, then update that shift in coordinates everytime I use the wheel gesture, so that I can recalibrate my borders on the drag config everytime the wheel gesture kicks in, but that did absolutely nothing. Here's a sandbox:

https://codesandbox.io/s/use-gesture-test-i3n9o?file=/src/App.js

What am I missing and how would I implement this (scrolling or dragging - with rubberband ) to move the camera if not this way? That doesn't seem like a complex use case but I can't find any example on that anywhere. Please help! And thanks very much!

[dbismut]

A few things worth noticing: there's no need to use the useCallback hook for handlers. The useGesture hook is recomputed on every render whether the handler function reference changes or not. In that case it just adds complexity and a if / else condition relying on event.type which is not always safe with this lib.

Here's a working sandbox (at least I think in my rapid testing): https://codesandbox.io/s/dreamy-sound-wutk2
I haven't used rollSpeed as this is typically the sort of complexity overload that I don't want to deal with when solving issues.

Working on this sandbox makes me realize that there might be something to be done to make bounds work better when wheel is changing direction (completely unrelated to your problem).

[danielx-art]

Thank you very much I'm new to this and I am very grateful for all help, going to take a look at your sandbox right now. Just to add, I thought the useCallback would improve performance but now I see what you mean, and I'll remove the event.type condition. What you said about changing wheel direction, that's actually something that's already something I left as a hardcoded option I in my original app in case I choose to do that sometime, but I'm using just the vertical direction for now.