From 597095defad955baab8419976e57d62016daefd1 Mon Sep 17 00:00:00 2001 From: vcoppe Date: Tue, 7 May 2024 12:16:30 +0200 Subject: [PATCH] change bounds on file load --- gpx/src/gpx.ts | 12 ++++---- website/src/lib/stores.ts | 61 +++++++++++++++++++++++++-------------- 2 files changed, 45 insertions(+), 28 deletions(-) diff --git a/gpx/src/gpx.ts b/gpx/src/gpx.ts index 50c06af4..7f8b2919 100644 --- a/gpx/src/gpx.ts +++ b/gpx/src/gpx.ts @@ -326,9 +326,9 @@ export class TrackSegment extends GPXTreeLeaf { // bounds statistics.global.bounds.southWest.lat = Math.min(statistics.global.bounds.southWest.lat, points[i].attributes.lat); - statistics.global.bounds.southWest.lon = Math.max(statistics.global.bounds.southWest.lon, points[i].attributes.lon); + statistics.global.bounds.southWest.lon = Math.min(statistics.global.bounds.southWest.lon, points[i].attributes.lon); statistics.global.bounds.northEast.lat = Math.max(statistics.global.bounds.northEast.lat, points[i].attributes.lat); - statistics.global.bounds.northEast.lon = Math.min(statistics.global.bounds.northEast.lon, points[i].attributes.lon); + statistics.global.bounds.northEast.lon = Math.max(statistics.global.bounds.northEast.lon, points[i].attributes.lon); } statistics.global.time.total = statistics.local.time[statistics.local.time.length - 1]; @@ -620,11 +620,11 @@ export class GPXStatistics { bounds: { southWest: { lat: 90, - lon: -180, + lon: 180, }, northEast: { lat: -90, - lon: 180, + lon: -180, }, }, }; @@ -668,9 +668,9 @@ export class GPXStatistics { this.global.elevation.loss += other.global.elevation.loss; this.global.bounds.southWest.lat = Math.min(this.global.bounds.southWest.lat, other.global.bounds.southWest.lat); - this.global.bounds.southWest.lon = Math.max(this.global.bounds.southWest.lon, other.global.bounds.southWest.lon); + this.global.bounds.southWest.lon = Math.min(this.global.bounds.southWest.lon, other.global.bounds.southWest.lon); this.global.bounds.northEast.lat = Math.max(this.global.bounds.northEast.lat, other.global.bounds.northEast.lat); - this.global.bounds.northEast.lon = Math.min(this.global.bounds.northEast.lon, other.global.bounds.northEast.lon); + this.global.bounds.northEast.lon = Math.max(this.global.bounds.northEast.lon, other.global.bounds.northEast.lon); } } diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts index 2a8f8023..1df67982 100644 --- a/website/src/lib/stores.ts +++ b/website/src/lib/stores.ts @@ -28,6 +28,7 @@ fileObservers.subscribe((files) => { // Update selectedFiles automatically when } }); +const targetMapBounds = writable(new mapboxgl.LngLatBounds([180, 90, -180, -90])); const fileStatistics: Map> = new Map(); const fileUnsubscribe: Map = new Map(); export const gpxStatistics: Writable = writable(new GPXStatistics()); @@ -54,16 +55,32 @@ fileObservers.subscribe((files) => { // Maintain up-to-date statistics }); files.forEach((fileObserver, fileId) => { if (!fileStatistics.has(fileId)) { - fileStatistics.set(fileId, writable(new GPXStatistics())); + let statisticsStore = writable(new GPXStatistics()); + fileStatistics.set(fileId, statisticsStore); let unsubscribe = fileObserver.subscribe((file) => { if (file) { - fileStatistics.get(fileId)?.set(file.getStatistics()); + statisticsStore.set(file.getStatistics()); if (get(selectedFiles).has(fileId)) { updateGPXData(); } } }); fileUnsubscribe.set(fileId, unsubscribe); + + let boundsUnsubscribe = statisticsStore.subscribe((stats) => { + let fileBounds = stats.global.bounds; + if (fileBounds.southWest.lat == 90 && fileBounds.southWest.lon == 180 && fileBounds.northEast.lat == -90 && fileBounds.northEast.lon == -180) { + return; + } + targetMapBounds.update((bounds) => { + bounds.extend(fileBounds.southWest); + bounds.extend(fileBounds.northEast); + bounds.extend([fileBounds.southWest.lon, fileBounds.northEast.lat]); + bounds.extend([fileBounds.northEast.lon, fileBounds.southWest.lat]); + return bounds; + }); + boundsUnsubscribe(); + }) } }); }); @@ -72,6 +89,18 @@ selectedFiles.subscribe((selectedFiles) => { // Maintain up-to-date statistics f updateGPXData(); }); +targetMapBounds.subscribe((bounds) => { + if (bounds.getSouth() == 90 && bounds.getWest() == 180 && bounds.getNorth() == -90 && bounds.getEast() == -180) { + return; + } + + get(map)?.fitBounds(bounds, { + padding: 80, + linear: true, + easing: () => 1 + }); +}); + export const gpxLayers: Writable> = writable(new Map()); export enum Tool { @@ -113,35 +142,23 @@ export function triggerFileInput() { } export async function loadFiles(list: FileList) { - let bounds = new mapboxgl.LngLatBounds(); - let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]); - if (get(fileObservers).size > 0) { - mapBounds = get(map)?.getBounds() ?? mapBounds; - bounds.extend(mapBounds); - } let files = []; for (let i = 0; i < list.length; i++) { let file = await loadFile(list[i]); if (file) { files.push(file); - - /*let fileBounds = file.getStatistics().bounds; - bounds.extend(fileBounds.southWest); - bounds.extend(fileBounds.northEast); - bounds.extend([fileBounds.southWest.lon, fileBounds.northEast.lat]); - bounds.extend([fileBounds.northEast.lon, fileBounds.southWest.lat]);*/ } } - dbUtils.addMultiple(files); + let bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]); + let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]); + if (get(fileObservers).size > 0) { + mapBounds = get(map)?.getBounds() ?? mapBounds; + bounds.extend(mapBounds); + } + targetMapBounds.set(bounds); - /*if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) { - get(map)?.fitBounds(bounds, { - padding: 80, - linear: true, - easing: () => 1 - }); - }*/ + dbUtils.addMultiple(files); selectFileWhenLoaded(files[0]._data.id); }