chart range selection on crop slider change

website/src/lib/components/ElevationProfile.svelte

@@ -251,18 +251,9 @@
 		overlay.width = canvas.width;
 		overlay.height = canvas.height;
 
-		let selectionContext = overlay.getContext('2d');
+		let startIndex = 0;
-		let selectionRect = {
+		let endIndex = 0;
-			w: 0,
+		function getIndex(evt) {
-			startX: 0,
-			startY: 0
-		};
-		let startIndex = 0,
-			endIndex = 0;
-		canvas.addEventListener('pointerdown', (evt) => {
-			dragging = true;
-			canvas.style.cursor = 'col-resize';
-
 			const points = chart.getElementsAtEventForMode(
 				evt,
 				'index',
@@ -271,67 +262,38 @@
 				},
 				true
 			);
-			startIndex = points.find((point) => point.datasetIndex === 0)?.element.raw.index ?? 0;
-
 			const rect = canvas.getBoundingClientRect();
-			selectionRect.startX = Math.min(
+			return (
-				Math.max(evt.clientX - rect.left, chart.chartArea.left),
+				points.find((point) => point.datasetIndex === 0)?.element.raw.index ??
-				chart.chartArea.right
+				(evt.x - rect.left <= chart.chartArea.left ? 0 : get(gpxStatistics).local.points.length - 1)
 			);
-			selectionRect.startY = chart.chartArea.top;
+		}
+		canvas.addEventListener('pointerdown', (evt) => {
+			dragging = true;
+			canvas.style.cursor = 'col-resize';
+			startIndex = getIndex(evt);
 		});
 		canvas.addEventListener('pointermove', (evt) => {
 			if (dragging) {
-				const rect = canvas.getBoundingClientRect();
+				endIndex = getIndex(evt);
-				selectionRect.w =
-					Math.min(Math.max(evt.clientX - rect.left, chart.chartArea.left), chart.chartArea.right) -
-					selectionRect.startX;
-				if (selectionContext) {
-					selectionContext.globalAlpha = 0.2;
-					selectionContext.clearRect(0, 0, canvas.width, canvas.height);
-					selectionContext.fillRect(
-						Math.max(selectionRect.startX, chart.chartArea.left),
-						selectionRect.startY,
-						selectionRect.w,
-						chart.chartArea.bottom - chart.chartArea.top
-					);
-				}
-
-				const points = chart.getElementsAtEventForMode(
-					evt,
-					'index',
-					{
-						intersect: false
-					},
-					true
-				);
-				endIndex = points.find((point) => point.datasetIndex === 0)?.element.raw.index ?? 0;
-
 				if (startIndex !== endIndex) {
-					slicedGPXStatistics.set(
+					slicedGPXStatistics.set([
-						get(gpxStatistics).slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex))
+						get(gpxStatistics).slice(
-					);
+							Math.min(startIndex, endIndex),
+							Math.max(startIndex, endIndex)
+						),
+						Math.min(startIndex, endIndex),
+						Math.max(startIndex, endIndex)
+					]);
 				}
 			}
 		});
 		canvas.addEventListener('pointerup', (evt) => {
 			dragging = false;
 			canvas.style.cursor = '';
-
+			endIndex = getIndex(evt);
-			const points = chart.getElementsAtEventForMode(
-				evt,
-				'index',
-				{
-					intersect: false
-				},
-				true
-			);
-			endIndex = points.find((point) => point.datasetIndex === 0)?.element.raw.index ?? 0;
-
 			if (startIndex === endIndex) {
-				if (selectionContext) {
+				slicedGPXStatistics.set(undefined);
-					selectionContext.clearRect(0, 0, canvas.width, canvas.height);
-				}
 			}
 		});
 	});
@@ -506,6 +468,34 @@
 	}
 
 	$: if ($slicedGPXStatistics) {
+		let startIndex = $slicedGPXStatistics[1];
+		let endIndex = $slicedGPXStatistics[2];
+
+		// Draw selection rectangle
+		let selectionContext = overlay.getContext('2d');
+		if (selectionContext) {
+			selectionContext.globalAlpha = 0.1;
+			selectionContext.clearRect(0, 0, overlay.width, overlay.height);
+
+			let startPixel = chart.scales.x.getPixelForValue(
+				getConvertedDistance(get(gpxStatistics).local.distance.total[startIndex])
+			);
+			let endPixel = chart.scales.x.getPixelForValue(
+				getConvertedDistance(get(gpxStatistics).local.distance.total[endIndex])
+			);
+
+			selectionContext.fillRect(
+				startPixel,
+				chart.chartArea.top,
+				endPixel - startPixel,
+				chart.chartArea.bottom - chart.chartArea.top
+			);
+		}
+	} else if (overlay) {
+		let selectionContext = overlay.getContext('2d');
+		if (selectionContext) {
+			selectionContext.clearRect(0, 0, overlay.width, overlay.height);
+		}
 	}
 
 	onDestroy(() => {

website/src/lib/components/GPXStatistics.svelte

@@ -16,7 +16,7 @@
 	let statistics: GPXStatistics;
 
 	$: if ($slicedGPXStatistics !== undefined) {
-		statistics = $slicedGPXStatistics;
+		statistics = $slicedGPXStatistics[0];
 	} else {
 		statistics = $gpxStatistics;
 	}

website/src/lib/components/gpx-layer/StartEndMarkers.ts

@@ -27,7 +27,7 @@ export class StartEndMarkers {
 
     update() {
         let tool = get(currentTool);
-        let statistics = get(slicedGPXStatistics) ?? get(gpxStatistics);
+        let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
         if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) {
             this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
             this.end.setLngLat(statistics.local.points[statistics.local.points.length - 1].getCoordinates()).addTo(this.map);

website/src/lib/components/toolbar/tools/Scissors.svelte

@@ -28,16 +28,20 @@
 	let sliderValues = [0, 100];
 
 	function updateSlicedGPXStatistics() {
-		if (validSelection) {
+		if (validSelection && (sliderValues[0] != 0 || sliderValues[1] != maxSliderValue)) {
-			slicedGPXStatistics.set(get(gpxStatistics).slice(sliderValues[0], sliderValues[1]));
+			slicedGPXStatistics.set([
+				get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
+				sliderValues[0],
+				sliderValues[1]
+			]);
 		} else {
-			slicedGPXStatistics.set(get(gpxStatistics));
+			slicedGPXStatistics.set(undefined);
 		}
 	}
 
 	async function updateSliderLimits() {
 		if (validSelection) {
-			maxSliderValue = $gpxStatistics.local.points.length;
+			maxSliderValue = $gpxStatistics.local.points.length - 1;
 		} else {
 			maxSliderValue = 100;
 		}
@@ -45,7 +49,7 @@
 		sliderValues = [0, maxSliderValue];
 	}
 
-	$: if ($gpxStatistics.local.points.length != maxSliderValue) {
+	$: if ($gpxStatistics.local.points.length - 1 != maxSliderValue) {
 		updateSliderLimits();
 	}
 

website/src/lib/stores.ts

@@ -16,7 +16,7 @@ export const map = writable<mapboxgl.Map | null>(null);
 export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
 
 export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics());
-export const slicedGPXStatistics: Writable<GPXStatistics | undefined> = writable(undefined);
+export const slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined> = writable(undefined);
 
 function updateGPXData() {
     let statistics = new GPXStatistics();