nakarte

commit e02c5b53c2845faf9e977f67d72dec9855c5d675
parent a9b5839a26183474556ee15bc724e1bf4346148c
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat,  9 Dec 2017 02:06:21 +0300

[elevation profile] fixed marker flicker; refactored to avoid icon creation for every move event

Diffstat:
M
src/lib/leaflet.control.elevation-profile/elevation-profile.css
 | 
1
-
M
src/lib/leaflet.control.elevation-profile/index.js
 | 
24
++++++++++++++++--------

2 files changed, 16 insertions(+), 9 deletions(-)
diff --git a/src/lib/leaflet.control.elevation-profile/elevation-profile.css b/src/lib/leaflet.control.elevation-profile/elevation-profile.css
@@ -135,7 +135,6 @@
     margin-left: 0 !important;
     margin-top: 0 !important;
     white-space: nowrap;
-    pointer-events: none;
 }
 
 .elevation-profile-marker-icon {
diff --git a/src/lib/leaflet.control.elevation-profile/index.js b/src/lib/leaflet.control.elevation-profile/index.js
@@ -256,7 +256,12 @@ const ElevationProfile = L.Class.extend({
             this._map._controlContainer.appendChild(container);
             this.setupContainerLayout();
             this.updateGraph();
-            this.trackMarker = L.marker([1000, 0], {clickable: false, icon: L.divIcon()});
+            const icon = L.divIcon({
+                    className: 'elevation-profile-marker',
+                    html: '<div class="elevation-profile-marker-icon"></div><div class="elevation-profile-marker-label"></div>'
+                }
+            );
+            this.trackMarker = L.marker([1000, 0], {interactive: false, icon: icon});
             this.polyline = L.polyline(this.path, {weight: 30, opacity: 0}).addTo(map);
             this.polyline.on('mousemove', this.onLineMouseMove, this);
             this.polyline.on('mouseover', this.onLineMouseEnter, this);
@@ -327,6 +332,14 @@ const ElevationProfile = L.Class.extend({
             return x / (this.svgWidth - 1) * (this.values.length - 1);
         },
 
+        setTrackMarkerLabel: function(label) {
+            const icon = this.trackMarker._icon;
+            if (!icon) {
+                return;
+            }
+            icon.getElementsByClassName('elevation-profile-marker-label')[0].innerHTML = label;
+        },
+
         updateGraphSelection: function(e) {
             if (this.dragStart === null) {
                 return;
@@ -638,13 +651,8 @@ const ElevationProfile = L.Class.extend({
             var label = L.Util.template('{ele} m<br>{dist} km<br>{angle}&deg;',
                 {ele: Math.round(elevation), dist: distance, grad: gradient, angle: angle}
             );
-            var icon = L.divIcon({
-                    className: 'elevation-profile-marker',
-                    html: '<div class="elevation-profile-marker-icon"></div><div class="elevation-profile-marker-label">' +
-                    label + '</div>'
-                }
-            );
-            this.trackMarker.setIcon(icon);
+
+            this.setTrackMarkerLabel(label);
         },
 
         onSvgMouseMove: function(e) {