mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-30 23:30:04 +00:00
rework map bounds logic when opening files from url
This commit is contained in:
vcoppe
@@ -180,7 +180,7 @@ function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { dest
|
||||
|
||||
let statistics = new GPXStatisticsTree(gpx);
|
||||
if (!fileState.has(id)) { // Update the map bounds for new files
|
||||
updateTargetMapBounds(statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
|
||||
updateTargetMapBounds(id, statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
|
||||
}
|
||||
|
||||
fileState.set(id, gpx);
|
||||
@@ -287,12 +287,13 @@ export const fileObservers: Writable<Map<string, Readable<GPXFileWithStatistics
|
||||
const fileState: Map<string, GPXFile> = new Map(); // Used to generate patches
|
||||
|
||||
// Observe the file ids in the database, and maintain a map of file observers for the corresponding files
|
||||
export function observeFilesFromDatabase() {
|
||||
export function observeFilesFromDatabase(fitBounds: boolean) {
|
||||
let initialize = true;
|
||||
liveQuery(() => db.fileids.toArray()).subscribe(dbFileIds => {
|
||||
if (initialize) {
|
||||
if (dbFileIds.length > 0) {
|
||||
initTargetMapBounds(dbFileIds.length);
|
||||
console.log('fitBounds', fitBounds);
|
||||
if (fitBounds && dbFileIds.length > 0) {
|
||||
initTargetMapBounds(dbFileIds);
|
||||
}
|
||||
initialize = false;
|
||||
}
|
||||
@@ -453,13 +454,14 @@ export const dbUtils = {
|
||||
});
|
||||
},
|
||||
addMultiple: (files: GPXFile[]) => {
|
||||
return applyGlobal((draft) => {
|
||||
let ids = getFileIds(files.length);
|
||||
let ids = getFileIds(files.length);
|
||||
applyGlobal((draft) => {
|
||||
files.forEach((file, index) => {
|
||||
file._data.id = ids[index];
|
||||
draft.set(file._data.id, freeze(file));
|
||||
});
|
||||
});
|
||||
return ids;
|
||||
},
|
||||
applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => void) => {
|
||||
applyToFiles([id], callback);
|
||||
|
||||
@@ -84,16 +84,20 @@ gpxStatistics.subscribe(() => {
|
||||
slicedGPXStatistics.set(undefined);
|
||||
});
|
||||
|
||||
const targetMapBounds = writable({
|
||||
const targetMapBounds = writable<{
|
||||
bounds: mapboxgl.LngLatBounds;
|
||||
ids: string[];
|
||||
total: number;
|
||||
}>({
|
||||
bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
|
||||
count: 0,
|
||||
total: -1
|
||||
ids: [],
|
||||
total: 0,
|
||||
});
|
||||
|
||||
derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
|
||||
if (
|
||||
$map === null ||
|
||||
bounds.count !== bounds.total ||
|
||||
bounds.ids.length > 0 ||
|
||||
(bounds.bounds.getSouth() === 90 &&
|
||||
bounds.bounds.getWest() === 180 &&
|
||||
bounds.bounds.getNorth() === -90 &&
|
||||
@@ -102,10 +106,13 @@ derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
|
||||
return;
|
||||
}
|
||||
|
||||
let currentZoom = $map.getZoom();
|
||||
let currentBounds = $map.getBounds();
|
||||
if (bounds.count !== get(fileObservers).size && currentBounds) {
|
||||
if (bounds.total !== get(fileObservers).size &&
|
||||
currentBounds &&
|
||||
currentZoom > 2 // Extend current bounds only if the map is zoomed in
|
||||
) {
|
||||
// There are other files on the map
|
||||
|
||||
if (
|
||||
currentBounds.contains(bounds.bounds.getSouthEast()) &&
|
||||
currentBounds.contains(bounds.bounds.getNorthWest())
|
||||
@@ -120,33 +127,32 @@ derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
|
||||
$map.fitBounds(bounds.bounds, { padding: 80, linear: true, easing: () => 1 });
|
||||
});
|
||||
|
||||
export function initTargetMapBounds(total: number) {
|
||||
export function initTargetMapBounds(ids: string[]) {
|
||||
targetMapBounds.set({
|
||||
bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
|
||||
count: 0,
|
||||
total: total
|
||||
ids,
|
||||
total: ids.length,
|
||||
});
|
||||
}
|
||||
|
||||
export function updateTargetMapBounds(bounds: { southWest: Coordinates; northEast: Coordinates }) {
|
||||
if (
|
||||
bounds.southWest.lat == 90 &&
|
||||
bounds.southWest.lon == 180 &&
|
||||
bounds.northEast.lat == -90 &&
|
||||
bounds.northEast.lon == -180
|
||||
) {
|
||||
// Avoid update for empty (new) files
|
||||
targetMapBounds.update((target) => {
|
||||
target.count += 1;
|
||||
return target;
|
||||
});
|
||||
export function updateTargetMapBounds(id: string, bounds: { southWest: Coordinates; northEast: Coordinates }) {
|
||||
if (get(targetMapBounds).ids.indexOf(id) === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
targetMapBounds.update((target) => {
|
||||
target.bounds.extend(bounds.southWest);
|
||||
target.bounds.extend(bounds.northEast);
|
||||
target.count += 1;
|
||||
target.ids = target.ids.filter((x) => x !== id);
|
||||
if (
|
||||
bounds.southWest.lat !== 90 ||
|
||||
bounds.southWest.lon !== 180 ||
|
||||
bounds.northEast.lat !== -90 ||
|
||||
bounds.northEast.lon !== -180
|
||||
) {
|
||||
// Avoid update for empty (new) files
|
||||
target.bounds.extend(bounds.southWest);
|
||||
target.bounds.extend(bounds.northEast);
|
||||
}
|
||||
|
||||
return target;
|
||||
});
|
||||
}
|
||||
@@ -246,7 +252,7 @@ export function triggerFileInput() {
|
||||
}
|
||||
|
||||
export async function loadFiles(list: FileList | File[]) {
|
||||
let files = [];
|
||||
let files: GPXFile[] = [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let file = await loadFile(list[i]);
|
||||
if (file) {
|
||||
@@ -254,11 +260,10 @@ export async function loadFiles(list: FileList | File[]) {
|
||||
}
|
||||
}
|
||||
|
||||
initTargetMapBounds(list.length);
|
||||
let ids = dbUtils.addMultiple(files);
|
||||
|
||||
dbUtils.addMultiple(files);
|
||||
|
||||
selectFileWhenLoaded(files[0]._data.id);
|
||||
initTargetMapBounds(ids);
|
||||
selectFileWhenLoaded(ids[0]);
|
||||
}
|
||||
|
||||
export async function loadFile(file: File): Promise<GPXFile | null> {
|
||||
|
||||
@@ -1,127 +1,122 @@
|
||||
<script lang="ts">
|
||||
import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
|
||||
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
||||
import FileList from '$lib/components/file-list/FileList.svelte';
|
||||
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
||||
import Map from '$lib/components/Map.svelte';
|
||||
import Menu from '$lib/components/Menu.svelte';
|
||||
import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
|
||||
import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
|
||||
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
|
||||
import Resizer from '$lib/components/Resizer.svelte';
|
||||
import { Toaster } from '$lib/components/ui/sonner';
|
||||
import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
|
||||
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
||||
import FileList from '$lib/components/file-list/FileList.svelte';
|
||||
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
||||
import Map from '$lib/components/Map.svelte';
|
||||
import Menu from '$lib/components/Menu.svelte';
|
||||
import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
|
||||
import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
|
||||
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
|
||||
import Resizer from '$lib/components/Resizer.svelte';
|
||||
import { Toaster } from '$lib/components/ui/sonner';
|
||||
|
||||
import { observeFilesFromDatabase, settings } from '$lib/db';
|
||||
import { gpxStatistics, loadFiles, slicedGPXStatistics } from '$lib/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { languages } from '$lib/languages';
|
||||
import { getURLForLanguage } from '$lib/utils';
|
||||
import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
|
||||
import { observeFilesFromDatabase, settings } from '$lib/db';
|
||||
import { gpxStatistics, loadFiles, slicedGPXStatistics } from '$lib/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { languages } from '$lib/languages';
|
||||
import { getURLForLanguage } from '$lib/utils';
|
||||
import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
|
||||
|
||||
const {
|
||||
verticalFileView,
|
||||
elevationProfile,
|
||||
bottomPanelSize,
|
||||
rightPanelSize,
|
||||
additionalDatasets,
|
||||
elevationFill
|
||||
} = settings;
|
||||
const {
|
||||
verticalFileView,
|
||||
elevationProfile,
|
||||
bottomPanelSize,
|
||||
rightPanelSize,
|
||||
additionalDatasets,
|
||||
elevationFill
|
||||
} = settings;
|
||||
|
||||
onMount(() => {
|
||||
observeFilesFromDatabase();
|
||||
onMount(() => {
|
||||
let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
|
||||
let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
|
||||
let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
|
||||
|
||||
let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
|
||||
let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
|
||||
let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
|
||||
observeFilesFromDatabase(urls.length === 0);
|
||||
|
||||
if (urls.length > 0) {
|
||||
let downloads: Promise<File | null>[] = [];
|
||||
urls.forEach((url) => {
|
||||
downloads.push(
|
||||
fetch(url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => new File([blob], url.split('/').pop()))
|
||||
);
|
||||
});
|
||||
if (urls.length > 0) {
|
||||
let downloads: Promise<File | null>[] = [];
|
||||
urls.forEach((url) => {
|
||||
downloads.push(
|
||||
fetch(url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => new File([blob], url.split('/').pop()))
|
||||
);
|
||||
});
|
||||
|
||||
Promise.all(downloads).then((files) => {
|
||||
files = files.filter((file) => file !== null);
|
||||
loadFiles(files);
|
||||
});
|
||||
}
|
||||
});
|
||||
Promise.all(downloads).then((files) => {
|
||||
files = files.filter((file) => file !== null);
|
||||
loadFiles(files);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="fixed flex flex-row w-screen h-screen supports-dvh:h-dvh">
|
||||
<div class="flex flex-col grow h-full min-w-0">
|
||||
<div class="grow relative">
|
||||
<Menu />
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 z-40 flex flex-col justify-center pointer-events-none"
|
||||
>
|
||||
<Toolbar />
|
||||
</div>
|
||||
<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
|
||||
<StreetViewControl />
|
||||
<LayerControl />
|
||||
<GPXLayers />
|
||||
<Toaster richColors />
|
||||
{#if !$verticalFileView}
|
||||
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
|
||||
<FileList orientation="horizontal" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $elevationProfile}
|
||||
<Resizer
|
||||
orientation="row"
|
||||
bind:after={$bottomPanelSize}
|
||||
minAfter={100}
|
||||
maxAfter={300}
|
||||
/>
|
||||
{/if}
|
||||
<div
|
||||
class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
|
||||
style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
|
||||
>
|
||||
<GPXStatistics
|
||||
{gpxStatistics}
|
||||
{slicedGPXStatistics}
|
||||
panelSize={$bottomPanelSize}
|
||||
orientation={$elevationProfile ? 'vertical' : 'horizontal'}
|
||||
/>
|
||||
{#if $elevationProfile}
|
||||
<ElevationProfile
|
||||
{gpxStatistics}
|
||||
{slicedGPXStatistics}
|
||||
bind:additionalDatasets={$additionalDatasets}
|
||||
bind:elevationFill={$elevationFill}
|
||||
panelSize={$bottomPanelSize}
|
||||
class="py-2"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if $verticalFileView}
|
||||
<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
|
||||
<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
|
||||
{/if}
|
||||
<div class="flex flex-col grow h-full min-w-0">
|
||||
<div class="grow relative">
|
||||
<Menu />
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 z-40 flex flex-col justify-center pointer-events-none"
|
||||
>
|
||||
<Toolbar />
|
||||
</div>
|
||||
<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
|
||||
<StreetViewControl />
|
||||
<LayerControl />
|
||||
<GPXLayers />
|
||||
<Toaster richColors />
|
||||
{#if !$verticalFileView}
|
||||
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
|
||||
<FileList orientation="horizontal" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $elevationProfile}
|
||||
<Resizer orientation="row" bind:after={$bottomPanelSize} minAfter={100} maxAfter={300} />
|
||||
{/if}
|
||||
<div
|
||||
class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
|
||||
style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
|
||||
>
|
||||
<GPXStatistics
|
||||
{gpxStatistics}
|
||||
{slicedGPXStatistics}
|
||||
panelSize={$bottomPanelSize}
|
||||
orientation={$elevationProfile ? 'vertical' : 'horizontal'}
|
||||
/>
|
||||
{#if $elevationProfile}
|
||||
<ElevationProfile
|
||||
{gpxStatistics}
|
||||
{slicedGPXStatistics}
|
||||
bind:additionalDatasets={$additionalDatasets}
|
||||
bind:elevationFill={$elevationFill}
|
||||
panelSize={$bottomPanelSize}
|
||||
class="py-2"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if $verticalFileView}
|
||||
<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
|
||||
<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- hidden links for svelte crawling -->
|
||||
<div class="hidden">
|
||||
{#each Object.entries(languages) as [lang, label]}
|
||||
<a href={getURLForLanguage(lang, '/embed')}>
|
||||
{label}
|
||||
</a>
|
||||
{/each}
|
||||
{#each Object.entries(languages) as [lang, label]}
|
||||
<a href={getURLForLanguage(lang, '/embed')}>
|
||||
{label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
div :global(.toaster.group) {
|
||||
@apply absolute;
|
||||
@apply right-2;
|
||||
--offset: 50px !important;
|
||||
}
|
||||
div :global(.toaster.group) {
|
||||
@apply absolute;
|
||||
@apply right-2;
|
||||
--offset: 50px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user