timjs / elm-collage

Create interactive vector graphics and position them relative to each other
BSD 3-Clause "New" or "Revised" License
58 stars 19 forks source link

Add PointerEvents to support touch events on mobile #29

Closed kentnek closed 6 years ago

kentnek commented 6 years ago

As I was experimenting further, I wanted to support touch events as well. I found out that it's relatively easy just by adding PointerEvent , which are quite similar to MouseEvent.

I've tested the new events in my project, and they should work fine.

timjs commented 6 years ago

Hi Kent!

Could you explain a use case for these events? I'm not familiar with them myself. What is the difference in using a onPointerDown and onMouseDown? Only the type of device? Also, what kind of information should be exposed by a pointer event? I see the MDN page describes tilt, twist and pressure properties. Is there any other library in Elm currently exposing these events?

kentnek commented 6 years ago

Sure! PointerEvent is able to handle both TouchEvent and MouseEvent, and the documentations also mention that This interface inherits properties from MouseEvent and Event (so there are clientX and clientY fields as well). In short, if you want to support both web and mobile devices, you can just use Pointer instead of handling Mouse/Touch events separately.

I found its usage in the library elm-pointer-events, which I tried to use this along side elm-collage but failed because that library only supports HTML elements.

timjs commented 6 years ago

It should be in version 2.0.0 by now. Thanks again!