routing control popup progress

gpx/src/gpx.ts

@@ -9,7 +9,11 @@ function cloneJSON<T>(obj: T): T {
 
 // An abstract class that groups functions that need to be computed recursively in the GPX file hierarchy
 export abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
-    _data: { [key: string]: any } = {};
+    _data: { [key: string]: any };
+
+    constructor() {
+        this._data = {};
+    }
 
     abstract isLeaf(): boolean;
     abstract getChildren(): T[];
@@ -173,7 +177,7 @@ export class GPXFile extends GPXTreeNode<Track>{
     }
 
     clone(): GPXFile {
-        return new GPXFile(structuredClone(this));
+        return new GPXFile(this);
     }
 
     toGeoJSON(): GeoJSON.FeatureCollection {
@@ -252,7 +256,7 @@ export class Track extends GPXTreeNode<TrackSegment> {
     }
 
     clone(): Track {
-        return new Track(structuredClone(this));
+        return new Track(this);
     }
 };
 
@@ -444,7 +448,7 @@ export class TrackSegment extends GPXTreeLeaf {
     }
 
     clone(): TrackSegment {
-        return new TrackSegment(structuredClone(this));
+        return new TrackSegment(this);
     }
 };
 

website/src/lib/components/Map.svelte

@@ -168,4 +168,18 @@
 	div :global(.mapboxgl-ctrl-bottom-right) {
 		@apply bottom-9;
 	}
+
+	div :global(.mapboxgl-popup) {
+		@apply w-fit;
+	}
+
+	div :global(.mapboxgl-popup-content) {
+		@apply p-0;
+		@apply bg-transparent;
+		@apply shadow-none;
+	}
+
+	div :global(.mapboxgl-popup-tip) {
+		@apply drop-shadow-md;
+	}
 </style>

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

@@ -14,8 +14,13 @@
 	import { get, type Writable } from 'svelte/store';
 	import type { GPXFile } from 'gpx';
 	import { RoutingControls } from './RoutingControls';
+	import RoutingControlPopup from './RoutingControlPopup.svelte';
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
 
 	let routingControls: Map<Writable<GPXFile>, RoutingControls> = new Map();
+	let popupElement: HTMLElement;
+	let popup: mapboxgl.Popup | null = null;
 	let selectedFile: Writable<GPXFile> | null = null;
 	let active = false;
 
@@ -52,11 +57,23 @@
 
 	$: if ($map && selectedFile) {
 		if (!routingControls.has(selectedFile)) {
-			routingControls.set(selectedFile, new RoutingControls(get(map), selectedFile));
+			routingControls.set(
+				selectedFile,
+				new RoutingControls(get(map), selectedFile, popup, popupElement)
+			);
 		} else {
 			routingControls.get(selectedFile)?.add();
 		}
 	}
+
+	onMount(() => {
+		popup = new mapboxgl.Popup({
+			closeButton: false,
+			maxWidth: undefined
+		});
+		popup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
 </script>
 
 {#if active}
@@ -103,3 +120,5 @@
 		</Card.Root>
 	</ToolbarItemMenu>
 {/if}
+
+<RoutingControlPopup bind:element={popupElement} />

website/src/lib/components/routing/RoutingControlPopup.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import { Trash2 } from 'lucide-svelte';
+
+	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">
+			<Button
+				class="w-full px-2 py-1 h-6 justify-start"
+				variant="ghost"
+				on:click={() => element.dispatchEvent(new CustomEvent('delete'))}
+				><Trash2 size="16" class="mr-1" /> {$_('menu.delete')}</Button
+			>
+		</Card.Content>
+	</Card.Root>
+</div>

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

@@ -9,15 +9,20 @@ export class RoutingControls {
     map: mapboxgl.Map;
     file: Writable<GPXFile>;
     markers: mapboxgl.Marker[] = [];
+    popup: mapboxgl.Popup;
+    popupElement: HTMLElement;
     unsubscribe: () => void = () => { };
 
     toggleMarkersForZoomLevelAndBoundsBinded: () => void = this.toggleMarkersForZoomLevelAndBounds.bind(this);
     extendFileBinded: (e: mapboxgl.MapMouseEvent) => void = this.extendFile.bind(this);
     busy: boolean = false;
 
-    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.popup = popup;
+        this.popupElement = popupElement;
+
         this.add();
     }
 
@@ -85,7 +90,26 @@ export class RoutingControls {
         });
         anchor.marker = marker;
 
+        marker.on('dragstart', () => {
+            this.map.getCanvas().style.cursor = 'grabbing';
+            element.classList.add('cursor-grabbing');
+        });
+        marker.on('dragend', () => {
+            this.map.getCanvas().style.cursor = '';
+            element.classList.remove('cursor-grabbing');
+        });
         marker.on('dragend', this.updateAnchor.bind(this));
+        marker.getElement().addEventListener('click', (e) => {
+            marker.setPopup(this.popup);
+            marker.togglePopup();
+            e.stopPropagation();
+
+            let deleteThisAnchor = this.getDeleteAnchor(anchor);
+            this.popupElement.addEventListener('delete', deleteThisAnchor);
+            this.popup.once('close', () => {
+                this.popupElement.removeEventListener('delete', deleteThisAnchor);
+            });
+        });
 
         this.markers.push(marker);
     }
@@ -197,6 +221,14 @@ export class RoutingControls {
         this.busy = false;
     }
 
+    getDeleteAnchor(anchor: SimplifiedTrackPoint) {
+        return () => this.deleteAnchor(anchor);
+    }
+
+    async deleteAnchor(anchor: SimplifiedTrackPoint) {
+        console.log('delete', anchor);
+    }
+
     async extendFile(e: mapboxgl.MapMouseEvent) {
         if (this.busy) {
             return;