Failures on Windows devices with touchscreens

[rajadain]

I've discovered these while working on another project with this fork WikiWatershed/model-my-watershed#502 (please refrain from commenting there, and add pertinent information here instead). Specifically, these issues were discovered:

• ❌ Internet Explorer 11.0.9600 on Surface Pro 3 running Windows 8.1 Pro — The site does not render at all because IE on Surface does not support the touch events in Guild's repo and throws an error.
• ❌ Chrome 43 on Surface Pro 3 running Windows 8.1 Pro — Touch interaction works (when you touch the screen with a finger), but click interaction (with trackpad and stylus) fails to close the polygon, instead keeps adding new overlapping points.
• ❌ Firefox 38 on Surface Pro 3 running Windows 8.1 Pro — Click interaction works (when you use trackpad or stylus), but touch interaction fails to register a mouseclick event. Each touch acts as a hover / mousemove event instead of a click.

I do not currently have access to a Windows touch device, but will test and update this as soon as I do. However, I have no reason to believe that these behaviors have changed with new version of Chrome, Firefox, and IE. I also do not have access to a Windows Phone device to test in IE Mobile.

[ddproxy]

@rajadain - could you try 0.2.5 of ddproxy/Leaflet.draw ?

    "leaflet-draw": "git+https://github.com/ddproxy/Leaflet.draw.git",

I've recently patched some touch issues that should fix:
WikiWatershed/model-my-watershed#649
WikiWatershed/model-my-watershed#892 (closed)

[rajadain]

@ddproxy Thanks, that looks promising! I don't have a Windows Touchscreen device near me at the moment, but will try and test tomorrow!

[ddproxy]

Commented a bit too quickly - the particular issue with Leaflet#892 is touch events being triggered twice per 'touch click'. 0.2.5 patches this issue in a similar manner to Leaflet's internal touch-restriction.

[ddproxy]

It's "better" but not working quite as well as I'd like.

Touch works in Microsoft Edge but normal point-click now malfunctions.
Chrome polyline performs properly but polygon does not.
Firefox point-click performs properly but touch is not being triggered properly.

Side note - @rajadain - I've been hovering a bit, watching model-my-watershed - I'd be interested in getting to know more about that project if you have some spare time.

[rajadain]

I just tested 0.2.5 on various platforms, and while it works correctly (and hasn't broken) on most platforms, it misses out on Chrome on touch-enabled Windows which is one of our main platforms:

• Mac OS X 10.11:
  • Chrome: Yes
  • Firefox: Yes
  • Safari: Yes
• Windows 7:
  • Chrome: Yes
  • Firefox: Yes
  • IE 11: Yes
• Windows 10 with Touchscreen:
  • Chrome:
    • Touch: Yes
    • Mouse: No
  • Edge:
    • Touch: Yes
    • Mouse: Yes
  • Firefox:
    • Touch: Flaky (doesn't work the first time, works eventually)
    • Mouse: Yes
  • IE 11:
    • Touch: Yes
    • Mouse: Yes
• iPad Mini with iOS 9.1:
  • Safari: Yes
• Nexus 5X with Android 6.0:
  • Chrome: Yes

This is good work, and I'll keep an eye out for any updates.

[ddproxy]

Thanks for the report!

My target is also Chrome and Firefox, it's just hard debugging this issue at the moment. I'll let you know when I create an additional patch after testing.

[rajadain]

Model My Watershed is an educational web app that allows the user to study the effects of precipitation and land use modifications on water behavior, such as ground infiltration, runoff, or evaporation. The idea is that you can compare how water behaves in a geographical area currently, how it behaved pre-development, and how changing the land use will effect the watershed. The user can simulate many scenarios and compare the results, which allow them to make decisions about landscape development.

We don't have a deploy for the general public available just yet, but I'll let you know when we do.

[arahansen]

Is there any update on this issue? I've had users run into this recently.

Also, is this the "canonical" ticket being tracked for this issue? The same problem is being reported several different places.

[ddproxy]

Hey @arahansen , Leaflet.draw 0.3.0 has been released with touch support. I'd suggest any additional issues/reports be made on Leaflet.draw repository.

I'll draft an issue template later, but if you don't mind including leaflet version, source (npm/bower) and any stack traces (or lack) I'd appreciate it.

[mike-unearth]

I fixed the IE issue in my project by overwriting the addPointerListener function with the missing events (touchcancel and touchleave) added in:

L.extend(L.DomEvent, {
    addPointerListener: function (obj, type, handler, id) {
        switch (type) {
        case 'touchstart':
            return this.addPointerListenerStart(obj, type, handler, id);
        case 'touchend':
            return this.addPointerListenerEnd(obj, type, handler, id);
        case 'touchmove':
            return this.addPointerListenerMove(obj, type, handler, id);
        case 'touchcancel':
            return;
        case 'touchleave':
            return;
        default:
            console.warn('Unknown touch event type: ' + type);
        }
    }
});