bounds management

website/src/lib/components/Menu.svelte

@@ -73,6 +73,7 @@
     import { fileActionManager } from '$lib/logic/file-action-manager';
     import { copied, selection } from '$lib/logic/selection';
     import { allHidden } from '$lib/logic/hidden';
+    import { boundsManager } from '$lib/logic/bounds';
 
     const {
         distanceUnits,
@@ -281,7 +282,7 @@
                     {/if}
                     <Menubar.Separator />
                     <Menubar.Item
-                        onclick={selection.selectAll}
+                        onclick={() => selection.selectAll()}
                         disabled={fileStateCollection.size == 0}
                     >
                         <FileStack size="16" />
@@ -291,9 +292,10 @@
                     <Menubar.Item
                         onclick={() => {
                             if ($selection.size > 0) {
-                                // centerMapOnSelection();
+                                boundsManager.centerMapOnSelection();
                             }
                         }}
+                        disabled={$selection.size == 0}
                     >
                         <Maximize size="16" />
                         {i18n._('menu.center')}
@@ -302,7 +304,7 @@
                     {#if $treeFileView}
                         <Menubar.Separator />
                         <Menubar.Item
-                            onclick={selection.copySelection}
+                            onclick={() => selection.copySelection()}
                             disabled={$selection.size === 0}
                         >
                             <ClipboardCopy size="16" />
@@ -310,7 +312,7 @@
                             <Shortcut key="C" ctrl={true} />
                         </Menubar.Item>
                         <Menubar.Item
-                            onclick={selection.cutSelection}
+                            onclick={() => selection.cutSelection()}
                             disabled={$selection.size === 0}
                         >
                             <Scissors size="16" />
@@ -375,7 +377,7 @@
                         />
                     </Menubar.CheckboxItem>
                     <Menubar.Separator />
-                    <Menubar.Item inset onclick={map.toggle3D}>
+                    <Menubar.Item inset onclick={() => map.toggle3D()}>
                         <Box size="16" />
                         {i18n._('menu.toggle_3d')}
                         <Shortcut key="{i18n._('menu.ctrl')} {i18n._('menu.drag')}" />
@@ -629,9 +631,9 @@
             }
             e.preventDefault();
         } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-            // if ($selection.size > 0) {
-            //     centerMapOnSelection();
-            // }
+            if ($selection.size > 0) {
+                boundsManager.centerMapOnSelection();
+            }
         } else if (e.key === 'F1') {
             switchBasemaps();
             e.preventDefault();

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -41,6 +41,7 @@
     import { map } from '$lib/components/map/map';
     import { fileActions, pasteSelection } from '$lib/logic/file-actions';
     import { allHidden } from '$lib/logic/hidden';
+    import { boundsManager } from '$lib/logic/bounds';
 
     let {
         node,
@@ -287,7 +288,7 @@
                 <Shortcut key="A" ctrl={true} />
             </ContextMenu.Item>
         {/if}
-        <ContextMenu.Item onclick={centerMapOnSelection}>
+        <ContextMenu.Item onclick={() => boundsManager.centerMapOnSelection()}>
             <Maximize size="16" class="mr-1" />
             {i18n._('menu.center')}
             <Shortcut key="⏎" ctrl={true} />

website/src/lib/components/map/gpx-layer/gpx-layers.ts

@@ -14,9 +14,11 @@ export class GPXLayerCollection {
             return;
         }
         this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
-            (fileId, fileState) => {
-                const layer = new GPXLayer(fileId, fileState);
-                this._layers.set(fileId, layer);
+            (newFiles) => {
+                newFiles.forEach((fileState, fileId) => {
+                    const layer = new GPXLayer(fileId, fileState);
+                    this._layers.set(fileId, layer);
+                });
             },
             (fileId) => {
                 const layer = this._layers.get(fileId);

website/src/lib/components/map/map.ts

@@ -221,105 +221,3 @@ export class MapboxGLMap {
 }
 
 export const map = new MapboxGLMap();
-
-// const targetMapBounds: {
-//     bounds: mapboxgl.LngLatBounds;
-//     ids: string[];
-//     total: number;
-// } = $state({
-//     bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
-//     ids: [],
-//     total: 0,
-// });
-
-// $effect(() => {
-//     if (
-//         map.current === null ||
-//         targetMapBounds.ids.length > 0 ||
-//         (targetMapBounds.bounds.getSouth() === 90 &&
-//             targetMapBounds.bounds.getWest() === 180 &&
-//             targetMapBounds.bounds.getNorth() === -90 &&
-//             targetMapBounds.bounds.getEast() === -180)
-//     ) {
-//         return;
-//     }
-
-//     let currentZoom = map.current.getZoom();
-//     let currentBounds = map.current.getBounds();
-//     if (
-//         targetMapBounds.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(targetMapBounds.bounds.getSouthEast()) &&
-//             currentBounds.contains(targetMapBounds.bounds.getNorthWest())
-//         ) {
-//             return;
-//         }
-
-//         targetMapBounds.bounds.extend(currentBounds.getSouthWest());
-//         targetMapBounds.bounds.extend(currentBounds.getNorthEast());
-//     }
-
-//     map.current.fitBounds(targetMapBounds.bounds, { padding: 80, linear: true, easing: () => 1 });
-// });
-
-// export function initTargetMapBounds(ids: string[]) {
-//     targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
-//     targetMapBounds.ids = ids;
-//     targetMapBounds.total = ids.length;
-// }
-
-// export function updateTargetMapBounds(
-//     id: string,
-//     bounds: { southWest: Coordinates; northEast: Coordinates }
-// ) {
-//     if (targetMapBounds.ids.indexOf(id) === -1) {
-//         return;
-//     }
-
-//     if (
-//         bounds.southWest.lat !== 90 ||
-//         bounds.southWest.lon !== 180 ||
-//         bounds.northEast.lat !== -90 ||
-//         bounds.northEast.lon !== -180
-//     ) {
-//         // Avoid update for empty (new) files
-//         targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
-//         targetMapBounds.bounds.extend(bounds.southWest);
-//         targetMapBounds.bounds.extend(bounds.northEast);
-//     }
-// }
-
-// export function centerMapOnSelection() {
-//     let selected = get(selection).getSelected();
-//     let bounds = new mapboxgl.LngLatBounds();
-
-//     if (selected.find((item) => item instanceof ListWaypointItem)) {
-//         applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
-//             let file = getFile(fileId);
-//             if (file) {
-//                 items.forEach((item) => {
-//                     if (item instanceof ListWaypointItem) {
-//                         let waypoint = file.wpt[item.getWaypointIndex()];
-//                         if (waypoint) {
-//                             bounds.extend([waypoint.getLongitude(), waypoint.getLatitude()]);
-//                         }
-//                     }
-//                 });
-//             }
-//         });
-//     } else {
-//         let selectionBounds = get(gpxStatistics).global.bounds;
-//         bounds.setNorthEast(selectionBounds.northEast);
-//         bounds.setSouthWest(selectionBounds.southWest);
-//     }
-
-//     get(map)?.fitBounds(bounds, {
-//         padding: 80,
-//         easing: () => 1,
-//         maxZoom: 15,
-//     });
-// }

website/src/lib/components/toolbar/tools/reduce/reduce.ts

@@ -61,8 +61,13 @@ export class ReducedGPXLayerCollection {
         this._layers = new Map();
         this._simplified = new Map();
         this._fileStateCollectionOberver = new GPXFileStateCollectionObserver(
-            (fileId, fileState) => {
-                this._layers.set(fileId, new ReducedGPXLayer(fileState, this._updateSimplified));
+            (newFiles) => {
+                newFiles.forEach((fileState, fileId) => {
+                    this._layers.set(
+                        fileId,
+                        new ReducedGPXLayer(fileState, this._updateSimplified)
+                    );
+                });
             },
             (fileId) => {
                 this._layers.get(fileId)?.destroy();

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -84,11 +84,13 @@
     onMount(() => {
         if ($map && popup && popupElement) {
             fileStateCollectionObserver = new GPXFileStateCollectionObserver(
-                (fileId, fileState) => {
-                    routingControls.set(
-                        fileId,
-                        new RoutingControls(fileId, fileState, popup, popupElement)
-                    );
+                (newFiles) => {
+                    newFiles.forEach((fileState, fileId) => {
+                        routingControls.set(
+                            fileId,
+                            new RoutingControls(fileId, fileState, popup, popupElement)
+                        );
+                    });
                 },
                 (fileId) => {
                     const controls = routingControls.get(fileId);