diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts index e5b42575..1ae0be06 100644 --- a/website/src/lib/db.ts +++ b/website/src/lib/db.ts @@ -2,7 +2,7 @@ import Dexie, { liveQuery } from 'dexie'; import { GPXFile, GPXStatistics, Track, TrackSegment, Waypoint, TrackPoint, type Coordinates, distance, type LineStyleExtension } from 'gpx'; import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, freeze, produceWithPatches } from 'immer'; import { writable, get, derived, type Readable, type Writable } from 'svelte/store'; -import { gpxStatistics, initTargetMapBounds, splitAs, updateAllHidden, updateTargetMapBounds } from './stores'; +import { Tool, currentTool, gpxStatistics, initTargetMapBounds, splitAs, updateAllHidden, updateTargetMapBounds } from './stores'; import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer, defaultOpacities } from './assets/layers'; import { applyToOrderedItemsFromFile, applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection'; import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem, ListRootItem } from '$lib/components/file-list/FileList'; @@ -295,8 +295,8 @@ export function observeFilesFromDatabase() { // Update the store if (newFiles.length > 0 || deletedFiles.length > 0) { fileObservers.update($files => { - if (newFiles.length > 0) { // Reset the target map bounds when new files are added - initTargetMapBounds($files.size === 0); + if (newFiles.length > 0 && get(currentTool) !== Tool.SCISSORS) { // Reset the target map bounds when new files are added + initTargetMapBounds(newFiles.length); } newFiles.forEach(id => { $files.set(id, dexieGPXFileStore(id)); diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts index 8b2f7205..efa7ee60 100644 --- a/website/src/lib/stores.ts +++ b/website/src/lib/stores.ts @@ -1,4 +1,4 @@ -import { writable, get, type Writable } from 'svelte/store'; +import { writable, get, type Writable, derived } from 'svelte/store'; import mapboxgl from 'mapbox-gl'; import { GPXFile, buildGPX, parseGPX, GPXStatistics, type Coordinates } from 'gpx'; @@ -68,42 +68,40 @@ gpxStatistics.subscribe(() => { const targetMapBounds = writable({ bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]), - count: 0 + count: 0, + total: -1 }); -targetMapBounds.subscribe((bounds) => { - if (bounds.count === 0) { +derived([targetMapBounds, map], x => x).subscribe(([bounds, $map]) => { + if ($map === null || bounds.count !== bounds.total) { return; } - let currentBounds = get(map)?.getBounds(); - if (bounds.count !== get(fileObservers).size && - currentBounds && currentBounds.contains(bounds.bounds.getSouthEast()) && currentBounds.contains(bounds.bounds.getNorthWest())) { - return; - } + let currentBounds = $map.getBounds(); + if (bounds.count !== get(fileObservers).size && currentBounds) { + // There are other files on the map - map.subscribe((m) => { - if (m) { - m.fitBounds(bounds.bounds, { - padding: 80, - linear: true, - easing: () => 1 - }); + if (currentBounds.contains(bounds.bounds.getSouthEast()) && currentBounds.contains(bounds.bounds.getNorthWest())) { + return; } + + bounds.bounds.extend(currentBounds.getSouthWest()); + bounds.bounds.extend(currentBounds.getNorthEast()); + } + + $map.fitBounds(bounds.bounds, { + padding: 80, + linear: true, + easing: () => 1 }); }); -export function initTargetMapBounds(first: boolean) { - let bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]); - let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]); - if (!first) { // Some files are already loaded - mapBounds = get(map)?.getBounds() ?? mapBounds; - bounds.extend(mapBounds); - } +export function initTargetMapBounds(total: number) { targetMapBounds.set({ - bounds: bounds, - count: 0 + bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]), + count: 0, + total: total }); }