@raruto/leaflet-elevation 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.8.0",
+	"version": "1.8.1",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"main": "dist/leaflet-elevation.min.js",
 	"module": "src/index.js",

package/src/chart.js

@@ -49,7 +49,7 @@ export var Chart = L.Class.extend({
 		this._initScale();
 
 		// Helpers
-		this._clipPath  = chart.get('clipPath');
+		this._mask  = chart.get('mask');
 		this._context   = chart.get('context');
 		this._brush     = chart.get('brush');
 
@@ -61,6 +61,13 @@ export var Chart = L.Class.extend({
 
 		// svg.on('resize', (e)=>console.log(e.detail));
 
+		// Handle multi-track segments (BETA)
+		this._maskGaps = [];
+		control.on('eletrack_added', (e) => {
+			this._maskGaps.push(e.index);
+			control.once('eledata_updated', (e) => this._maskGaps.push(e.index));
+		});
+
 	},
 
 	update: function(props) {
@@ -178,6 +185,10 @@ export var Chart = L.Class.extend({
 			if (e.sourceEvent && e.sourceEvent.type == "mousedown") svg.style('cursor', 'grabbing');
 			if (e.transform.k == 1 && e.transform.x == 0) {
 				this._container.classed('zoomed', true);
+				// Apply d3-zoom (bind <clipPath> mask)
+				if (this._mask) {
+					this._point.attr('mask', 'url(#' + this._mask.attr('id') + ')');
+				}
 			}
 			this.zooming = true;
 		};
@@ -185,6 +196,10 @@ export var Chart = L.Class.extend({
 		const onEnd  = (e) => {
 			if (e.transform.k ==1 && e.transform.x == 0){
 				this._container.classed('zoomed', false);
+				// Apply d3-zoom (bind <clipPath> mask)
+				if (this._mask) {
+					this._point.attr('mask', null);
+				}
 			}
 			this.zooming = false;
 			svg.style('cursor', '');
@@ -497,6 +512,24 @@ export var Chart = L.Class.extend({
 				[this._width() - margin.right, Infinity]
 			]);
 
+		// Apply svg mask on multi-track segments (BETA)
+		this._mask.selectAll(".gap").remove()
+		this._maskGaps.forEach((d, i) => {
+			if(i >= this._maskGaps.length - 2) return;
+			let d1 = this._data[this._maskGaps[i]];
+			let d2 = this._data[this._maskGaps[i + 1]];
+			let x1 = this._x(this._data[this._findIndexForLatLng(d1.latlng)].dist);
+			let x2 = this._x(this._data[this._findIndexForLatLng(d2.latlng)].dist);
+			this._mask
+				.append("rect")
+				.attr("x", x1)
+				.attr("y", 0)
+				.attr("width", x2 - x1 )
+				.attr("height", this._height())
+				.attr('class', 'gap')
+				.attr('fill-opacity', '0.8')
+				.attr("fill", 'black');  // black = hide
+		});
 	},
 
 	_updateLegend: function () {
@@ -573,8 +606,8 @@ export var Chart = L.Class.extend({
 				}
 
 				// Apply d3-zoom (bind <clipPath> mask)
-				if (this._clipPath) {
-					path.attr('clip-path', 'url(#' + this._clipPath.attr('id') + ')');
+				if (this._mask) {
+					path.attr('mask', 'url(#' + this._mask.attr('id') + ')');
 				}
 
 			});

package/src/components.js

@@ -505,11 +505,11 @@ export const Chart = ({
 	};
 
 	// SVG Paths
-	const clipPath      = panes.area.append("svg:clipPath").attr("id", 'elevation-clipper');
-	const clipRect      = clipPath.append("svg:rect");
+	const mask          = panes.area.append("svg:mask").attr("id", 'elevation-clipper').attr('fill-opacity', 1);
+	const maskRect      = mask.append("svg:rect").attr('class', 'zoom').attr('fill', 'white'); // white = transparent
 
 	// Canvas Paths
-	const foreignObject = panes.area.append('svg:foreignObject');
+	const foreignObject = panes.area.append('svg:foreignObject').attr('mask', 'url(#' + mask.attr('id') + ')');
 	const canvas        = foreignObject.append('xhtml:canvas').attr('class', 'canvas-plot');
 	const context       = canvas.node().getContext('2d');
 
@@ -523,7 +523,7 @@ export const Chart = ({
 	const scale = (opts) => ({ x: Scale(opts.x), y: Scale(opts.y)});
 
 	let utils = {
-		clipPath,
+		mask,
 		canvas,
 		context,
 		brush,
@@ -560,7 +560,7 @@ export const Chart = ({
 			.style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
 		}
 
-		clipRect
+		maskRect
 			.attr("x", 0)
 			.attr("y", 0)
 			.attr("width", _width)

package/src/control.js

@@ -17,7 +17,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.3.0/dist/togeojson.umd.js',
 	__LGEOMUTIL:   'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
 	__LALMOSTOVER: 'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
-	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.5/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.8.1/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -997,6 +997,7 @@ Elevation.addInitHook(function() {
 					}
 				});
 		}
+
 	});
 
 	// Basic canvas renderer support.

package/src/index.css

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