@raruto/leaflet-elevation 1.9.6 → 2.0.2

package/src/index.css

@@ -28,7 +28,7 @@
 }
 
 .elevation-control.elevation .background {
-  background-color: rgba(70, 130, 180, 0.2);
+  background-color: var(--ele-bg, rgba(70, 130, 180, 0.2));
   border-radius: 5px;
   overflow: visible;
   display: block;
@@ -36,15 +36,20 @@
   user-select: none;
 }
 
+.elevation-control.elevation .axis .tick,
+.elevation-control.elevation .axis .domain {
+  pointer-events: none;
+}
+
 .elevation-control.elevation .axis line,
 .elevation-control.elevation .axis path {
-  stroke: #2D1130;
+  stroke: var(--ele-axis, #2D1130);
   stroke-width: 1;
   fill: none;
 }
 
 .elevation-control.elevation .grid .tick line {
-  stroke: #EEE;
+  stroke: var(--ele-grid, #EEE);
   stroke-width: 1px;
   shape-rendering: crispEdges;
 }
@@ -68,14 +73,14 @@
 }
 
 .elevation-control.elevation .area {
-  fill: #4682B4;
-  stroke: #000;
+  fill: var(--ele-area, #4682B4);
+  stroke: var(--ele-stroke, #000);
   stroke-width: 1.2;
   paint-order: stroke fill;
 }
 
 .elevation-detached .elevation-control.elevation .area {
-  fill-opacity: 0.8;
+  fill-opacity: var(--ele-alpha, 0.8);
 }
 
 .elevation-control.elevation .horizontal-drag-line {
@@ -104,7 +109,7 @@
 }
 
 .elevation-control.elevation .mouse-focus-line {
-  stroke: #0D1821;
+  stroke: #000;
   stroke-width: 1;
   pointer-events: none;
 }
@@ -128,7 +133,7 @@
 }
 
 .elevation-control.elevation .brush .selection {
-  fill: rgba(23, 74, 117, 0.4);
+  fill: var(--ele-brush, rgba(23, 74, 117, 0.4));
   stroke: none;
   fill-opacity: unset;
 }
@@ -207,7 +212,7 @@
 }
 
 .elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation.svg) no-repeat center center;
+  background: var(--ele-icon, url(../images/elevation-lime.svg)) no-repeat center center;
 }
 
 .elevation-control.elevation.elevation-expanded .elevation-toggle-icon.close-button {
@@ -241,7 +246,7 @@
 .leaflet-elevation-pane .height-focus,
 .leaflet-overlay-pane .height-focus {
   stroke: #000;
-  fill: #FFF;
+  fill: var(--ele-circle, var(--ele-area, #FFF));
 }
 
 .leaflet-elevation-pane .height-focus.line,
@@ -260,193 +265,79 @@
   stroke-width: 2px;
 }
 
-.elevation-waypoint-icon:before {
-  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
+.elevation-waypoint-icon:before,
+.elevation-position-icon:before {
   content: "";
   width: 100%;
   height: 100%;
   display: inline-block;
 }
 
+.elevation-waypoint-icon:before {
+  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
+}
+
 .elevation-position-icon:before {
   background: url(../images/elevation-position.svg) no-repeat center center / contain;
-  content: "";
-  width: 100%;
-  height: 100%;
-  display: inline-block;
 }
 
 .elevation-polyline {
+  stroke: var(--ele-poly, var(--ele-area, #000));
   filter: drop-shadow(1px 1px 0 #FFF) drop-shadow(-1px -1px 0 #FFF) drop-shadow(1px -1px 0 #FFF) drop-shadow(-1px 1px 0 #FFF);
 }
 
-.elevation-placeholder {
-  margin: auto;
-  height: auto;
-  width: 100%;
-}
-
-.elevation-placeholder~* {
-  display: none !important;
-}
-
 /* LIME THEME //////////////////////////////////////////////// */
-.lime-theme.elevation-control.elevation .background {
-  background-color: rgba(156, 194, 34, 0.2);
-}
-
-.lime-theme.elevation-control.elevation .axis line,
-.lime-theme.elevation-control.elevation .axis path {
-  stroke: #566B13;
-}
-
-.lime-theme.elevation-control.elevation .grid .tick line {
-  stroke: #CCC;
-}
-
-.lime-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(99, 126, 11, 0.4);
-}
-
-.lime-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-lime.svg) no-repeat center center;
-}
-
-.lime-theme.elevation-control.elevation .area {
-  fill: #9CC222;
-}
-
-.lime-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #101404;
-}
-
-.lime-theme.height-focus {
-  stroke: #000;
-  fill: #9CC222;
-}
-
-.lime-theme.elevation-polyline {
-  stroke: #566B13;
+.lime-theme {
+  --ele-bg: rgba(156, 194, 34, 0.2);
+  --ele-axis: #566B13;
+  --ele-area: #9CC222;
+  --ele-grid: #CCC;
+  --ele-brush: rgba(99, 126, 11, 0.4);
+  --ele-icon: url(../images/elevation-lime.svg);
+  --ele-poly: #566B13;
 }
 
 /* STEELBLUE THEME //////////////////////////////////////////////// */
-.steelblue-theme.elevation-control.elevation .background {
-  background-color: rgba(70, 130, 180, 0.2);
-}
-
-.steelblue-theme.elevation-control.elevation .axis line,
-.steelblue-theme.elevation-control.elevation .axis path {
-  stroke: #0D1821;
-}
-
-.steelblue-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(23, 74, 117, 0.4);
-}
-
-.steelblue-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-steelblue.svg) no-repeat center center;
-}
-
-.steelblue-theme.elevation-control.elevation .area {
-  fill: #4682B4;
-}
-
-.steelblue-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #0D1821;
-}
-
-.steelblue-theme.height-focus {
-  stroke: #000;
-  fill: #4682B4;
-}
-
-.steelblue-theme.elevation-polyline {
-  stroke: #4682B4;
+.steelblue-theme {
+  --ele-axis: #0D1821;
+  --ele-area: #4682B4;
+  --ele-brush: rgba(23, 74, 117, 0.4);
+  --ele-icon: url(../images/elevation-steelblue.svg);
 }
 
 /* PURPLE THEME //////////////////////////////////////////////// */
-.purple-theme.elevation-control.elevation .background {
-  background-color: rgba(115, 44, 123, 0.2);
-}
-
-.purple-theme.elevation-control.elevation .axis line,
-.purple-theme.elevation-control.elevation .axis path {
-  stroke: #2D1130;
-}
-
-.purple-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(74, 14, 80, 0.4);
-}
-
-.purple-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-purple.svg) no-repeat center center;
-}
-
-.purple-theme.elevation-control.elevation .area {
-  fill: #732C7B;
-}
-
-.purple-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #000;
-}
-
-.purple-theme.height-focus {
-  stroke: #000;
-  fill: #732C7B;
-}
-
-.purple-theme.elevation-polyline {
-  stroke: #732C7B;
+.purple-theme {
+  --ele-bg: rgba(115, 44, 123, 0.2);
+  --ele-area: #732C7B;
+  --ele-brush: rgba(74, 14, 80, 0.4);
+  --ele-icon: url(../images/elevation-purple.svg);
 }
 
 /* YELLOW THEME //////////////////////////////////////////////// */
-.yellow-theme.elevation-control.elevation .area {
-  fill: #FF0;
-}
-
-.yellow-theme.elevation-polyline {
-  stroke: #FF0;
+.yellow-theme {
+  --ele-area: #FF0;
 }
 
 /* RED THEME //////////////////////////////////////////////// */
-.red-theme.elevation-control.elevation .area {
-  fill: #F00;
-}
-
-.red-theme.elevation-polyline {
-  stroke: #F00;
+.red-theme {
+  --ele-area: #F00;
 }
 
 /* MAGENTA THEME //////////////////////////////////////////////// */
-.magenta-theme.elevation-control.elevation .background {
-  background-color: rgba(255, 255, 255, 0.47);
-}
-
-.magenta-theme.elevation-control.elevation .area {
-  fill: #FF005E;
-}
-
-.magenta-theme.elevation-polyline {
-  stroke: #FF005E;
+.magenta-theme {
+  --ele-bg: rgba(255, 255, 255, 0.47);
+  --ele-area: #FF005E;
 }
 
 /* LIGHTBLUE THEME //////////////////////////////////////////////// */
-.lightblue-theme.elevation-control.elevation .area {
-  fill: #3366CC;
-  stroke: #000;
+.lightblue-theme {
+  --ele-area: #3366CC;
+  --ele-alpha: 0.45;
+  --ele-stroke: #4682B4;
+  --ele-circle: #fff;
 }
 
 .elevation-detached .lightblue-theme.elevation-control.elevation .area {
-  fill-opacity: 0.45;
-  stroke: #3366CC;
-}
-
-.lightblue-theme.height-focus {
-  stroke: #000;
-  fill: #FFFFFF;
-}
-
-.lightblue-theme.elevation-polyline {
   stroke: #3366CC;
 }
 

package/src/index.js

@@ -36,19 +36,9 @@
 
 import 'leaflet-i18n';
 import * as _ from './utils';
-import * as D3 from './components';
-import { Chart } from './chart';
 import { Elevation } from './control';
-import './distance';
-import './time';
-import './altitude';
-import './slope';
-import './speed';
-import './acceleration';
 
 Elevation.Utils = _;
-Elevation.Components = D3;
-Elevation.Chart = Chart;
 
 /* Temporary fix for empty values evaluated as false (leaflet-i18n v0.3.1) */
 (function(){
@@ -61,18 +51,4 @@ Elevation.Chart = Chart;
 	};
 })();
 
-// Alias deprecated functions
- Elevation.addInitHook(function() {
-	this.enableDragging      = this.enableBrush;
-	this.disableDragging     = this.disableBrush;
-	this.loadChart           = this.addTo;
-	this.loadData            = this.load;
-	this.loadGPX             = this.load;
-	this.loadGeoJSON         = this.load;
-	this.loadXML             = this.load;
-	this.loadFile            = this.load;
-	this._addGPXData         = this._addGeoJSONData;
-	this._registerFocusLabel = this._registerTooltip;
-});
-
 L.control.elevation = (options) => new Elevation(options);

package/src/options.js

@@ -9,29 +9,14 @@ export var Options = {
 	collapsed: false,
 	detached: true,
 	distance: true,
-	distanceMarkers: {
-		lazy: true,
-		distance: true,
-		direction: true
-	},
-	decimalsX: 2,
-	decimalsY: 0,
+	distanceMarkers: { lazy: true, distance: true, direction: true },
 	dragging: !L.Browser.mobile,
 	downloadLink: 'link',
 	elevationDiv: "#elevation-div",
 	followMarker: true,
-	forceAxisBounds: false,
-	height: 200,
 	imperial: false,
-	interpolation: "curveLinear",
-	lazyLoadJS: true,
 	legend: true,
-	margins: {
-		top: 30,
-		right: 30,
-		bottom: 30,
-		left: 40
-	},
+	handlers: [],
 	marker: 'elevation-line',
 	markerIcon: L.divIcon({
 		className: 'elevation-position-marker',
@@ -55,20 +40,15 @@ export var Options = {
 	preferCanvas: false,
 	reverseCoords: false,
 	ruler: true,
-	skipNullZCoords: false,
 	theme: "lightblue-theme",
 	summary: 'inline',
 	slope: false,
-	slopeDeltaMax: undefined,
-	slopeRange: undefined,
 	speed: false,
-	speedDeltaMax: undefined,
-	speedRange: undefined,
 	time: false,
 	timeFactor: 3600,
-	timeFormat: false,
 	timestamps: false,
-	width: 600,
+	trkStart: L.circleMarker([0,0], { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false }),
+	trkEnd: L.circleMarker([0,0], { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false }),
 	waypoints: true,
 	wptIcons: {
 		'': L.divIcon({
@@ -81,12 +61,24 @@ export var Options = {
 	wptLabels: true,
 	xAttr: "dist",
 	xLabel: "km",
-	xTicks: undefined,
 	yAttr: "z",
-	yAxisMax: undefined,
-	yAxisMin: undefined,
 	yLabel: "m",
-	yTicks: undefined,
 	zFollow: false,
 	zooming: !L.Browser.Mobile,
+
+	// Quite uncommon and undocumented options (quite useless)
+	decimalsX: 2,
+	decimalsY: 0,
+	forceAxisBounds: false,
+	interpolation: "curveLinear",
+	skipNullZCoords: false,
+	yAxisMax: undefined,
+	yAxisMin: undefined,
+
+	// Probably no longer functional as expected (internally overwritten)
+	margins: { top: 30, right: 30, bottom: 30, left: 40 },
+	height: 200,
+	width: 600,
+	xTicks: undefined,
+	yTicks: undefined,
 };

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, isMulti }) => {
+		if (props) {
+			for (const key of coordProps) {
+				if (key in props) {
+					point.meta[name] = (parser || parseInt).call(this, (isMulti ? props[key][isMulti] : 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;