search

lospec / pixel-editor

An online canvas based Pixel Art creation tool for Lospec.com
https://Lospec.com/pixel-editor
GNU General Public License v3.0
908 stars 73 forks source link

Adding touch events for tablets/phones? #10

Open jywarren opened 4 years ago

jywarren commented 4 years ago

I love this editor! 🎉 ❤️

I'd like to use this on my phone/tablet... how complex would it be to add events for touch interaction? The editor doesn't work super well there now, for example dragging doesn't seem to work.

This might be multi-part; first looking at event handlers, then perhaps some HTML <meta> tags to control page width, and there are some spots where event.preventDefault() and event.stopPropagation() might help to stop touch events from selecting things on the page or triggering menus or copy/paste operations? Not sure.

Just looking around the code, here are some places that could potentially be starting points to improving touch UI:

Event handlers

https://github.com/lospec/pixel-editor/blob/f3ce09ac5af010a51770f86fb914e2122c64e573/js/_mouseEvents.js#L6

(this also includes mouseup, mousemove and such, 4 handlers total in this file)

And this, maybe also related?

https://github.com/lospec/pixel-editor/blob/ed34980a0e5676b18961da93b5586211bfab9cb3/_ext/scripts/utilities/onClick.js#L8

lospec commented 4 years ago

Hi, this is definitely a feature we are planning on adding. I think you're probably right that it mostly just needs event handlers. Next time I work on it I will look into it and will add it if it doesn't need too much work. To work on phones the UI probably needs a lot of work though.

jywarren commented 4 years ago

Awesome! Well the layout seems not too bad on my phone anyways!

Screenshot_20200511-174101

Screenshot_20200511-174029

jywarren commented 4 years ago

Maybe some scroll:overflow CSS but otherwise not bad at all, once the click events are more hooked up!