progress

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
 	import * as Select from '$lib/components/ui/select';
 	import { Switch } from '$lib/components/ui/switch';
 	import { Label } from '$lib/components/ui/label/index.js';
@@ -18,26 +17,22 @@
 		RouteOff
 	} from 'lucide-svelte';
 
-	import { map, Tool } from '$lib/stores';
+	import { map, routingControls } from '$lib/stores';
 	import { dbUtils, settings } from '$lib/db';
 	import { brouterProfiles, routingProfileSelectItem } from './Routing';
 
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { RoutingControls } from './RoutingControls';
-	import RoutingControlPopup from './RoutingControlPopup.svelte';
-	import { onMount } from 'svelte';
 	import mapboxgl from 'mapbox-gl';
 	import { fileObservers } from '$lib/db';
 	import { slide } from 'svelte/transition';
 	import { selection } from '$lib/components/file-list/Selection';
 	import { ListRootItem, type ListItem } from '$lib/components/file-list/FileList';
 
-	let routingControls: Map<string, RoutingControls> = new Map();
-	let popupElement: HTMLElement;
-	let popup: mapboxgl.Popup | null = null;
+	export let popup: mapboxgl.Popup;
+	export let popupElement: HTMLElement;
 	let selectedItem: ListItem | null = null;
-	let active = false;
 
 	const { privateRoads, routing } = settings;
 
@@ -65,18 +60,9 @@
 	}
 
 	$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
-
-	onMount(() => {
-		popup = new mapboxgl.Popup({
-			closeButton: false,
-			maxWidth: undefined
-		});
-		popup.setDOMContent(popupElement);
-		popupElement.classList.remove('hidden');
-	});
 </script>
 
-<ToolbarItemMenu tool={Tool.ROUTING} bind:active>
+<div class=" flex flex-col gap-3">
 	<Tooltip>
 		<div slot="data" class="w-full flex flex-row justify-between items-center gap-2">
 			<Label for="routing" class="flex flex-row gap-1">
@@ -91,6 +77,7 @@
 		</div>
 		<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span>
 	</Tooltip>
+
 	{#if $routing}
 		<div class="flex flex-col gap-3" in:slide>
 			<div class="w-full flex flex-row justify-between items-center gap-2">
@@ -177,6 +164,4 @@
 			<div>{$_('toolbar.routing.help')}</div>
 		{/if}
 	</Help>
-</ToolbarItemMenu>
-
-<RoutingControlPopup bind:element={popupElement} />
+</div>

website/src/lib/components/toolbar/tools/routing/RoutingControls.ts

@@ -165,6 +165,9 @@ export class RoutingControls {
         });
         marker.getElement().addEventListener('click', (e) => {
             e.stopPropagation();
+            if (marker === this.temporaryAnchor.marker) {
+                return;
+            }
 
             if (Date.now() - lastDragEvent < 100) { // Prevent click event during drag
                 return;

website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte

@@ -1,19 +1,35 @@
 <script lang="ts">
-	import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
 	import * as Alert from '$lib/components/ui/alert';
 	import { CircleHelp } from 'lucide-svelte';
 	import { selection } from '$lib/components/file-list/Selection';
-	import { Tool } from '$lib/stores';
-
+	import type { Waypoint } from 'gpx';
 	import { _ } from 'svelte-i18n';
+	import { ListWaypointItem } from '$lib/components/file-list/FileList';
+	import { fileObservers } from '$lib/db';
+	import { get } from 'svelte/store';
 
-	$: $selection.forEach((item) => {
-		// todo
-	});
+	let waypoint: Waypoint | undefined = undefined;
+
+	$: if ($selection) {
+		waypoint = undefined;
+		$selection.forEach((item) => {
+			if (item instanceof ListWaypointItem) {
+				if (waypoint) return;
+				let fileStore = get(fileObservers).get(item.getFileId());
+				if (fileStore) {
+					waypoint = get(fileStore)?.file.wpt[item.getWaypointIndex()];
+				}
+			}
+		});
+	}
 </script>
 
-<ToolbarItemMenu tool={Tool.WAYPOINT}>
-	<div class="w-full flex flex-row justify-between items-center gap-2">todo</div>
+<div class="flex flex-col gap-3 max-w-96">
+	{#if waypoint}
+		<span>{waypoint.name}</span>
+		<span>{waypoint.desc ?? ''}</span>
+		<span>{waypoint.cmt ?? ''}</span>
+	{/if}
 
 	<Alert.Root class="max-w-64">
 		<CircleHelp size="16" />
@@ -21,4 +37,4 @@
 			<div>{$_('toolbar.waypoint.help')}</div>
 		</Alert.Description>
 	</Alert.Root>
-</ToolbarItemMenu>
+</div>