nakarte

commit 63f13762cb547a5703880179522bcbb1e5afd537
parent 76251795ee71edbbb8eea2f79ca08770b820f175
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Tue,  3 Jul 2018 03:26:50 +0300

Merge branch 'myadzel-profile-resize'

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

2 files changed, 28 insertions(+), 16 deletions(-)
diff --git a/src/lib/leaflet.control.elevation-profile/elevation-profile.css b/src/lib/leaflet.control.elevation-profile/elevation-profile.css
@@ -6,6 +6,7 @@
     bottom: 0;
     z-index: 2000;
     cursor: default;
+    border-top: 1px solid #ddd;
 }
 
 .elevation-profile-properties {
@@ -13,7 +14,7 @@
     height: 100%;
     float: left;
     width: 240px;
-    border-right: 1px solid #dddddd;
+    border-right: 1px solid #ddd;
 }
 
 .elevation-profile-properties table {
@@ -43,7 +44,7 @@
     position: relative;
     height: 100%;
     float: left;
-    width: 50px;
+    width: 35px;
 }
 
 .elevation-profile-drawingContainer {
@@ -52,7 +53,7 @@
     overflow-x: scroll;
     overflow-y: hidden;
     position: relative;
-}
+ }
 
 .elevation-profile-grid-label {
     font-family: Arial sans-serif;
@@ -118,10 +119,6 @@
     visibility: hidden;
 }
 
-.elevation-profile-cursor-hidden-while-drag {
-    visibility: hidden;
-}
-
 .elevation-profile-selection {
     background-color: #0078A8;
     opacity: .3;
@@ -165,14 +162,11 @@
 }
 
 .elevation-profile-close {
-    position: absolute;
-    /*right: 0;*/
-    left: 244px;
+    float: right;
+    margin: 4px;
     width: 16px;
     height: 16px;
     background-image: url("close.png");
-    margin-left: 4px;
-    margin-top: 4px;
     cursor: pointer;
 }
 
diff --git a/src/lib/leaflet.control.elevation-profile/index.js b/src/lib/leaflet.control.elevation-profile/index.js
@@ -246,7 +246,20 @@ const ElevationProfile = L.Class.extend({
                     self._addTo(map);
                 });
             this.values = null;
+        },
 
+        _onWindowResize: function() {
+            this._resizeGraph();
+        },
+
+        _resizeGraph: function() {
+            const newSvgWidth = this.drawingContainer.clientWidth * this.horizZoom;
+            if (this.svgWidth < this.drawingContainer.clientWidth) {
+                this.svgWidth = newSvgWidth;
+                this.svg.setAttribute('width', this.svgWidth + 'px');
+                this.updateGraph();
+                this.updateGraphSelection();
+            }
         },
 
         _addTo: function(map) {
@@ -292,7 +305,11 @@ const ElevationProfile = L.Class.extend({
                 svgHeight = this.svgHeight = this.drawingContainer.clientHeight;
             var svg = this.svg = createSvg('svg', {width: svgWidth, height: svgHeight}, this.drawingContainer);
             L.DomEvent.on(svg, 'mousemove', this.onSvgMouseMove, this);
-            L.DomEvent.on(svg, 'mouseenter', this.onSvgEnter, this);
+            // We should handle mouseenter event, but due to a
+            // bug in Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=846738)
+            // this event is emitted while resizing window by dragging right window frame
+            // which causes cursor to appeat while resizing
+            L.DomEvent.on(svg, 'mousemove', this.onSvgEnter, this);
             L.DomEvent.on(svg, 'mouseleave', this.onSvgLeave, this);
             L.DomEvent.on(svg, 'mousewheel', this.onSvgMouseWheel, this);
             this.svgDragEvents = new DragEvents(this.svg, null, {dragButtons: [0, 2]});
@@ -301,6 +318,7 @@ const ElevationProfile = L.Class.extend({
             this.svgDragEvents.on('drag', this.onSvgDrag, this);
             this.svgDragEvents.on('click', this.onSvgClick, this);
             L.DomEvent.on(svg, 'dblclick', this.onSvgDblClick, this);
+            L.DomEvent.on(window, 'resize', this._onWindowResize, this);
         },
 
         removeFrom: function(map) {
@@ -314,6 +332,7 @@ const ElevationProfile = L.Class.extend({
             map.removeLayer(this.polyline);
             map.removeLayer(this.trackMarker);
             map.removeLayer(this.polyLineSelection);
+            L.DomEvent.off(window, 'resize', this._onWindowResize, this);
             this._map = null;
             this.fire('remove');
             return this;
@@ -630,7 +649,7 @@ const ElevationProfile = L.Class.extend({
             this.graphCursor.style.left = x + 'px';
             this.graphCursorLabel.style.left = x + 'px';
             if (this.drawingContainer.getBoundingClientRect().left - this.drawingContainer.scrollLeft + x +
-                this.graphCursorLabel.offsetWidth >= this._container.getBoundingClientRect().right) {
+                this.graphCursorLabel.offsetWidth >= this.drawingContainer.getBoundingClientRect().right) {
                 L.DomUtil.addClass(this.graphCursorLabel, 'elevation-profile-cursor-label-left');
             } else {
                 L.DomUtil.removeClass(this.graphCursorLabel, 'elevation-profile-cursor-label-left');
@@ -659,8 +678,7 @@ const ElevationProfile = L.Class.extend({
             if (!this.values) {
                 return;
             }
-            var x = offestFromEvent(e).offsetX;
-            var ind = (x / (this.svgWidth - 1) * (this.values.length - 1));
+            var ind = this.xToIndex(offestFromEvent(e).offsetX);
             this.setCursorPosition(ind);
         },