reactive modifications

gpx/src/gpx.ts

@@ -15,6 +15,7 @@ abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
     abstract getChildren(): T[];
 
     abstract computeStatistics(): GPXStatistics;
+    abstract refreshStatistics(): void;
 
     abstract append(points: TrackPoint[]): void;
     abstract reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date): void;
@@ -34,15 +35,19 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
     }
 
     computeStatistics(): GPXStatistics {
-        let statistics = new GPXStatistics();
-
         for (let child of this.getChildren()) {
-            statistics.mergeWith(child.computeStatistics());
+            child.computeStatistics();
         }
+        this.refreshStatistics();
+        return this.statistics;
+    }
 
-        this.statistics = statistics;
+    refreshStatistics(): void {
-
+        this.statistics = new GPXStatistics();
-        return statistics;
+        for (let child of this.getChildren()) {
+            child.refreshStatistics();
+            this.statistics.mergeWith(child.statistics);
+        }
     }
 
     append(points: TrackPoint[]): void {
@@ -53,6 +58,8 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
         }
 
         children[children.length - 1].append(points);
+
+        this.refreshStatistics();
     }
 
     reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date): void {
@@ -73,6 +80,8 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
             originalNextTimestamp = originalStartTimestamp;
             newPreviousTimestamp = children[i].getEndTimestamp();
         }
+
+        this.refreshStatistics();
     }
 
     getStartTimestamp(): Date {
@@ -352,6 +361,9 @@ export class TrackSegment extends GPXTreeLeaf {
         return statistics;
     }
 
+    // Do nothing, recompute statistics after modifying the segment only
+    refreshStatistics(): void { }
+
     computeSmoothedElevation(): number[] {
         const points = this.trkpt;
 
@@ -373,7 +385,7 @@ export class TrackSegment extends GPXTreeLeaf {
 
     append(points: TrackPoint[]): void {
         this.trkpt = this.trkpt.concat(points);
-        //this.computeStatistics();
+        this.computeStatistics();
     }
 
     reverse(originalNextTimestamp: Date | undefined, newPreviousTimestamp: Date | undefined): void {
@@ -393,6 +405,7 @@ export class TrackSegment extends GPXTreeLeaf {
         } else {
             this.trkpt.reverse();
         }
+        this.computeStatistics();
     }
 
     getStartTimestamp(): Date {

website/src/lib/components/ElevationProfile.svelte

@@ -230,7 +230,7 @@
 	});
 
 	$: if (chart && $settings) {
-		let gpxFiles = new GPXFiles(Array.from($selectedFiles).map((file) => get(file)));
+		let gpxFiles = new GPXFiles(Array.from($selectedFiles));
 		gpxFiles.files.sort(function (a, b) {
 			return get(fileOrder).indexOf(a) - get(fileOrder).indexOf(b);
 		});

website/src/lib/components/FileList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fileOrder, files, selectedFiles, selectFiles } from '$lib/stores';
+	import { fileOrder, files, getFileIndex, selectedFiles, selectFiles } from '$lib/stores';
 
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
 	import Sortable from 'sortablejs/Sortable';
@@ -7,13 +7,13 @@
 	import type { GPXFile } from 'gpx';
 
 	import { onMount } from 'svelte';
-	import { get, type Writable } from 'svelte/store';
+	import { get } from 'svelte/store';
 
 	let tabs: HTMLDivElement;
 	let buttons: HTMLButtonElement[] = [];
 	let sortable: Sortable;
 
-	function selectFile(file: Writable<GPXFile>) {
+	function selectFile(file: GPXFile) {
 		selectedFiles.update((selectedFiles) => {
 			selectedFiles.clear();
 			selectedFiles.add(file);
@@ -21,7 +21,7 @@
 		});
 	}
 
-	function addSelectFile(file: Writable<GPXFile>) {
+	function addSelectFile(file: GPXFile) {
 		selectedFiles.update((selectedFiles) => {
 			selectedFiles.add(file);
 			return selectedFiles;
@@ -31,13 +31,13 @@
 	function selectAllFiles() {
 		selectedFiles.update((selectedFiles) => {
 			get(files).forEach((file) => {
-				selectedFiles.add(file);
+				selectedFiles.add(get(file));
 			});
 			return selectedFiles;
 		});
 	}
 
-	function deselectFile(file: Writable<GPXFile>) {
+	function deselectFile(file: GPXFile) {
 		selectedFiles.update((selectedFiles) => {
 			selectedFiles.delete(file);
 			return selectedFiles;
@@ -53,12 +53,12 @@
 			avoidImplicitDeselect: true,
 			onSelect: (e) => {
 				const index = parseInt(e.item.getAttribute('data-id'));
-				addSelectFile($files[index]);
+				addSelectFile(get($files[index]));
 				if (!e.originalEvent.shiftKey && $selectedFiles.size > 1) {
 					$selectedFiles.forEach((file) => {
-						if (file !== $files[index]) {
+						if (file !== get($files[index])) {
 							deselectFile(file);
-							const index = $files.indexOf(file);
+							const index = getFileIndex(file);
 							Sortable.utils.deselect(buttons[index]);
 						}
 					});
@@ -66,7 +66,7 @@
 			},
 			onDeselect: (e) => {
 				const index = parseInt(e.item.getAttribute('data-id'));
-				deselectFile($files[index]);
+				deselectFile(get($files[index]));
 			},
 			onSort: () => {
 				$fileOrder = sortable.toArray().map((index: string) => $files[parseInt(index)]);
@@ -76,18 +76,18 @@
 
 	selectFiles.update(() => {
 		return {
-			select: (file: Writable<GPXFile>) => {
+			select: (file: GPXFile) => {
 				buttons.forEach((button) => {
 					if (button) {
 						Sortable.utils.deselect(button);
 					}
 				});
-				const index = $files.indexOf(file);
+				const index = getFileIndex(file);
 				Sortable.utils.select(buttons[index]);
 				selectFile(file);
 			},
-			addSelect: (file: Writable<GPXFile>) => {
+			addSelect: (file: GPXFile) => {
-				const index = $files.indexOf(file);
+				const index = getFileIndex(file);
 				Sortable.utils.select(buttons[index]);
 				addSelectFile(file);
 			},
@@ -97,8 +97,8 @@
 				});
 				selectAllFiles();
 			},
-			removeSelect: (file: Writable<GPXFile>) => {
+			removeSelect: (file: GPXFile) => {
-				const index = $files.indexOf(file);
+				const index = getFileIndex(file);
 				Sortable.utils.deselect(buttons[index]);
 				deselectFile(file);
 			}

website/src/lib/components/GPXData.svelte

@@ -5,7 +5,7 @@
 
 	import { GPXStatistics } from 'gpx';
 
-	import { selectedFiles, settings } from '$lib/stores';
+	import { getFileStore, selectedFiles, settings } from '$lib/stores';
 	import { get } from 'svelte/store';
 
 	import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
@@ -14,12 +14,16 @@
 
 	let gpxData: GPXStatistics = new GPXStatistics();
 
-	$: {
+	function updateGPXData() {
 		gpxData = new GPXStatistics();
 		$selectedFiles.forEach((file) => {
-			gpxData.mergeWith(get(file).statistics);
+			gpxData.mergeWith(file.statistics);
 		});
 	}
+
+	$: if ($selectedFiles) {
+		updateGPXData();
+	}
 </script>
 
 <Card.Root class="h-full overflow-hidden border-none min-w-48 pl-4">

website/src/lib/components/GPXMapLayer.svelte

@@ -59,9 +59,9 @@
 
 	function selectOnClick(e: any) {
 		if (e.originalEvent.shiftKey) {
-			get(selectFiles).addSelect(file);
+			get(selectFiles).addSelect(get(file));
 		} else {
-			get(selectFiles).select(file);
+			get(selectFiles).select(get(file));
 		}
 	}
 
@@ -125,16 +125,19 @@
 		}
 	}
 
-	$: if ($map) {
+	$: if ($selectedFiles.has(get(file))) {
-		$map.on('style.load', addGPXLayer);
-	}
-
-	$: if ($selectedFiles.has(file)) {
 		if ($map) {
 			$map.moveLayer(layerId);
 		}
 	}
 
+	$: if ($map) {
+		let source = $map.getSource(layerId);
+		if (source) {
+			source.setData(extendGeoJSON($file.toGeoJSON()));
+		}
+	}
+
 	onMount(() => {
 		addGPXLayer();
 		if ($map) {
@@ -178,16 +181,11 @@
 					}
 				);
 			}
+
+			$map.on('style.load', addGPXLayer);
 		}
 	});
 
-	$: if ($map) {
-		let source = $map.getSource(layerId);
-		if (source) {
-			source.setData(extendGeoJSON($file.toGeoJSON()));
-		}
-	}
-
 	onDestroy(() => {
 		if ($map) {
 			$map.off('click', layerId, selectOnClick);

website/src/lib/components/toolbar/routing/Routing.svelte

@@ -7,8 +7,7 @@
 	import * as Alert from '$lib/components/ui/alert';
 	import { CircleHelp } from 'lucide-svelte';
 
-	import { map, selectedFiles } from '$lib/stores';
+	import { map, selectedFiles, getFileStore, applyToFile } from '$lib/stores';
-	import { get, type Writable } from 'svelte/store';
 	import { AnchorPointHierarchy, getMarker, route } from './routing';
 	import { onDestroy } from 'svelte';
 	import mapboxgl from 'mapbox-gl';
@@ -36,7 +35,7 @@
 
 	let anchorPointHierarchy: AnchorPointHierarchy | null = null;
 	let markers: mapboxgl.Marker[] = [];
-	let file: Writable<GPXFile> | null = null;
+	let file: GPXFile | null = null;
 	let kdbush: KDBush | null = null;
 
 	function toggleMarkersForZoomLevelAndBounds() {
@@ -65,11 +64,7 @@
 				privateRoads,
 				routing
 			);
-			console.log(response);
+			applyToFile(file, (f) => f.append(response));
-			file.update((file) => {
-				file.append(response);
-				return file;
-			});
 		}
 	}
 
@@ -111,7 +106,7 @@
 			$map.off('move', toggleMarkersForZoomLevelAndBounds);
 			$map.off('click', extendFile);
 			if (file) {
-				$map.off('mouseover', get(file).layerId, showInsertableMarker);
+				$map.off('mouseover', file.layerId, showInsertableMarker);
 			}
 			if (insertableMarker) {
 				insertableMarker.remove();
@@ -127,7 +122,7 @@
 
 		// record time
 		let start = performance.now();
-		anchorPointHierarchy = AnchorPointHierarchy.create(get(file));
+		anchorPointHierarchy = AnchorPointHierarchy.create(file);
 		// record time
 		let end = performance.now();
 		console.log('Time to create anchor points: ' + (end - start) + 'ms');
@@ -138,9 +133,9 @@
 		$map.on('zoom', toggleMarkersForZoomLevelAndBounds);
 		$map.on('move', toggleMarkersForZoomLevelAndBounds);
 		$map.on('click', extendFile);
-		$map.on('mouseover', get(file).layerId, showInsertableMarker);
+		$map.on('mouseover', file.layerId, showInsertableMarker);
 
-		let points = get(file).getTrackPoints();
+		let points = file.getTrackPoints();
 
 		start = performance.now();
 		kdbush = new KDBush(points.length);

website/src/lib/stores.ts

@@ -5,15 +5,32 @@ import { GPXFile, buildGPX, parseGPX } from 'gpx';
 
 export const map = writable<mapboxgl.Map | null>(null);
 export const files = writable<Writable<GPXFile>[]>([]);
-export const fileOrder = writable<Writable<GPXFile>[]>([]);
+export const fileOrder = writable<GPXFile[]>([]);
-export const selectedFiles = writable<Set<Writable<GPXFile>>>(new Set());
+export const selectedFiles = writable<Set<GPXFile>>(new Set());
-export const selectFiles = writable<{ [key: string]: (file?: Writable<GPXFile>) => void }>({});
+export const selectFiles = writable<{ [key: string]: (file?: GPXFile) => void }>({});
 export const settings = writable<{ [key: string]: any }>({
     distanceUnits: 'metric',
     velocityUnits: 'speed',
     temperatureUnits: 'celsius',
 });
 
+export function getFileStore(file: GPXFile): Writable<GPXFile> {
+    return get(files).find(store => get(store) === file) ?? addFile(file);
+}
+
+export function getFileIndex(file: GPXFile): number {
+    return get(files).findIndex(store => get(store) === file);
+}
+
+export function applyToFile(file: GPXFile, callback: (file: GPXFile) => void) {
+    let store = getFileStore(file);
+    store.update($file => {
+        callback($file)
+        return $file;
+    });
+    selectedFiles.update($selected => $selected);
+}
+
 export function addFile(file: GPXFile): Writable<GPXFile> {
     let fileStore = writable(file);
     files.update($files => {
@@ -41,7 +58,7 @@ export async function loadFiles(list: FileList) {
     for (let i = 0; i < list.length; i++) {
         let file = await loadFile(list[i]);
         if (i == 0 && file) {
-            get(selectFiles).select(file);
+            get(selectFiles).select(get(file));
         }
     }
 }
@@ -68,7 +85,7 @@ export async function loadFile(file: File) {
 
 export function duplicateSelectedFiles() {
     let selected: GPXFile[] = [];
-    get(selectedFiles).forEach(file => selected.push(get(file)));
+    get(selectedFiles).forEach(file => selected.push(file));
     selected.forEach(file => duplicateFile(file));
 }
 
@@ -81,7 +98,7 @@ export function removeSelectedFiles() {
     files.update($files => {
         let index = 0;
         while (index < $files.length) {
-            if (get(selectedFiles).has($files[index])) {
+            if (get(selectedFiles).has(get($files[index]))) {
                 $files.splice(index, 1);
             } else {
                 index++;
@@ -107,7 +124,7 @@ export function removeAllFiles() {
 }
 
 export function exportSelectedFiles() {
-    get(selectedFiles).forEach(file => exportFile(get(file)));
+    get(selectedFiles).forEach(file => exportFile(file));
 }
 
 export async function exportAllFiles() {
@@ -128,15 +145,5 @@ export function exportFile(file: GPXFile) {
 }
 
 export function reverseSelectedFiles() {
-    files.update($files => {
+    get(selectedFiles).forEach(file => applyToFile(file, file => file.reverse()));
-        $files.forEach(file => {
-            if (get(selectedFiles).has(file)) {
-                file.update($file => {
-                    $file.reverse();
-                    return $file;
-                });
-            }
-        });
-        return $files;
-    });
 }