refactor map popups and add inspect trackpoint feature

2025-09-08 11:17:51 +00:00 · 2024-10-08 15:49:14 +02:00
parent d823f44558
commit 711825f5a3
14 changed files with 396 additions and 289 deletions
--- a/website/src/lib/components/gpx-layer/GPXLayer.ts
+++ b/website/src/lib/components/gpx-layer/GPXLayer.ts
@@ -2,15 +2,13 @@ import { currentTool, map, Tool } from "$lib/stores";
 import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
 import { get, type Readable } from "svelte/store";
 import mapboxgl from "mapbox-gl";
-import { currentPopupWaypoint, deleteWaypoint, waypointPopup } from "./WaypointPopup";
+import { waypointPopup, deleteWaypoint, trackpointPopup } from "./GPXLayerPopup";
 import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
 import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
-import type { Waypoint } from "gpx";
-import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
+import { getClosestLinePoint, getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
 import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
 import { MapPin, Square } from "lucide-static";
 import { getSymbolKey, symbols } from "$lib/assets/symbols";
-import { tick } from "svelte";

 const colors = [
    '#ff0000',
@@ -44,6 +42,31 @@ function decrementColor(color: string) {
    }
 }

+const inspectKey = 'Shift';
+let inspectKeyDown: KeyDown | null = null;
+class KeyDown {
+    key: string;
+    down: boolean = false;
+    constructor(key: string) {
+        this.key = key;
+        document.addEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keyup', this.onKeyUp);
+    }
+    onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === this.key) {
+            this.down = true;
+        }
+    }
+    onKeyUp = (e: KeyboardEvent) => {
+        if (e.key === this.key) {
+            this.down = false;
+        }
+    }
+    isDown() {
+        return this.down;
+    }
+}
+
 function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
    let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -81,9 +104,9 @@ export class GPXLayer {
    updateBinded: () => void = this.update.bind(this);
    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
+    layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
    layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
-    maybeHideWaypointPopupBinded: (e: any) => void = this.maybeHideWaypointPopup.bind(this);

    constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
        this.map = map;
@@ -114,6 +137,10 @@ export class GPXLayer {
        this.draggable = get(currentTool) === Tool.WAYPOINT;

        this.map.on('style.import.load', this.updateBinded);
+
+        if (inspectKeyDown === null) {
+            inspectKeyDown = new KeyDown(inspectKey);
+        }
    }

    update() {
@@ -158,6 +185,7 @@ export class GPXLayer {
                this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
                this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
                this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+                this.map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
            }

            if (get(directionMarkers)) {
@@ -225,11 +253,11 @@ export class GPXLayer {
                    }).setLngLat(waypoint.getCoordinates());
                    Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
                    let dragEndTimestamp = 0;
-                    marker.getElement().addEventListener('mouseover', (e) => {
+                    marker.getElement().addEventListener('mousemove', (e) => {
                        if (marker._isDragging) {
                            return;
                        }
-                        this.showWaypointPopup(marker._waypoint);
+                        waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
                        e.stopPropagation();
                    });
                    marker.getElement().addEventListener('click', (e) => {
@@ -252,14 +280,14 @@ export class GPXLayer {
                        } else if (get(currentTool) === Tool.WAYPOINT) {
                            selectedWaypoint.set([marker._waypoint, this.fileId]);
                        } else {
-                            this.showWaypointPopup(marker._waypoint);
+                            waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
                        }
                        e.stopPropagation();
                    });
                    marker.on('dragstart', () => {
                        setGrabbingCursor();
                        marker.getElement().style.cursor = 'grabbing';
-                        this.hideWaypointPopup();
+                        waypointPopup?.hide();
                    });
                    marker.on('dragend', (e) => {
                        resetCursor();
@@ -308,6 +336,7 @@ export class GPXLayer {
            this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
            this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
            this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+            this.map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
            this.map.off('style.import.load', this.updateBinded);

            if (this.map.getLayer(this.fileId + '-direction')) {
@@ -354,6 +383,19 @@ export class GPXLayer {
        resetCursor();
    }

+    layerOnMouseMove(e: any) {
+        if (inspectKeyDown?.isDown()) {
+            let trackIndex = e.features[0].properties.trackIndex;
+            let segmentIndex = e.features[0].properties.segmentIndex;
+
+            const file = get(this.file)?.file;
+            if (file) {
+                const closest = getClosestLinePoint(file.trk[trackIndex].trkseg[segmentIndex].trkpt, { lat: e.lngLat.lat, lon: e.lngLat.lng });
+                trackpointPopup?.setItem({ item: closest, fileId: this.fileId });
+            }
+        }
+    }
+
    layerOnClick(e: any) {
        if (get(currentTool) === Tool.ROUTING && get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
            return;
@@ -392,48 +434,6 @@ export class GPXLayer {
        }
    }

-    showWaypointPopup(waypoint: Waypoint) {
-        if (get(currentPopupWaypoint) !== null) {
-            this.hideWaypointPopup();
-        } else if (waypoint === get(currentPopupWaypoint)?.[0]) {
-            return;
-        }
-        let marker = this.markers[waypoint._data.index];
-        if (marker) {
-            currentPopupWaypoint.set([waypoint, this.fileId]);
-            tick().then(() => {
-                // Show popup once the content component has been rendered
-                marker.setPopup(waypointPopup);
-                marker.togglePopup();
-                this.map.on('mousemove', this.maybeHideWaypointPopupBinded);
-            });
-        }
-    }
-
-    maybeHideWaypointPopup(e: any) {
-        let waypoint = get(currentPopupWaypoint)?.[0];
-        if (waypoint) {
-            let marker = this.markers[waypoint._data.index];
-            if (marker) {
-                if (this.map.project(marker.getLngLat()).dist(this.map.project(e.lngLat)) > 60) {
-                    this.hideWaypointPopup();
-                }
-            } else {
-                this.hideWaypointPopup();
-            }
-        }
-    }
-
-    hideWaypointPopup() {
-        let waypoint = get(currentPopupWaypoint)?.[0];
-        if (waypoint) {
-            let marker = this.markers[waypoint._data.index];
-            marker?.getPopup()?.remove();
-            currentPopupWaypoint.set(null);
-            this.map.off('mousemove', this.maybeHideWaypointPopupBinded);
-        }
-    }
-
    getGeoJSON(): GeoJSON.FeatureCollection {
        let file = get(this.file)?.file;
        if (!file) {
--- a/website/src/lib/components/gpx-layer/GPXLayerPopup.ts
+++ b/website/src/lib/components/gpx-layer/GPXLayerPopup.ts
@@ -0,0 +1,44 @@
+import { dbUtils } from "$lib/db";
+import { MapPopup } from "$lib/components/MapPopup";
+
+export let waypointPopup: MapPopup | null = null;
+export let trackpointPopup: MapPopup | null = null;
+
+export function createPopups(map: mapboxgl.Map) {
+    removePopups();
+    waypointPopup = new MapPopup(map, {
+        closeButton: false,
+        focusAfterOpen: false,
+        maxWidth: undefined,
+        offset: {
+            'top': [0, 0],
+            'top-left': [0, 0],
+            'top-right': [0, 0],
+            'bottom': [0, -30],
+            'bottom-left': [0, -30],
+            'bottom-right': [0, -30],
+            'left': [10, -15],
+            'right': [-10, -15],
+        },
+    });
+    trackpointPopup = new MapPopup(map, {
+        closeButton: false,
+        focusAfterOpen: false,
+        maxWidth: undefined,
+    });
+}
+
+export function removePopups() {
+    if (waypointPopup !== null) {
+        waypointPopup.remove();
+        waypointPopup = null;
+    }
+    if (trackpointPopup !== null) {
+        trackpointPopup.remove();
+        trackpointPopup = null;
+    }
+}
+
+export function deleteWaypoint(fileId: string, waypointIndex: number) {
+    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
+}
--- a/website/src/lib/components/gpx-layer/GPXLayers.svelte
+++ b/website/src/lib/components/gpx-layer/GPXLayers.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { map, gpxLayers } from '$lib/stores';
 	import { GPXLayer } from './GPXLayer';
-	import WaypointPopup from './WaypointPopup.svelte';
 	import { fileObservers } from '$lib/db';
 	import { DistanceMarkers } from './DistanceMarkers';
 	import { StartEndMarkers } from './StartEndMarkers';
 	import { onDestroy } from 'svelte';
+	import { createPopups, removePopups } from './GPXLayerPopup';

 	let distanceMarkers: DistanceMarkers | undefined = undefined;
 	let startEndMarkers: StartEndMarkers | undefined = undefined;
@@ -35,6 +35,7 @@
 		if (startEndMarkers) {
 			startEndMarkers.remove();
 		}
+		createPopups($map);
 		distanceMarkers = new DistanceMarkers($map);
 		startEndMarkers = new StartEndMarkers($map);
 	}
@@ -42,17 +43,14 @@
 	onDestroy(() => {
 		gpxLayers.forEach((layer) => layer.remove());
 		gpxLayers.clear();
-
+		removePopups();
 		if (distanceMarkers) {
 			distanceMarkers.remove();
 			distanceMarkers = undefined;
 		}
-
 		if (startEndMarkers) {
 			startEndMarkers.remove();
 			startEndMarkers = undefined;
 		}
 	});
 </script>
-
-<WaypointPopup />
--- a/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { TrackPoint } from 'gpx';
+	import type { PopupItem } from '$lib/components/MapPopup';
+	import * as Card from '$lib/components/ui/card';
+	import WithUnits from '$lib/components/WithUnits.svelte';
+	import { Compass, Mountain, Timer } from 'lucide-svelte';
+	import { df } from '$lib/utils';
+
+	export let trackpoint: PopupItem<TrackPoint>;
+</script>
+
+<Card.Root class="border-none shadow-md text-base p-2">
+	<Card.Header class="p-0">
+		<Card.Title class="text-md"></Card.Title>
+	</Card.Header>
+	<Card.Content class="flex flex-col p-0 text-xs gap-1">
+		<div class="flex flex-row items-center gap-1">
+			<Compass size="14" />
+			{trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
+				.getLongitude()
+				.toFixed(6)}&deg;
+		</div>
+		{#if trackpoint.item.ele !== undefined}
+			<div class="flex flex-row items-center gap-1">
+				<Mountain size="14" />
+				<WithUnits value={trackpoint.item.ele} type="elevation" />
+			</div>
+		{/if}
+		{#if trackpoint.item.time}
+			<div class="flex flex-row items-center gap-1">
+				<Timer size="14" />
+				{df.format(trackpoint.item.time)}
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>
--- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
@@ -2,23 +2,19 @@
 	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import Shortcut from '$lib/components/Shortcut.svelte';
-	import { waypointPopup, currentPopupWaypoint, deleteWaypoint } from './WaypointPopup';
+	import { deleteWaypoint } from './GPXLayerPopup';
 	import WithUnits from '$lib/components/WithUnits.svelte';
 	import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
-	import { onMount } from 'svelte';
 	import { Tool, currentTool } from '$lib/stores';
 	import { getSymbolKey, symbols } from '$lib/assets/symbols';
 	import { _ } from 'svelte-i18n';
 	import sanitizeHtml from 'sanitize-html';
+	import type { Waypoint } from 'gpx';
+	import type { PopupItem } from '$lib/components/MapPopup';

-	let popupElement: HTMLDivElement;
+	export let waypoint: PopupItem<Waypoint>;

-	onMount(() => {
-		waypointPopup.setDOMContent(popupElement);
-		popupElement.classList.remove('hidden');
-	});
-
-	$: symbolKey = $currentPopupWaypoint ? getSymbolKey($currentPopupWaypoint[0].sym) : undefined;
+	$: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined;

 	function sanitize(text: string | undefined): string {
 		if (text === undefined) {
@@ -34,68 +30,61 @@
 	}
 </script>

-<div bind:this={popupElement} class="hidden">
-	{#if $currentPopupWaypoint}
-		<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-			<Card.Header class="p-0">
-				<Card.Title class="text-md">
-					{#if $currentPopupWaypoint[0].link && $currentPopupWaypoint[0].link.attributes && $currentPopupWaypoint[0].link.attributes.href}
-						<a href={$currentPopupWaypoint[0].link.attributes.href} target="_blank">
-							{$currentPopupWaypoint[0].name ?? $currentPopupWaypoint[0].link.attributes.href}
-							<ExternalLink size="12" class="inline-block mb-1.5" />
-						</a>
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
+	<Card.Header class="p-0">
+		<Card.Title class="text-md">
+			{#if waypoint.item.link && waypoint.item.link.attributes && waypoint.item.link.attributes.href}
+				<a href={waypoint.item.link.attributes.href} target="_blank">
+					{waypoint.item.name ?? waypoint.item.link.attributes.href}
+					<ExternalLink size="12" class="inline-block mb-1.5" />
+				</a>
+			{:else}
+				{waypoint.item.name ?? $_('gpx.waypoint.item')}
+			{/if}
+		</Card.Title>
+	</Card.Header>
+	<Card.Content class="flex flex-col p-0 text-sm">
+		<div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
+			{#if symbolKey}
+				<span>
+					{#if symbols[symbolKey].icon}
+						<svelte:component
+							this={symbols[symbolKey].icon}
+							size="12"
+							class="inline-block mb-0.5"
+						/>
 					{:else}
-						{$currentPopupWaypoint[0].name ?? $_('gpx.waypoint')}
+						<span class="w-4 inline-block" />
 					{/if}
-				</Card.Title>
-			</Card.Header>
-			<Card.Content class="flex flex-col p-0 text-sm">
-				<div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
-					{#if symbolKey}
-						<span>
-							{#if symbols[symbolKey].icon}
-								<svelte:component
-									this={symbols[symbolKey].icon}
-									size="12"
-									class="inline-block mb-0.5"
-								/>
-							{:else}
-								<span class="w-4 inline-block" />
-							{/if}
-							{$_(`gpx.symbol.${symbolKey}`)}
-						</span>
-						<Dot size="16" />
-					{/if}
-					{$currentPopupWaypoint[0].getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint[0]
-						.getLongitude()
-						.toFixed(6)}&deg;
-					{#if $currentPopupWaypoint[0].ele !== undefined}
-						<Dot size="16" />
-						<WithUnits value={$currentPopupWaypoint[0].ele} type="elevation" />
-					{/if}
-				</div>
-				{#if $currentPopupWaypoint[0].desc}
-					<span class="whitespace-pre-wrap">{@html sanitize($currentPopupWaypoint[0].desc)}</span>
-				{/if}
-				{#if $currentPopupWaypoint[0].cmt && $currentPopupWaypoint[0].cmt !== $currentPopupWaypoint[0].desc}
-					<span class="whitespace-pre-wrap">{@html sanitize($currentPopupWaypoint[0].cmt)}</span>
-				{/if}
-				{#if $currentTool === Tool.WAYPOINT}
-					<Button
-						class="mt-2 w-full px-2 py-1 h-8 justify-start"
-						variant="outline"
-						on:click={() =>
-							deleteWaypoint($currentPopupWaypoint[1], $currentPopupWaypoint[0]._data.index)}
-					>
-						<Trash2 size="16" class="mr-1" />
-						{$_('menu.delete')}
-						<Shortcut shift={true} click={true} />
-					</Button>
-				{/if}
-			</Card.Content>
-		</Card.Root>
-	{/if}
-</div>
+					{$_(`gpx.symbol.${symbolKey}`)}
+				</span>
+				<Dot size="16" />
+			{/if}
+			{waypoint.item.getLatitude().toFixed(6)}&deg; {waypoint.item.getLongitude().toFixed(6)}&deg;
+			{#if waypoint.item.ele !== undefined}
+				<Dot size="16" />
+				<WithUnits value={waypoint.item.ele} type="elevation" />
+			{/if}
+		</div>
+		{#if waypoint.item.desc}
+			<span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.desc)}</span>
+		{/if}
+		{#if waypoint.item.cmt && waypoint.item.cmt !== waypoint.item.desc}
+			<span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.cmt)}</span>
+		{/if}
+		{#if $currentTool === Tool.WAYPOINT}
+			<Button
+				class="mt-2 w-full px-2 py-1 h-8 justify-start"
+				variant="outline"
+				on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
+			>
+				<Trash2 size="16" class="mr-1" />
+				{$_('menu.delete')}
+				<Shortcut shift={true} click={true} />
+			</Button>
+		{/if}
+	</Card.Content>
+</Card.Root>

 <style lang="postcss">
 	div :global(a) {
--- a/website/src/lib/components/gpx-layer/WaypointPopup.ts
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.ts
@@ -1,26 +0,0 @@
-import { dbUtils } from "$lib/db";
-import type { Waypoint } from "gpx";
-import mapboxgl from "mapbox-gl";
-import { writable } from "svelte/store";
-
-export const currentPopupWaypoint = writable<[Waypoint, string] | null>(null);
-
-export const waypointPopup = new mapboxgl.Popup({
-    closeButton: false,
-    focusAfterOpen: false,
-    maxWidth: undefined,
-    offset: {
-        'top': [0, 0],
-        'top-left': [0, 0],
-        'top-right': [0, 0],
-        'bottom': [0, -30],
-        'bottom-left': [0, -30],
-        'bottom-right': [0, -30],
-        'left': [10, -15],
-        'right': [-10, -15],
-    },
-});
-
-export function deleteWaypoint(fileId: string, waypointIndex: number) {
-    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
-}