Comments (7)
In this line here, why do we have to use a requestAnimationFrame
. Some other race condition?
from use-gesture.
What the... I just "updated" codesandbox and this ceases to happen. Sorry for the noise.
from use-gesture.
Ok... it only happens when dev tools is open?
from use-gesture.
Hey @morgs32, thanks for reporting the issue, nice catch :) Yes, requestAnimationFrame
is used to let the gesture logic finish before terminating it with cancel
.
onDrag = (canceled, cancel) => {
if(!canceled) { // <-- logic that depends on calling cancel()
console.log('calling cancel() with canceled equal to', canceled)
cancel()
}
console.log('canceled is equal to', canceled)
}
/* output using RAF */
// calling cancel() with canceled equal to false
// canceled is equal to false
// canceled is equal to true
/* output without using RAF */
// calling cancel() with canceled equal to false
// canceled is equal to true
// canceled is equal to false <-- not exactly what we want
What seems to happen with the devtools opened in the example is that RAF debounces the call to terminate the gesture and the browser sometimes has time to execute the gesture twice, hence the logic (that depends on cancel
being called) to increase the index occurring twice. I'll investigate further why this might happen, but one solution would be to remove RAF and it would be up to the user to use cancel
as the final statement to its gesture logic:
onDrag = (canceled, cancel) => {
if(!canceled) {
console.log('calling cancel() with canceled equal to', canceled)
cancel()
}
else // <-- added else
console.log('canceled is equal to', canceled)
}
/* output without using RAF */
// calling cancel() with canceled equal to false
// canceled is equal to true
from use-gesture.
I figured as much! Here's what resolved it for me:
#53
Of course, it was only really an issue because in development. Interesting!
from use-gesture.
I think it's actually an issue every time the browser would drop frames so I believe this needs a fix! I'll review your PR now :)
from use-gesture.
Should be fixed in 5.0.1
!
from use-gesture.
Related Issues (20)
- Using alt+left for navigation prevents all gestures on elements with axis: 'y'
- Drag gesture: Delay setting behavior does not adhere to documentation HOT 4
- Drag + Click + filtertaps option breaks onclick listener. Drag + Click + Treshold works. HOT 1
- touch-action: pan-y prevents L shaped gestures to scroll
- onPinch breaking on control + scroll HOT 5
- Where do I import a3f from? HOT 1
- Getting the error "a3f is not defined"
- Textarea doesn't work inside gesture container HOT 4
- Documentation website is broken (in firefox) HOT 8
- Type error with @types/react >=18.2.66
- (Firefox) Click event fired on drag end
- 100ms delay between pointermove events in Android webviews? HOT 1
- [@use-gesture/vanilla] Touch event was abnormally interrupted. HOT 1
- The codesandbox example has TypeError
- Zoom pinch gestures and the from parameter
- Vanilla - Glitch during fast gestures
- Reset pinch offset, change pinch sensitivity and change unpinching behaviour
- Rotating/onWheel function only works on mobile
- state swipe is -1 for both axes even with axis restricted to y
- Swiping too hard causes the whole viewport unclickable HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-gesture.