Add a way to detect intentional and non-intentional gesture state

[krispya]

I want to add a CodeSandbox example when I can, but in the meantime I'll see if the written explanation is enough to get the idea.

Right now configs for useGesture that imply an intentional gesture stop the down state from being true until their conditions are met. The main ones I'm using are threshold and axis since I sometimes have an x-axis slider embedded in a y-axis sheet so that the gestures don't overlap.

This is fine in most cases as we don’t want to start a gesture until we know what direction it is going in, etc. But we are also using an intertia hook (based on your example!) providing decay with bounds. For a more natural native interaction, we want the ability to stop the spring decay on the first down, but not start the interaction (for example, moving the slider) until the gesture intention is determined. When the intentional configs are set this is impossible and the spring decay can only be interrupted when an intentional gesture is made. To fix this we really need two down states, one that is non-intentional (before a direction is detected) and one that is intentional (after a direction is detected).

Right now we are implementing this manually, a lot like Alex Holachek's original code examples, but of course it would be best if it were part of the API so we could use the nice config settings again. :)

[dbismut]

Hey @Krispy3000, thanks for the detailed issue. I think I understand. Maybe you could use the useGesture hook and put the stop logic inside onPointerDown while keeping the intentional options for onDrag?

I also myself have a tendency to put everything into useDrag, but useGesture supports native handlers which can actually be useful ;)

[krispya]

Thank you, that worked perfectly. Here is a codesandbox example of the implementation: https://codesandbox.io/s/react-gesture-sample-2-387il?file=/src/App.js:725-773

[dbismut]

For future reference v8 now has an option called triggerAllEvents that will make the handler fire for all events. Fortunately state has an intentional flag that allows you to do things like:

useDrag(({ event, intentional }) => {
  if(event.type === 'pointerdown') interruptInertia()
  if(intentional) dragLogic()
}, { threshold: 10, triggerAllEvents: true })