From 32d4a26dfd9fbe977fc0c2e16b69bff3c1f9b5a5 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Fri, 5 Jun 2020 20:11:36 +0200
Subject: [PATCH] Fix nogo drawing for mobile Chrome, fixes #259

---
 js/plugin/NogoAreas.js | 46 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/js/plugin/NogoAreas.js b/js/plugin/NogoAreas.js
index 750521a..012de7d 100644
--- 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: {