Comments (12)
No worries! Thanks for the support and super fast help! It works now ๐
from use-gesture.
Right, I think see where this comes from. Can you confirm youโre using a trackpad with Chrome or if using Safari, are your binding the component (ie not using domTarget)? Essentially when you pinch to zoom on a trackpad browsers might send the onWheel event with the ctrl modifier key flag set to true. Iโll write a fix asap.
A temp fix would be to check if the ctrlKey flag is set to true in your life onWheel handler.
from use-gesture.
I'm using the touchpad of my Dell XPS 15 with Windows 10 in Firefox.
I'm not setting domTarget.
And yes, I can confirm, the ctrlKey flag is set for pinches. Thanks for the hint and thanks for fixing it!
from use-gesture.
@andreas-eberle I've released 6.0.0-beta.2
just now, which does the below regarding this issue:
- Adds a warning when using trackpad zoom without a
domTarget
orevent.passive
set to true. - Doesn't trigger the
onWheel
handler when the ctrl key is pressed andonPinch
is active - Adds a
gesture
key to the event passed to handlers indicating which gesture originated the event.
Regarding the first point, the pinch-zoom on a trackpad should be default prevented, to avoid the wheel event propagating to the window. If you attach the handlers directly in React, non-passive events aren't supported, therefore event.preventDefault()
doesn't work as it should.
Note that there's a few breaking changes in 6.0.0
(mostly renames though) so you might prefer waiting until tomorrow so that I can also fix 5.2.x
.
from use-gesture.
@dbismut: I tried out version 6.0.0-beta.2
. However, I still get the onWheel()
callback when pinching.
My code looks like this:
export interface Props {
zoomHandler(zoomOut: boolean, pinch: boolean): void
}
const ZoomContainer: FunctionComponent<Props> = (props) => {
const onWheel: Handler<Coordinates> = (state) => {
const direction = state.direction[1]
console.log(`onWheel(direction: ${direction}, ctrlKey: ${state.ctrlKey})`)
if (direction !== 0) {
props.zoomHandler(direction < 0, false)
}
if (state.event) {
state.event.preventDefault()
}
}
const onPinch: Handler<DistanceAngle> = (state) => {
const direction = state.direction[0]
console.log(`onPinch(direction: ${direction}, ctrlKey: ${state.ctrlKey})`)
if (direction !== 0) {
props.zoomHandler(direction > 0, true)
}
if (state.event) {
state.event.preventDefault()
}
}
const ref = React.useRef(null)
const bind = useGesture({onWheel, onPinch}, {event: {passive: false, capture: false}, domTarget: ref})
React.useEffect(bind, [bind])
return <div ref={ref}>
{props.children}
</div>
}
and when I pinch, I get the following output in the console:
onPinch(direction: 1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: -1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: 1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: -1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: 1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 0, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: 0, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: -1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: -1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: -1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: -1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: -1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
onPinch(direction: -1, ctrlKey: true) ZoomContainer.tsx:33
onWheel(direction: 1, ctrlKey: true) ZoomContainer.tsx:19
Am I doing something wrong? Or is there still an issue in the library?
from use-gesture.
That's really weird, here is the code in the WheelRecognizer:
if (event.ctrlKey && this.controller.actions.has('onPinch')) return
Would you be able to set a simple repro sandbox somewhere?
Here is a csb where the left square reacts to wheel, and the right square should react to pinch.
https://codesandbox.io/s/react-use-gesture-issue-wheel-fj4rc
Do both square update on pinch on your end?
from use-gesture.
If you change the code of the callbacks in your sandbox to:
onWheel: ({ offset: [, oy] }) => {
console.log('onWheel')
set({ wheel: oy, immediate: true })
},
onPinch: ({ offset: [d] }) => {
console.log('onPinch')
set({ pinch: d, immediate: true })
}
You can see in the console that onWheel
and onPinch
are called, when you pinch (at least it is that way for me).
from use-gesture.
Hm indeed my code is a bit dumb since Iโm not showing the same offset index ๐ Iโm on my phone and will only be able to check that back later tonight. Can you confirm this is also happening on Chrome? does this (both gesture logging in the console) also happen when you wheel while physically pressing the ctrl key?
from use-gesture.
- I can confirm that it behaves the same in Chrome.
- Using ctrl+scrolling looks like using the pinch gesture (it logs
onWheel
andonPinch
).
from use-gesture.
There must have been an issue when I published on npm. Please try 6.0.0-beta.3
, my sandbox has been updated and it works properly. Sorry about this.
from use-gesture.
- gesture
@dbismut I have version 7.0.5 and this property is not available, also it says pinching: false
even though I am definitely pinching (on an iPhone XS Max in Safari)
also how do you know if it is a zoom-in pinch or a zoom-out pinch?
from use-gesture.
@tommedema the capture shows that the gesture is no longer active so this is not surprising that pinching is false. Zoom in means that the movement displacement between your fingers has increased. So movement[0]
which measures the distance delta of the whole gesture should be positive. Zoom out is movement[0]
being negative.
from use-gesture.
Related Issues (20)
- Pinch bug: after opening/closing context menu, pinching gesture can be fired with 1 finger HOT 1
- Delegate drag to remaining finger after pinch or support multi-finger drag HOT 5
- Using modifierKey causes the mac pinch event to return HOT 2
- Using pointer.touch cannot be dragged under windows system HOT 6
- useDrag breaks onClick listener in React portal to shadow dom HOT 2
- using video element inside useDrag component doesn't allow the video to play/pause using single click over the video HOT 6
- DragBounds ignored when rerender target HOT 1
- dynamically updating useDrags axis option resets movement : [mx,my] HOT 2
- 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
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.