Raruto · Raruto · Apr 23, 2023 · Apr 17, 2023 · Apr 17, 2023 · Apr 17, 2023
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,6 @@ spec/**/*.min.js
 src/**/*.min.js
 src/**/*.min.css
 dist/
+e2e/results/
+e2e/reports/
+/playwright/.cache/
diff --git a/README.md b/README.md
@@ -35,8 +35,10 @@ _For a working example see one of the following demos:_
 
 - [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
 - [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
+- [clear button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_clear-button.html)
 - [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
 - [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
+- [edge scale control](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_edge-scale.html)
 - [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
 - [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
 - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
@@ -153,6 +155,9 @@ _For a working example see one of the following demos:_
 
         // Toggle "leaflet-distance-markers" integration
         distanceMarkers: false,
+
+        // Toggle "leaflet-edgescale" integration
+        edgeScale: false,
 
         // Toggle "leaflet-hotline" integration
         hotline: true,
@@ -195,19 +200,19 @@ _For a working example see one of the following demos:_
 
 ### Build Guide
 
-For those wishing to try cloning this repository into a local development folder (eg. /var/www):
+Within your local development environment:
 
 ```shell
 git clone [email protected]:Raruto/leaflet-elevation.git
 cd ./leaflet-elevation
 
 npm i         # install dependencies
-npm run watch # auto-generate "dist" files
+npm run dev   # start dev server at: http://localhost:8080
 npm run build # generate "dist" files (once)
-npm run test  # test "spec" files (once)
+npm run test  # test all ".*spec.js" files (once)
 ```
 
-After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost/leaflet-elevation/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
+After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost:8080/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
 
 ### FAQ
 

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -1,12 +1,14 @@
-import { terser } from "rollup-plugin-terser";
-import resolve from 'rollup-plugin-node-resolve';
-import commonJS from 'rollup-plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
+import commonJS from '@rollup/plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
 import postcssImport from 'postcss-import';
+
 // import postcssCopy from 'postcss-copy';
-import rollupGitVersion from 'rollup-plugin-git-version';
+// import rollupGitVersion from 'rollup-plugin-git-version';
+
+import plugin from '../package.json' assert { type: "json" };
 
-let plugin = require('../package.json');
 let plugin_name = plugin.name.replace("@raruto/", "");
 
 let input = plugin.module;
@@ -15,15 +17,14 @@ let output = {
 	format: "umd",
 	sourcemap: true,
 	name: plugin_name,
-
 };
 
 let plugins = [
 	resolve(),
 	commonJS({
 		include: '../node_modules/**'
 	}),
-	rollupGitVersion(),
+	// rollupGitVersion(),
 ];
 
 export default [

diff --git a/examples/leaflet-elevation.html b/examples/leaflet-elevation.html
@@ -17,8 +17,8 @@
 	<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
 
 	<!-- leaflet-elevation -->
-	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css" />
-	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js"></script>
+	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.css" />
+	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.js"></script>
 
 </head>
 

diff --git a/examples/leaflet-elevation.spec.js b/examples/leaflet-elevation.spec.js
@@ -0,0 +1,19 @@
+/**
+ * examples/leaflet-elevation.html
+ */
+
+import * as assert from 'uvu/assert';
+import { suite } from '../test/setup/http_server.js';
+
+const test = suite('examples/leaflet-elevation.html');
+
+test('eledata_loaded', async ({ page }) => {
+    const gpx = await page.evaluate(() => new Promise(resolve => {
+      controlElevation.on('eledata_loaded', (gpx) => resolve(gpx));
+    }));
+    assert.is(gpx.name, 'via-emilia.gpx');
+    assert.not.type(gpx.layer, 'undefined');
+    assert.type(gpx.track_info.distance, 'number');
+});
+
+test.run();
diff --git a/examples/leaflet-elevation_almost-over.html b/examples/leaflet-elevation_almost-over.html
@@ -33,8 +33,8 @@
 				plugins: [
 					// '[email protected]/src/leaflet.geometryutil.js',
 					// '[email protected]/src/leaflet.almostover.js',
-					'@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css',
-					'@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js'
+					'@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.css',
+					'@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.js'
 				],
 				// see: L.AlmostOver for more info
 				almostOver: true,

diff --git a/examples/leaflet-elevation_clear-button.html b/examples/leaflet-elevation_clear-button.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>leaflet-elevation.js</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+	<link rel="dns-prefetch" href="https://tile.openstreetmap.org">
+	<link rel="dns-prefetch preconnect" href="https://unpkg.com" />
+	<link rel="preload" href="https://unpkg.com/[email protected]/dist/leaflet.js" as="script">
+	<link rel="preload" href="https://unpkg.com/[email protected]/dist/leaflet-ui.js" as="script">
+
+	<style>
+		@import '../libs/fullpage.css';
+	</style>
+
+	<!-- leaflet-ui -->
+	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+	<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
+
+	<!-- leaflet-elevation -->
+	<link rel="stylesheet" href="https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.min.css" />
+	<script src="https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.min.js"></script>
+
+	<style>
+		button {
+			border: none;
+			color: white;
+			padding: 15px 32px;
+			text-align: center;
+			text-decoration: none;
+			display: inline-block;
+			font-size: 16px;
+			margin: 4px 2px;
+			cursor: pointer;
+			font-family: monospace;
+		}
+		.update {
+			background-color: #4CAF50;
+		}
+		.toggle {
+			background-color: #ffa500;
+		}
+		.reset {
+			background-color: #f44336;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div id="map" class="leaflet-map"></div>
+	<div style="position: fixed; inset: auto auto 15px 15px; display: flex; flex-direction: column-reverse;">
+		<button class="update" onclick="load_track(0)">demo.geojson</button>
+		<button class="update" onclick="load_track(1)">waypoints.geojson</button>
+		<button class="toggle" onclick="toggle_10()">Switch 10 times</button>
+		<button class="reset" onclick="load_track(-1)">Clear</button>
+	</div>
+
+	<script>
+		let opts = {
+			map: {
+				mapTypeId: 'satellite',
+				center: [41.4583, 12.7059],
+				zoom: 5,
+				fullscreenControl: false,
+				minimapControl: false,
+				gestureHandling: false,
+				resizerControl: false,
+				pegmanControl: false,
+				locateControl: false,
+				loadingControl: false,
+				searchControl: false,
+				preferCanvas: false,
+				rotate: true,
+				bearing: 15,
+				rotateControl: {
+					closeOnZeroBearing: true
+				},
+			},
+			elevationControl: {
+				urls: [
+					"https://raruto.github.io/leaflet-elevation/examples/demo.geojson",
+					"https://raruto.github.io/leaflet-elevation/examples/waypoints.geojson",
+				] ,
+				options: {
+					position: 'topright',
+					theme: "lime-theme",
+					detached: false,
+					collapsed: false,
+					autohide: false,
+					legend: true,
+					width: 500,
+					downloadLink: true,
+					almostOver: true,
+					distanceMarkers: { distance: false, direction: true, lazy: true },
+				},
+			},
+			layersControl: {
+				options: {
+					position: 'bottomleft',
+					collapsed: false,
+				},
+			},
+		};
+
+		let map = L.map('map', opts.map);
+		let controlElevation = L.control.elevation(opts.elevationControl.options).addTo(map);
+
+		controlElevation.load(opts.elevationControl.urls[opts.elevationControl.urls.length - 1]);
+
+		let count = 0;
+
+		function toggle_10() {
+			for (let i = 0; i <= 10; i++) {
+				(function (ind) {
+					setTimeout(function () {
+						load_track(count);
+					}, 1000 * ind);
+				})(i);
+			}
+		}
+
+		function load_track(id) {
+			controlElevation.clear();
+			if (opts.elevationControl.urls[id]) { 
+				controlElevation.load(opts.elevationControl.urls[id]);
+				count = ++count % opts.elevationControl.urls.length;
+			}
+		}
+	</script>
+
+	<a href="https://github.com/Raruto/leaflet-elevation" class="view-on-github" style="position: fixed;top: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github" width="163"> </a>
+
+</body>
+
+</html>
diff --git a/examples/leaflet-elevation_clear-button.spec.js b/examples/leaflet-elevation_clear-button.spec.js
@@ -0,0 +1,30 @@
+/**
+ * examples/leaflet-elevation_clear-button.html
+ */
+
+import * as assert from 'uvu/assert';
+import { suite } from '../test/setup/http_server.js';
+
+const test = suite('examples/leaflet-elevation_clear-button.html');
+
+test('eledata_loaded', async ({ page }) => {
+    let gpx;
+
+    gpx = await page.evaluate(() => new Promise(resolve => {
+      load_track(0);
+      controlElevation.on('eledata_loaded', (gpx) => resolve(gpx));
+    }));
+    assert.is(gpx.name, 'demo.geojson');
+    assert.not.type(gpx.layer, 'undefined');
+    assert.type(gpx.track_info.distance, 'number');
+
+    gpx = await page.evaluate(() => new Promise(resolve => {
+      load_track(1);
+      controlElevation.on('eledata_loaded', (gpx) => resolve(gpx));
+    }));
+    assert.is(gpx.name, 'waypoints.geojson');
+    assert.not.type(gpx.layer, 'undefined');
+    assert.type(gpx.track_info.distance, 'number');
+});
+
+test.run();
diff --git a/examples/leaflet-elevation_close-button.html b/examples/leaflet-elevation_close-button.html
@@ -17,8 +17,8 @@
 	<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
 
 	<!-- leaflet-elevation -->
-	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css" />
-	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js"></script>
+	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.css" />
+	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.js"></script>
 
 	<!-- Blink animation -->
 	<style>
@@ -90,6 +90,7 @@
 					legend: true,
 					downloadLink: true,
 					almostOver: true,
+					edgeScale: false,
 					distanceMarkers: { distance: false, direction: true, lazy: true }
 				},
 			},

diff --git a/examples/leaflet-elevation_custom-summary.html b/examples/leaflet-elevation_custom-summary.html
@@ -17,8 +17,8 @@
 	<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
 
 	<!-- leaflet-elevation -->
-	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css" />
-	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js"></script>
+	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.css" />
+	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.js"></script>
 
 	<style>
 		.data-summary {

diff --git a/examples/leaflet-elevation_custom-summary.spec.js b/examples/leaflet-elevation_custom-summary.spec.js
@@ -0,0 +1,19 @@
+/**
+ * examples/leaflet-elevation.html
+ */
+
+import * as assert from 'uvu/assert';
+import { suite } from '../test/setup/http_server.js';
+
+const test = suite('examples/leaflet-elevation.html');
+
+test('eledata_loaded', async ({ page }) => {
+    const gpx = await page.evaluate(() => new Promise(resolve => {
+      controlElevation.on('eledata_loaded', (gpx) => resolve(gpx));
+    }));
+    assert.is(gpx.name, 'via-emilia.gpx');
+    assert.not.type(gpx.layer, 'undefined');
+    assert.type(gpx.track_info.distance, 'number');
+});
+
+test.run();
diff --git a/examples/leaflet-elevation_custom-theme.html b/examples/leaflet-elevation_custom-theme.html
@@ -17,8 +17,8 @@
 	<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
 
 	<!-- leaflet-elevation -->
-	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css" />
-	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js"></script>
+	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.css" />
+	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.js"></script>
 
 	<!-- Custom theme -->
 	<style>

diff --git a/examples/leaflet-elevation_dynamic-runner.html b/examples/leaflet-elevation_dynamic-runner.html
@@ -17,8 +17,8 @@
 	<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>
 
 	<!-- leaflet-elevation -->
-	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css" />
-	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js"></script>
+	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.css" />
+	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.3.0/dist/leaflet-elevation.min.js"></script>
 
 	<style>
 		.runner.height-focus {