fix profile overlay size and glitch when dragging

website/src/lib/components/ElevationProfile.svelte

@@ -179,9 +179,8 @@
 			}
 		},
 		stacked: false,
-		onResize: function (chart, size) {
-			overlay.width = size.width;
-			overlay.height = size.height;
+		onResize: function () {
+			updateOverlay();
 			updateShowAdditionalScales();
 		}
 	};
@@ -280,10 +279,6 @@
 
 		updateShowAdditionalScales();
 
-		// Overlay canvas to create a selection rectangle
-		overlay.width = canvas.width;
-		overlay.height = canvas.height;
-
 		let startIndex = 0;
 		let endIndex = 0;
 		function getIndex(evt) {
@@ -295,13 +290,18 @@
 				},
 				true
 			);
-			const rect = canvas.getBoundingClientRect();
 
 			if (points.length === 0) {
-				return evt.x - rect.left <= chart.chartArea.left
-					? 0
-					: $gpxStatistics.local.points.length - 1;
+				const rect = canvas.getBoundingClientRect();
+				if (evt.x - rect.left <= chart.chartArea.left) {
+					return 0;
+				} else if (evt.x - rect.left >= chart.chartArea.right) {
+					return $gpxStatistics.local.points.length - 1;
+				} else {
+					return undefined;
 				}
+			}
+
 			let point = points.find((point) => point.element.raw);
 			if (point) {
 				return point.element.raw.index;
@@ -320,7 +320,10 @@
 			if (dragStarted) {
 				dragging = true;
 				endIndex = getIndex(evt);
-				if (startIndex !== endIndex) {
+				if (endIndex !== undefined) {
+					if (startIndex === undefined) {
+						startIndex = endIndex;
+					} else if (startIndex !== endIndex) {
 						$slicedGPXStatistics = [
 							$gpxStatistics.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)),
 							Math.min(startIndex, endIndex),
@@ -329,6 +332,7 @@
 					}
 				}
 			}
+		}
 		function onMouseUp(evt) {
 			dragStarted = false;
 			dragging = false;
@@ -506,7 +510,15 @@
 		chart.update();
 	}
 
-	$: if ($slicedGPXStatistics) {
+	function updateOverlay() {
+		if (!canvas) {
+			return;
+		}
+
+		overlay.width = canvas.width / window.devicePixelRatio;
+		overlay.height = canvas.height / window.devicePixelRatio;
+
+		if ($slicedGPXStatistics) {
 			let startIndex = $slicedGPXStatistics[1];
 			let endIndex = $slicedGPXStatistics[2];
 
@@ -536,6 +548,9 @@
 				selectionContext.clearRect(0, 0, overlay.width, overlay.height);
 			}
 		}
+	}
+
+	$: $slicedGPXStatistics, updateOverlay();
 
 	onDestroy(() => {
 		if (chart) {