rework stores

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();

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">

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);

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;
+    });
 }