@raruto/leaflet-elevation 2.2.8 → 2.3.1

package/package.json

@@ -1,71 +1,74 @@
 {
-	"name": "@raruto/leaflet-elevation",
-	"version": "2.2.8",
-	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
-	"type": "module",
-	"main": "dist/leaflet-elevation.min.js",
-	"browser": "dist/leaflet-elevation.min.js",
-	"module": "src/index.js",
-	"scripts": {
-		"test": "node spec/index.js",
-		"build": "rollup -c build/rollup.config.js",
-		"watch": "rollup -c build/rollup.config.js --watch",
-		"dev": "npm run watch",
-		"version": "npm run build && git add -A"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Raruto/leaflet-elevation.git"
-	},
-	"keywords": [
-		"leaflet",
-		"d3js",
-		"javascript",
-		"elevation",
-		"highchart",
-		"kml",
-		"altitude",
-		"gpx",
-		"gps-visualizer",
-		"tcx"
-	],
-	"author": {
-		"name": "Felix “MrMufflon” Bache",
-		"url": "https: //github.com/MrMufflon/Leaflet.Elevation"
-	},
-	"contributors": [
-		{
-			"name": "Raruto",
-			"url": "https://github.com/Raruto/leaflet-elevation"
-		},
-		{
-			"name": "Felix Bache",
-			"web": "https://github.com/HostedDinner/Leaflet.Elevation"
-		}
-	],
-	"license": "GPL-3.0",
-	"bugs": {
-		"url": "https://github.com/Raruto/leaflet-elevation/issues"
-	},
-	"homepage": "https://github.com/Raruto/leaflet-elevation#readme",
-	"devDependencies": {
-		"jsdom": "^20.0.0",
-		"leaflet": "^1.7.1",
-		"postcss": "^8.4.16",
-		"postcss-copy": "^7.1.0",
-		"postcss-import": "^15.0.0",
-		"rollup": "^2.79.0",
-		"rollup-plugin-commonjs": "^10.1.0",
-		"rollup-plugin-git-version": "^0.3.1",
-		"rollup-plugin-node-resolve": "^5.2.0",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-terser": "^7.0.2",
-		"uvu": "^0.5.6"
-	},
-	"peerDependencies": {
-		"leaflet": "^1.7.0",
-		"leaflet-i18n": "^0.3.1",
-		"d3": "6.5.0",
-		"@tmcw/togeojson": "4.6.0"
-	}
+  "name": "@raruto/leaflet-elevation",
+  "version": "2.3.1",
+  "description": "A Leaflet plugin that allows to add elevation profiles using d3js",
+  "type": "module",
+  "main": "dist/leaflet-elevation.min.js",
+  "browser": "dist/leaflet-elevation.min.js",
+  "module": "src/index.js",
+  "scripts": {
+    "test": "uvu . ^(examples)?(src)?\\.*\\.spec\\.js$",
+    "build": "rollup -c build/rollup.config.js",
+    "watch": "rollup -c build/rollup.config.js --watch",
+    "dev": "npm-run-all --print-label --parallel serve watch",
+    "serve": "http-server",
+    "version": "npm run build && git add -A"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Raruto/leaflet-elevation.git"
+  },
+  "keywords": [
+    "leaflet",
+    "d3js",
+    "javascript",
+    "elevation",
+    "highchart",
+    "kml",
+    "altitude",
+    "gpx",
+    "gps-visualizer",
+    "tcx"
+  ],
+  "author": {
+    "name": "Felix “MrMufflon” Bache",
+    "url": "https: //github.com/MrMufflon/Leaflet.Elevation"
+  },
+  "contributors": [
+    {
+      "name": "Raruto",
+      "url": "https://github.com/Raruto/leaflet-elevation"
+    },
+    {
+      "name": "Felix Bache",
+      "web": "https://github.com/HostedDinner/Leaflet.Elevation"
+    }
+  ],
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/Raruto/leaflet-elevation/issues"
+  },
+  "homepage": "https://github.com/Raruto/leaflet-elevation#readme",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
+    "http-server": "^14.1.1",
+    "jsdom": "^20.0.0",
+    "leaflet": "^1.7.1",
+    "npm-run-all": "^4.1.5",
+    "playwright": "^1.32.3",
+    "postcss": "^8.4.22",
+    "postcss-copy": "^7.1.0",
+    "postcss-import": "^15.1.0",
+    "rollup": "^3.20.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "uvu": "^0.5.6"
+  },
+  "peerDependencies": {
+    "@tmcw/togeojson": "4.6.0",
+    "d3": "6.5.0",
+    "leaflet": "^1.7.0",
+    "leaflet-i18n": "^0.3.1"
+  }
 }

package/src/control.js

@@ -6,9 +6,6 @@ if (!L._ || !L.i18n) {
 	L._ = L.i18n = (string, data) => string;
 }
 
-// Prevent CORS issues for relative locations (dynamic import)
-const baseURL = ((document.currentScript && document.currentScript.src) || (import.meta && import.meta.url)).split("/").slice(0,-1).join("/") + '/';
-
 export const Elevation = L.Control.Elevation = L.Control.extend({
 
 	includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
@@ -22,11 +19,12 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
 	__LHOTLINE:      '../libs/leaflet-hotline.min.js',
 	__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
+	__LEDGESCALE:    '../libs/leaflet-edgescale.min.js',
 	__LCHART:        '../src/components/chart.js',
 	__LMARKER:       '../src/components/marker.js',
 	__LSUMMARY:      '../src/components/summary.js',
 	__modulesFolder: '../src/handlers/',
-	__btnIcon:       baseURL + '../images/elevation.svg',
+	__btnIcon:       '../images/elevation.svg',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -173,7 +171,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	initialize: function(opts) {
 
-		opts = L.setOptions(this, opts);
+		// opts = L.setOptions(this, opts);
+
+		// Fixes: https://github.com/Raruto/leaflet-elevation/pull/240
+		opts = L.setOptions(this, L.extend({}, structuredClone(Options), opts)); // "deep copy" nested objects (multiple charts)
 
 		this._data           = [];
 		this._layers         = L.featureGroup();
@@ -218,10 +219,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			case this.__LGEOMUTIL:   condition = typeof L.GeometryUtil !== 'object'; break;
 			case this.__LALMOSTOVER: condition = typeof L.Handler.AlmostOver  !== 'function'; break;
 			case this.__LDISTANCEM:  condition = typeof L.DistanceMarkers  !== 'function'; break;
+			case this.__LEDGESCALE:  condition = typeof L.Control.EdgeScale !== 'function'; break;
 			case this.__LHOTLINE:    condition = typeof L.Hotline  !== 'function'; break;
 		}
-		src = (src.startsWith('../') || src.startsWith('./') ? baseURL : '') + src;
-		return condition !== false ? import(src) : Promise.resolve();
+		return condition !== false ? import(_.resolveURL(src, this.options.srcFolder)) : Promise.resolve();
 	},
 
 	/**
@@ -420,6 +421,16 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
 	},
 
+	/**
+	 * Initialize "L.Control.EdgeScale" integration
+	 */
+	_initEdgeScale: function(map) {
+		return this.options.edgeScale ? Promise.all([this.import(this.__LEDGESCALE)])
+			.then(() => {
+				map.edgeScaleControl = map.edgeScaleControl || L.control.edgeScale('boolean' !== typeof this.options.edgeScale ? this.options.edgeScale : {}).addTo(map);
+			}) : Promise.resolve();
+	},
+
 	_initHotLine: function(layer) {
 		let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
 		return this.options.hotline ? this.import(this.__LHOTLINE)
@@ -465,6 +476,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				this._initHotLine(layer),
 				this._initAlmostOverHandler(map, layer),
 				this._initDistanceMarkers(),
+				this._initEdgeScale(map),
 			]).then(() => {
 				if	(this.options.polyline) {
 					layer.addTo(map);
@@ -700,7 +712,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			_.on(link, 'click', L.DomEvent.stop);
 			_.on(link, 'click', this._toggle, this);
 			_.on(link, 'focus', this._toggle, this);
-			fetch(this.__btnIcon).then(r => r.ok && r.text().then(img => link.innerHTML = img));
+			fetch(_.resolveURL(this.__btnIcon, this.options.srcFolder)).then(r => r.ok && r.text().then(img => link.innerHTML = img));
 		}
 	},
 

package/src/options.js

@@ -14,6 +14,7 @@ export var Options = {
 	dragging: !L.Browser.mobile,
 	downloadLink: 'link',
 	elevationDiv: "#elevation-div",
+	edgeScale: { bar: true, icon: false, coords: false },
 	followMarker: true,
 	imperial: false,
 	legend: true,
@@ -81,4 +82,7 @@ export var Options = {
 	interpolation: "curveLinear",
 	yAxisMax: undefined,
 	yAxisMin: undefined,
+
+	// Prevent CORS issues for relative locations (dynamic import)
+	srcFolder: ((document.currentScript && document.currentScript.src) || (import.meta && import.meta.url)).split("/").slice(0,-1).join("/") + '/',
 };

package/src/utils.js

@@ -16,6 +16,10 @@ const MIN  = SEC * 60;
 const HOUR = MIN * 60;
 const DAY  = HOUR * 24;
 
+export function resolveURL(src, baseUrl) {
+	return (new URL(src, (src.startsWith('../') || src.startsWith('./')) ? baseUrl : undefined)).toString()
+};
+
 /**
  * Convert a time (millis) to a human readable duration string (%Dd %H:%M'%S")
  */

package/src/utils.spec.js

@@ -0,0 +1,50 @@
+/**
+ * src/utils.js
+ */
+
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import '../test/setup/jsdom.js'
+import { iAvg, iMin, iMax, iSum } from "../src/utils.js";
+
+const toFixed = (n) => +n.toFixed(2);
+
+const test = suite('src/utils.js');
+
+test('iAvg()', () => {
+    let avg;
+    avg = iAvg(100, undefined, 1); assert.is(toFixed(avg), 100);    // average for [100] is 100
+    avg = iAvg(100, avg, 2);       assert.is(toFixed(avg), 100);    // average for [100, 100] is 100
+    avg = iAvg(200, avg, 3);       assert.is(toFixed(avg), 133.33); // average for [100, 100, 200] is 133.33
+    avg = iAvg(200, avg, 4);       assert.is(toFixed(avg), 150);    // average for [100, 100, 200, 200] is 150
+    avg = iAvg(NaN, avg, 5);       assert.ok(isNaN(avg));           // average for [100, 100, 200, 200, NaN] is NaN
+});
+
+test('iMin()', () => {
+    let min;
+    min = iMin(100, undefined); assert.is(toFixed(min), 100);  // min for [100] is 100
+    min = iMin(NaN, min);       assert.is(toFixed(min), 100);  // min for [100, NaN] is 100
+    min = iMin(0, min);         assert.is(toFixed(min), 0);    // min for [100, NaN, 0] is 100
+    min = iMin(-200, min);      assert.is(toFixed(min), -200); // min for [100, NaN, 0, -200] is -200
+    min = iMin(200, min);       assert.is(toFixed(min), -200); // min for [100, NaN, -100, -200, 200] is -200
+});
+
+test('iMax()', () => {
+    let max;
+    max = iMax(100, undefined); assert.is(toFixed(max), 100); // max for [100] is 100
+    max = iMax(NaN, max);       assert.is(toFixed(max), 100); // max for [100, NaN] is 100
+    max = iMax(0, max);         assert.is(toFixed(max), 100); // max for [100, NaN, 0] is 100
+    max = iMax(-200, max);      assert.is(toFixed(max), 100); // max for [100, NaN, 0, -200] is 100
+    max = iMax(200, max);       assert.is(toFixed(max), 200); // max for [100, NaN, -100, -200, 200] is 200
+});
+
+test('iSum()', () => {
+    let sum;
+    sum = iSum(10.25, undefined); assert.is(toFixed(sum), 10.25); // sum for [10.25] is 10.25
+    sum = iSum(0, sum);           assert.is(toFixed(sum), 10.25); // sum for [10.25, 0] is 10.25
+    sum = iSum(-0.25, sum);       assert.is(toFixed(sum), 10);    // sum for [10.25, 0, -0.25] is 10
+    sum = iSum(-10, sum);         assert.is(toFixed(sum), 0);     // sum for [10.25, 0, -0.25, -10] is 0
+    sum = iSum(NaN, sum);         assert.ok(isNaN(sum));          // sum for [10.25, 0, -0.25, -10, NaN] is NaN
+});
+
+test.run();