pixi-viewport
pixi-viewport copied to clipboard
davidfig
Trackpad scrolling
I feel like the UX of this library would lend itself quite well to a pinch-zoom (exists) and track-pad 2-finger panning (does not exist) navigation sceme.
Right now, the only way to pan is to click-drag. It would make for a truly complete navigation UX if Horizontal and vertical panning could also be possible from the trackpad.
Is this possible already? If not, how can it be achieved?
There is a rudimentary implementation of 2-finger panning. Right now, it doesn't work if you also use the wheel() plugin. I have code in the (I think) gesture branch that is a WIP to enable simultaneous 2-finger panning and trackpad pinching. The reason I haven't rolled it out is that I also need to implement the iOS/mac gestureevents support for this functionality to work cross platform. I haven't had the time to do it, though.
My mac is also super old and not fun to code in, so that's what's really holding me back. I really need to upgrade it.
Hi @davidfig, is there anything I can assist with on this issue?
I have too little knowledge to make a pull request, but I can definitely assist with testing. I have a mac with trackpad and magic mouse and a windows machine with trackpad. Just let me know.
Btw, thanks for this fantastic pixi extension. It is really easy to work with.
@davidfig , did you upgrade your mac ? I really need this plugin to work on a mac with the trackpad , is there anyway I can assist in developing this feature ?
Yes, i finally have a nice mac to develop on. Let me see if I can get this implemented and figure out how this makes sense.
That is great to hear. Not sure if there would be any difference, but I can offer testing on a 2012, a 2017 Macbook and a Windows laptop.
@davidfig Thank you for the great project!
But is there any news on this functionality? I'm really waiting for it for my project :)
@davidfig Glad to hear that! It would be great to know if there is any progress on this issue, as this feature will help us a lot on the project
You know what? I apologize to everyone. I created a plugin for myself almost a year ago (August 2020), after opening this issue, but forgot to come back here to help others. No soup for me!
Anyway here's a gist: https://gist.github.com/iyobo/4d2ff6a370011675ebf1d561e830be1e. It's a plugin that handles pinch zoom AND 2-finger scrolling at the same time...along with some other stuff I was trying to add (zoom limit) but that one so far is eluding me. You can ignore that in the plugin and just enjoy the full pinch-navigation.
@Gochim @Stesha24 @fakob @ilija-trbogazov ^^
@davidfig Any pointers on limiting zoom while 2-finger interacting based on that gist?
@iyobo , the plugin does not behave the way I need it. I need to zooming to happen on a wheel scroll. And you are using the same event for pinching. ( wheel event ) @davidfig , is you implementation based on lower level events like "pointermove" to do zooming and panning ?
Try v4.32.0. I added an additional option to wheel to enable trackpad pinch. This provides both trackpad pan and pinch:
viewport.drag().wheel({ trackpadPinch: true, wheelZoom: false })
Please let me know if this helps. I'm still not using the mac-specific Gesture API, but this seems to work on both my mac and windows (although windows chrome has a terrible two-finger pan b/c it locks the scroll direction).
@davidfig , I tried v4.32.0 , mouse controls are ok , trackpad zooming ( pinch ) is ok , but I can't pan with the trackpad. ( Windows 10 )
It behaves like zoom , any idea why is that ?
I used the exact code as you pointed in your last comment , tried both trackpadPinch to be true and false.
What does your code look ilke? I just tried it at https://davidfig.github.io/pixi-viewport/ by adding the wheel code above and it seemed to work.
@davidfig , I tested the code , seems to work , but not quite as I would like. I need the zoom to also be working on the mouse wheel. Without pressing any key modifiers.
Hmm...for Windows you can only have zoom or pan with the wheel since there's no way to differentiate between a trackpad wheel and a mouse wheel. For macs, if you use Gesture API then I think there's a way to distinguish them. But the behavior would be inconsistent (I think).