fix popups

website/src/lib/components/map/CoordinatesPopup.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { map } from '$lib/components/map/map';
     import { trackpointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
-    import { TrackPoint } from 'gpx';
 
     map.onLoad((map_) => {
         map_.on('contextmenu', (e) => {
@@ -16,12 +15,8 @@
                 return;
             }
             trackpointPopup?.setItem({
-                item: new TrackPoint({
-                    attributes: {
-                        lat: e.lngLat.lat,
-                        lon: e.lngLat.lng,
-                    },
-                }),
+                kind: 'trackpoint',
+                item: { lng: e.lngLat.lng, lat: e.lngLat.lat },
             });
         });
     });

website/src/lib/components/map/MapPopup.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { TrackPoint, Waypoint } from 'gpx';
     import WaypointPopup from '$lib/components/map/gpx-layer/WaypointPopup.svelte';
     import TrackpointPopup from '$lib/components/map/gpx-layer/TrackpointPopup.svelte';
     import OverpassPopup from '$lib/components/map/layer-control/OverpassPopup.svelte';
@@ -23,9 +22,9 @@
 
 <div bind:this={container}>
     {#if $item}
-        {#if $item.item instanceof Waypoint}
+        {#if $item.kind === 'waypoint'}
             <WaypointPopup waypoint={$item} />
-        {:else if $item.item instanceof TrackPoint}
+        {:else if $item.kind === 'trackpoint'}
             <TrackpointPopup trackpoint={$item} />
         {:else}
             <OverpassPopup poi={$item} />

website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte

@@ -2,14 +2,13 @@
     import { Button } from '$lib/components/ui/button';
     import { ClipboardCopy } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import type { Coordinates } from 'gpx';
 
     let {
         coordinates,
         onCopy = () => {},
         class: className = '',
     }: {
-        coordinates: Coordinates;
+        coordinates: { lng: number; lat: number };
         onCopy?: () => void;
         class?: string;
     } = $props();
@@ -20,7 +19,7 @@
     variant="outline"
     onclick={() => {
         navigator.clipboard.writeText(
-            `${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
+            `${coordinates.lat.toFixed(6)}, ${coordinates.lng.toFixed(6)}`
         );
         onCopy();
     }}

website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import type { TrackPoint } from 'gpx';
     import { Button } from '$lib/components/ui/button';
     import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
     import * as Card from '$lib/components/ui/card';
@@ -7,18 +6,17 @@
     import { Compass, Earth, Mountain, Timer } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import type { PopupItem } from '$lib/components/map/map-popup';
+    import type { TrackpointDetails } from '$lib/engine';
     import { map } from '$lib/components/map/map';
 
-    let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
+    let { trackpoint }: { trackpoint: PopupItem<Pick<TrackpointDetails, 'lng' | 'lat'> & Partial<TrackpointDetails>> } = $props();
 </script>
 
 <Card.Root class="border-none shadow-md text-base p-2">
     <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;
+            {trackpoint.item.lat.toFixed(6)}&deg; {trackpoint.item.lng.toFixed(6)}&deg;
         </div>
         {#if trackpoint.item.ele !== undefined}
             <div class="flex flex-row items-center gap-1">
@@ -26,14 +24,14 @@
                 <WithUnits value={trackpoint.item.ele} type="elevation" />
             </div>
         {/if}
-        {#if trackpoint.item.time}
+        {#if trackpoint.item.time !== undefined}
             <div class="flex flex-row items-center gap-1">
                 <Timer size="14" />
-                {i18n.df.format(trackpoint.item.time)}
+                {i18n.df.format(new Date(trackpoint.item.time))}
             </div>
         {/if}
         <CopyCoordinates
-            coordinates={trackpoint.item.attributes}
+            coordinates={trackpoint.item}
             onCopy={() => trackpoint.hide?.()}
             class="mt-0.5"
         />
@@ -41,7 +39,7 @@
             <Button
                 variant="outline"
                 class="justify-start"
-                href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
+                href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.lat.toFixed(5)}/${trackpoint.item.lng.toFixed(5)}`}
                 target="_blank"
             >
                 <Earth size="14" />

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

@@ -9,21 +9,23 @@
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
     import { i18n } from '$lib/i18n.svelte';
     import sanitizeHtml from 'sanitize-html';
-    import type { Waypoint } from 'gpx';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-    import { fileActions } from '$lib/logic/file-actions';
     import type { PopupItem } from '$lib/components/map/map-popup';
-    import { selection } from '$lib/logic/selection';
-    import { ListFileItem } from '$lib/components/file-list/file-list';
+    import { engine, type WaypointDetails } from '$lib/engine';
+    import { hasSelectionWithin } from '$lib/selection-helpers';
 
     let {
         waypoint,
     }: {
-        waypoint: PopupItem<Waypoint>;
+        waypoint: PopupItem<WaypointDetails>;
     } = $props();
 
+    const { selection } = engine;
+
     let selected = $derived(
-        waypoint.fileId ? $selection.hasAnyChildren(new ListFileItem(waypoint.fileId)) : false
+        waypoint.fileId
+            ? hasSelectionWithin($selection, { type: 'file', fileId: waypoint.fileId })
+            : false
     );
     let symbolKey = $derived(waypoint ? getSymbolKey(waypoint.item.sym) : undefined);
 
@@ -44,9 +46,9 @@
 <Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
     <Card.Header class="p-0 gap-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}
+            {#if waypoint.item.link?.href}
+                <a href={waypoint.item.link.href} target="_blank">
+                    {waypoint.item.name ?? waypoint.item.link.href}
                     <ExternalLink size="12" class="inline-block mb-1.5" />
                 </a>
             {:else}
@@ -68,13 +70,9 @@
                 </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}
+            {waypoint.item.lat.toFixed(6)}&deg; {waypoint.item.lng.toFixed(6)}&deg;
+            <Dot size="16" />
+            <WithUnits value={waypoint.item.ele} type="elevation" />
         </div>
         <ScrollArea class="flex flex-col max-h-[30dvh]">
             {#if waypoint.item.desc}
@@ -85,13 +83,13 @@
             {/if}
         </ScrollArea>
         <div class="mt-2 flex flex-col gap-1">
-            <CopyCoordinates coordinates={waypoint.item.attributes} />
+            <CopyCoordinates coordinates={waypoint.item} />
             {#if $currentTool === Tool.WAYPOINT && selected}
                 <Button
                     variant="outline"
                     onclick={() => {
                         if (waypoint.fileId) {
-                            fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
+                            engine.deleteWaypoint(waypoint.fileId, waypoint.item.id);
                             waypoint.hide?.();
                         }
                     }}

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

@@ -8,7 +8,8 @@ import maplibregl, {
 } from 'maplibre-gl';
 import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
-import { getClosestLinePoint, getElevation, loadSVGIcon } from '$lib/utils';
+import { closestPointIndex } from '$lib/closest-point';
+import { getElevation, loadSVGIcon } from '$lib/utils';
 import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
 import { MapPin, Square } from 'lucide-static';
 import { getSymbolKey, symbols } from '$lib/assets/symbols';
@@ -18,7 +19,6 @@ import { isCovered, hasSelectionWithin, type FileTreeNode } from '$lib/selection
 import { isSegmentHidden, isWaypointHidden } from '$lib/file-visibility';
 import { settings } from '$lib/logic/settings';
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
-import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
@@ -398,18 +398,18 @@ export class GPXLayer {
 
     layerOnMouseMove(e: any) {
         if (e.originalEvent.shiftKey) {
-            let trackIndex = e.features[0].properties.trackIndex;
-            let segmentIndex = e.features[0].properties.segmentIndex;
-
-            // TODO needs the trackpoints of the previous implementation (see oldFile)
-            // const file = null;
-            // 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 });
-            // }
+            const { segmentId } = e.features[0].properties;
+            const lngLat = { lng: e.lngLat.lng, lat: e.lngLat.lat };
+            const index = closestPointIndex(engine.segmentCoordinates(segmentId), lngLat);
+            const trackpoint =
+                index === undefined ? undefined : engine.trackpoint(this.fileId, segmentId, index);
+            if (trackpoint) {
+                trackpointPopup?.setItem({
+                    item: trackpoint,
+                    kind: 'trackpoint',
+                    fileId: this.fileId,
+                });
+            }
         }
     }
 
@@ -471,15 +471,18 @@ export class GPXLayer {
             return;
         }
 
-        // TODO the popup needs the waypoint of the previous implementation (see oldFile)
-        // let waypoint = this.oldFile?.wpt[e.features![0].properties!.waypointIndex];
-        // if (waypoint) {
-        //     waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
-        // }
+        this.showWaypointPopup(e.features![0].properties!.waypointId);
 
         mapCursor.notify(MapCursorState.WAYPOINT_HOVER, true);
     }
 
+    showWaypointPopup(waypointId: string) {
+        const waypoint = engine.waypoint(this.fileId, waypointId);
+        if (waypoint) {
+            waypointPopup?.setItem({ item: waypoint, kind: 'waypoint', fileId: this.fileId });
+        }
+    }
+
     waypointLayerOnMouseLeave() {
         mapCursor.notify(MapCursorState.WAYPOINT_HOVER, false);
     }
@@ -487,19 +490,14 @@ export class GPXLayer {
     waypointLayerOnClick(e: MapLayerMouseEvent) {
         e.preventDefault();
 
-        const { waypointIndex, waypointId } = e.features![0].properties!;
-        // TODO the popup and the waypoint tool need the waypoint of the previous implementation
+        const { waypointId } = e.features![0].properties!;
         if (get(currentTool) === Tool.WAYPOINT) {
             if (this.selected) {
                 if (e.originalEvent.shiftKey) {
-                    // TODO
-                    // fileActions.deleteWaypoint(this.fileId, waypointIndex);
+                    engine.deleteWaypoint(this.fileId, waypointId);
                 } else {
                     engine.selectWaypoints(this.fileId, [waypointId]);
-                    // TODO
-                    // if (waypoint) {
-                    //     selectedWaypoint.set([waypoint, this.fileId]);
-                    // }
+                    selectedWaypoint.set({ fileId: this.fileId, id: waypointId });
                 }
             } else {
                 if (get(treeFileView)) {
@@ -507,10 +505,7 @@ export class GPXLayer {
                 } else {
                     engine.select([this.fileId]);
                 }
-                // TODO
-                // if (waypoint) {
-                //     selectedWaypoint.set([waypoint, this.fileId]);
-                // }
+                selectedWaypoint.set({ fileId: this.fileId, id: waypointId });
             }
         } else {
             if (get(treeFileView)) {
@@ -524,10 +519,7 @@ export class GPXLayer {
                 if (!this.selected) {
                     engine.select([this.fileId]);
                 }
-                // TODO
-                // if (waypoint) {
-                //     waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
-                // }
+                this.showWaypointPopup(waypointId);
             }
         }
     }
@@ -622,23 +614,27 @@ export class GPXLayer {
             return;
         }
 
+        // the dragged waypoint, as it is in the features of the source
+        const waypointId =
+            this.currentWaypointData?.features[this.draggedWaypointIndex].properties?.waypointId;
         getElevation([
             {
                 lat: e.lngLat.lat,
                 lon: e.lngLat.lng,
             },
-        ]).then((ele) => {
+        ]).then(async (ele) => {
             if (this.draggedWaypointIndex === null) {
                 return;
             }
-            fileActionManager.applyToFile(this.fileId, (file) => {
-                let wpt = file.wpt[this.draggedWaypointIndex!];
-                wpt.setCoordinates({
-                    lat: e.lngLat.lat,
-                    lon: e.lngLat.lng,
-                });
-                wpt.ele = ele[0];
-            });
+            if (waypointId) {
+                await engine.moveWaypoint(
+                    this.fileId,
+                    waypointId,
+                    e.lngLat.lng,
+                    e.lngLat.lat,
+                    ele[0]
+                );
+            }
             this.draggedWaypointIndex = null;
         });
     }

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -4,10 +4,10 @@
     import { PencilLine, MapPin } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-    import type { WaypointType } from 'gpx';
     import type { PopupItem } from '$lib/components/map/map-popup';
-    import { fileActions } from '$lib/logic/file-actions';
-    import { selection } from '$lib/logic/selection';
+    import { engine } from '$lib/engine';
+    import { selectionSize } from '$lib/selection-helpers';
+    import { getElevation } from '$lib/utils';
 
     let {
         poi,
@@ -27,28 +27,22 @@
         return '';
     });
 
-    function addToFile() {
+    const { selection } = engine;
+
+    async function addToFile() {
         const desc = Object.entries(tags)
             .map(([key, value]) => `${key}: ${value}`)
             .join('\n');
-        let wpt: WaypointType = {
-            attributes: {
-                lat: poi.item.lat,
-                lon: poi.item.lon,
-            },
-            name: name,
-            desc: desc,
-            cmt: desc,
-            sym: poi.item.sym,
-        };
-        if (tags.website) {
-            wpt.link = {
-                attributes: {
-                    href: tags.website,
-                },
-            };
-        }
-        fileActions.addOrUpdateWaypoint(wpt);
+        const [ele] = await getElevation([{ lat: poi.item.lat, lon: poi.item.lng }]);
+        await engine.newWaypoint({
+            lng: poi.item.lng,
+            lat: poi.item.lat,
+            ele,
+            name,
+            desc,
+            icon: poi.item.sym ?? '',
+            link: tags.website ?? '',
+        });
     }
 </script>
 
@@ -58,7 +52,7 @@
             <div class="flex flex-col">
                 <p>{name}</p>
                 <div class="text-muted-foreground text-xs font-normal">
-                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
+                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lng.toFixed(6)}&deg;
                 </div>
             </div>
 
@@ -111,7 +105,7 @@
             size="sm"
             class="mt-1 justify-start"
             variant="outline"
-            disabled={$selection.size === 0}
+            disabled={selectionSize($selection) === 0}
             onclick={addToFile}
         >
             <MapPin size="14" />

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -143,6 +143,7 @@ export class OverpassLayer {
 
     onHover(e: any) {
         this.popup.setItem({
+            kind: 'overpass',
             item: {
                 ...e.features[0].properties,
                 sym: overpassQueryData[e.features[0].properties.query].symbol ?? '',
@@ -235,7 +236,7 @@ export class OverpassLayer {
                             properties: {
                                 id: element.id,
                                 lat: element.center ? element.center.lat : element.lat,
-                                lon: element.center ? element.center.lon : element.lon,
+                                lng: element.center ? element.center.lon : element.lon,
                                 query: query,
                                 icon: `overpass-${query}`,
                                 tags: element.tags,

website/src/lib/components/map/map-popup.ts

@@ -1,11 +1,13 @@
-import { TrackPoint, Waypoint } from 'gpx';
 import maplibregl from 'maplibre-gl';
 import { mount, tick, unmount } from 'svelte';
 import { get, writable, type Writable } from 'svelte/store';
 import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
 
-export type PopupItem<T = Waypoint | TrackPoint | any> = {
+export type PopupItem<T = any> = {
+    /** Has a position (`lng` and `lat`). */
     item: T;
+    /** What the item is: a `WaypointDetails`, a `TrackpointDetails` or an Overpass element. */
+    kind: 'waypoint' | 'trackpoint' | 'overpass';
     fileId?: string;
     hide?: () => void;
 };
@@ -77,8 +79,6 @@ export class MapPopup {
         if (item === null) {
             return new maplibregl.LngLat(0, 0);
         }
-        return item.item instanceof Waypoint || item.item instanceof TrackPoint
-            ? item.item.getCoordinates()
-            : new maplibregl.LngLat(item.item.lon, item.item.lat);
+        return new maplibregl.LngLat(item.item.lng, item.item.lat);
     }
 }