-
-
Notifications
You must be signed in to change notification settings - Fork 69
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
replace react-use-gesture to @use-gesture/react #257
replace react-use-gesture to @use-gesture/react #257
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for reagraph ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested dragging on desktop and mobile 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oops was testing on the wrong branch 😅 dragging nodes doesn't seem to be working
Here's a video of the Screen.Recording.2024-07-25.at.11.56.47.AM.mov |
src/utils/useDrag.ts
Outdated
onDrag: ({ event }) => { | ||
// Compute normalized mouse coordinates (screen space) | ||
const nx = | ||
((event.clientX - (clientRect?.left ?? 0)) / size.width) * 2 - 1; | ||
const ny = | ||
-((event.clientY - (clientRect?.top ?? 0)) / size.height) * 2 + 1; | ||
let clientX, clientY; | ||
if (event instanceof MouseEvent || event instanceof PointerEvent) { | ||
clientX = event.clientX; | ||
clientY = event.clientY; | ||
} else if (event instanceof TouchEvent) { | ||
clientX = event.touches[0].clientX; | ||
clientY = event.touches[0].clientY; | ||
} else { | ||
return; | ||
} | ||
|
||
const nx = ((clientX - (clientRect?.left ?? 0)) / size.width) * 2 - 1; | ||
const ny = -((clientY - (clientRect?.top ?? 0)) / size.height) * 2 + 1; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmmm playing around with this and the types for event
seem wrong. It's hitting the else { return }
block every time
This should work with no ts complaints tho
onDrag: ({ xy }) => {
// Compute normalized mouse coordinates (screen space)
const nx = ((xy[0] - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
const ny = -((xy[1] - (clientRect?.top ?? 0)) / size.height) * 2 + 1;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will do tomorrow, thanks!🫡
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
react-use-gesture is not maintained and @use-gesture/react is the successor
Issue Number: N/A
What is the new behavior?
Warning of react-use-gesture during
npm i
Does this PR introduce a breaking change?
Other information