@raruto/leaflet-elevation 1.9.6 → 2.0.0

package/src/utils.js

@@ -1,10 +1,23 @@
+/**
+ * TODO: exget computed styles of theese values from actual "CSS vars"
+ **/
+export const Colors = {
+	'lightblue': { area: '#3366CC', alpha: 0.45, stroke: '#3366CC' },
+	'magenta'  : { area: '#FF005E' },
+	'yellow'   : { area: '#FF0' },
+	'purple'   : { area: '#732C7B' },
+	'steelblue': { area: '#4682B4' },
+	'red'      : { area: '#F00' },
+	'lime'     : { area: '#9CC222', line: '#566B13' }
+};
+
 const SEC  = 1000;
 const MIN  = SEC * 60;
 const HOUR = MIN * 60;
 const DAY  = HOUR * 24;
 
 /**
- * Convert a duration time (millis) to a human readable string (%Dd %H:%M'%S")
+ * Convert a time (millis) to a human readable duration string (%Dd %H:%M'%S")
  */
 export function formatTime(t) {
 	let d = Math.floor(t / DAY);
@@ -17,6 +30,20 @@ export function formatTime(t) {
 	return (d ? d + "d " : '') + h.toString().padStart(2, 0) + ':' + m.toString().padStart(2, 0) + "'" + s.toString().padStart(2, 0) + '"';
 }
 
+/**
+ * Convert a time (millis) to human readable date string (dd-mm-yyyy hh:mm:ss)
+ */
+ export function formatDate(format) {
+	if (!format) {
+		return (time) => (new Date(time)).toLocaleString().replaceAll('/', '-').replaceAll(',', ' ');
+	} else if (format == 'time') {
+		return (time) => (new Date(time)).toLocaleTimeString();
+	} else if (format == 'date') {
+		return (time) => (new Date(time)).toLocaleDateString();
+	}
+	return (time) => format(time);
+}
+
 /**
  * Generate download data event.
  */
@@ -28,23 +55,6 @@ export function formatTime(t) {
 	b.removeChild(a);
 }
 
-/**
- * Async JS script download.
- */
-export function lazyLoader(url, skip, loader) {
-	if (skip === false) {
-		return Promise.resolve();
-	}
-	if (loader instanceof Promise) {
-		return loader;
-	}
-	return new Promise((resolve, reject) => {
-		let tag = document.createElement("script");
-		tag.addEventListener('load', resolve, { once: true });
-		tag.src = url;
-		document.head.appendChild(tag);
-	});
-}
 
 /**
  * Convert SVG Path into Path2D and then update canvas
@@ -75,113 +85,75 @@ export function lazyLoader(url, skip, loader) {
 }
 
 /**
- * Limit a number between min / max values
- */
- export function clamp(val, range) {
-	if (range) return val < range[0] ? range[0] : val > range[1] ? range[1] : val;
-	return val;
-}
-
-/**
- * A little bit safier than L.DomUtil.addClass
+ * Loop and extract GPX Extensions handled by "@tmcw/toGeoJSON" (eg. "coordinateProperties" > "times")
  */
-export function addClass(targetNode, className) {
-	if (targetNode) className.split(" ").every(s => s && L.DomUtil.addClass(targetNode, s));
-}
-
-/**
- * A little bit safier than L.DomUtil.removeClass()
- */
-export function removeClass(targetNode, className) {
-	if (targetNode) className.split(" ").every(s => s && L.DomUtil.removeClass(targetNode, s));
-}
-
-export function toggleClass(targetNode, className, conditional) {
-	return (conditional ? addClass : removeClass).call(null, targetNode, className)
-}
-
-export function replaceClass(targetNode, removeClassName, addClassName) {
-	if (removeClassName) removeClass(targetNode, removeClassName);
-	if (addClassName) addClass(targetNode, addClassName);
-}
-
-export function style(targetNode, name, value) {
-	if (typeof value === "undefined") return L.DomUtil.getStyle(targetNode, name);
-	else return targetNode.style.setProperty(name, value);
-}
-
-export function toggleStyle(targetNode, name, value, conditional) {
-	return style(targetNode, name, conditional ? value : '');
-}
-
-export function toggleEvent(leafletElement, eventName, handler, conditional) {
-	return leafletElement[conditional ? 'on' : 'off'](eventName, handler);
-}
-
-/**
- * A little bit shorter than L.DomUtil.create()
- */
-export function create(tagName, className, attributes, parent) {
-	let elem = L.DomUtil.create(tagName, className || "");
-	if (attributes) setAttributes(elem, attributes);
-	if (parent) append(parent, elem);
-	return elem;
+export function coordPropsToMeta(coordProps, name, parser) {
+	return coordProps && (({props, point, id}) => {
+		if (props) {
+			for (const key of coordProps) {
+				if (key in props) {
+					point.meta[name] = (parser || parseInt).call(this, props[key], id);
+					break;
+				}
+			}
+		}
+	});
 }
 
 /**
- * Same as node.appendChild()
+ * Extract numeric property (id) from GeoJSON object
  */
-export function append(parent, child) {
-	return parent.appendChild(child);
-}
+export const parseInt  = (property, id) => window.parseInt((typeof property === 'object' ? property[id] : property));
 
 /**
- * Same as node.insertAdjacentElement()
+ * Extract datetime property (id) from GeoJSON object
  */
-export function insert(parent, child, position) {
-	return parent.insertAdjacentElement(position, child);
-}
+export const parseDate = (property, id) => new Date(Date.parse((typeof property === 'object' ? property[id] : property)));
 
 /**
- * Loop for node.setAttribute()
+ * A little bit shorter than L.DomUtil
  */
-export function setAttributes(elem, attrs) {
-	for (let k in attrs) { elem.setAttribute(k, attrs[k]); }
-}
+export const addClass      = (n, str)             => n && str.split(" ").every(s => s && L.DomUtil.addClass(n, s));
+export const removeClass   = (n, str)             => n && str.split(" ").every(s => s && L.DomUtil.removeClass(n, s));
+export const toggleClass   = (n, str, cond)       => (cond ? addClass : removeClass)(n, str);
+export const replaceClass  = (n, rem, add)        => (rem && removeClass(n, rem)) || (add && addClass(n, add));
+export const style         = (n, k, v)            => (typeof v === "undefined" && L.DomUtil.getStyle(n, k)) || n.style.setProperty(k, v);
+export const toggleStyle   = (n, k, v, cond)      => style(n, k, cond ? v : '');
+export const setAttributes = (n, attrs)           => { for (let k in attrs) { n.setAttribute(k, attrs[k]); } };
+export const toggleEvent   = (el, e, fn, cond)    => el[cond ? 'on' : 'off'](e, fn);
+export const create        = (tag, str, attrs, n) => { let elem = L.DomUtil.create(tag, str || ""); if (attrs) setAttributes(elem, attrs); if (n) append(n, elem); return elem; };
+export const append        = (n, c)               => n.appendChild(c);
+export const insert        = (n, c, pos)          => n.insertAdjacentElement(pos, c);
+export const select        = (str, n)             => (n || document).querySelector(str);
+export const each          = (obj, fn)            => { for (let i in obj) fn(obj[i], i); };
+export const randomId      = ()                   => Math.random().toString(36).substr(2, 9);
 
 /**
- * Same as node.querySelector().
+ * TODO: use generators instead? (ie. "yield")
  */
-export function select(selector, context) {
-	return (context || document).querySelector(selector);
-}
+export const iMax = (iVal, max) => (iVal > max ? iVal : max) || -Infinity; 
+export const iMin = (iVal, min) => (iVal < min ? iVal : min) || +Infinity;
+export const iAvg = (iVal, avg) => (iVal + (avg || 0)) / 2.0;
+export const iSum = (iVal, sum) => iVal + (sum || 0);
 
 /**
- * Alias for L.DomEvent.on.
+ * Alias for some leaflet core functions
  */
-export const on = L.DomEvent.on;
+export const { on, off }  = L.DomEvent;
+export const { throttle } = L.Util;
+export const { hasClass } = L.DomUtil;
 
 /**
- * Alias for L.DomEvent.off.
+ * Limit floating point precision
  */
-export const off = L.DomEvent.off;
+export const round        = L.Util.formatNum;
 
 /**
- * Alias for L.DomUtil.hasClass.
- */
-export const hasClass = L.DomUtil.hasClass;
-
-
-/**
- * Generate a random string
+ * Limit a number between min / max values
  */
-export function randomId() {
-	return Math.random().toString(36).substr(2, 9);
-}
+export const clamp     = (val, range)           => range ? (val < range[0] ? range[0] : val > range[1] ? range[1] : val) : val;
 
 /**
- * Execute a function foreach element in object
+ * Limit a delta difference between two values
  */
-export function each(obj, fn) {
-	for (let i in obj) fn(obj[i], i);
-}
+export const wrapDelta = (curr, prev, deltaMax) => Math.abs(curr - prev) > deltaMax ? prev + deltaMax * Math.sign(curr - prev) : curr;

package/src/acceleration.js

@@ -1,113 +0,0 @@
-import 'leaflet-i18n';
-import * as _        from './utils';
-import * as D3       from './components';
-import { Elevation } from './control';
-
-Elevation.addInitHook(function() {
-
-	if (!this.options.acceleration) return;
-
-	let opts = this.options;
-	let acceleration = {};
-
-	acceleration.label      = opts.accelerationLabel  || L._(opts.imperial ? 'ft/s²' : 'm/s²');
-	opts.accelerationFactor = opts.accelerationFactor || 1;
-
-	this._registerDataAttribute({
-		name: 'acceleration',
-		init: () => {
-			// this.track_info.acceleration_max = -Infinity; // Acceleration Max
-			// this.track_info.acceleration_min = +Infinity; // Acceleration Min
-			// this.track_info.acceleration_avg = 0;         // Acceleration Avg
-		},
-		fetch: (i) => {
-			let data   = this._data;
-			let dv     = (data[i].speed - data[i > 0 ? i - 1 : i].speed) * (1000 / opts.timeFactor);
-			let dt     = (data[i].time - data[i > 0 ? i - 1 : i].time) / 1000;
-			return dt > 0 ? Math.abs((dv / dt)) * opts.accelerationFactor : 0;
-		},
-		update: (acceleration, i) => {
-			this.track_info.acceleration_max = this.track_info.acceleration_max || -Infinity; // Acceleration Max
-			this.track_info.acceleration_min = this.track_info.acceleration_min || +Infinity; // Acceleration Min
-			this.track_info.acceleration_avg = this.track_info.acceleration_avg || 0;         // Acceleration Avg
-
-			let data  = this._data;
-			let track = this.track_info;
-
-			// Try to smooth "crazy" acceleration values.
-			if (this.options.accelerationDeltaMax) {
-				let delta    = acceleration - data[i > 0 ? i - 1 : i].acceleration;
-				let deltaMax = this.options.accelerationDeltaMax;
-				if (Math.abs(delta) > deltaMax) {
-					acceleration = data[i - 1].acceleration + deltaMax * Math.sign(delta);
-				}
-			}
-
-			// Range of acceptable acceleration values.
-			acceleration = _.clamp(acceleration, this.options.accelerationRange);
-	
-			if (acceleration > track.acceleration_max) track.acceleration_max = acceleration;
-			if (acceleration < track.acceleration_min) track.acceleration_min = acceleration;
-
-			track.acceleration_avg = (acceleration + track.acceleration_avg) / 2.0;
-
-			return L.Util.formatNum(acceleration, 2);
-		},
-	});
-
-	if (this.options.acceleration != "summary") {
-
-		this._registerAxisScale({
-			axis       : "y",
-			position   : "right",
-			scale      : {
-				min        : 0,
-				max        : +1,
-			},
-			tickPadding: 16,
-			label      : acceleration.label,
-			labelX     : 25,
-			labelY     : -8,
-			name       : 'acceleration',
-		});
-
-		this._registerAreaPath({
-			name         : 'acceleration',
-			label        : 'Acceleration',
-			yAttr        : 'acceleration',
-			scaleX       : 'distance',
-			scaleY       : 'acceleration',
-			color        : '#050402',
-			strokeColor  : '#000',
-			strokeOpacity: "0.5",
-			fillOpacity  : "0.25",
-		});
-
-	}
-
-	this._registerTooltip({
-		name  : 'acceleration',
-		chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
-		marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
-		order: 60,
-	});
-
-	this._registerSummary({
-		"minacceleration"  : {
-			label: "Min Acceleration: ",
-			value: (track) => Math.round(track.acceleration_min || 0) + '&nbsp;' + acceleration.label,
-			order: 60
-		},
-		"maxacceleration"  : {
-			label: "Max Acceleration: ",
-			value: (track) => Math.round(track.acceleration_max || 0) + '&nbsp;' + acceleration.label,
-			order: 60
-		},
-		"avgacceleration": {
-			label: "Avg Acceleration: ",
-			value: (track) => Math.round(track.acceleration_avg || 0) + '&nbsp;' + acceleration.label,
-			order: 60
-		}
-	});
-
-});

package/src/altitude.js

@@ -1,119 +0,0 @@
-import 'leaflet-i18n';
-import * as _        from './utils';
-import * as D3       from './components';
-import { Elevation } from './control';
-
-Elevation.addInitHook(function() {
-
-	let opts       = this.options;
-	let altitude   = {};
-
-	let theme      = opts.theme.replace('-theme', '');
-	let color      = D3.Colors[theme] || {};
-
-	if (opts.imperial) {
-		opts.altitudeFactor = this.__footFactor;
-		altitude.label      = "ft";
-	} else {
-		opts.altitudeFactor = opts.heightFactor || opts.altitudeFactor || 1;
-		altitude.label      = opts.yLabel;
-	}
-
-	this._registerDataAttribute({
-		name: 'z',
-		skipNull: this.options.skipNullZCoords,
-		init: ({point, }) => {
-			// "alt" property is generated inside "leaflet"
-			if ("alt" in point) point.meta.ele = point.alt;
-
-			// this.track_info.elevation_max = -Infinity;
-			// this.track_info.elevation_min = +Infinity;
-			// this.track_info.elevation_avg = 0;
-		},
-		fetch: (i) => {
-			return this._data[i].z * opts.altitudeFactor;
-		},
-		update: (z, i) => {
-			this.track_info.elevation_max = this.track_info.elevation_max || -Infinity;
-			this.track_info.elevation_min = this.track_info.elevation_max || +Infinity;
-			this.track_info.elevation_avg = this.track_info.elevation_avg || 0;
-
-			let data  = this._data;
-			let track = this.track_info;
-
-			// Try to smooth "crazy" elevation values.
-			if (this.options.altitudeDeltaMax) {
-				let delta    = z - data[i > 0 ? i - 1 : i].z;
-				let deltaMax = this.options.altitudeDeltaMax;
-				if (Math.abs(delta) > deltaMax) {
-					z = data[i - 1].z + deltaMax * Math.sign(delta);
-				}
-			}
-
-			// Range of acceptable elevation values.
-			z = _.clamp(z, this.options.altitudeRange);
-
-			if (z > track.elevation_max) track.elevation_max = z;
-			if (z < track.elevation_min) track.elevation_min = z;
-
-			track.elevation_avg = (z + track.elevation_avg) / 2.0;
-
-			return z;
-		}
-	});
-
-	this._registerAxisScale({
-		axis    : "y",
-		position: "left",
-		scale   : "y", // this._chart._y,
-		label   : altitude.label,
-		labelX  : -3,
-		labelY  : -8,
-		name    : "altitude",
-		visbile : this.options.altitude != "summary"
-	});
-
-	this._registerAxisGrid({
-		axis      : "y",
-		position  : "left",
-		scale     : "y" // this._chart._y,
-	});
-
-	this._registerAreaPath({
-		name         : 'altitude',
-		label        : 'Altitude',
-		scaleX       : 'distance',
-		scaleY       : 'altitude',
-		color        : color.area || theme,
-		strokeColor  : opts.detached ? color.stroke : '#000',
-		strokeOpacity: "1",
-		fillOpacity  : opts.detached ? (color.alpha || '0.8') : 1,
-		preferCanvas : opts.preferCanvas,
-		visbile      : this.options.altitude != "summary"
-	});
-
-	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,
-		order: 10,
-	});
-
-	this._registerSummary({
-		"maxele"  : {
-			label: "Max Elevation: ",
-			value: (track) => (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label,
-			order: 30,
-		},
-		"minele"  : {
-			label: "Min Elevation: ",
-			value: (track) => (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label,
-			order: 30,
-		},
-		"avgele"  : {
-			label: "Avg Elevation: ",
-			value: (track) => (track.elevation_avg || 0).toFixed(2) + '&nbsp;' + altitude.label,
-			order: 30,
-		},
-	});
-});

package/src/distance.js

@@ -1,69 +0,0 @@
-import 'leaflet-i18n';
-import * as _        from './utils';
-import * as D3       from './components';
-import { Elevation } from './control';
-
-Elevation.addInitHook(function() {
-
-	let opts     = this.options;
-	let distance = {};
-
-	if (opts.imperial) {
-		opts.distanceFactor = this.__mileFactor;
-		distance.label      = "mi";
-	} else {
-		opts.distanceFactor = opts.distanceFactor || 1;
-		distance.label      = opts.xLabel;
-	}
-
-	this._registerDataAttribute({
-		name: 'dist',
-		init: () => {
-			// this.track_info.distance = 0;
-		},
-		fetch: (i) => {
-			let delta = this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor;
-			return Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
-		},
-		update: (distance) => {
-			this.track_info.distance = this.track_info.distance || 0;
-			this.track_info.distance += distance;
-			return this.track_info.distance;
-		}
-	});
-
-	if (this.options.distance != "summary") {
-
-		this._registerAxisScale({
-			axis    : "x",
-			position: "bottom",
-			scale   : "x", // this._chart._x,
-			label   : distance.label,
-			labelY  : 25,
-			labelX  : () => this._width() + 6,
-			name    : "distance",
-		});
-
-	}
-
-	this._registerAxisGrid({
-		axis      : "x",
-		position  : "bottom",
-		scale     : "x" // this._chart._x,
-	});
-
-	this._registerTooltip({
-		name: 'x',
-		chart: (item) => L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + distance.label,
-		order: 20
-	});
-
-	this._registerSummary({
-		"totlen"  : {
-			label: "Total Length: ",
-			value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label,
-			order: 10
-		}
-	});
-
-});

package/src/slope.js

@@ -1,129 +0,0 @@
-import 'leaflet-i18n';
-import * as _        from './utils';
-import * as D3       from './components';
-import { Elevation } from './control';
-
-Elevation.addInitHook(function() {
-
-	if (!this.options.slope) return;
-
-	let opts  = this.options;
-	let slope = {};
-
-	slope.label          = opts.slopeLabel || '%';
-
-	this._registerDataAttribute({
-		name: 'slope',
-		// init: () => {
-		// 	// this.track_info.ascent    = 0;         // Total Ascent
-		// 	// this.track_info.descent   = 0;         // Total Descent
-		// 	// this.track_info.slope_max = -Infinity; // Slope Max
-		// 	// this.track_info.slope_min = +Infinity; // Slope Min
-		// 	// this.track_info.slope_avg = 0;         // Acceleration Avg
-		// },
-		fetch: (i) => {
-			let data  = this._data;
-			let dx    = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-			let dz    = data[i].z - data[i > 0 ? i - 1 : i].z;
-			return (!isNaN(dz) && dx !== 0) ? (dz / dx) * 100 : 0; // slope in % = ( height / length ) * 100;
-		},
-		update: (slope, i) => {
-			this.track_info.ascent    = this.track_info.ascent    || 0;         // Total Ascent
-			this.track_info.descent   = this.track_info.descent   || 0;         // Total Descent
-			this.track_info.slope_max = this.track_info.slope_max || -Infinity; // Slope Max
-			this.track_info.slope_min = this.track_info.slope_min || +Infinity; // Slope Min
-			this.track_info.slope_avg = this.track_info.slope_avg || 0;         // Acceleration Avg
-
-			let track = this.track_info;
-			let data  = this._data;
-			let dz    = data[i].z - data[i > 0 ? i - 1 : i].z;
-
-			// Try to smooth "crazy" acceleration values.
-			if (this.options.slopeDeltaMax) {
-				let delta    = slop - data[i > 0 ? i - 1 : i].slope;
-				let deltaMax = this.options.slopeDeltaMax;
-				if (Math.abs(delta) > deltaMax) {
-					slope = data[i - 1].slope + deltaMax * Math.sign(delta);
-				}
-			}
-
-			// Range of acceptable slope values.
-			slope = _.clamp(slope, this.options.slopeRange);
-
-			if (dz > 0)      this.track_info.ascent += dz;
-			else if (dz < 0) this.track_info.descent -= dz;
-
-			if (slope > track.slope_max) track.slope_max = slope;
-			if (slope < track.slope_min) track.slope_min = slope;
-
-			track.slope_avg = (slope + track.slope_avg) / 2.0;
-
-			return L.Util.formatNum(slope, 2);;
-		}
-	});
-
-	this._registerAxisScale({
-		axis       : "y",
-		position   : "right",
-		scale      : {
-			min        : -1,
-			max        : +1,
-		},
-		tickPadding: 16,
-		label      : slope.label,
-		labelX     : 25,
-		labelY     : -8,
-		name       : 'slope',
-		visbile    : this.options.slope != "summary"
-	});
-
-	this._registerAreaPath({
-		name         : 'slope',
-		label        : 'Slope',
-		yAttr        : 'slope',
-		scaleX       : 'distance',
-		scaleY       : 'slope',
-		color        : '#F00',
-		strokeColor  : '#000',
-		strokeOpacity: "0.5",
-		fillOpacity  : "0.25",
-		visbile      : this.options.slope != "summary"
-	});
-
-	this._registerTooltip({
-		name: 'slope',
-		chart: (item) => L._("m: ") + item.slope + slope.label,
-		marker: (item) => Math.round(item.slope) + slope.label,
-		order: 40,
-	});
-
-	this._registerSummary({
-		"ascent"  : {
-			label: "Total Ascent: ",
-			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
-			order: 40
-		},
-		"descent"  : {
-			label: "Total Descent: ",
-			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
-			order: 40
-		},
-		"minslope": {
-			label: "Min Slope: ",
-			value: (track) => Math.round(track.slope_min || 0) + '&nbsp;' + slope.label,
-			order: 40
-		},
-		"maxslope": {
-			label: "Max Slope: ",
-			value: (track) => Math.round(track.slope_max || 0) + '&nbsp;' + slope.label,
-			order: 40
-		},
-		"avgslope": {
-			label: "Avg Slope: ",
-			value: (track) => Math.round(track.slope_avg || 0) + '&nbsp;' + slope.label,
-			order: 40
-		}
-	});
-
-
-});