@raruto/leaflet-elevation 1.7.5 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.7.5",
+	"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/acceleration.js

@@ -10,8 +10,8 @@ Elevation.addInitHook(function() {
 	let opts = this.options;
 	let acceleration = {};
 
-	acceleration.label       = opts.accelerationLabel  || L._(this.options.imperial ? 'ft/s²' : 'm/s²');
-	this._accelerationFactor = opts.accelerationFactor || 1;
+	acceleration.label      = opts.accelerationLabel  || L._(opts.imperial ? 'ft/s²' : 'm/s²');
+	opts.accelerationFactor = opts.accelerationFactor || 1;
 
 	if (this.options.acceleration != "summary") {
 
@@ -61,8 +61,8 @@ Elevation.addInitHook(function() {
 		if (deltaT > 0) {
 			let curr     = data[i].speed;
 			let prev     = i > 0 ? data[i - 1].speed : curr;
-			let delta    = (curr - prev) * (1000 / this._timeFactor);
-			acceleration = Math.abs((delta / deltaT)) * this._accelerationFactor;
+			let delta    = (curr - prev) * (1000 / opts.timeFactor);
+			acceleration = Math.abs((delta / deltaT)) * opts.accelerationFactor;
 		}
 
 		// Try to smooth "crazy" acceleration values.
@@ -75,28 +75,18 @@ Elevation.addInitHook(function() {
 		}
 
 		// Range of acceptable acceleration values.
-		if (this.options.accelerationRange) {
-			let range = this.options.accelerationRange;
-			if (acceleration < range[0])      acceleration = range[0];
-			else if (acceleration > range[1]) acceleration = range[1];
-		}
-
-		acceleration = L.Util.formatNum(acceleration, 2);
-
-		if (acceleration > sMax) sMax = acceleration;
-		if (acceleration < sMin) sMin = acceleration;
-		sAvg = (acceleration + sAvg) / 2.0;
+		acceleration = _.clamp(acceleration, this.options.accelerationRange);
 
-		data[i].acceleration = acceleration;
+		track.acceleration_max = acceleration > sMax ? acceleration : sMax;
+		track.acceleration_min = acceleration < sMin ? acceleration : sMin;
+		track.acceleration_avg = (acceleration + sAvg) / 2.0;
 
-		track.acceleration_max = sMax;
-		track.acceleration_min = sMin;
-		track.acceleration_avg = sAvg;
+		data[i].acceleration = L.Util.formatNum(acceleration, 2);
 	});
 
-	this._registerFocusLabel({
+	this._registerTooltip({
 		name  : 'acceleration',
-		chart : (item) => item.acceleration + " " + acceleration.label,
+		chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
 		marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
 	});
 

package/src/altitude.js

@@ -9,21 +9,21 @@ Elevation.addInitHook(function() {
 	let altitude = {};
 
 	if (opts.imperial) {
-		this._heightFactor = this.__footFactor;
-		this._yLabel       = "ft";
+		opts.altitudeFactor = this.__footFactor;
+		altitude.label      = "ft";
 	} else {
-		this._heightFactor = opts.heightFactor;
-		this._yLabel       = opts.yLabel;
+		opts.altitudeFactor = opts.heightFactor || opts.altitudeFactor || 1;
+		altitude.label      = opts.yLabel;
 	}
 
 	this.on("eledata_updated", function(e) {
 		let data   = this._data;
 		let i      = e.index;
-		let z      = data[i].z * this._heightFactor;
+		let z      = data[i].z * opts.altitudeFactor;
 
 		let track  = this.track_info;
-		let eleMax = track.elevation_max || -Infinity;
-		let eleMin = track.elevation_min || +Infinity;
+		let zMax = track.elevation_max || -Infinity;
+		let zMin = track.elevation_min || +Infinity;
 
 		// check and fix missing elevation data on last added point
 		if (!this.options.skipNullZCoords && i > 0) {
@@ -44,15 +44,13 @@ Elevation.addInitHook(function() {
 		}
 		// skip point if it has not elevation
 		if (!isNaN(z)) {
-			eleMax = eleMax < z ? z : eleMax;
-			eleMin = eleMin > z ? z : eleMin;
 			this._lastValidZ = z;
 		}
 
-		data[i].z = z;
+		track.elevation_max = z > zMax ? z : zMax;
+		track.elevation_min = z < zMin ? z : zMin;
 
-		track.elevation_max = eleMax;
-		track.elevation_min = eleMin;
+		data[i].z = z;
 	});
 
 	this.on("elechart_axis", function() {
@@ -69,13 +67,10 @@ Elevation.addInitHook(function() {
 
 		this.on("elechart_axis", function() {
 
-			altitude.y     = this._chart._y;
-			altitude.label = this._yLabel;
-
 			this._chart._registerAxisScale({
 				axis    : "y",
 				position: "left",
-				scale   : altitude.y,
+				scale   : this._chart._y,
 				label   : altitude.label,
 				labelX  : -3,
 				labelY  : -8,
@@ -88,8 +83,6 @@ Elevation.addInitHook(function() {
 
 			let theme      = this.options.theme.replace('-theme', '');
 			let color      = D3.Colors[theme] || {};
-			let alpha      = (this.options.detached ? (color.alpha || '0.8') : 1);
-			let stroke     = (this.options.detached ? color.stroke : false);
 
 			this._chart._registerAreaPath({
 				name         : 'altitude',
@@ -97,9 +90,9 @@ Elevation.addInitHook(function() {
 				scaleX       : 'distance',
 				scaleY       : 'altitude',
 				color        : color.area || theme,
-				strokeColor  : stroke || '#000',
+				strokeColor  : this.options.detached ? color.stroke : '#000',
 				strokeOpacity: "1",
-				fillOpacity  : alpha,
+				fillOpacity  : this.options.detached ? (color.alpha || '0.8') : 1,
 				preferCanvas : this.options.preferCanvas,
 			});
 
@@ -107,14 +100,20 @@ Elevation.addInitHook(function() {
 
 	}
 
+	this._registerTooltip({
+		name: 'y',
+		chart: (item) => L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label,
+		marker: (item) => d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label,
+	});
+
 	this._registerSummary({
 		"maxele"  : {
 			label: "Max Elevation: ",
-			value: (track) => (track.elevation_max || 0).toFixed(2) + '&nbsp;' + this._yLabel
+			value: (track) => (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label
 		},
 		"minele"  : {
 			label: "Min Elevation: ",
-			value: (track) => (track.elevation_min || 0).toFixed(2) + '&nbsp;' + this._yLabel
+			value: (track) => (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label
 		},
 	});
 

package/src/chart.js

@@ -14,13 +14,13 @@ export var Chart = L.Class.extend({
 
 		// cache registered components
 		this._props        = {
-			scales     : {},
-			paths      : {},
-			areas      : {},
-			grids      : {},
-			axes       : {},
-			legendItems: {},
-			focusLabels: {},
+			scales      : {},
+			paths       : {},
+			areas       : {},
+			grids       : {},
+			axes        : {},
+			legendItems : {},
+			tooltipItems: {},
 		};
 
 		this._scales       = {};
@@ -31,14 +31,6 @@ export var Chart = L.Class.extend({
 		this._brushEnabled = opts.dragging;
 		this._zoomEnabled  = opts.zooming;
 
-		if (opts.imperial) {
-			this._xLabel  = "mi";
-			this._yLabel  = "ft";
-		} else {
-			this._xLabel  = opts.xLabel;
-			this._yLabel  = opts.yLabel;
-		}
-
 		let chart       = this._chart = D3.Chart(opts);
 
 		// SVG Container
@@ -50,22 +42,17 @@ export var Chart = L.Class.extend({
 		this._point     = chart.pane('point');
 		this._axis      = chart.pane('axis');
 		this._legend    = chart.pane('legend');
+		this._tooltip   = chart.pane('tooltip');
+		this._ruler     = chart.pane('ruler');
 
 		// Scales
 		this._initScale();
 
 		// Helpers
-		this._clipPath  = chart.get('clipPath');
-		this._canvas    = chart.get('canvas');
+		this._mask  = chart.get('mask');
 		this._context   = chart.get('context');
-		this._dragG     = chart.get('dragG');
-		this._focusG    = chart.get('focusG');
 		this._brush     = chart.get('brush');
 
-		// Tooltip
-		this._focusline  = this._focusG.select('.mouse-focus-line');
-		this._focuslabel = this._focusG.select('.mouse-focus-label');
-
 		this._zoom = d3.zoom();
 		this._drag = d3.drag();
 
@@ -74,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) {
@@ -101,62 +95,33 @@ export var Chart = L.Class.extend({
 		this._area.selectAll('path').attr("d", "M0 0");
 		this._context.clearRect(0, 0, this._width(), this._height());
 
-		if (this._path) {
+		// if (this._path) {
 			// this._x.domain([0, 1]);
 			// this._y.domain([0, 1]);
-		}
+		// }
 	},
 
 	_drawPath: function(name) {
-		let opts   = this.options;
-		let ctx    = this._context;
-
 		let path   = this._paths[name];
 		let area   = this._props.areas[name];
-		let node   = path.node();
-		let scaleX = this._scales[area.scaleX];
-		let scaleY = this._scales[area.scaleY];
-
-		area = L.extend({}, area, {
-			width        : this._width(),
-			height       : this._height(),
-			scaleX       : scaleX,
-			scaleY       : scaleY
-		});
-
-		if (!scaleY || !scaleY) {
-			return console.warn('Unable to render path:' + name);
-		}
 
-		path.datum(this._data).attr("d", D3.Area(area));
+		path.datum(this._data).attr("d",
+			D3.Area(
+				L.extend({}, area, {
+					width        : this._width(),
+					height       : this._height(),
+					scaleX       : this._scales[area.scaleX],
+					scaleY       : this._scales[area.scaleY]
+				})
+			)
+		);
 
 		if (path.classed('leaflet-hidden')) return;
 
-		if (opts.preferCanvas) {
-			path.classed('canvas-path', true);
-
-			ctx.beginPath();
-			ctx.moveTo(0, 0);
-			let p = new Path2D(path.attr('d'));
-
-			ctx.strokeStyle = path.attr('stroke');
-			ctx.fillStyle   = path.attr('fill');
-			ctx.lineWidth   = 1.25;
-			ctx.globalCompositeOperation = 'source-over';
-
-			// stroke opacity
-			ctx.globalAlpha = path.attr('stroke-opacity') || 0.3;
-			ctx.stroke(p);
-
-			// fill opacity
-			ctx.globalAlpha = path.attr('fill-opacity')   || 0.45;
-			ctx.fill(p);
-
-			ctx.globalAlpha = 1;
-
-			ctx.closePath();
+		if (this.options.preferCanvas) {
+			_.drawCanvas(this._context, path);
 		} else {
-			this._area.append(() => node);
+			this._area.append(() => path.node());
 		}
 	},
 
@@ -220,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;
 		};
@@ -227,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', '');
@@ -307,8 +280,8 @@ export var Chart = L.Class.extend({
 
 		const label     = (e, d) => {
 			let yMax      = this._height();
-			let y         = this._dragG.data()[0].y;
-			if (y >= yMax || y <= 0) this._dragG.select(".horizontal-drag-label").text('');
+			let y         = this._ruler.data()[0].y;
+			if (y >= yMax || y <= 0) this._ruler.select(".horizontal-drag-label").text('');
 			this._hideDiagramIndicator();
 		};
 
@@ -317,15 +290,15 @@ export var Chart = L.Class.extend({
 			let yCoord    = d3.pointers(e, this._area.node())[0][1];
 			let y         = yCoord > 0 ? (yCoord < yMax ? yCoord : yMax) : 0;
 			let z         = this._y.invert(y);
-			let data      = L.extend(this._dragG.data()[0], { y: y });
+			let data      = L.extend(this._ruler.data()[0], { y: y });
 
-			this._dragG
+			this._ruler
 				.data([data])
 				.attr("transform", d => "translate(" + d.x + "," + d.y + ")")
 				.classed('active', y < yMax);
 
 			this._container.select(".horizontal-drag-label")
-				.text(formatNum(z) + " " + this._yLabel);
+				.text(formatNum(z) + " " + (this.options.imperial ? 'ft' : 'm'));
 
 			this.fire('ruler_filter', { coords: yCoord < yMax && yCoord > 0 ? this._findCoordsForY(yCoord) : [] });
 		}
@@ -334,7 +307,7 @@ export var Chart = L.Class.extend({
 		.on("start end", label)
 		.on("drag", position);
 
-		this._dragG.call(drag);
+		this._ruler.call(drag);
 
 	},
 
@@ -427,7 +400,7 @@ export var Chart = L.Class.extend({
 	},
 
 	/**
-	 * Add a waypoint of interest over the chart
+	 * Add a point of interest over the chart
 	 */
 	_registerCheckPoint: function(point) {
 		if (!this._data.length) return;
@@ -442,58 +415,19 @@ export var Chart = L.Class.extend({
 			x    = this._x(point.dist);
 			item = this._data[this._findIndexForXCoord(x)]
 			y    = this._y(item.z);
-		} else
-
-		if (isNaN(x) || isNaN(y)) return;
-
-		if (!point.item || !point.item.property('isConnected')) {
-			point.position = point.position || "bottom";
-
-			point.item = this._point.append('g');
-
-			point.item.append("svg:line")
-				.attr("y1", 0)
-				.attr("x1", 0)
-				.attr("style","stroke: rgb(51, 51, 51); stroke-width: 0.5; stroke-dasharray: 2, 2;");
-
-			point.item
-				.append("svg:circle")
-				.attr("class", " height-focus circle-lower")
-				.attr("r", 3);
-
-			if (point.label) {
-				point.item.append("svg:text")
-					.attr("dx", "4px")
-					.attr("dy", "-4px");
-			}
-		}
-
-		point.item
-			.datum({
-				pos: point.position,
-				x: x,
-				y: y
-			})
-			.attr("class", d => "point " + d.pos)
-			.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
-
-		point.item.select('line')
-			.datum({
-				y2: ({'top': -y, 'bottom': this._height() - y})[point.position],
-				x2: ({'left': -x, 'right': this._width() - x})[point.position] || 0
-			})
-			.attr("y2", d => d.y2)
-			.attr("x2", d => d.x2)
-
-		if (point.label) {
-			point.item.select('text')
-				.text(point.label);
-		}
-
+		} 
+
+		this._point.call(D3.CheckPoint({
+			point: point,
+			width: this._width(),
+			height: this._height(),
+			x: x,
+			y: y,
+		}));
 	},
 
-	_registerFocusLabel: function(props) {
-		this._props.focusLabels[props.name] = props;
+	_registerTooltip: function(props) {
+		this._props.tooltipItems[props.name] = props;
 	},
 
 	_updateArea: function() {
@@ -578,11 +512,29 @@ 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 () {
 
-		if (this.options.legend == false) return;
+		if (this.options.legend === false) return;
 
 		let legends = this._props.legendItems;
 		let legend;
@@ -654,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') + ')');
 				}
 
 			});
@@ -664,16 +616,10 @@ export var Chart = L.Class.extend({
 	_updateScale: function() {
 		if (this.zooming) return { x: this._x, y: this._y };
 
-		let opts = this.options;
-
-		let scales  = this._scales;
-		let d = this._domains;
-		let r = this._ranges;
-
-		for (let i in scales) {
-			scales[i]
-			.domain(d[i](this._data))
-			.range(r[i](this._width(), this._height()))
+		for (let i in this._scales) {
+			this._scales[i]
+				.domain(this._domains[i](this._data))
+				.range(this._ranges[i](this._width(), this._height()))
 		}
 
 		return { x: this._x, y: this._y };
@@ -772,52 +718,19 @@ export var Chart = L.Class.extend({
 	 * Display distance and altitude level ("focus-rect").
 	 */
 	_showDiagramIndicator: function(item, xCoordinate) {
-		let opts        = this.options;
-		let yCoordinate = this._y(item[opts.yAttr]);
-
-		this._focusG.attr("display", null);
-
-		this._focusline.call(
-			D3.MouseFocusLine({
-				xCoord: xCoordinate,
-				height: this._height()
-			})
-		);
-		this._focuslabel.call(
-			D3.MouseFocusLabel({
+		this._tooltip
+			.attr("display", null)
+			.call(D3.Tooltip({
 				xCoord: xCoordinate,
-				yCoord: yCoordinate,
+				yCoord: this._y(item[this.options.yAttr]),
 				height: this._height(),
 				width : this._width(),
-				labelX: d3.format("."+ opts.decimalsX +"f")(item[opts.xAttr]) + " " + this._xLabel,
-				labelY: d3.format("."+ opts.decimalsY +"f")(item[opts.yAttr]) + " " + this._yLabel
-			})
-		);
-
-		// this._focuslabel.selectAll('tspan').data(Object.values(this._focuslabels));
-
-		let labels = this._props.focusLabels;
-		let tooltip = this._focuslabel.select('text');
-		let label;
-
-		for (var i in labels) {
-			label = tooltip.select(".mouse-focus-label-" + labels[i].name);
-
-			if (!label.size()) {
-				label   = tooltip.append("svg:tspan", ".mouse-focus-label-x")
-					.attr("class", "mouse-focus-label-" + labels[i].name)
-					.attr("dy", "1.5em");
-			}
-
-			label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item) );
-
-			this._focuslabel.select('.mouse-focus-label-x')
-				.attr("dy", "1.5em");
-		}
-
+				labels: this._props.tooltipItems,
+				item: item
+			}));
 	},
 
 	_hideDiagramIndicator: function() {
-		this._focusG.attr("display", 'none');
+		this._tooltip.attr("display", 'none');
 	},
 });