Get xy without dragging

[dbismut]

Hi! I understand this lib is made for handling gestures on mobile which translate to the mouse being clicked on desktop, but I was curious if there was a way to make it work onMouseMove like for a rollover?

[drcmda]

what is a rollover? you mean something like a hover?

[dbismut]

Yes sorry a hover. We call that rollover in French I was certain it was a word.

[drcmda]

i only know it as a trick for dogs : D (not a native english speaker). i guess it would be easy to add - though it would re-render the component when onAction isn't defined. wouldn't it be easier to just read out onMouseMove on the div you bind to a gesture? that way it's under your control. or propose an api, maybe it does makes sense adding it.

[dbismut]

This is what I'm doing at the moment but, I don't have access to all velocity, etc. that you provide in your package :) I was curious that maybe #37 would help my case?

[drcmda]

i think not because onmove is only called when you click and drag. maybe we could expose the calculation stuff, so that you can call it like so:

import { useGesture, calculate } from 'react-with-gesture'

...

return <div {...bind()} onMouseMove={event => {
  const data = calculate(event)

Would that be useful to you? If you like, you can make a PR and we review it.

[drcmda]

thinking about it, maybe including the possibility to receive move is perhaps the best, then you don't need to fiddle around with extra events and you can create one gesture in one place.

just needs to be a clear and easy api.

[dbismut]

Yeah, that's what I was trying at the moment.

So just to clarify, this is what I had was:

const [{ xy }, set] = useSpring(() =>({ xy: [0,0] }))
const onMouseMove = useCallback(
  e => !isTransitioning && set({ xy: [e.clientX, e.clientY] }),
  [isTransitioning, set]
)
//...
<animated.div onMouseMove={ onMouseMove } style={{ transform: xy.interpolate(trans) }} />

So I've modified react-with-gesture to have a move prop in the config to be able to do:

 const bind = useGesture(
  {
    onAction: ({ xy }) => !isTransitioning && set({ xy: xy }),
    move: true, // <-- new config prop
  }
)

That works ok, but unfortunately I'm not sure about two things:

• where to remove the event listener that is created in handlers
• how to inject the isTransitioning dependency (but I think you've already answered this in another issue I submitted saying it's not possible)

PS: thanks for taking the time to answer, I know you're busy with react-three-fiber, this should be huge in the creative front-end community ;)

[drcmda]

I dig the move prop, let's do this!

where to remove the event listener that is created in handlers

useEffect(() => {
  // register events ...
  () => {
    // unregister event ...
  }
}, [props.move]

could you explain isTransitioning once again? i am kinda out of the loop a little.

[dbismut]

Thanks! Not I'm not clear where to use useEffect though, I think it's forbidden to use it in handlers? At least that's what eslint-plugin-react-hooks@1.5.0 tells me (handlers is not a custom hook, and it can't be since it's used in the callback of useState).

Sorry, isTransitioning is essentially a custom prop that my component gets that reflects the fact the router is transitioning from one page to another. In that situation, I want the animations to not trigger.

[dbismut]

Humpf sorry I'm stupid. Since I need hover and not drag, I don't need to have a window.listener to anything. I just need to write:

 if (props.move) {
    output[`onMouseMove${capture}`] = handleMove
  }

... and then the listener will only apply to the element I'm binding, and will be removed automatically by React :)

Now there's the dependency issue though :) For the dependency, indeed, useRef does the trick. I'll try to submit the PR for the package to handle simple hover gestures.

[dbismut]

Hey @drcmda so here is a sandbox demo that shows how hover would behave: https://codesandbox.io/s/llrwmpozq

The only lines that I've added to the package are below (I've changed the move prop to hoverOnly as I thought it was clearer:

 if (props.hoverOnly) {
    output[`onMouseMove${capture}`] = handleMove;
    output[`onMouseEnter${capture}`] = handleDown;
    output[`onMouseLeave${capture}`] = handleUp;
  }

One thing that is not handled there is boundaries but I don't think they're handled for drag either anyway?

[drcmda]

looks good to me, i'll keep on working on this lib after some of the other stuff in react-three-fiber. hope i can finish it quickly.

[dbismut]

I've just been looking at how we could also implement scroll events, and I think it would be a matter of a few extra lines, with 95% code reuse. I don't know if you consider it to be a gesture in the sense you intended this lib though :)

[dbismut]

Here's a quick try: https://codesandbox.io/s/8x05x4xr3j
There is still some work to do since at the moment it only works on the window element but you get the idea (although I get horrible perf in Safari so I might be doing some wrong) here.