Fix nogo drawing for mobile Chrome, fixes #259

nrenner · Jun 5, 2020 · 32d4a26 · 32d4a26
1 parent f197fb3
commit 32d4a26
Showing 1 changed file with 42 additions and 4 deletions.
diff --git a/js/plugin/NogoAreas.js b/js/plugin/NogoAreas.js
@@ -41,7 +41,7 @@ BR.NogoAreas = L.Control.extend({
             e.layer.toggleEdit();
         });
 
-        var editTools = (this.editTools = map.editTools = new L.Editable(map, {
+        var editTools = (this.editTools = map.editTools = new BR.Editable(map, {
             circleEditorClass: BR.DeletableCircleEditor,
             // FeatureGroup instead of LayerGroup to propagate events to members
             editLayer: new L.FeatureGroup().addTo(map),
@@ -74,6 +74,10 @@ BR.NogoAreas = L.Control.extend({
             ]
         });
 
+        // prevent instant re-activate when turning off button by both Pointer and Click
+        // events firing in Chrome mobile while L.Map.Tap enabled for circle drawing
+        L.DomEvent.addListener(this.button.button, 'pointerdown', L.DomEvent.stop);
+
         this.editTools.on(
             'editable:drawing:end',
             function(e) {
@@ -319,9 +323,43 @@ BR.NogoAreas = L.Control.extend({
 
 BR.NogoAreas.include(L.Evented.prototype);
 
-L.Editable.prototype.createVertexIcon = function(options) {
-    return BR.Browser.touch ? new L.Editable.TouchVertexIcon(options) : new L.Editable.VertexIcon(options);
-};
+BR.Editable = L.Editable.extend({
+    // Editable relies on L.Map.Tap for touch support. But the Tap handler is not added when
+    // the Browser supports Pointer events, which is the case for mobile Chrome. So we add it
+    // ourselves in this case, but disabled and only enable while drawing (#259).
+    // Also, we generally disable the Tap handler in the map options for route dragging,
+    // see Map.js, so we always need to enable for drawing.
+
+    initialize: function(map, options) {
+        L.Editable.prototype.initialize.call(this, map, options);
+
+        if (!this.map.tap) {
+            this.map.addHandler('tap', L.Map.Tap);
+            this.map.tap.disable();
+        }
+    },
+
+    registerForDrawing: function(editor) {
+        this._tapEnabled = this.map.tap.enabled();
+        if (!this._tapEnabled) {
+            this.map.tap.enable();
+        }
+
+        L.Editable.prototype.registerForDrawing.call(this, editor);
+    },
+
+    unregisterForDrawing: function(editor) {
+        if (!this._tapEnabled) {
+            this.map.tap.disable();
+        }
+
+        L.Editable.prototype.unregisterForDrawing.call(this, editor);
+    },
+
+    createVertexIcon: function(options) {
+        return BR.Browser.touch ? new L.Editable.TouchVertexIcon(options) : new L.Editable.VertexIcon(options);
+    }
+});
 
 BR.EditingTooltip = L.Handler.extend({
     options: {