cannot drag while in drawing mode

[alexandre-melard]

• I'm reporting a bug, not asking for help
• I've looked at the documentation to make sure the behaviour is documented and expected
• I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

---

How to reproduce

• Leaflet version I'm using: 1.2.0
• Leaflet Draw version I'm using: 0.4.12
• Browser (with version) I'm using: chrome Version 61.0.3163.100 (Build officiel) (64 bits)
• OS/Platform (with version) I'm using: win7

What behaviour I'm expecting and which behaviour I'm seeing

I expect the map to pan without drawing points everytime I click somewhere to drag the map
What I see is a new point drawn everytime I click to move the map

Minimal example reproducing the issue

• click on polyline draw icon

• click and drag the map

• this example is as simple as possible

• this example does not rely on any third party code

Using jsfiddle

[alexandre-melard]

I've tried 0.4.3, it's working:
https://jsfiddle.net/tgyeo8mm/
on 0.4.5 not working anymore

[wqoq]

It seems to me like it's doing a _startPoint and an _endPoint with every _onTouch, which gets triggered every time a touchstart event happens. Is that not the touch equivalent of mousedown? So it's drawing a point as soon as the tap occurs. Should it not be making use of touchmove and touchend instead (in the same way mousemove and mouseup are used)?

I can start to take a shot at this today, as we're bumping up against this bug in our tests.

[wqoq]

I don't have a PR, but I'll give an update on what I've found. I've got it working in iOS, but I've completely broken it in Android.

Given what Apple wrote here, it seems like iOS should "just work" with mouse events, and that seems to hold true when I change addHooks() like so:

map.off('touchstart', this._onTouch, this);
map.on('mousedown', this._onMouseDown, this);

But that completely breaks drawing on my Android device. My current guess is that Android doesn't do the same thing with mouse events that iOS does (my plan was to test this in a debugger but I haven't yet), and instead only responds to touch events (thus requiring something like what I said in my previous comment). The other possibility is there's a bug in the TouchExtend handler in Leaflet.draw, or a bug in the Tap handler in Leaflet.

[drheinheimer]

I just wanted to add my vote to this issue being important. @mylen thanks for mentioning that 0.4.3 works. I must have missed that one and went back to 0.3.0, but only using the polyline routine from that version. I.e., I just import the polyline.draw.js from 0.3.0 directly into my app. This doesn't seem to be an issue for markers (at least I don't think so - I'm using in combo with leaflet.snap, and I may be cross-contaminating issues).

While I'm not going to do a PR (my understanding of events is limited), I hope that this can be resolved sometime. If I eventually get funding for my work, hopefully I can contribute to this, as leaflet draw is very nice.

[mhosman]

Any news about this fix? Thanks!!!

[meteerogl]

is there any solution for leaflet 1+ version

[alexandre-melard]

@meteerogl I resigned using leaflet and drew back to openLayers

[meteerogl]

Solution:

(function() {
var originalOnTouch = L.Draw.Polyline.prototype._onTouch;
L.Draw.Polyline.prototype._onTouch = function( e ) {
if( e.originalEvent.pointerType != 'mouse' ) {
return originalOnTouch.call(this, e);
}
}
})();

@meteerogl I resigned using leaflet and drew back to openLayers

[meteerogl]

Any news about this fix? Thanks!!!
(function() {
var originalOnTouch = L.Draw.Polyline.prototype._onTouch;
L.Draw.Polyline.prototype._onTouch = function( e ) {
if( e.originalEvent.pointerType != 'mouse' ) {
return originalOnTouch.call(this, e);
}
}
})();

[johnd0e]

Even simpler fix: #935 (comment)