From 6f946a007508a904cb698fb886f8a1a6aefde2b0 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 5 Aug 2024 18:16:28 +0200
Subject: [PATCH] fix crop selection from elevation profile, and improve for
 dark mode, closes #41

---
 website/src/lib/components/ElevationProfile.svelte         | 4 +++-
 .../lib/components/toolbar/tools/scissors/Scissors.svelte  | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index 8d57b711..38a62d0e 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -40,6 +40,7 @@
 	import { DateFormatter } from '@internationalized/date';
 	import type { GPXStatistics } from 'gpx';
 	import { settings } from '$lib/db';
+	import { mode } from 'mode-watcher';
 
 	export let gpxStatistics: Writable<GPXStatistics>;
 	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
@@ -525,7 +526,8 @@
 			// Draw selection rectangle
 			let selectionContext = overlay.getContext('2d');
 			if (selectionContext) {
-				selectionContext.globalAlpha = 0.1;
+				selectionContext.fillStyle = $mode === 'dark' ? 'white' : 'black';
+				selectionContext.globalAlpha = $mode === 'dark' ? 0.2 : 0.1;
 				selectionContext.clearRect(0, 0, overlay.width, overlay.height);
 
 				let startPixel = chart.scales.x.getPixelForValue(
diff --git a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
index bf3ce809..00c026cb 100644
--- a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
+++ b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
@@ -24,6 +24,7 @@
 	import { SplitControls } from './SplitControls';
 
 	let splitControls: SplitControls | undefined = undefined;
+	let canCrop = false;
 
 	$: if ($map) {
 		if (splitControls) {
@@ -39,7 +40,9 @@
 	let maxSliderValue = 100;
 	let sliderValues = [0, 100];
 
-	$: canCrop = sliderValues[0] != 0 || sliderValues[1] != maxSliderValue;
+	function updateCanCrop() {
+		canCrop = sliderValues[0] != 0 || sliderValues[1] != maxSliderValue;
+	}
 
 	function updateSlicedGPXStatistics() {
 		if (validSelection && canCrop) {
@@ -74,6 +77,7 @@
 	}
 
 	$: if (sliderValues) {
+		updateCanCrop();
 		updateSlicedGPXStatistics();
 	}
 
@@ -82,6 +86,7 @@
 		($slicedGPXStatistics[1] !== sliderValues[0] || $slicedGPXStatistics[2] !== sliderValues[1])
 	) {
 		updateSliderValues();
+		updateCanCrop();
 	}
 
 	const splitTypes = [