@raruto/leaflet-elevation 1.7.5 → 1.8.1

package/src/marker.js

@@ -7,39 +7,28 @@ export var Marker = L.Class.extend({
 	initialize: function(options) {
 		this.options = options;
 
-		if (this.options.imperial) {
-			this._xLabel = "mi";
-			this._yLabel = "ft";
-		} else {
-			this._xLabel = this.options.xLabel;
-			this._yLabel = this.options.yLabel;
+		switch(this.options.marker) {
+			case 'elevation-line':
+				// this._container = d3.create("g").attr("class", "height-focus-group");
+				this._container = d3.select(map.getPane('elevationPane')).select("svg > g")
+					.attr("class", "height-focus-group");
+			break;
+			case 'position-marker':
+				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
+				this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
+			break;
 		}
 
-		if (this.options.marker == 'elevation-line') {
-			// this._container = d3.create("g").attr("class", "height-focus-group");
-			this._focusline   = d3.create('svg:line');
-			this._focusmarker = d3.create("svg:circle");
-			this._focuslabel  = d3.create("svg:text");
-		} else if (this.options.marker == 'position-marker') {
-			// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
-			this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
-		}
-
-		this._focuslabels = {};
+		this._labels = {};
 
 		return this;
 	},
 
 	addTo: function(map) {
 		this._map = map;
-		if (this.options.marker == 'elevation-line') {
-			let g = this._container = d3.select(map.getPane('elevationPane')).select("svg > g")
-				.attr("class", "height-focus-group");
-			g.append(() => this._focusline.node());
-			g.append(() => this._focusmarker.node());
-			g.append(() => this._focuslabel.node());
-		} else if (this.options.marker == 'position-marker') {
-			this._marker.addTo(map, { pane: 'overlayPane' });
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container.call(D3.PositionMarker({}));      break;
+			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
 		}
 		return this;
 	},
@@ -56,75 +45,27 @@ export var Marker = L.Class.extend({
 		if (props.options) this.options = props.options;
 		if (!this._map) this.addTo(props.map);
 
-		let opts = this.options;
-		let map = this._map;
-
 		this._latlng = props.item.latlng;
 
-		let pos = map.latLngToLayerPoint(this._latlng);
-
-		if (map._rotate) {
-			pos = map.rotatedPointToMapPanePoint(pos);
-		}
-
-		let point = L.extend({}, props.item, pos);
-
-		if (this.options.marker == 'elevation-line') {
-
-			let normalizedAlt = this._height() / props.maxElevation * point.z;
-			let normalizedY   = point.y - normalizedAlt;
-
-			this._container.classed("leaflet-hidden", false);
-
-			this._focusmarker
-				.call(
-					D3.HeightFocusMarker({
-						theme : opts.theme,
-						xCoord: point.x,
-						yCoord: point.y,
-					}));
-
-			this._focusline
-				.call(
-					D3.HeightFocusLine({
-						theme : opts.theme,
-						xCoord: point.x,
-						yCoord: point.y,
-						length: normalizedY
-					})
-				);
-			this._focuslabel
-				.call(
-					D3.HeightFocusLabel({
-						theme : opts.theme,
-						xCoord: point.x,
-						yCoord: normalizedY,
-						label : d3.format("." + opts.decimalsY + "f")(point[opts.yAttr]) + " " + this._yLabel
-					})
-				);
-
-			let labels = this._focuslabels;
-			let tooltip = this._focuslabel;
-			let label;
-
-			for (var i in labels) {
-				label = tooltip.select(".height-focus-" + labels[i].name);
-
-				if (!label.size()) {
-					label   = tooltip.append("svg:tspan")
-						.attr("class", "height-focus-" + labels[i].name)
-						.attr("dy", "1.5em");
-				}
-
-				label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(props.item) );
-
-				this._focuslabel.select('.height-focus-y')
-					.attr("dy", "-1.5em");
-			}
-
-		} else if (this.options.marker == 'position-marker') {
-			_.removeClass(this._marker.getElement(), 'leaflet-hidden');
-			this._marker.setLatLng(this._latlng);
+		switch(this.options.marker) {
+			case 'elevation-line':
+				let point   = this._map.latLngToLayerPoint(this._latlng);
+				point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+		
+				this._container.classed("leaflet-hidden", false);
+				this._container.call(D3.PositionMarker({
+					theme : this.options.theme,
+					xCoord: point.x,
+					yCoord: point.y,
+					length: point.y - (this._height() / props.maxElevation * point.z), // normalized Y
+					labels: this._labels,
+					item: point
+				}));
+			break;
+			case 'position-marker':
+				_.removeClass(this._marker.getElement(), 'leaflet-hidden');
+				this._marker.setLatLng(this._latlng);
+			break;
 		}
 	},
 
@@ -133,10 +74,9 @@ export var Marker = L.Class.extend({
 	 */
 	remove: function() {
 		this._props = null;
-		if (this.options.marker == 'elevation-line') {
-			if (this._container) this._container.classed("leaflet-hidden", true);
-		} else if (this.options.marker == 'position-marker') {
-			_.addClass(this._marker.getElement(), 'leaflet-hidden');
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container && this._container.classed("leaflet-hidden", true); break;
+			case 'position-marker': _.addClass(this._marker.getElement(), 'leaflet-hidden');            break;
 		}
 	},
 
@@ -152,8 +92,8 @@ export var Marker = L.Class.extend({
 		return opts.height - opts.margins.top - opts.margins.bottom;
 	},
 
-	_registerFocusLabel: function(props) {
-		this._focuslabels[props.name] = props;
+	_registerTooltip: function(props) {
+		this._labels[props.name] = props;
 	}
 
 });

package/src/options.js

@@ -9,7 +9,6 @@ export var Options = {
 	collapsed: false,
 	detached: true,
 	distance: true,
-	distanceFactor: 1,
 	distanceMarkers: false,
 	decimalsX: 2,
 	decimalsY: 0,
@@ -19,15 +18,10 @@ export var Options = {
 	followMarker: true,
 	forceAxisBounds: false,
 	height: 200,
-	heightFactor: 1,
 	imperial: false,
 	interpolation: "curveLinear",
 	lazyLoadJS: true,
 	legend: true,
-	loadData: {
-		defer: false,
-		lazy: false,
-	},
 	margins: {
 		top: 30,
 		right: 30,
@@ -41,7 +35,6 @@ export var Options = {
 		iconSize: [32, 32],
 		iconAnchor: [16, 16],
 	}),
-	placeholder: false,
 	position: "topright",
 	polyline: {
 		className: 'elevation-polyline',
@@ -60,7 +53,6 @@ export var Options = {
 	ruler: true,
 	skipNullZCoords: false,
 	theme: "lightblue-theme",
-	responsive: true,
 	summary: 'inline',
 	slope: false,
 	speed: false,
@@ -68,6 +60,7 @@ export var Options = {
 	time: false,
 	timeFactor: 3600,
 	timeFormat: false,
+	timestamps: false,
 	sDeltaMax: undefined,
 	sInterpolation: "curveStepAfter",
 	sRange: undefined,

package/src/slope.js

@@ -74,39 +74,30 @@ Elevation.addInitHook(function() {
 		}
 
 		// Range of acceptable slope values.
-		if (this.options.sRange) {
-			let range = this.options.sRange;
-			if (slope < range[0])      slope = range[0];
-			else if (slope > range[1]) slope = range[1];
-		}
-
-		slope = L.Util.formatNum(slope, 2);
-
-		if (slope > sMax) sMax = slope;
-		if (slope < sMin) sMin = slope;
-
-		data[i].slope   = slope;
+		slope = _.clamp(slope, this.options.sRange);
 
 		track.ascent    = tAsc;
 		track.descent   = tDes;
-		track.slope_max = sMax;
-		track.slope_min = sMin;
+		track.slope_max = slope > sMax ? slope : sMax;
+		track.slope_min = slope < sMin ? slope : sMin;
+
+		data[i].slope   = L.Util.formatNum(slope, 2);
 	});
 
-	this._registerFocusLabel({
+	this._registerTooltip({
 		name: 'slope',
-		chart: (item) => item.slope + slope.label,
+		chart: (item) => L._("m: ") + item.slope + slope.label,
 		marker: (item) => Math.round(item.slope) + slope.label
 	});
 
 	this._registerSummary({
 		"ascent"  : {
 			label: "Total Ascent: ",
-			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + this._yLabel
+			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
 		},
 		"descent"  : {
 			label: "Total Descent: ",
-			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + this._yLabel
+			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
 		},
 		"minslope": {
 			label: "Min Slope: ",

package/src/speed.js

@@ -10,8 +10,8 @@ Elevation.addInitHook(function() {
 	let opts = this.options;
 	let speed = {};
 
-	speed.label          = opts.speedLabel  || L._(this.options.imperial ? 'mph' : 'km/h');
-	this._speedFactor    = opts.speedFactor || 1;
+	speed.label      = opts.speedLabel  || L._(opts.imperial ? 'mph' : 'km/h');
+	opts.speedFactor = opts.speedFactor || 1;
 
 	if (this.options.speed && this.options.speed != "summary") {
 
@@ -60,7 +60,7 @@ Elevation.addInitHook(function() {
 
 		if (deltaT > 0) {
 			let delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-			speed = Math.abs((delta / deltaT) * this._timeFactor) * this._speedFactor;
+			speed = Math.abs((delta / deltaT) * opts.timeFactor) * opts.speedFactor;
 		}
 
 		// Try to smooth "crazy" speed values.
@@ -73,31 +73,21 @@ Elevation.addInitHook(function() {
 		}
 
 		// Range of acceptable speed values.
-		if (this.options.speedRange) {
-			let range = this.options.speedRange;
-			if (speed < range[0])      speed = range[0];
-			else if (speed > range[1]) speed = range[1];
-		}
-
-		speed = L.Util.formatNum(speed, 2);
-
-		sMax = speed > sMax ? speed : sMax;
-		sMin = speed < sMin ? speed : sMin;
-		sAvg = (speed + sAvg) / 2.0;
+		speed = _.clamp(speed, this.options.speedRange);
 
-		data[i].speed = speed;
+		track.speed_max = speed > sMax ? speed : sMax;
+		track.speed_min = speed < sMin ? speed : sMin;
+		track.speed_avg = (speed + sAvg) / 2.0;
 
-		track.speed_max = sMax;
-		track.speed_min = sMin;
-		track.speed_avg = sAvg;
+		data[i].speed = L.Util.formatNum(speed, 2);
 	});
 
 	if (this.options.speed) {
 
-		this._registerFocusLabel({
+		this._registerTooltip({
 			name: 'speed',
-			chart: (item) => item.speed + " " + speed.label,
-			marker: (item) => Math.round(item.speed) + " " + speed.label
+			chart: (item) => L._('v: ') + item.speed + " " + speed.label,
+			marker: (item) => Math.round(item.speed) + " " + speed.label,
 		});
 
 		this._registerSummary({

package/src/time.js

@@ -8,8 +8,8 @@ Elevation.addInitHook(function() {
 	let opts = this.options;
 	let time = {};
 
-	time.label       = opts.timeLabel  || 't';
-	this._timeFactor = opts.timeFactor;
+	time.label      = opts.timeLabel  || 't';
+	opts.timeFactor = opts.timeFactor || 3600;
 
 	/**
 	 * Common AVG speeds:
@@ -75,7 +75,7 @@ Elevation.addInitHook(function() {
 			e.point.meta.time = new Date(
 				(
 					i > 0
-						? data[i - 1].time.getTime() + ((( delta / speed) * this._timeFactor) * 1000)
+						? data[i - 1].time.getTime() + ((( delta / speed) * opts.timeFactor) * 1000)
 						: Date.now()
 				)
 			);
@@ -94,26 +94,31 @@ Elevation.addInitHook(function() {
 		let deltaT   = Math.abs(currT - prevT);
 		let duration = (this.track_info.time || 0) + deltaT;
 
+		this.track_info.time = duration;
+
 		data[i].time         = time;
 		data[i].duration     = duration;
-
-		this.track_info.time = duration;
 	});
 
-	if (this.options.time) {
 
-		this._registerFocusLabel({
-			name: 'time',
-			chart: (item) => this.options.timeFormat(item.time)
+	if (this.options.timestamps) {
+		this._registerTooltip({
+			name: 'date',
+			chart: (item) => L._("t: ") + this.options.timeFormat(item.time)
 		});
+	}
 
+	if (this.options.time) {
+		this._registerTooltip({
+			name: 'time',
+			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0)
+		});
 		this._registerSummary({
 			"tottime"  : {
 				label: "Total Time: ",
 				value: (track) => _.formatTime(track.time || 0)
 			}
 		});
-
 	}
 
 });

package/src/utils.js

@@ -22,29 +22,6 @@ export function deepMerge(target, ...sources) {
 	return deepMerge(target, ...sources);
 }
 
-/**
- * Wait for document load before execute function.
- */
-export function deferFunc(f) {
-	if (document.readyState !== 'complete') window.addEventListener("load", f, { once: true });
-	else f();
-}
-/**
- * Debounce function to limit events are being fired.
- */
-export function debounce(func, wait, context, immediate) {
-	var timeout;
-	return function() {
-		var args = arguments;
-		clearTimeout(timeout);
-		timeout  = setTimeout(function() {
-			timeout = null;
-		if (!immediate) func.apply(context, args);
-		}, wait);
-		if (immediate && !timeout) func.apply(context, args);
-	};
-}
-
 const SEC  = 1000;
 const MIN  = SEC * 60;
 const HOUR = MIN * 60;
@@ -169,13 +146,6 @@ export function GeoJSONLoader(data, control) {
 	return layer;
 }
 
-/**
- * Check DOM element visibility.
- */
-export function isDomVisible(elem) {
-	return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-}
-
 /**
  * Check object type.
  */
@@ -183,47 +153,6 @@ export function isObject(item) {
 	return (item && typeof item === 'object' && !Array.isArray(item));
 }
 
-/**
- * Check DOM element viewport visibility.
- */
-export function isVisible(elem) {
-	if (!elem) return false;
-
-	let styles = window.getComputedStyle(elem);
-
-	function isVisibleByStyles(elem, styles) {
-		return styles.visibility !== 'hidden' && styles.display !== 'none';
-	}
-
-	function isAboveOtherElements(elem, styles) {
-		let boundingRect = elem.getBoundingClientRect();
-		let left = boundingRect.left + 1;
-		let right = boundingRect.right - 1;
-		let top = boundingRect.top + 1;
-		let bottom = boundingRect.bottom - 1;
-		let above = true;
-
-		let pointerEvents = elem.style.pointerEvents;
-
-		if (styles['pointer-events'] == 'none') elem.style.pointerEvents = 'auto';
-
-		if (document.elementFromPoint(left, top) !== elem) above = false;
-		if (document.elementFromPoint(right, top) !== elem) above = false;
-
-		// Only for completely visible elements
-		// if (document.elementFromPoint(left, bottom) !== elem) above = false;
-		// if (document.elementFromPoint(right, bottom) !== elem) above = false;
-
-		elem.style.pointerEvents = pointerEvents;
-
-		return above;
-	}
-
-	if (!isVisibleByStyles(elem, styles)) return false;
-	if (!isAboveOtherElements(elem, styles)) return false;
-	return true;
-}
-
 /**
  * Check JSON object type.
  */
@@ -258,6 +187,17 @@ export function isXMLDoc(doc, lazy) {
 	}
 }
 
+/**
+ * Generate download data event.
+ */
+ export function saveFile(dataURI, fileName) {
+	let a = create('a', '', { href: dataURI, target: '_new', download: fileName || "", style: "display:none;" });
+	let b = document.body;
+	b.appendChild(a);
+	a.click();
+	b.removeChild(a);
+}
+
 /**
  * Async JS script download.
  */
@@ -276,39 +216,71 @@ export function lazyLoader(url, skip, loader) {
 	});
 }
 
+export function lazyLoad(src, control) {
+	if (!control.options.lazyLoadJS) return Promise.resolve();
+
+	const Elevation = L.Control.Elevation;
+	let loader      = '';
+	let condition = false;
+
+	switch(src) {
+		case control.__D3:
+			loader    = '_d3LazyLoader';
+			condition = typeof d3 !== 'object';
+		break;
+		case control.__TOGEOJSON:
+			loader    = '_togeojsonLazyLoader';
+			condition = typeof toGeoJSON !== 'object';
+		break;
+		case control.__LGEOMUTIL:
+			loader    = '_geomutilLazyLoader';
+			condition = typeof L.GeometryUtil !== 'object';
+		case control.__LALMOSTOVER:
+			loader    = '_almostoverLazyLoader';
+			condition = typeof L.Handler.AlmostOver  !== 'function ';
+		break;
+		case control.__LDISTANCEM:
+			loader    = '_distanceMarkersLazyLoader';
+			condition = typeof L.DistanceMarkers  !== 'function';
+		break;
+	}
+	return Elevation[loader] = lazyLoader(src, condition, Elevation[loader]);
+}
+
 /**
- * Generate download data event.
+ * Convert SVG Path into Path2D and then update canvas
  */
-export function saveFile(dataURI, fileName) {
-	let a = create('a', '', { href: dataURI, target: '_new', download: fileName || "", style: "display:none;" });
-	let b = document.body;
-	b.appendChild(a);
-	a.click();
-	b.removeChild(a);
+ export function drawCanvas(ctx, path) {
+	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();
 }
 
 /**
- * Wait for element visible before execute function.
+ * Limit a number between min / max values
  */
-export function waitHolder(elem) {
-	return new Promise((resolve, reject) => {
-		let ticking = false;
-		let scrollFn = () => {
-			if (!ticking) {
-				L.Util.requestAnimFrame(() => {
-					if (isVisible(elem)) {
-						window.removeEventListener('scroll', scrollFn);
-						resolve();
-					}
-					ticking = false;
-				});
-				ticking = true;
-			}
-		};
-		window.addEventListener('scroll', scrollFn);
-		if (elem) elem.addEventListener('mouseenter', scrollFn, { once: true });
-		scrollFn();
-	});
+ export function clamp(val, range) {
+	if (range) return val < range[0] ? range[0] : val > range[1] ? range[1] : val;
+	return val;
 }
 
 /**
@@ -401,10 +373,16 @@ export const off = L.DomEvent.off;
 export const hasClass = L.DomUtil.hasClass;
 
 
+/**
+ * Generate a random string
+ */
 export function randomId() {
 	return Math.random().toString(36).substr(2, 9);
 }
 
+/**
+ * Execute a function foreach element in object
+ */
 export function each(obj, fn) {
 	for (let i in obj) fn(obj[i], i);
-}
+}