Closed dbismut closed 3 years ago
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
@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.
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';
Hi @smashercosmo are you able to set up a minimal repro sandbox? Thanks!
If it's not something obvious I can definitely do that
@dbismut no need to set up sandbox, you can reproduce it by running tsc -noEmit
in the 'demo' folder.
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';
@smashercosmo thanks! should now be fixed :)
Works now. Thx.
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
@tim-soft can you specify the browser and version of use- gesture you're using?
"@use-gesture/react": "^10.0.0-beta.17"
and the latest Google chrome, running in nextjs 11
@tim-soft should be fixed in 10.0.0-beta.18
, thanks for the report.
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
@mordv nope, genuine bug, good catch. I'll fix this in the afternoon. Thanks!
@mordv should be fixed :)
@dbismut mousewheel/trackpad are no longer firing the onPinch
handler in useGesture
, bug or feature?
@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.
@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
Hm on my MacBook Pro's trackpad it does work as expected...
I'm on windows if that helps
@tim-soft not really... Pinch should work when ctrl key is pressed.
@dbismut I'll dig in later this week when I have some more time, thanks for checking
@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
@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?
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.
@seflless you should use target
instead of domTarget
as mentioned in my message above.
Oh definitely. I did and that made that issue go away. I think I have it figured out now. Thanks for quick response!
@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?
@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.
@tim-soft any chance we could chat?
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
}
}
})
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?
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
@kutoman @tim-soft should be fixed in 10.0.0-beta.22
! Thanks for the help ;)
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!
@delaudio try using offset
instead of movement
.
@delaudio try using
offset
instead ofmovement
.
thank you @dbismut updated it with offset
instead of movement
and it's ok.
Can't drag "drag me" card on https://v10-beta--use-gesture.netlify.app/ :)
@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.
Buggy example with three-fiber https://v10-beta--use-gesture.netlify.app/docs/options/#transform
@mordv good catch again, was indeed a bug :) Should be fixe now in 10.0.0-beta.25
and subsequently in the docs.
Closing as 10.0.0
is now out as a stable version!
Read here: https://github.com/pmndrs/react-use-gesture/pull/292