🤞Roadmap about use-gesture

[dbismut]

Thanks for the clarification. This is a similar problem as clamping local when you have drag boundaries. In both cases you should use memo as explained in the docs, with an initial value for memo being x.getValue() and update your spring with memo + delta (called movement in v6). So:

useDrag(({ movement: [mx], memo = x.getValue() }) => {
  set({ x: mx + memo })
  return memo
})

If you want to reset the spring position while dragging, this might be a bit tricker, but still achievable.

In any case, I’m not sure a reset function would help since you would need to call it outside the handler if I’m not mistaken, which is not how cancel behaves!

[dbismut]

@drcmda I'm not sure about the question: we're not covering dnd events, but the lib shouldn't break them though. But there's no plan in supporting dnd handlers as useGesture is generally used to simplify gesture-based interaction with out-of-the box detection for drag / pinch gestures but not as as dnd replacement library. Unless you think otherwise?

@schabluk do you mind opening an issue with a codesandbox showing the problem?

[dbismut]

I’m OOH and left my charger. This will have to wait til Wednesday I’m afraid.

[dbismut]

@thiskevinwang not sure how this would behave, can you elaborate a use case? Btw, local is going to be renamed offset in v6.

[schabluk]

@drcmda hi, is there a plan to support other react synthetic DnD events? Like:

onDragEnter
onDragExit
onDragOver
onDrop

Using them with together with useGesture breaks the effect.

[drcmda]

@dbismut do we cover those?

[alihassan0]

Hello , Thanks for the libarary.
I was wondering wether that means as of version v5.1.1 that typescript is supported.
I just tried the libarary for the first time today in a new create react app typescript project and I got the following error

Module '"../node_modules/react-use-gesture/web.cjs"' has no exported member 'useGesture'

so I am guessing typescript typing are unreliable right ?

[dbismut]

Damn I suck at TS. I’ll have a look later tonight. Really sorry about this.

[alihassan0]

No problems .. thanks for replying quickly.
I excluded the library types in tsconfig which seems to solve the issue for now

[tim-soft]

How about drag gestures from the trackpad, bringing it closer to screen touch? I'm not sure if these would be more useful coming into onDrag, onWheel or it's own hook altogether

So we could implement somthing like this: https://stackblitz.com/edit/multi-touch-trackpad-gesture

[dbismut]

@tim-soft as a matter of fact, onPinch already exists and works for trackpads, check this example out: https://codesandbox.io/s/9o92o24wrr

It should zoom properly on Chrome and Firefox. If you have a Mac and using Safari, then you should also be able to scale and rotate. This can only happen when you use the domTarget option, as gesturechange handlers are required to be added to the dom node directly (vs. passed as props when not using that option), and gesturechange or any Safari proprietary handlers are not supported in React (ie onGestureChange is not a valid prop).

[tim-soft]

My goal is to make two-finger swipes on the trackpad work in the same way as onDrag
Check this demo https://71hts.csb.app

onWheel handler: https://github.com/tim-soft/react-spring-lightbox/blob/master/src/components/ImageStage/components/ImagePager/index.js#L62

currently two finger trackpad swiping winds up in the onWheel handler, which makes sense but I can't tell the difference between that and an actual mousewheel

onPinch registers trackpad events where two points are moving away from each other, which I do have working for zooming separately in a different component where ctrlKey flag is true

I could also be entirely misunderstanding the difference between trackpad and mousewheel interactions

[dbismut]

Ohhh ok sorry my bad. I guess that should be doable indeed. Note that in v6, onWheel would no longer be fired when onPinch is run (ie when ctrlKey flag is true), and I understand that might be an issue in your case. Let me think on this.

Very cool component by the way!

[thiskevinwang]

@drcmda for the Gesture event states, will you be adding a feature to reset local? (or does that already exist?

cc: @dbismut !

[thiskevinwang]

@dbismut Hope this is enough context:

1. ✅I onDrag an animated.div and update it's xy spring props to state.local
2. ✅A keypress event listener resets its spring props and it returns to it's initial position
   • 🤔...but state.local is preserved (as it's intended to)
3. ⚠️Here is the issue - if I go to drag a 2nd time, the div jumps back to state.local because that was never reset

... so, like how there is a cancel() func, a resetLocal/resetOffset could be helpful

/** standard spring */
const [{ xy }, set] = useSpring(() => ({
  from: { xy: [0, 0] },
}))

/** bind dragGesture */
const bind = useGesture({
  onDrag: ({ down, event, local }) => {
    event.preventDefault()
    set({
      xy: local,
    })
  },
  { event: { passive: false } }
)

/** 
 * reset the animated.div's xy spring props on keypress: `r`
 */
useEffect(() => {
  const resetPos = () => set({ xy: [0, 0] })
  const handleKeyPressR = e => {
    e.key === "r" && resetPos()
  }
  // hack for gatsby SSR...
  typeof window !== undefined &&
    window.addEventListener("keypress", handleKeyPressR)
  return () => {
    window.removeEventListener("keypress", handleKeyPressR)
  }
}, [])

// return (
<animated.div 
  {...bind()} 
  style={{
    transform: interpolate(
      [xy],
      ([x, y]) => `scale(${scale}) translate3D(${x}px, ${y}px, 0)`
    ),
  }}
>
  {/*...*/}
</animated.div>

Please let me know if I should elaborate more! Thx

[dbismut]

Hey @tim-soft I just took some time to investigate your problem. As far as I understand, panning can only be achieved through wheel events, so there's no real way to distinguish wheel from two fingers moving on the trackpad. In this example, panning only occurs through wheel events.

However, I think you can improve the swipe detection on a trackpad by reading this issue #85 and this sandbox: https://codesandbox.io/s/onwheel-fire-once-5urx7