fix coordinates popup

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

@@ -1,20 +1,18 @@
 <script lang="ts">
-    import { map } from '$lib/components/map/map.svelte';
+    import { map } from '$lib/components/map/map';
-    import { trackpointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
+    import { trackpointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
     import { TrackPoint } from 'gpx';
 
-    $effect(() => {
+    map.onLoad((map_) => {
-        if (map.current) {
+        map_.on('contextmenu', (e) => {
-            map.current.on('contextmenu', (e) => {
+            trackpointPopup?.setItem({
-                trackpointPopup?.setItem({
+                item: new TrackPoint({
-                    item: new TrackPoint({
+                    attributes: {
-                        attributes: {
+                        lat: e.lngLat.lat,
-                            lat: e.lngLat.lat,
+                        lon: e.lngLat.lng,
-                            lon: e.lngLat.lng,
+                    },
-                        },
+                }),
-                    }),
-                });
             });
-        }
+        });
     });
 </script>

website/src/lib/components/map/custom-control/CustomControl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import CustomControl from './CustomControl';
+    import CustomControl from './custom-control';
     import { map } from '$lib/components/map/map';
     import { onMount, type Snippet } from 'svelte';
 

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

@@ -1,33 +1,31 @@
 <script lang="ts">
-    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { onDestroy, onMount } from 'svelte';
-    // import { map, gpxLayers } from '$lib/stores';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
-    // import { GPXLayer } from './gpx-layer';
     import { DistanceMarkers } from '$lib/components/map/gpx-layer/distance-markers';
     import { StartEndMarkers } from '$lib/components/map/gpx-layer/start-end-markers';
-    // import { onDestroy } from 'svelte';
+    import { createPopups, removePopups } from '$lib/components/map/gpx-layer/gpx-layer-popup';
-    // import { createPopups, removePopups } from './GPXLayerPopup';
+    import { map } from '$lib/components/map/map';
 
     let distanceMarkers: DistanceMarkers;
     let startEndMarkers: StartEndMarkers;
 
-    // $: if ($map) {
-    //     createPopups($map);
-    // }
-
     onMount(() => {
         gpxLayers.init();
         startEndMarkers = new StartEndMarkers();
         distanceMarkers = new DistanceMarkers();
     });
 
+    map.onLoad((map_) => {
+        createPopups(map_);
+    });
+
     onDestroy(() => {
-        // removePopups();
         if (startEndMarkers) {
             startEndMarkers.remove();
         }
         if (distanceMarkers) {
             distanceMarkers.remove();
         }
+        removePopups();
     });
 </script>

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

@@ -5,15 +5,12 @@
     import WithUnits from '$lib/components/WithUnits.svelte';
     import { Compass, Mountain, Timer } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import type { PopupItem } from '$lib/components/map/map';
+    import type { PopupItem } from '$lib/components/map/map-popup';
 
     let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
 </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" />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
     import LayerTree from './LayerTree.svelte';
-    import { OverpassLayer } from './OverpassLayer';
+    import { OverpassLayer } from './overpass-layer';
     import { Separator } from '$lib/components/ui/separator';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import { Layers } from '@lucide/svelte';
@@ -10,6 +10,7 @@
     import { map } from '$lib/components/map/map';
     import { customBasemapUpdate, getLayers } from './utils';
     import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
+    import { untrack } from 'svelte';
 
     let container: HTMLDivElement;
     let overpassLayer: OverpassLayer;
@@ -50,7 +51,7 @@
 
     $effect(() => {
         if ($map && ($currentBasemap || $customBasemapUpdate)) {
-            setStyle();
+            untrack(() => setStyle());
         }
     });
 
@@ -127,7 +128,7 @@
 
     $effect(() => {
         if ($map && $currentOverlays && $opacities) {
-            updateOverlays();
+            untrack(() => updateOverlays());
         }
     });
 
@@ -137,7 +138,12 @@
         }
         overpassLayer = new OverpassLayer(_map);
         overpassLayer.add();
-        _map.on('style.import.load', updateOverlays);
+        let first = true;
+        _map.on('style.import.load', () => {
+            if (!first) return;
+            first = false;
+            updateOverlays();
+        });
     });
 
     let open = $state(false);

website/src/lib/components/map/street-view-control/StreetViewControl.svelte

@@ -2,11 +2,9 @@
     import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
     import { map } from '$lib/components/map/map';
     import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
-    import Tooltip from '$lib/components/Tooltip.svelte';
-    import { Toggle } from '$lib/components/ui/toggle';
     import { PersonStanding, X } from '@lucide/svelte';
-    import { MapillaryLayer } from './Mapillary';
+    import { MapillaryLayer } from './mapillary';
-    import { GoogleRedirect } from './Google';
+    import { GoogleRedirect } from './google';
     import { settings } from '$lib/logic/settings';
     import { i18n } from '$lib/i18n.svelte';
     import { onMount } from 'svelte';

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

@@ -40,7 +40,7 @@
     import { selection } from '$lib/logic/selection';
     import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions';
     import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-    import { RoutingControls, routingControls } from './RoutingControls';
+    import { RoutingControls, routingControls } from './routing-controls';
 
     let {
         minimized = $bindable(false),

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

@@ -2,7 +2,7 @@
     import * as Card from '$lib/components/ui/card';
     import { Button } from '$lib/components/ui/button';
     import Shortcut from '$lib/components/Shortcut.svelte';
-    import { canChangeStart } from './RoutingControls';
+    import { canChangeStart } from './routing-controls';
     import { CirclePlay, Trash2 } from '@lucide/svelte';
 
     import { i18n } from '$lib/i18n.svelte';

website/src/lib/components/toolbar/tools/scissors/Scissors.svelte

@@ -10,7 +10,7 @@
     import { map } from '$lib/components/map/map';
     import { get } from 'svelte/store';
     import { i18n } from '$lib/i18n.svelte';
-    import { onDestroy, tick } from 'svelte';
+    import { onDestroy, onMount, untrack } from 'svelte';
     import { Crop } from '@lucide/svelte';
     import { SplitControls } from './split-controls';
     import { getURLForLanguage } from '$lib/utils';
@@ -23,28 +23,24 @@
     } = $props();
 
     let splitControls: SplitControls | undefined = undefined;
-    let canCrop = $state(false);
-
-    $effect(() => {
-        if ($map) {
-            if (splitControls) {
-                splitControls.destroy();
-            }
-            splitControls = new SplitControls($map);
-        }
-    });
 
     let validSelection = $derived(
         $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
             $gpxStatistics.local.points.length > 0
     );
+    let maxSliderValue = $derived(
+        validSelection && $gpxStatistics.local.points.length > 0
+            ? $gpxStatistics.local.points.length - 1
+            : 1
+    );
+    let sliderValues = $derived([0, maxSliderValue]);
+    let canCrop = $derived(sliderValues[0] != 0 || sliderValues[1] != maxSliderValue);
 
-    let maxSliderValue = $state(1);
+    onMount(() => {
-    let sliderValues = $state([0, 1]);
+        if ($map) {
-
+            splitControls = new SplitControls($map);
-    function updateCanCrop() {
+        }
-        canCrop = sliderValues[0] != 0 || sliderValues[1] != maxSliderValue;
+    });
-    }
 
     function updateSlicedGPXStatistics() {
         if (validSelection && canCrop) {
@@ -64,26 +60,9 @@
         }
     }
 
-    async function updateSliderLimits() {
-        if (validSelection && $gpxStatistics.local.points.length > 0) {
-            maxSliderValue = $gpxStatistics.local.points.length - 1;
-        } else {
-            maxSliderValue = 1;
-        }
-        await tick();
-        sliderValues = [0, maxSliderValue];
-    }
-
-    $effect(() => {
-        if ($gpxStatistics.local.points.length - 1 != maxSliderValue) {
-            updateSliderLimits();
-        }
-    });
-
     $effect(() => {
         if (sliderValues) {
-            updateCanCrop();
+            untrack(() => updateSlicedGPXStatistics());
-            updateSlicedGPXStatistics();
         }
     });
 
@@ -93,8 +72,7 @@
             ($slicedGPXStatistics[1] !== sliderValues[0] ||
                 $slicedGPXStatistics[2] !== sliderValues[1])
         ) {
-            updateSliderValues();
+            untrack(() => updateSliderValues());
-            updateCanCrop();
         }
     });
 
@@ -102,7 +80,6 @@
         $slicedGPXStatistics = undefined;
         if (splitControls) {
             splitControls.destroy();
-            splitControls = undefined;
         }
     });
 </script>

website/src/lib/logic/file-state.ts

@@ -1,4 +1,4 @@
-import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
+import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/simplify';
 import { db, type Database } from '$lib/db';
 import { liveQuery } from 'dexie';
 import { GPXFile } from 'gpx';

website/src/routes/[[language]]/app/+page.svelte

@@ -8,7 +8,7 @@
     import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
     import StreetViewControl from '$lib/components/map/street-view-control/StreetViewControl.svelte';
     import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
-    // import CoordinatesPopup from '$lib/components/map/CoordinatesPopup.svelte';
+    import CoordinatesPopup from '$lib/components/map/CoordinatesPopup.svelte';
     import Resizer from '$lib/components/Resizer.svelte';
     import { Toaster } from '$lib/components/ui/sonner';
     import { languages } from '$lib/languages';
@@ -102,7 +102,7 @@
             <StreetViewControl />
             <LayerControl />
             <GPXLayers />
-            <!-- <CoordinatesPopup /> -->
+            <CoordinatesPopup />
             <Toaster richColors />
             {#if !$treeFileView}
                 <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">