Adding touch events for tablets/phones?

[jywarren]

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]

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]

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

[jywarren]

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