improve zoom on selected POIs, rework zoom buttons and add shortcut

website/src/lib/components/Menu.svelte

@@ -56,8 +56,7 @@
 		editStyle,
 		exportState,
 		ExportState,
-		flyToBounds,
-		gpxStatistics
+		centerMapOnSelection
 	} from '$lib/stores';
 	import {
 		copied,
@@ -225,13 +224,6 @@
 						<PaintBucket size="16" class="mr-1" />
 						{$_('menu.style.button')}
 					</Menubar.Item>
-					<Menubar.Item
-						disabled={$selection.size === 0}
-						on:click={() => flyToBounds($gpxStatistics.global.bounds, $map)}
-					>
-						<Maximize size="16" class="mr-1" />
-						{$_('menu.fly_to_selection')}
-					</Menubar.Item>
 					<Menubar.Item
 						on:click={() => {
 							if ($allHidden) {
@@ -257,6 +249,17 @@
 						{$_('menu.select_all')}
 						<Shortcut key="A" ctrl={true} />
 					</Menubar.Item>
+					<Menubar.Item
+						on:click={() => {
+							if ($selection.size > 0) {
+								centerMapOnSelection();
+							}
+						}}
+					>
+						<Maximize size="16" class="mr-1" />
+						{$_('menu.center')}
+						<Shortcut key="⏎" ctrl={true} />
+					</Menubar.Item>
 					{#if $verticalFileView}
 						<Menubar.Separator />
 						<Menubar.Item on:click={copySelection} disabled={$selection.size === 0}>
@@ -545,6 +548,10 @@
 				dbUtils.setHiddenToSelection(true);
 			}
 			e.preventDefault();
+		} else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+			if ($selection.size > 0) {
+				centerMapOnSelection();
+			}
 		} else if (e.key === 'F1') {
 			switchBasemaps();
 			e.preventDefault();

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

@@ -45,9 +45,8 @@
 		editMetadata,
 		editStyle,
 		embedding,
-		flyToBounds,
+		centerMapOnSelection,
 		gpxLayers,
-		gpxStatistics,
 		map
 	} from '$lib/stores';
 	import {
@@ -61,7 +60,6 @@
 	import { _ } from 'svelte-i18n';
 	import MetadataDialog from './MetadataDialog.svelte';
 	import StyleDialog from './StyleDialog.svelte';
-	import mapboxgl from 'mapbox-gl';
 
 	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
 	export let item: ListItem;
@@ -227,14 +225,6 @@
 				{$_('menu.style.button')}
 			</ContextMenu.Item>
 		{/if}
-		<ContextMenu.Item
-			on:click={() => {
-				flyToBounds($gpxStatistics.global.bounds, $map);
-			}}
-		>
-			<Maximize size="16" class="mr-1" />
-			{$_('menu.fly_to')}
-		</ContextMenu.Item>
 		<ContextMenu.Item
 			on:click={() => {
 				if ($allHidden) {
@@ -294,8 +284,13 @@
 				{$_('menu.select_all')}
 				<Shortcut key="A" ctrl={true} />
 			</ContextMenu.Item>
-			<ContextMenu.Separator />
 		{/if}
+		<ContextMenu.Item on:click={centerMapOnSelection}>
+			<Maximize size="16" class="mr-1" />
+			{$_('menu.center')}
+			<Shortcut key="⏎" ctrl={true} />
+		</ContextMenu.Item>
+		<ContextMenu.Separator />
 		<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
 			<Copy size="16" class="mr-1" />
 			{$_('menu.duplicate')}

website/src/lib/stores.ts

@@ -151,16 +151,35 @@ export function updateTargetMapBounds(bounds: { southWest: Coordinates; northEas
     });
 }
 
-export function flyToBounds(
-	bounds: { southWest: Coordinates; northEast: Coordinates },
-	map: mapboxgl.Map | null
+export function centerMapOnSelection(
 ) {
-	const mapBoxBounds = new mapboxgl.LngLatBounds([
-		[bounds.northEast.lon, bounds.northEast.lat],
-		[bounds.southWest.lon, bounds.southWest.lat]
-	]);
-	map?.fitBounds(mapBoxBounds, {
-		padding: 80
+    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/locales/en.json

@@ -76,9 +76,8 @@
         },
         "hide": "Hide",
         "unhide": "Unhide",
-		"open_in": "Open in",
-		"fly_to": "Fly to",
-		"fly_to_selection": "Fly to selection"
+        "center": "Center",
+        "open_in": "Open in"
     },
     "toolbar": {
         "routing": {