search

davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Trackpad scrolling #246

Open iyobo opened 4 years ago

iyobo commented 4 years ago

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?

davidfig commented 4 years ago

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.

fakob commented 4 years ago

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.

ilija-trbogazov commented 3 years ago

@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 ?

davidfig commented 3 years ago

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.

fakob commented 3 years ago

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.

Gochim commented 3 years ago

@davidfig Thank you for the great project!

But is there any news on this functionality? I'm really waiting for it for my project :)

Stesha24 commented 3 years ago

@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

iyobo commented 3 years ago

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.

iyobo commented 3 years ago

@Gochim @Stesha24 @fakob @ilija-trbogazov ^^

@davidfig Any pointers on limiting zoom while 2-finger interacting based on that gist?

ilija-trbogazov commented 3 years ago

@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 ?

davidfig commented 3 years ago

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).

ilija-trbogazov commented 3 years ago

@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 trackpadPinchto be trueand false.

davidfig commented 3 years ago

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.

ilija-trbogazov commented 3 years ago

@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.

davidfig commented 3 years ago

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).