refactoring for tools and start waypoint

gpx/src/gpx.ts

@@ -567,6 +567,14 @@ export class Waypoint {
         this.sym = waypoint.sym;
         this.type = waypoint.type;
     }
+
+    getCoordinates(): Coordinates {
+        return this.attributes;
+    }
+
+    setCoordinates(coordinates: Coordinates): void {
+        this.attributes = coordinates;
+    }
 }
 
 export class GPXStatistics {

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -1,7 +1,7 @@
-import type { GPXFile } from "gpx";
+import type { GPXFile, Waypoint } from "gpx";
 import { map, selectFiles, currentTool, Tool } from "$lib/stores";
 import { get, type Writable } from "svelte/store";
-import type mapboxgl from "mapbox-gl";
+import mapboxgl from "mapbox-gl";
 
 let id = 0;
 function getLayerId() {
@@ -46,16 +46,21 @@ export class GPXLayer {
     file: Writable<GPXFile>;
     layerId: string;
     layerColor: string;
+    popup: mapboxgl.Popup;
+    popupElement: HTMLElement;
+    markers: mapboxgl.Marker[] = [];
     unsubscribe: () => void;
 
     addBinded: () => void = this.add.bind(this);
     selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
 
-    constructor(map: mapboxgl.Map, file: Writable<GPXFile>) {
+    constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
         this.map = map;
         this.file = file;
         this.layerId = getLayerId();
         this.layerColor = getColor();
+        this.popup = popup;
+        this.popupElement = popupElement;
         this.unsubscribe = file.subscribe(this.updateData.bind(this));
 
         get(this.file)._data = {
@@ -97,6 +102,23 @@ export class GPXLayer {
             this.map.on('mouseenter', this.layerId, toPointerCursor);
             this.map.on('mouseleave', this.layerId, toDefaultCursor);
         }
+
+        if (this.markers.length == 0) {
+            get(this.file).wpt.forEach((waypoint) => {
+                let marker = new mapboxgl.Marker().setLngLat(waypoint.getCoordinates());
+                marker.getElement().addEventListener('click', (e) => {
+                    marker.setPopup(this.popup);
+                    marker.togglePopup();
+                    e.stopPropagation();
+                });
+
+                this.markers.push(marker);
+            });
+        }
+
+        this.markers.forEach((marker) => {
+            marker.addTo(this.map);
+        });
     }
 
     updateData() {
@@ -115,6 +137,10 @@ export class GPXLayer {
         this.map.removeLayer(this.layerId);
         this.map.removeSource(this.layerId);
 
+        this.markers.forEach((marker) => {
+            marker.remove();
+        });
+
         this.unsubscribe();
 
         decrementColor(this.layerColor);

website/src/lib/components/gpx-layer/GPXLayers.svelte

@@ -1,31 +1,48 @@
 <script lang="ts">
-	import { map, files, selectedFiles, getFileStore } from '$lib/stores';
-	import type { GPXFile } from 'gpx';
+	import { map, files, selectedFiles, getFileStore, gpxLayers } from '$lib/stores';
 	import { GPXLayer } from './GPXLayer';
-	import { get, type Writable } from 'svelte/store';
+	import { get } from 'svelte/store';
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import WaypointPopup from './WaypointPopup.svelte';
 
-	let gpxLayers: Map<Writable<GPXFile>, GPXLayer> = new Map();
+	let popupElement: HTMLElement;
+	let popup: mapboxgl.Popup | null = null;
 
 	$: if ($map) {
-		// remove layers for deleted files
-		gpxLayers.forEach((layer, file) => {
-			if (!get(files).includes(file)) {
-				layer.remove();
-				gpxLayers.delete(file);
-			}
-		});
-		// add layers for new files
-		$files.forEach((file) => {
-			if (!gpxLayers.has(file)) {
-				gpxLayers.set(file, new GPXLayer(get(map), file));
-			}
+		gpxLayers.update(($layers) => {
+			// remove layers for deleted files
+			$layers.forEach((layer, file) => {
+				if (!get(files).includes(file)) {
+					layer.remove();
+					$layers.delete(file);
+				}
+			});
+			// add layers for new files
+			$files.forEach((file) => {
+				if (!$layers.has(file)) {
+					$layers.set(file, new GPXLayer(get(map), file, popup, popupElement));
+				}
+			});
+			return $layers;
 		});
 	}
 
 	$: $selectedFiles.forEach((file) => {
 		let fileStore = getFileStore(file);
-		if (gpxLayers.has(fileStore)) {
-			gpxLayers.get(fileStore)?.moveToFront();
+		if ($gpxLayers.has(fileStore)) {
+			$gpxLayers.get(fileStore)?.moveToFront();
 		}
 	});
+
+	onMount(() => {
+		popup = new mapboxgl.Popup({
+			closeButton: false,
+			maxWidth: undefined
+		});
+		popup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
 </script>
+
+<WaypointPopup bind:element={popupElement} />

website/src/lib/components/gpx-layer/WaypointPopup.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+
+	import { _ } from 'svelte-i18n';
+
+	export let element: HTMLElement;
+</script>
+
+<div bind:this={element} class="hidden">
+	<Card.Root class="border-none shadow-md text-base">
+		<Card.Content class="flex flex-col p-1">Waypoint info (TODO)</Card.Content>
+	</Card.Root>
+</div>

website/src/lib/components/toolbar/Toolbar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { currentTool, reverseSelectedFiles, Tool } from '$lib/stores';
-	import Routing from '$lib/components/routing/Routing.svelte';
+	import { reverseSelectedFiles, Tool } from '$lib/stores';
+	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+	import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
 	import ToolbarItem from './ToolbarItem.svelte';
 	import {
 		ArrowRightLeft,
@@ -16,14 +17,6 @@
 	} from 'lucide-svelte';
 
 	import { _ } from 'svelte-i18n';
-
-	function getToggleTool(tool: Tool) {
-		return () => toggleTool(tool);
-	}
-
-	function toggleTool(tool: Tool) {
-		currentTool.update((current) => (current === tool ? null : tool));
-	}
 </script>
 
 <div class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none">
@@ -31,47 +24,48 @@
 		<div
 			class="h-fit flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md"
 		>
-			<ToolbarItem on:click={getToggleTool(Tool.ROUTING)}>
+			<ToolbarItem tool={Tool.ROUTING}>
 				<Pencil slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.TIME}>
 				<CalendarClock slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.time_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem on:click={reverseSelectedFiles}>
+			<ToolbarItem tool={Tool.REVERSE} on:click={reverseSelectedFiles}>
 				<ArrowRightLeft slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.reverse_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.MERGE}>
 				<Group slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.merge_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.EXTRACT}>
 				<Ungroup slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.extract_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.WAYPOINT}>
 				<MapPin slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.waypoint_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.REDUCE}>
 				<Shrink slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.reduce_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.CLEAN}>
 				<SquareDashedMousePointer slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.clean_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.STYLE}>
 				<Palette slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.style_tooltip')}</span>
 			</ToolbarItem>
-			<ToolbarItem>
+			<ToolbarItem tool={Tool.STRUCTURE}>
 				<FolderTree slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.structure_tooltip')}</span>
 			</ToolbarItem>
 		</div>
 		<Routing />
+		<Waypoint />
 	</div>
 </div>

website/src/lib/components/toolbar/ToolbarItem.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { currentTool, type Tool } from '$lib/stores';
+
+	export let tool: Tool;
+
+	function toggleTool() {
+		currentTool.update((current) => (current === tool ? null : tool));
+	}
 </script>
 
 <Tooltip.Root openDelay={300}>
 	<Tooltip.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="ghost" class="h-fit px-1 py-1.5" on:click>
+		<Button
+			builders={[builder]}
+			variant="ghost"
+			class="h-fit px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
+			on:click={toggleTool}
+		>
 			<slot name="icon" />
 		</Button>
 	</Tooltip.Trigger>

website/src/lib/components/toolbar/ToolbarItemMenu.svelte

@@ -1,9 +1,22 @@
 <script lang="ts">
+	import { type Tool, currentTool } from '$lib/stores';
 	import { flyAndScale } from '$lib/utils';
+	import * as Card from '$lib/components/ui/card';
+
+	export let tool: Tool;
+	export let active = false;
+
+	$: active = $currentTool === tool;
 </script>
 
-<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
-	<div class="rounded-md shadow-md pointer-events-auto">
-		<slot />
+{#if active}
+	<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
+		<div class="rounded-md shadow-md pointer-events-auto">
+			<Card.Root class="border-none">
+				<Card.Content class="p-4 flex flex-col gap-4">
+					<slot />
+				</Card.Content>
+			</Card.Root>
+		</div>
 	</div>
-</div>
+{/if}

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

@@ -1,13 +1,12 @@
 <script lang="ts">
 	import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
-	import * as Card from '$lib/components/ui/card';
 	import * as Select from '$lib/components/ui/select';
 	import { Switch } from '$lib/components/ui/switch';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import * as Alert from '$lib/components/ui/alert';
 	import { CircleHelp } from 'lucide-svelte';
 
-	import { currentTool, files, getFileStore, map, selectedFiles, Tool } from '$lib/stores';
+	import { files, getFileStore, map, selectedFiles, Tool } from '$lib/stores';
 	import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
 
 	import { _ } from 'svelte-i18n';
@@ -34,8 +33,6 @@
 		});
 	}
 
-	$: active = $currentTool === Tool.ROUTING;
-
 	$: if ($map && $selectedFiles) {
 		// update selected file
 		if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) {
@@ -76,49 +73,40 @@
 	});
 </script>
 
-{#if active}
-	<ToolbarItemMenu>
-		<Card.Root class="border-none">
-			<Card.Content class="p-4 flex flex-col gap-4">
-				<div class="w-full flex flex-row justify-between items-center gap-2">
-					<Label>{$_('toolbar.routing.activity')}</Label>
-					<Select.Root bind:selected={$routingProfile}>
-						<Select.Trigger class="h-8 w-40">
-							<Select.Value />
-						</Select.Trigger>
-						<Select.Content>
-							{#each Object.keys(brouterProfiles) as profile}
-								<Select.Item value={profile}
-									>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
-								>
-							{/each}
-						</Select.Content>
-					</Select.Root>
-				</div>
-				<div class="w-full flex flex-row justify-between items-center gap-2">
-					<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
-					<Switch id="routing" class="scale-90" bind:checked={$routing} />
-				</div>
-				<div class="w-full flex flex-row justify-between items-center gap-2">
-					<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
-					<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
-				</div>
-				<Alert.Root class="max-w-64">
-					<CircleHelp size="16" />
-					<!-- <Alert.Title>Heads up!</Alert.Title> -->
-					<Alert.Description>
-						{#if $selectedFiles.size > 1}
-							<div>{$_('toolbar.routing.help_multiple_files')}</div>
-						{:else if $selectedFiles.size == 0}
-							<div>{$_('toolbar.routing.help_no_file')}</div>
-						{:else}
-							<div>{$_('toolbar.routing.help')}</div>
-						{/if}
-					</Alert.Description>
-				</Alert.Root>
-			</Card.Content>
-		</Card.Root>
-	</ToolbarItemMenu>
-{/if}
+<ToolbarItemMenu tool={Tool.ROUTING} bind:active>
+	<div class="w-full flex flex-row justify-between items-center gap-2">
+		<Label>{$_('toolbar.routing.activity')}</Label>
+		<Select.Root bind:selected={$routingProfile}>
+			<Select.Trigger class="h-8 w-40">
+				<Select.Value />
+			</Select.Trigger>
+			<Select.Content>
+				{#each Object.keys(brouterProfiles) as profile}
+					<Select.Item value={profile}>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	</div>
+	<div class="w-full flex flex-row justify-between items-center gap-2">
+		<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
+		<Switch id="routing" class="scale-90" bind:checked={$routing} />
+	</div>
+	<div class="w-full flex flex-row justify-between items-center gap-2">
+		<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
+		<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
+	</div>
+	<Alert.Root class="max-w-64">
+		<CircleHelp size="16" />
+		<Alert.Description>
+			{#if $selectedFiles.size > 1}
+				<div>{$_('toolbar.routing.help_multiple_files')}</div>
+			{:else if $selectedFiles.size == 0}
+				<div>{$_('toolbar.routing.help_no_file')}</div>
+			{:else}
+				<div>{$_('toolbar.routing.help')}</div>
+			{/if}
+		</Alert.Description>
+	</Alert.Root>
+</ToolbarItemMenu>
 
 <RoutingControlPopup bind:element={popupElement} />

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

@@ -0,0 +1,24 @@
+<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 { Tool, selectedFiles } from '$lib/stores';
+
+	import { _ } from 'svelte-i18n';
+
+	$: $selectedFiles.forEach((file) => {
+		// todo
+	});
+</script>
+
+<ToolbarItemMenu tool={Tool.WAYPOINT}>
+	<div class="w-full flex flex-row justify-between items-center gap-2">todo</div>
+
+	<Alert.Root class="max-w-64">
+		<CircleHelp size="16" />
+		<Alert.Description>
+			<div>{$_('toolbar.waypoint.help')}</div>
+		</Alert.Description>
+	</Alert.Root>
+</ToolbarItemMenu>

website/src/lib/stores.ts

@@ -4,6 +4,7 @@ import mapboxgl from 'mapbox-gl';
 import { GPXFile, buildGPX, parseGPX, type AnyGPXTreeElement } from 'gpx';
 import { tick } from 'svelte';
 import { _ } from 'svelte-i18n';
+import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
 
 export const map = writable<mapboxgl.Map | null>(null);
 export const files = writable<Writable<GPXFile>[]>([]);
@@ -16,8 +17,19 @@ export const settings = writable<{ [key: string]: any }>({
     temperatureUnits: 'celsius',
     mode: 'system'
 });
+export const gpxLayers: Writable<Map<Writable<GPXFile>, GPXLayer>> = writable(new Map());
+
 export enum Tool {
-    ROUTING
+    ROUTING,
+    TIME,
+    REVERSE,
+    MERGE,
+    EXTRACT,
+    WAYPOINT,
+    REDUCE,
+    CLEAN,
+    STYLE,
+    STRUCTURE
 }
 export const currentTool = writable<Tool | null>(null);