From b5990e2d36d16760dcee4f98acf86741a1bbefe3 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Thu, 25 Apr 2024 11:13:15 +0200
Subject: [PATCH] rework stores

---
 .../lib/components/ElevationProfile.svelte    |  5 +--
 website/src/lib/components/FileList.svelte    | 21 ++++++++++--
 .../components/toolbar/routing/Routing.svelte | 15 +++++---
 website/src/lib/stores.ts                     | 34 +++++++++++++------
 4 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index 2f2cb6f7..f164b06e 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -230,10 +230,7 @@
 	});
 
 	$: if (chart && $settings) {
-		let gpxFiles = new GPXFiles(Array.from($selectedFiles));
-		gpxFiles.files.sort(function (a, b) {
-			return get(fileOrder).indexOf(a) - get(fileOrder).indexOf(b);
-		});
+		let gpxFiles = new GPXFiles(get(fileOrder).filter((f) => $selectedFiles.has(f)));
 
 		// update data
 		let trackPointsAndStatistics = gpxFiles.getTrackPointsAndStatistics();
diff --git a/website/src/lib/components/FileList.svelte b/website/src/lib/components/FileList.svelte
index b5d5d5ca..5257f2cc 100644
--- a/website/src/lib/components/FileList.svelte
+++ b/website/src/lib/components/FileList.svelte
@@ -6,7 +6,7 @@
 
 	import type { GPXFile } from 'gpx';
 
-	import { onMount } from 'svelte';
+	import { afterUpdate, onMount } from 'svelte';
 	import { get } from 'svelte/store';
 
 	let tabs: HTMLDivElement;
@@ -44,6 +44,21 @@
 		});
 	}
 
+	function updateFileOrder() {
+		let newFileOrder = sortable.toArray().map((index: string) => get(get(files)[parseInt(index)]));
+		if (newFileOrder.length !== get(fileOrder).length) {
+			fileOrder.set(newFileOrder);
+			return;
+		}
+
+		for (let i = 0; i < newFileOrder.length; i++) {
+			if (newFileOrder[i] !== get(fileOrder)[i]) {
+				fileOrder.set(newFileOrder);
+				return;
+			}
+		}
+	}
+
 	onMount(() => {
 		sortable = Sortable.create(tabs, {
 			forceAutoScrollFallback: true,
@@ -69,7 +84,7 @@
 				deselectFile(get($files[index]));
 			},
 			onSort: () => {
-				$fileOrder = sortable.toArray().map((index: string) => $files[parseInt(index)]);
+				updateFileOrder();
 			}
 		});
 	});
@@ -104,6 +119,8 @@
 			}
 		};
 	});
+
+	afterUpdate(updateFileOrder);
 </script>
 
 <div class="h-10 -translate-y-10 w-full pointer-events-none">
diff --git a/website/src/lib/components/toolbar/routing/Routing.svelte b/website/src/lib/components/toolbar/routing/Routing.svelte
index 77cee8f6..e5e623aa 100644
--- a/website/src/lib/components/toolbar/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/routing/Routing.svelte
@@ -7,7 +7,7 @@
 	import * as Alert from '$lib/components/ui/alert';
 	import { CircleHelp } from 'lucide-svelte';
 
-	import { map, selectedFiles, getFileStore, applyToFile } from '$lib/stores';
+	import { map, selectedFiles, applyToFile } from '$lib/stores';
 	import { AnchorPointHierarchy, getMarker, route } from './routing';
 	import { onDestroy } from 'svelte';
 	import mapboxgl from 'mapbox-gl';
@@ -64,7 +64,7 @@
 				privateRoads,
 				routing
 			);
-			applyToFile(file, (f) => f.append(response));
+			applyToFile(file, (f) => f.append(response), true);
 		}
 	}
 
@@ -116,10 +116,17 @@
 	}
 
 	$: if ($selectedFiles.size == 1 && $map) {
-		clean();
+		let selectedFile = $selectedFiles.values().next().value;
 
-		file = $selectedFiles.values().next().value;
+		if (selectedFile !== file) {
+			clean();
+			file = selectedFile;
+		} else {
+			// update markers
+		}
+	}
 
+	$: if ($map && file) {
 		// record time
 		let start = performance.now();
 		anchorPointHierarchy = AnchorPointHierarchy.create(file);
diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts
index 0a9c6fd0..8faf692f 100644
--- a/website/src/lib/stores.ts
+++ b/website/src/lib/stores.ts
@@ -22,13 +22,26 @@ export function getFileIndex(file: GPXFile): number {
     return get(files).findIndex(store => get(store) === file);
 }
 
-export function applyToFile(file: GPXFile, callback: (file: GPXFile) => void) {
+export function applyToFile(file: GPXFile, callback: (file: GPXFile) => void, updateSelected: boolean) {
     let store = getFileStore(file);
     store.update($file => {
         callback($file)
         return $file;
     });
-    selectedFiles.update($selected => $selected);
+    if (updateSelected) {
+        selectedFiles.update($selected => $selected);
+    }
+}
+
+export function applyToSelectedFiles(callback: (file: GPXFile) => void, updateSelected: boolean) {
+    get(fileOrder).forEach(file => {
+        if (get(selectedFiles).has(file)) {
+            applyToFile(file, callback, false);
+        }
+    });
+    if (updateSelected) {
+        selectedFiles.update($selected => $selected);
+    }
 }
 
 export function addFile(file: GPXFile): Writable<GPXFile> {
@@ -84,14 +97,10 @@ export async function loadFile(file: File) {
 }
 
 export function duplicateSelectedFiles() {
-    let selected: GPXFile[] = [];
-    get(selectedFiles).forEach(file => selected.push(file));
-    selected.forEach(file => duplicateFile(file));
-}
-
-export function duplicateFile(file: GPXFile) {
-    let clone = file.clone();
-    addFile(clone);
+    applyToSelectedFiles(file => {
+        let clone = file.clone();
+        addFile(clone);
+    }, false);
 }
 
 export function removeSelectedFiles() {
@@ -145,5 +154,8 @@ export function exportFile(file: GPXFile) {
 }
 
 export function reverseSelectedFiles() {
-    get(selectedFiles).forEach(file => applyToFile(file, file => file.reverse()));
+    selectedFiles.update($selected => {
+        $selected.forEach(file => applyToFile(file, file => file.reverse(), false));
+        return $selected;
+    });
 }
\ No newline at end of file