@raruto/leaflet-elevation 1.8.0 → 1.8.1

package/dist/leaflet-elevation.css

@@ -36,7 +36,6 @@
   user-select: none;
 }
 
-.elevation-control.elevation .background.zoomed .point,
 .elevation-control.elevation .background.zoomed .axis.time {
   display: none;
 }

package/dist/leaflet-elevation.js

@@ -949,10 +949,11 @@
         legend: g.append('g').attr("class", "legend")
       }; // SVG Paths
 
-      var clipPath = panes.area.append("svg:clipPath").attr("id", 'elevation-clipper');
-      var clipRect = clipPath.append("svg:rect"); // Canvas Paths
+      var mask = panes.area.append("svg:mask").attr("id", 'elevation-clipper').attr('fill-opacity', 1);
+      var maskRect = mask.append("svg:rect").attr('class', 'zoom').attr('fill', 'white'); // white = transparent
+      // Canvas Paths
 
-      var foreignObject = panes.area.append('svg:foreignObject');
+      var foreignObject = panes.area.append('svg:foreignObject').attr('mask', 'url(#' + mask.attr('id') + ')');
       var canvas = foreignObject.append('xhtml:canvas').attr('class', 'canvas-plot');
       var context = canvas.node().getContext('2d'); // Add tooltip
 
@@ -976,7 +977,7 @@
       };
 
       var utils = {
-        clipPath: clipPath,
+        mask: mask,
         canvas: canvas,
         context: context,
         brush: brush
@@ -1007,7 +1008,7 @@
           canvas.style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
         }
 
-        clipRect.attr("x", 0).attr("y", 0).attr("width", _width).attr("height", _height);
+        maskRect.attr("x", 0).attr("y", 0).attr("width", _width).attr("height", _height);
         foreignObject.attr('width', _width).attr('height', _height);
         canvas.attr('width', _width).attr('height', _height);
 
@@ -1073,6 +1074,8 @@
     var Chart$1 = L.Class.extend({
       includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
       initialize: function initialize(opts, control) {
+        var _this = this;
+
         this.options = opts;
         this.control = control;
         this._data = []; // cache registered components
@@ -1107,14 +1110,24 @@
         this._initScale(); // Helpers
 
 
-        this._clipPath = chart.get('clipPath');
+        this._mask = chart.get('mask');
         this._context = chart.get('context');
         this._brush = chart.get('brush');
         this._zoom = d3.zoom();
         this._drag = d3.drag(); // Interactions
 
         this._initInteractions(); // svg.on('resize', (e)=>console.log(e.detail));
+        // Handle multi-track segments (BETA)
+
 
+        this._maskGaps = [];
+        control.on('eletrack_added', function (e) {
+          _this._maskGaps.push(e.index);
+
+          control.once('eledata_updated', function (e) {
+            return _this._maskGaps.push(e.index);
+          });
+        });
       },
       update: function update(props) {
         if (props) {
@@ -1135,11 +1148,11 @@
         return this;
       },
       render: function render() {
-        var _this = this;
+        var _this2 = this;
 
         return function (container) {
           return container.append(function () {
-            return _this._container.node();
+            return _this2._container.node();
           });
         };
       },
@@ -1191,43 +1204,43 @@
        * Initialize "d3-brush".
        */
       _initBrush: function _initBrush(e) {
-        var _this2 = this;
+        var _this3 = this;
 
         var brush = function brush(e) {
-          if (!_this2._data.length) return;
+          if (!_this3._data.length) return;
           var extent = e.selection;
 
           if (extent) {
-            var start = _this2._findIndexForXCoord(extent[0]);
+            var start = _this3._findIndexForXCoord(extent[0]);
 
-            var end = _this2._findIndexForXCoord(extent[1]);
+            var end = _this3._findIndexForXCoord(extent[1]);
 
-            _this2.fire('dragged', {
-              dragstart: _this2._data[start],
-              dragend: _this2._data[end]
+            _this3.fire('dragged', {
+              dragstart: _this3._data[start],
+              dragend: _this3._data[end]
             });
           }
         };
 
         var focus = function focus(e) {
-          if (!_this2._data.length) return;
+          if (!_this3._data.length) return;
           if (e.type == 'brush' && !e.sourceEvent) return;
 
-          var rect = _this2._chart.panes.brush.select('.overlay').node();
+          var rect = _this3._chart.panes.brush.select('.overlay').node();
 
           var coords = d3.pointers(e, rect)[0];
           var xCoord = coords[0];
 
-          var item = _this2._data[_this2._findIndexForXCoord(xCoord)];
+          var item = _this3._data[_this3._findIndexForXCoord(xCoord)];
 
-          _this2.fire("mouse_move", {
+          _this3.fire("mouse_move", {
             item: item,
             xCoord: xCoord
           });
         };
 
         this._brush.filter(function (e) {
-          return _this2._brushEnabled && !e.shiftKey && !e.button;
+          return _this3._brushEnabled && !e.shiftKey && !e.button;
         }).on("end.update", brush).on("brush.update", focus);
 
         this._chart.panes.brush.on("mouseenter.focus touchstart.focus", this.fire.bind(this, "mouse_enter")).on("mouseout.focus touchend.focus", this.fire.bind(this, "mouse_out")).on("mousemove.focus touchmove.focus", focus);
@@ -1237,7 +1250,7 @@
        * Initialize "d3-zoom"
        */
       _initClipper: function _initClipper() {
-        var _this3 = this;
+        var _this4 = this;
 
         var svg = this._container;
         var margin = this.options.margins;
@@ -1247,42 +1260,52 @@
           if (e.sourceEvent && e.sourceEvent.type == "mousedown") svg.style('cursor', 'grabbing');
 
           if (e.transform.k == 1 && e.transform.x == 0) {
-            _this3._container.classed('zoomed', true);
+            _this4._container.classed('zoomed', true); // Apply d3-zoom (bind <clipPath> mask)
+
+
+            if (_this4._mask) {
+              _this4._point.attr('mask', 'url(#' + _this4._mask.attr('id') + ')');
+            }
           }
 
-          _this3.zooming = true;
+          _this4.zooming = true;
         };
 
         var onEnd = function onEnd(e) {
           if (e.transform.k == 1 && e.transform.x == 0) {
-            _this3._container.classed('zoomed', false);
+            _this4._container.classed('zoomed', false); // Apply d3-zoom (bind <clipPath> mask)
+
+
+            if (_this4._mask) {
+              _this4._point.attr('mask', null);
+            }
           }
 
-          _this3.zooming = false;
+          _this4.zooming = false;
           svg.style('cursor', '');
         };
 
         var onZoom = function onZoom(e) {
           // TODO: find a faster way to redraw the chart.
-          _this3.zooming = false;
+          _this4.zooming = false;
 
-          _this3._updateScale(); // hacky way for restoring x scale when zooming out
+          _this4._updateScale(); // hacky way for restoring x scale when zooming out
 
 
-          _this3.zooming = true;
-          _this3._scales.distance = _this3._x = e.transform.rescaleX(_this3._x); // calculate x scale at zoom level
+          _this4.zooming = true;
+          _this4._scales.distance = _this4._x = e.transform.rescaleX(_this4._x); // calculate x scale at zoom level
 
-          _this3._resetDrag();
+          _this4._resetDrag();
 
           if (e.sourceEvent && e.sourceEvent.type == "mousemove") {
-            _this3._hideDiagramIndicator();
+            _this4._hideDiagramIndicator();
           }
 
-          _this3.fire('zoom');
+          _this4.fire('zoom');
         };
 
         zoom.scaleExtent([1, 10]).extent([[margin.left, 0], [this._width() - margin.right, this._height()]]).translateExtent([[margin.left, -Infinity], [this._width() - margin.right, Infinity]]).filter(function (e) {
-          return _this3._zoomEnabled && (e.shiftKey || e.buttons == 4);
+          return _this4._zoomEnabled && (e.shiftKey || e.buttons == 4);
         }).on("start", onStart).on("end", onEnd).on("zoom", onZoom);
         svg.call(zoom); // add zoom functionality to "svg" group
         // d3.select("body").on("keydown.grabzoom keyup.grabzoom", (e) => svg.style('cursor', e.shiftKey ? 'move' : ''));
@@ -1301,7 +1324,7 @@
        * Toggle chart data on legend click
        */
       _initLegend: function _initLegend() {
-        var _this4 = this;
+        var _this5 = this;
 
         this._container.on('legend_clicked', function (e) {
           var _e$detail = e.detail,
@@ -1321,9 +1344,9 @@
 
           toggleClass(path, 'leaflet-hidden', enabled);
 
-          _this4._updateArea();
+          _this5._updateArea();
 
-          _this4.fire("elepath_toggle", {
+          _this5.fire("elepath_toggle", {
             path: path,
             name: name,
             legend: legend,
@@ -1336,7 +1359,7 @@
        * Initialize "ruler".
        */
       _initRuler: function _initRuler() {
-        var _this5 = this;
+        var _this6 = this;
 
         if (!this.options.ruler) return; // const yMax      = this._height();
 
@@ -1344,35 +1367,35 @@
         var drag = this._drag;
 
         var label = function label(e, d) {
-          var yMax = _this5._height();
+          var yMax = _this6._height();
 
-          var y = _this5._ruler.data()[0].y;
+          var y = _this6._ruler.data()[0].y;
 
-          if (y >= yMax || y <= 0) _this5._ruler.select(".horizontal-drag-label").text('');
+          if (y >= yMax || y <= 0) _this6._ruler.select(".horizontal-drag-label").text('');
 
-          _this5._hideDiagramIndicator();
+          _this6._hideDiagramIndicator();
         };
 
         var position = function position(e, d) {
-          var yMax = _this5._height();
+          var yMax = _this6._height();
 
-          var yCoord = d3.pointers(e, _this5._area.node())[0][1];
+          var yCoord = d3.pointers(e, _this6._area.node())[0][1];
           var y = yCoord > 0 ? yCoord < yMax ? yCoord : yMax : 0;
 
-          var z = _this5._y.invert(y);
+          var z = _this6._y.invert(y);
 
-          var data = L.extend(_this5._ruler.data()[0], {
+          var data = L.extend(_this6._ruler.data()[0], {
             y: y
           });
 
-          _this5._ruler.data([data]).attr("transform", function (d) {
+          _this6._ruler.data([data]).attr("transform", function (d) {
             return "translate(" + d.x + "," + d.y + ")";
           }).classed('active', y < yMax);
 
-          _this5._container.select(".horizontal-drag-label").text(formatNum(z) + " " + (_this5.options.imperial ? 'ft' : 'm'));
+          _this6._container.select(".horizontal-drag-label").text(formatNum(z) + " " + (_this6.options.imperial ? 'ft' : 'm'));
 
-          _this5.fire('ruler_filter', {
-            coords: yCoord < yMax && yCoord > 0 ? _this5._findCoordsForY(yCoord) : []
+          _this6.fire('ruler_filter', {
+            coords: yCoord < yMax && yCoord > 0 ? _this6._findCoordsForY(yCoord) : []
           });
         };
 
@@ -1545,12 +1568,30 @@
         });
       },
       _updateClipper: function _updateClipper() {
+        var _this7 = this;
+
         var margin = this.options.margins;
 
-        this._zoom.scaleExtent([1, 10]).extent([[margin.left, 0], [this._width() - margin.right, this._height()]]).translateExtent([[margin.left, -Infinity], [this._width() - margin.right, Infinity]]);
+        this._zoom.scaleExtent([1, 10]).extent([[margin.left, 0], [this._width() - margin.right, this._height()]]).translateExtent([[margin.left, -Infinity], [this._width() - margin.right, Infinity]]); // Apply svg mask on multi-track segments (BETA)
+
+
+        this._mask.selectAll(".gap").remove();
+
+        this._maskGaps.forEach(function (d, i) {
+          if (i >= _this7._maskGaps.length - 2) return;
+          var d1 = _this7._data[_this7._maskGaps[i]];
+          var d2 = _this7._data[_this7._maskGaps[i + 1]];
+
+          var x1 = _this7._x(_this7._data[_this7._findIndexForLatLng(d1.latlng)].dist);
+
+          var x2 = _this7._x(_this7._data[_this7._findIndexForLatLng(d2.latlng)].dist);
+
+          _this7._mask.append("rect").attr("x", x1).attr("y", 0).attr("width", x2 - x1).attr("height", _this7._height()).attr('class', 'gap').attr('fill-opacity', '0.8').attr("fill", 'black'); // black = hide
+
+        });
       },
       _updateLegend: function _updateLegend() {
-        var _this6 = this;
+        var _this8 = this;
 
         if (this.options.legend === false) return;
         var legends = this._props.legendItems;
@@ -1606,21 +1647,21 @@
           var legend = d3.select(n[i]);
           var rect = legend.select('rect');
           var name = legend.attr('data-name');
-          var path = _this6._paths[name];
+          var path = _this8._paths[name];
           var tx = v[i] * 55;
           var ty = xAxesB * 2;
           legend // Adjust legend item positions
           .attr("transform", "translate(" + tx + ", " + ty + ")"); // Set initial state (disabled controls)
 
-          if (name in _this6.options && _this6.options[name] == 'disabled') {
+          if (name in _this8.options && _this8.options[name] == 'disabled') {
             path.classed('leaflet-hidden', true);
             legend.select('text').style('text-decoration-line', 'line-through');
             legend.select('rect').style('fill-opacity', '0');
           } // Apply d3-zoom (bind <clipPath> mask)
 
 
-          if (_this6._clipPath) {
-            path.attr('clip-path', 'url(#' + _this6._clipPath.attr('id') + ')');
+          if (_this8._mask) {
+            path.attr('mask', 'url(#' + _this8._mask.attr('id') + ')');
           }
         });
       },
@@ -1689,10 +1730,10 @@
        * Finds a data entry for a given x-coordinate of the diagram
        */
       _findIndexForXCoord: function _findIndexForXCoord(x) {
-        var _this7 = this;
+        var _this9 = this;
 
         return d3.bisector(function (d) {
-          return d[_this7.options.xAttr];
+          return d[_this9.options.xAttr];
         }).left(this._data || [0, 1], this._x.invert(x));
       },