V10 available for testing!

[dbismut]

Read here: https://github.com/pmndrs/react-use-gesture/pull/292

[mysterybear]

I seem to have to {...bind() as any} as here https://codesandbox.io/s/github/mysterybear/r3f-react-app-2/tree/woes?file=/src/components/App.tsx:757-789 with r3f

[dbismut]

@mysterybear I'm not sure how to solve this at the moment: bind() returns genuine React event handlers, but r3f augments events thus making them incompatible with DOM events types.

[smashercosmo]

When running type check with the latest version I'm getting the following error

node_modules/@use-gesture/core/dist/declarations/src/actions.d.ts:1:49 - error TS2307: Cannot find module '../types' or its corresponding type declarations.

1 import { GestureKey, EngineClass, Action } from '../types';

[dbismut]

Hi @smashercosmo are you able to set up a minimal repro sandbox? Thanks!

[smashercosmo]

If it's not something obvious I can definitely do that

[smashercosmo]

@dbismut no need to set up sandbox, you can reproduce it by running tsc -noEmit in the 'demo' folder.

[smashercosmo]

One of the errors will be

node_modules/@use-gesture/core/dist/declarations/src/actions.d.ts:1:49 - error TS2307: Cannot find module '../types' or its corresponding type declarations.

1 import { GestureKey, EngineClass, Action } from '../types';

[dbismut]

@smashercosmo thanks! should now be fixed :)

[smashercosmo]

Works now. Thx.

[tim-soft]

I'm seeing this error for the useGesture hook + onWheel

Unable to preventDefault inside passive event listener invocation.

This code works with v9 (had to rename domTarget to target, trying out v10 for some onPinch fixes

useGesture({
    onWheel: () => {...},
    /* useGesture config */
    {
        target: imageRef,
        drag: {
            filterTaps: true,
        },
        eventOptions: {
            passive: false,
        },
    }
})

The error is thrown from this code in packages/core/src/engines/WheelEngine.ts: https://github.com/pmndrs/use-gesture/blob/v10/packages/core/src/engines/WheelEngine.ts#L20-L23

[dbismut]

@tim-soft can you specify the browser and version of use- gesture you're using?

[tim-soft]

"@use-gesture/react": "^10.0.0-beta.17" and the latest Google chrome, running in nextjs 11

[dbismut]

@tim-soft should be fixed in 10.0.0-beta.18, thanks for the report.

[mordv]

With useGesture + transform

  useGesture(
    {
      onDrag: (e) => {}
    },
    { transform: ([x, y]) => [x, y] }
  )

I'm getting warning

[@use-gesture]: You've created a custom handler that that uses the `transform` gesture but isn't properly configured.

Please add `transformAction` when creating your handler. 

It works in 9.1.3. Maybe API has changed?

https://codesandbox.io/s/draggable-list-forked-phydt?file=/src/index.js:1049-1142

[dbismut]

@mordv nope, genuine bug, good catch. I'll fix this in the afternoon. Thanks!

[dbismut]

@mordv should be fixed :)

[tim-soft]

@dbismut mousewheel/trackpad are no longer firing the onPinch handler in useGesture, bug or feature?

[dbismut]

@tim-soft hmmm are you able to share a sandbox? onWheel seem to fire normally (see here, wheel over the pink square and look at the console), and onPinch seems to work properly as well so not sure what's happening.

[tim-soft]

@dbismut in your own example, if I change onWheel to onPinch, the handler won't fire from using the mouse scroll wheel/trackpad https://codesandbox.io/s/elated-kilby-bs9vh

in v9 this used to work, but I'm also not sure if that was intentional or not, if so then thats a breaking change

[dbismut]

Hm on my MacBook Pro's trackpad it does work as expected...

[tim-soft]

I'm on windows if that helps

[dbismut]

@tim-soft not really... Pinch should work when ctrl key is pressed.

[tim-soft]

@dbismut I'll dig in later this week when I have some more time, thanks for checking

[seflless]

@dbismut I'm getting the following using 10.0.0-beta.20, macOS Chrome, and with next@10.2.3.

use-gesture-core.esm.js?41ef:122 [@use-gesture]: You've created a custom handler that that uses the `domTarget` gesture but isn't properly configured.

Please add `domTargetAction` when creating your handler.

Here's my code for context: https://gist.github.com/seflless/810f907673df26fe551b996b1d053897

Tried to figure it out reading through the code, but wasn't getting anywhere.

Stacktrace if it helps

[dbismut]

@seflless domTarget is now target. The error message isn't really helping here (I'll fix this) but in theory you should have another one before that one no? In dev mode?

[seflless]

Here's the stuff I cropped out. Should I be getting the warning twice?

I'm getting a new weirdness now, reading through links above to see if the event parameters and behaviors have changed. I upgraded because of needing a fix for where pinch gestures started with fingers on different elements wasn't working.

[dbismut]

@seflless you should use target instead of domTarget as mentioned in my message above.

[seflless]

Oh definitely. I did and that made that issue go away. I think I have it figured out now. Thanks for quick response!

[tim-soft]

@dbismut I built a slightly better sandbox, onPinch is only firing for me (windows + chrome) on a touch screen two-finger pinch, it does nothing from ctrl + mousewheel or two-finger zoom on trackpad like in v9, these only happen in onWheel now

https://codesandbox.io/s/funny-proskuriakova-6lj6l?file=/src/index.js

I'm not sure if this is intentional or not, I think I originally built out this code with onPinch because onWheel wasn't working, i'll try handling trackpad/ctrl+mousewheel stuff in the onWheel instead, maybe this is actually a bugfix?

https://github.com/tim-soft/react-spring-lightbox/blob/f061846e5abed6b8cf6ddb95f577921bb1569487/src/components/ImageStage/components/Image/index.tsx#L98-L265

[dbismut]

@tim-soft would there be a way to connect on pmndrs Discord? There was an issue on Surface Pro hardware that I managed to solve, but maybe this is not sufficient.

[dbismut]

@tim-soft any chance we could chat?

[kutoman]

I'm still having following issues which I'm not facing in the desktop browsers: on iOS webview: when I swipe horizontally onPinch gets always triggered even though one finger is used solely. on Android webview: when I scroll vertically onPinch gets always triggered even though one finger is used solely.

using: @use-gesture/react: ^10.0.0-beta.21

this is the only part where I use the library's api:

const gesturesBind = useGesture({
      // for zoom in and out 
      onPinch: st => {
        ....
      }

  }, {
      drag: { 
          swipe: { 
            distance: 20,
            velocity: 0.2 
          }
      }
  })

[dbismut]

Really hard for me to debug this as I can't reproduce the issue. What would help is someone pinging me on pmndrs Discord so we can solve the issue together. @kutoman what's your hardware? Is there a way you could show me a sandbox?

[kutoman]

there is one fortunate thing concerning the mentioned issues. I've recently noticed that both cases are actually reproducable in my desktop's chrome browser (with device mode enabled). So the mobile platforms might not be needed for reproduction.

@dbismut I'll contact you

[dbismut]

@kutoman @tim-soft should be fixed in 10.0.0-beta.22! Thanks for the help ;)

[delaudio]

Hi! I've upgraded to v10 but I'm having problems with dragging. I switched from initial to from but it seems I still need to change some logics. What should I change? This is a simplified fork of the initial rocket example, without the rotation.

https://codesandbox.io/s/initial-rocket-forked-sbbo2

Thank you!

[dbismut]

@delaudio try using offset instead of movement.

[delaudio]

@delaudio try using offset instead of movement.

thank you @dbismut updated it with offset instead of movement and it's ok.

https://codesandbox.io/s/initial-rocket-forked-sbbo2

[mordv]

Can't drag "drag me" card on https://v10-beta--use-gesture.netlify.app/ :)

[dbismut]

@mordv that was painful to track down, thanks for the report! Looks like it's actually a problem with react-spring, and conflicts between @react-spring/three and @react-spring/web animated component. I'll report this to the team.

[mordv]

Buggy example with three-fiber https://v10-beta--use-gesture.netlify.app/docs/options/#transform

[dbismut]

@mordv good catch again, was indeed a bug :) Should be fixe now in 10.0.0-beta.25 and subsequently in the docs.

[dbismut]

Closing as 10.0.0 is now out as a stable version!