From 5b315d97c7ba52e10ce48e49a34e7e8a284fe8b2 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Mon, 25 Feb 2019 16:23:29 +0700
Subject: [PATCH] InteractivePoly: touch hinting at mobile

---
 src/modules/InteractivePoly.ts | 9 +++++----
 src/styles/map.less            | 9 +++++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts
index a8282c1..04dbc7c 100644
--- a/src/modules/InteractivePoly.ts
+++ b/src/modules/InteractivePoly.ts
@@ -148,13 +148,14 @@ export class Component extends Polyline {
       this.is_editing = false;
       this.stopDragHinting();
       this.stopDrawing();
-
+      this.touchHinter.removeFrom(this._map);
       this.fire('editordisable');
     },
     enable: () => {
       this.is_editing = true;
       this.showVisibleMarkers();
       this.startDragHinting();
+      this.touchHinter.addTo(this._map);
 
       this.fire('editorenable');
     },
@@ -525,9 +526,9 @@ export class Component extends Polyline {
   };
 
   touchHinter: Polyline = new Polyline([], {
-    weight: 25,
-    color: 'rgba(255, 255, 255, 0)',
+    weight: 24,
     smoothFactor: 3,
+    className: 'touch-hinter-poly'
     // bubblingMouseEvents: false,
   });
 
@@ -563,7 +564,7 @@ Component.addInitHook(function () {
       this.on('latlngschange', this.updateTouchHinter);
 
       if (window.innerWidth < 768) {
-        this.touchHinter.setStyle({ weight: 50 });
+        this.touchHinter.setStyle({ weight: 32 });
       }
     }
   });
diff --git a/src/styles/map.less b/src/styles/map.less
index 214fb9e..e539ab0 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -50,6 +50,7 @@
       width: 32px;
       height: 32px;
       transform: translate(-8px, -8px);
+      background: rgba(255, 50, 0, 0.3);
     }
   }
 
@@ -71,6 +72,14 @@
   }
 }
 
+.touch-hinter-poly {
+  stroke: rgba(255, 50, 0, 0);
+
+  @media (max-width: @mobile_breakpoint) {
+    stroke: rgba(255, 50, 0, 0.1);
+  }
+}
+
 .leaflet-control-container .leaflet-routing-container-hide {
     display: none;
 }