Workarounds to make it work with touch devices

[igorskh]

In relation to the discussion in #20.

This library works great on desktops. However, is there any workaround allowing it to work properly on touch devices without changing the code?

I could solve this with a code snippet from here Leaflet/Leaflet#1542 plus replacing mouse* events with pointer* events after checking a discussion in this Leaflet PR Leaflet/Leaflet#3375, pointer DOM events should be preferred.
Leaflet (as of version 1.7-dev) still does not allow to listen to neither pointer* nor touch* events with map.on and map.off methods.

Changes I have done are in my fork. This works fine as you can see below, I've tested with iPad (finger and Apple Pencil), as well as on iPhone:
https://codesandbox.io/s/leaflet-lasso-touch-jmb2b

My questions are:

1. Are there any other ways to make touch devices work with leaflet-lasso?
2. Does it make sense to bring optional switch to pointer events listeners to leaflet-lasso?

I am happy to contribute to the project, I am just not sure which way is reasonable.

Thanks for any hint.

[zakjan]

Hi, first of all, thank you for your suggestion! However, I'm not sure that adding a configurable switch for a different kind of events is a good idea. Effectively, turning the switch on or off in the code means switching the support for various devices or browsers. It doesn't work universally.

I'm going to take a look at touch events soon. Have you tried them, it didn't work?

[igorskh]

Hey, thanks for the comment.

Pointer DOM events are supposed to be a universal way to handle mice/touch/digitisers, as far as I understand the specs. That's why I chose this way.

Leaflet handles neither touch nor pointer events. Eventually even if I capture touch* events, they are considered by the browser as pointer* events.

Here is a small example, which gives some quick overview on what is happening:
https://codesandbox.io/s/leaflet-no-touch-pwg38?file=/index.html

The problem of handling both mousedown and pointerdown is that any event will be triggered twice when clicking a mouse, but it will work fine on touch devices.

[zakjan]

Unfortunately, pointerdown is not supported yet by Safari. How about handling both mousedown and touchdown?

[zakjan]

@igorskh I have found a solution for touch/pointer events not supported by Leaflet - adding event listeners to the map container. It works well on my mobile, so I released it as 2.2.0. Could you try it with your pointer pen?

[igorskh]

Unfortunately, pointerdown is not supported yet by Safari. How about handling both mousedown and touchdown?

I've tested it both with Safari for Mac and iOS, I'm surprised it's marked unsupported Pointer events are supported by Safari from recent 13 version, maybe not all parts of docs are up to date.

@igorskh I have found a solution for touch/pointer events not supported by Leaflet - adding event listeners to the map container. It works well on my mobile, so I released it as 2.2.0. Could you try it with your pointer pen?

I see, I've overlooked this option with the map container somehow.

Yes, works fine with an Apple pencil. Thanks a lot!

[zakjan]

Interesting, so both MDN and Caniuse are outdated about it? Can you find a reference when Safari started supporting it, maybe a Webkit ticket?

Thanks for testing!

[igorskh]

Pointer events support mentioned in Safari 13 release notes:
https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes

I’ve also found two blog posts on WebKit.org mentioning support of pointer events:
https://webkit.org/blog/9674/new-webkit-features-in-safari-13/
https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/

From the description on the WebKit.org, pointer events should be preferred over touch
as they provide a generic way to handle input.

[zakjan]

Thanks for looking into this. I have reported it at MDN.

There are multiple pages about this feature at Caniuse. https://caniuse.com/#feat=pointer vs. https://caniuse.com/#feat=mdn-api_document_pointerdown_event It seems that the later page is autogenerated from MDN.