[p5.js 2.0]: Should we switch to pointer events for p5.Element too?

[davepagurek]

Topic

@GregStanton noticed while reviewing the changes in 2.0 that while we updated the mouse/touch handling on the main canvas to remove touch functions and use pointer events behind the scenes to handle both at once, we did not do the same thing for p5.Element, which still has touch events.

In the past, we handled the main canvas and elements slightly differently: the main canvas had extra handling to (try to) handle mouse and touch via whichever methods the user implemented; elements just add event listeners and let the browser do whatever it does.

Some options I can see here:

• Switch to using pointer events everywhere so users of p5 never have to think about handling mouse/touch differently from each other
  • This would require a code change to implement this for p5.Element
• Continue to have p5.Element listeners be simple mappings to browser addEventListener calls. Elements continue to work a little differently than the main canvas.
  • There is currently no p5 way to use pointer events on Elements since we don't have methods to add those, but this could be added in a future version

[davepagurek]

I lean slightly towards the latter, as I haven't yet thought enough about the implications of switching to pointer events for all DOM, but I don't have a strong opinion -- if someone with more experience is sure it's safe then that could be fine too.

@diyaayay and @limzykenneth, what do you think?

[limzykenneth]

I think it should be fine to implement pointer events for p5.Element, I can't at the moment think of scenario where it would break things.

With "the main canvas had extra handling to (try to) handle mouse and touch via whichever methods the user implemented; elements just add event listeners and let the browser do whatever it does" I also think it would be easier to implement pointer events for p5.Element plus also there's not need to track things like mouseX/Y etc and just pass the event handler over.

Unless there's something else that I'm missing?

[davepagurek]

Cool if that sounds good to you I can make that change. So to confirm, we would would be mapping myElement.mouseMoved(fn) to myElement.elt.addEventListener('pointermove', fn) for mouse* event handlers, and removing the touch* ones right?