start of routing reactivity

website/src/lib/stores.ts

@@ -1,24 +1,26 @@
-import { writable, get } from 'svelte/store';
+import { writable, get, type Writable } from 'svelte/store';
 
 import mapboxgl from 'mapbox-gl';
-import { GPXFile, GPXFiles, buildGPX, parseGPX } from 'gpx';
+import { GPXFile, buildGPX, parseGPX } from 'gpx';
 
 export const map = writable<mapboxgl.Map | null>(null);
-export const fileCollection = writable<GPXFiles>(new GPXFiles([]));
-export const fileOrder = writable<GPXFile[]>([]);
-export const selectedFiles = writable<Set<GPXFile>>(new Set());
-export const selectFiles = writable<{ [key: string]: (file?: GPXFile) => void }>({});
+export const files = writable<Writable<GPXFile>[]>([]);
+export const fileOrder = writable<Writable<GPXFile>[]>([]);
+export const selectedFiles = writable<Set<Writable<GPXFile>>>(new Set());
+export const selectFiles = writable<{ [key: string]: (file?: Writable<GPXFile>) => void }>({});
 export const settings = writable<{ [key: string]: any }>({
     distanceUnits: 'metric',
     velocityUnits: 'speed',
     temperatureUnits: 'celsius',
 });
 
-export function addFile(file: GPXFile) {
-    fileCollection.update($files => {
-        $files.files.push(file);
+export function addFile(file: GPXFile): Writable<GPXFile> {
+    let fileStore = writable(file);
+    files.update($files => {
+        $files.push(fileStore);
         return $files;
     });
+    return fileStore;
 }
 
 export function triggerFileInput() {
@@ -45,7 +47,7 @@ export async function loadFiles(list: FileList) {
 }
 
 export async function loadFile(file: File) {
-    let result = await new Promise<GPXFile | null>((resolve) => {
+    let result = await new Promise<Writable<GPXFile> | null>((resolve) => {
         const reader = new FileReader();
         reader.onload = () => {
             let data = reader.result?.toString() ?? null;
@@ -54,8 +56,7 @@ export async function loadFile(file: File) {
                 if (gpx.metadata.name === undefined) {
                     gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
                 }
-                addFile(gpx);
-                resolve(gpx);
+                resolve(addFile(gpx));
             } else {
                 resolve(null);
             }
@@ -67,7 +68,7 @@ export async function loadFile(file: File) {
 
 export function duplicateSelectedFiles() {
     let selected: GPXFile[] = [];
-    get(selectedFiles).forEach(file => selected.push(file));
+    get(selectedFiles).forEach(file => selected.push(get(file)));
     selected.forEach(file => duplicateFile(file));
 }
 
@@ -77,16 +78,16 @@ export function duplicateFile(file: GPXFile) {
 }
 
 export function removeSelectedFiles() {
-    fileCollection.update($collection => {
+    files.update($files => {
         let index = 0;
-        while (index < $collection.files.length) {
-            if (get(selectedFiles).has($collection.files[index])) {
-                $collection.files.splice(index, 1);
+        while (index < $files.length) {
+            if (get(selectedFiles).has($files[index])) {
+                $files.splice(index, 1);
             } else {
                 index++;
             }
         }
-        return $collection;
+        return $files;
     });
     selectedFiles.update($selected => {
         $selected.clear();
@@ -95,9 +96,9 @@ export function removeSelectedFiles() {
 }
 
 export function removeAllFiles() {
-    fileCollection.update($collection => {
-        $collection.files.splice(0, $collection.files.length);
-        return $collection;
+    files.update($files => {
+        $files.splice(0, $files.length);
+        return $files;
     });
     selectedFiles.update($selected => {
         $selected.clear();
@@ -106,12 +107,12 @@ export function removeAllFiles() {
 }
 
 export function exportSelectedFiles() {
-    get(selectedFiles).forEach(file => exportFile(file));
+    get(selectedFiles).forEach(file => exportFile(get(file)));
 }
 
 export async function exportAllFiles() {
-    for (let file of get(fileCollection).files) {
-        exportFile(file);
+    for (let file of get(files)) {
+        exportFile(get(file));
         await new Promise(resolve => setTimeout(resolve, 200));
     }
 }
@@ -127,10 +128,13 @@ export function exportFile(file: GPXFile) {
 }
 
 export function reverseSelectedFiles() {
-    fileCollection.update($files => {
-        $files.files.forEach(file => {
+    files.update($files => {
+        $files.forEach(file => {
             if (get(selectedFiles).has(file)) {
-                file.reverse();
+                file.update($file => {
+                    $file.reverse();
+                    return $file;
+                });
             }
         });
         return $files;