Merge pull request #108 from Leaflet/touch-drag

Fix Rectangle and Circle drawing broken since Leaflet 1.0.0
Leaflet · Nov 3, 2016 · 15b60b9 · 15b60b9
2 parents b950081 + 3b757ef
commit 15b60b9
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/src/Leaflet.Editable.js b/src/Leaflet.Editable.js
@@ -225,10 +225,10 @@
 
         registerForDrawing: function (editor) {
             if (this._drawingEditor) this.unregisterForDrawing(this._drawingEditor);
-            this.map.on('mousemove touchmove', editor.onDrawingMouseMove, editor);
             this.blockEvents();
             editor.reset();  // Make sure editor tools still receive events.
             this._drawingEditor = editor;
+            this.map.on('mousemove touchmove', editor.onDrawingMouseMove, editor);
             this.map.on('mousedown', this.onMousedown, this);
             this.map.on('mouseup', this.onMouseup, this);
             L.DomUtil.addClass(this.map._container, this.options.drawingCSSClass);
@@ -1581,6 +1581,15 @@
             this.refresh();
             this.reset();
             // Stop dragging map.
+            // L.Draggable has two workflows:
+            // - mousedown => mousemove => mouseup
+            // - touchstart => touchmove => touchend
+            // Problem: L.Map.Tap does not allow us to listen to touchstart, so we only
+            // can deal with mousedown, but then when in a touch device, we are dealing with
+            // simulated events (actually simulated by L.Map.Tap), which are no more taken
+            // into account by L.Draggable.
+            // Ref.: https://github.com/Leaflet/Leaflet.Editable/issues/103
+            e.originalEvent._simulated = false;
             this.map.dragging._draggable._onUp(e.originalEvent);
             // Now transfer ongoing drag action to the bottom right corner.
             // Should we refine which corne will handle the drag according to
@@ -1590,9 +1599,16 @@
 
         onDrawingMouseUp: function (e) {
             this.commitDrawing(e);
+            e.originalEvent._simulated = false;
             L.Editable.PathEditor.prototype.onDrawingMouseUp.call(this, e);
         },
 
+        onDrawingMouseMove: function (e) {
+            e.originalEvent._simulated = false;
+            L.Editable.PathEditor.prototype.onDrawingMouseMove.call(this, e);
+        },
+
+
         getDefaultLatLngs: function (latlngs) {
             return latlngs || this.feature._latlngs[0];
         },
@@ -1663,18 +1679,24 @@
             this._resizeLatLng.update(e.latlng);
             this.feature._latlng.update(e.latlng);
             this.connect();
-            // this.commitDrawing(e);
             // Stop dragging map.
+            e.originalEvent._simulated = false;
             this.map.dragging._draggable._onUp(e.originalEvent);
             // Now transfer ongoing drag action to the radius handler.
             this._resizeLatLng.__vertex.dragging._draggable._onDown(e.originalEvent);
         },
 
         onDrawingMouseUp: function (e) {
             this.commitDrawing(e);
+            e.originalEvent._simulated = false;
             L.Editable.PathEditor.prototype.onDrawingMouseUp.call(this, e);
         },
 
+        onDrawingMouseMove: function (e) {
+            e.originalEvent._simulated = false;
+            L.Editable.PathEditor.prototype.onDrawingMouseMove.call(this, e);
+        },
+
         onDrag: function (e) {
             L.Editable.PathEditor.prototype.onDrag.call(this, e);
             this.feature.dragging.updateLatLng(this._resizeLatLng);