Comments (16)
Thanks for the clarification. This is a similar problem as clamping local
when you have drag boundaries. In both cases you should use memo
as explained in the docs, with an initial value for memo
being x.getValue()
and update your spring with memo
+ delta
(called movement
in v6). So:
useDrag(({ movement: [mx], memo = x.getValue() }) => {
set({ x: mx + memo })
return memo
})
If you want to reset the spring position while dragging, this might be a bit tricker, but still achievable.
In any case, Iām not sure a reset function would help since you would need to call it outside the handler if Iām not mistaken, which is not how cancel behaves!
from use-gesture.
@drcmda I'm not sure about the question: we're not covering dnd events, but the lib shouldn't break them though. But there's no plan in supporting dnd handlers as useGesture is generally used to simplify gesture-based interaction with out-of-the box detection for drag / pinch gestures but not as as dnd replacement library. Unless you think otherwise?
@schabluk do you mind opening an issue with a codesandbox showing the problem?
from use-gesture.
Iām OOH and left my charger. This will have to wait til Wednesday Iām afraid.
from use-gesture.
@thiskevinwang not sure how this would behave, can you elaborate a use case? Btw, local
is going to be renamed offset
in v6
.
from use-gesture.
@drcmda hi, is there a plan to support other react synthetic DnD events? Like:
onDragEnter
onDragExit
onDragOver
onDrop
Using them with together with useGesture breaks the effect.
from use-gesture.
@dbismut do we cover those?
from use-gesture.
Hello , Thanks for the libarary.
I was wondering wether that means as of version v5.1.1 that typescript is supported.
I just tried the libarary for the first time today in a new create react app typescript project and I got the following error
Module '"../node_modules/react-use-gesture/web.cjs"' has no exported member 'useGesture'
so I am guessing typescript typing are unreliable right ?
from use-gesture.
Damn I suck at TS. Iāll have a look later tonight. Really sorry about this.
from use-gesture.
No problems .. thanks for replying quickly.
I excluded the library types in tsconfig which seems to solve the issue for now
from use-gesture.
How about drag gestures from the trackpad, bringing it closer to screen touch? I'm not sure if these would be more useful coming into onDrag, onWheel or it's own hook altogether
So we could implement somthing like this: https://stackblitz.com/edit/multi-touch-trackpad-gesture
from use-gesture.
@tim-soft as a matter of fact, onPinch
already exists and works for trackpads, check this example out: https://codesandbox.io/s/9o92o24wrr
It should zoom properly on Chrome and Firefox. If you have a Mac and using Safari, then you should also be able to scale and rotate. This can only happen when you use the domTarget
option, as gesturechange
handlers are required to be added to the dom node directly (vs. passed as props when not using that option), and gesturechange
or any Safari proprietary handlers are not supported in React (ie onGestureChange
is not a valid prop).
from use-gesture.
My goal is to make two-finger swipes on the trackpad work in the same way as onDrag
Check this demo https://71hts.csb.app
onWheel handler: https://github.com/tim-soft/react-spring-lightbox/blob/master/src/components/ImageStage/components/ImagePager/index.js#L62
currently two finger trackpad swiping winds up in the onWheel handler, which makes sense but I can't tell the difference between that and an actual mousewheel
onPinch registers trackpad events where two points are moving away from each other, which I do have working for zooming separately in a different component where ctrlKey
flag is true
I could also be entirely misunderstanding the difference between trackpad and mousewheel interactions
from use-gesture.
Ohhh ok sorry my bad. I guess that should be doable indeed. Note that in v6, onWheel
would no longer be fired when onPinch
is run (ie when ctrlKey
flag is true
), and I understand that might be an issue in your case. Let me think on this.
Very cool component by the way!
from use-gesture.
@drcmda for the Gesture event states, will you be adding a feature to reset local
? (or does that already exist?
cc: @dbismut !
from use-gesture.
@dbismut Hope this is enough context:
- ā
I
onDrag
ananimated.div
and update it'sxy
spring props tostate.local
- ā
A keypress event listener resets its spring props and it returns to it's initial position
- š¤...but
state.local
is preserved (as it's intended to)
- š¤...but
ā ļø Here is the issue - if I go to drag a 2nd time, the div jumps back tostate.local
because that was never reset
... so, like how there is a cancel()
func, a resetLocal
/resetOffset
could be helpful
/** standard spring */
const [{ xy }, set] = useSpring(() => ({
from: { xy: [0, 0] },
}))
/** bind dragGesture */
const bind = useGesture({
onDrag: ({ down, event, local }) => {
event.preventDefault()
set({
xy: local,
})
},
{ event: { passive: false } }
)
/**
* reset the animated.div's xy spring props on keypress: `r`
*/
useEffect(() => {
const resetPos = () => set({ xy: [0, 0] })
const handleKeyPressR = e => {
e.key === "r" && resetPos()
}
// hack for gatsby SSR...
typeof window !== undefined &&
window.addEventListener("keypress", handleKeyPressR)
return () => {
window.removeEventListener("keypress", handleKeyPressR)
}
}, [])
// return (
<animated.div
{...bind()}
style={{
transform: interpolate(
[xy],
([x, y]) => `scale(${scale}) translate3D(${x}px, ${y}px, 0)`
),
}}
>
{/*...*/}
</animated.div>
Please let me know if I should elaborate more! Thx
from use-gesture.
Hey @tim-soft I just took some time to investigate your problem. As far as I understand, panning can only be achieved through wheel
events, so there's no real way to distinguish wheel from two fingers moving on the trackpad. In this example, panning only occurs through wheel
events.
However, I think you can improve the swipe detection on a trackpad by reading this issue #85 and this sandbox: https://codesandbox.io/s/onwheel-fire-once-5urx7
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.