From d19e702084221b14232cdeaa91fc897abb7852d4 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sat, 25 Jan 2025 12:31:12 +0100
Subject: [PATCH] map context menu with coordinates, closes #149

---
 .../src/lib/components/CoordinatesPopup.svelte | 18 ++++++++++++++++++
 website/src/lib/components/MapPopup.ts         |  3 +++
 .../gpx-layer/TrackpointPopup.svelte           | 17 ++++++++++++++++-
 website/src/locales/en.json                    |  3 ++-
 .../src/routes/[[language]]/app/+page.svelte   |  2 ++
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 website/src/lib/components/CoordinatesPopup.svelte

diff --git a/website/src/lib/components/CoordinatesPopup.svelte b/website/src/lib/components/CoordinatesPopup.svelte
new file mode 100644
index 00000000..6052dbe3
--- /dev/null
+++ b/website/src/lib/components/CoordinatesPopup.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { map } from '$lib/stores';
+	import { trackpointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+	import { TrackPoint } from 'gpx';
+
+	$: if ($map) {
+		$map.on('contextmenu', (e) => {
+			trackpointPopup?.setItem({
+				item: new TrackPoint({
+					attributes: {
+						lat: e.lngLat.lat,
+						lon: e.lngLat.lng
+					}
+				})
+			});
+		});
+	}
+</script>
diff --git a/website/src/lib/components/MapPopup.ts b/website/src/lib/components/MapPopup.ts
index 6e43125c..bfbbf82a 100644
--- a/website/src/lib/components/MapPopup.ts
+++ b/website/src/lib/components/MapPopup.ts
@@ -7,6 +7,7 @@ import MapPopupComponent from "./MapPopup.svelte";
 export type PopupItem<T = Waypoint | TrackPoint | any> = {
     item: T;
     fileId?: string;
+    hide?: () => void;
 };
 
 export class MapPopup {
@@ -30,6 +31,8 @@ export class MapPopup {
     }
 
     setItem(item: PopupItem | null) {
+        if (item)
+            item.hide = () => this.hide();
         this.item.set(item);
         if (item === null) {
             this.hide();
diff --git a/website/src/lib/components/gpx-layer/TrackpointPopup.svelte b/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
index 7bc6a78e..f3c64e26 100644
--- a/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
@@ -2,9 +2,11 @@
 	import type { TrackPoint } from 'gpx';
 	import type { PopupItem } from '$lib/components/MapPopup';
 	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
 	import WithUnits from '$lib/components/WithUnits.svelte';
-	import { Compass, Mountain, Timer } from 'lucide-svelte';
+	import { Compass, Mountain, Timer, ClipboardCopy } from 'lucide-svelte';
 	import { df } from '$lib/utils';
+	import { _ } from 'svelte-i18n';
 
 	export let trackpoint: PopupItem<TrackPoint>;
 </script>
@@ -32,5 +34,18 @@
 				{df.format(trackpoint.item.time)}
 			</div>
 		{/if}
+		<Button
+			class="w-full px-2 py-1 h-6 justify-start mt-0.5"
+			variant="secondary"
+			on:click={() => {
+				navigator.clipboard.writeText(
+					`${trackpoint.item.getLatitude().toFixed(6)}, ${trackpoint.item.getLongitude().toFixed(6)}`
+				);
+				trackpoint.hide?.();
+			}}
+		>
+			<ClipboardCopy size="16" class="mr-1" />
+			{$_('menu.copy_coordinates')}
+		</Button>
 	</Card.Content>
 </Card.Root>
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 5c213d09..2e832b17 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -79,7 +79,8 @@
         "hide": "Hide",
         "unhide": "Unhide",
         "center": "Center",
-        "open_in": "Open in"
+        "open_in": "Open in",
+        "copy_coordinates": "Copy coordinates"
     },
     "toolbar": {
         "routing": {
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
index 0aa57baf..ae53bdf4 100644
--- a/website/src/routes/[[language]]/app/+page.svelte
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -8,6 +8,7 @@
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import CoordinatesPopup from '$lib/components/CoordinatesPopup.svelte';
 	import Resizer from '$lib/components/Resizer.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { observeFilesFromDatabase, settings } from '$lib/db';
@@ -99,6 +100,7 @@
 			<StreetViewControl />
 			<LayerControl />
 			<GPXLayers />
+			<CoordinatesPopup />
 			<Toaster richColors />
 			{#if !$treeFileView}
 				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">