diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte index 2f2cb6f7..a108871b 100644 --- a/website/src/lib/components/ElevationProfile.svelte +++ b/website/src/lib/components/ElevationProfile.svelte @@ -230,7 +230,7 @@ }); $: if (chart && $settings) { - let gpxFiles = new GPXFiles(Array.from($selectedFiles)); + let gpxFiles = new GPXFiles(Array.from($selectedFiles).map((file) => get(file))); gpxFiles.files.sort(function (a, b) { return get(fileOrder).indexOf(a) - get(fileOrder).indexOf(b); }); diff --git a/website/src/lib/components/FileList.svelte b/website/src/lib/components/FileList.svelte index 5d4261c0..95c290e5 100644 --- a/website/src/lib/components/FileList.svelte +++ b/website/src/lib/components/FileList.svelte @@ -1,5 +1,5 @@ diff --git a/website/src/lib/components/GPXMapLayer.svelte b/website/src/lib/components/GPXMapLayer.svelte index dd8c6280..929d2942 100644 --- a/website/src/lib/components/GPXMapLayer.svelte +++ b/website/src/lib/components/GPXMapLayer.svelte @@ -41,17 +41,20 @@ -{#each $fileCollection.files as file} +{#each $files as file} {/each} diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte index 3c3a15ad..04835f3a 100644 --- a/website/src/lib/components/Menu.svelte +++ b/website/src/lib/components/Menu.svelte @@ -15,7 +15,7 @@ } from 'lucide-svelte'; import { - fileCollection, + files, selectedFiles, duplicateSelectedFiles, exportAllFiles, @@ -69,7 +69,7 @@ {$_('menu.export')} ⌘S - + {$_('menu.export_all')} ⇧⌘S @@ -98,7 +98,7 @@ {$_('menu.delete_all')}⇧⌘⌫ | null = null; let kdbush: KDBush | null = null; function toggleMarkersForZoomLevelAndBounds() { @@ -65,6 +66,10 @@ routing ); console.log(response); + file.update((file) => { + file.append(response); + return file; + }); } } @@ -106,7 +111,7 @@ $map.off('move', toggleMarkersForZoomLevelAndBounds); $map.off('click', extendFile); if (file) { - $map.off('mouseover', file.layerId, showInsertableMarker); + $map.off('mouseover', get(file).layerId, showInsertableMarker); } if (insertableMarker) { insertableMarker.remove(); @@ -119,9 +124,10 @@ clean(); file = $selectedFiles.values().next().value; + // record time let start = performance.now(); - anchorPointHierarchy = AnchorPointHierarchy.create(file); + anchorPointHierarchy = AnchorPointHierarchy.create(get(file)); // record time let end = performance.now(); console.log('Time to create anchor points: ' + (end - start) + 'ms'); @@ -132,9 +138,9 @@ $map.on('zoom', toggleMarkersForZoomLevelAndBounds); $map.on('move', toggleMarkersForZoomLevelAndBounds); $map.on('click', extendFile); - $map.on('mouseover', file.layerId, showInsertableMarker); + $map.on('mouseover', get(file).layerId, showInsertableMarker); - let points = file.getTrackPoints(); + let points = get(file).getTrackPoints(); start = performance.now(); kdbush = new KDBush(points.length); diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts index 203bb1c9..8e1936c4 100644 --- a/website/src/lib/stores.ts +++ b/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(null); -export const fileCollection = writable(new GPXFiles([])); -export const fileOrder = writable([]); -export const selectedFiles = writable>(new Set()); -export const selectFiles = writable<{ [key: string]: (file?: GPXFile) => void }>({}); +export const files = writable[]>([]); +export const fileOrder = writable[]>([]); +export const selectedFiles = writable>>(new Set()); +export const selectFiles = writable<{ [key: string]: (file?: Writable) => 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 { + 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((resolve) => { + let result = await new Promise | 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;