From 396e64b5a6799bfd2d057c5018fcdc5f3a6bcc0d Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sat, 2 Aug 2025 18:35:50 +0200
Subject: [PATCH] fixes race condition in route edit menu

---
 .../lib/components/trail/route_editor.svelte  | 30 +++----
 web/src/lib/stores/valhalla_store.svelte.ts   |  5 +-
 web/src/routes/trail/edit/[id]/+page.svelte   | 89 ++++++++++---------
 3 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/web/src/lib/components/trail/route_editor.svelte b/web/src/lib/components/trail/route_editor.svelte
index 7605442e..7b0ca8b9 100644
--- a/web/src/lib/components/trail/route_editor.svelte
+++ b/web/src/lib/components/trail/route_editor.svelte
@@ -12,6 +12,7 @@
     import Select, { type SelectItem } from "../base/select.svelte";
     import Slider from "../base/slider.svelte";
     import Toggle from "../base/toggle.svelte";
+    import { tick } from "svelte";
     interface Props {
         options: RoutingOptions;
         onReverse: () => void;
@@ -114,6 +115,14 @@
                 break;
         }
     }
+
+    async function togglePanels(_edit: boolean, _crop: boolean, _recalc: boolean) {        
+        recalculateElevationData = _recalc;
+        crop = _crop;
+        editRoute = _edit
+        await tick()
+        onCropToggle(_crop);
+    }
 </script>
 
 <div class="flex gap-x-2 items-start">
@@ -122,34 +131,19 @@
             class="btn-icon"
             class:bg-secondary-hover={editRoute}
             aria-label="edit route"
-            onclick={() => {
-                recalculateElevationData = false;
-                crop = false;
-                editRoute = !editRoute;
-                onCropToggle(false);
-            }}><i class="fa fa-route text-sm"></i></button
+            onclick={async () => await togglePanels(!editRoute, false, false)}><i class="fa fa-route text-sm"></i></button
         >
         <button
             class="btn-icon"
             class:bg-secondary-hover={crop}
             aria-label="crop route"
-            onclick={() => {
-                recalculateElevationData = false;
-                crop = !crop;
-                editRoute = false;
-                onCropToggle(crop);
-            }}><i class="fa fa-scissors text-sm"></i></button
+            onclick={async () => await togglePanels(false, !crop, false)}><i class="fa fa-scissors text-sm"></i></button
         >
         <button
             class="btn-icon"
             class:bg-secondary-hover={recalculateElevationData}
             aria-label="recalculate elevation data"
-            onclick={() => {
-                recalculateElevationData = !recalculateElevationData;
-                crop = false;
-                editRoute = false;
-                onCropToggle(false);
-            }}><i class="fa fa-mountain text-sm"></i></button
+            onclick={async () => await togglePanels(false, false, !recalculateElevationData)}><i class="fa fa-mountain text-sm"></i></button
         >
         <button
             class="btn-icon"
diff --git a/web/src/lib/stores/valhalla_store.svelte.ts b/web/src/lib/stores/valhalla_store.svelte.ts
index f300c7fe..0882c8bc 100644
--- a/web/src/lib/stores/valhalla_store.svelte.ts
+++ b/web/src/lib/stores/valhalla_store.svelte.ts
@@ -214,6 +214,8 @@ export async function recalculateHeight() {
 }
 
 export async function splitSegment(index: number, pos: LngLat) {
+    console.log(valhallaStore.route.features.duration);
+
     let seg = valhallaStore.route.trk?.at(0)?.trkseg?.at(index);
     if (!seg || !seg.trkpt) {
         return;
@@ -232,12 +234,13 @@ export async function splitSegment(index: number, pos: LngLat) {
         }
     }
 
-    const intersectionPoint = new Waypoint({ $: { lat: pos.lat, lon: pos.lng }, ele: points[bestSplitIndex].ele });
+    const intersectionPoint = new Waypoint({ ...points[bestSplitIndex], $: { lat: pos.lat, lon: pos.lng } });
     const firstSegmentPoints = [...points.slice(0, bestSplitIndex), intersectionPoint];
     const secondSegmentPoints = [intersectionPoint, ...points.slice(bestSplitIndex)];
 
     editRoute(index, firstSegmentPoints)
     insertIntoRoute(secondSegmentPoints, index + 1)
+
 }
 
 export function normalizeRouteTime() {
diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte
index b6ec772c..9e5284a1 100644
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -94,7 +94,7 @@
     import cryptoRandomString from "crypto-random-string";
     import { createForm } from "felte";
     import * as M from "maplibre-gl";
-    import { onMount, untrack } from "svelte";
+    import { onMount, tick, untrack } from "svelte";
     import { _ } from "svelte-i18n";
     import { backInOut } from "svelte/easing";
     import { fly, slide } from "svelte/transition";
@@ -548,7 +548,6 @@
     }
 
     function startDrawing() {
-        console.log("starting drawing...");
         if (!map) {
             return;
         }
@@ -561,32 +560,30 @@
     }
 
     async function stopDrawing() {
-        console.log("stopping drawing...");
-
         drawingActive = false;
-        // for (const anchor of valhallaStore.anchors) {
-        //     anchor.marker?.remove();
-        // }
-        // toggleCropMarkers(false);
-        // clearUndoRedoStack();
+        for (const anchor of valhallaStore.anchors) {
+            anchor.marker?.remove();
+        }
+        toggleCropMarkers(false);
+        clearUndoRedoStack();
 
-        // if (valhallaStore.route.trk?.at(0)?.trkseg?.at(0)?.trkpt?.at(0)) {
-        //     $formData.lat = valhallaStore.route.trk
-        //         ?.at(0)
-        //         ?.trkseg?.at(0)
-        //         ?.trkpt?.at(0)?.$.lat;
-        //     $formData.lon = valhallaStore.route.trk
-        //         ?.at(0)
-        //         ?.trkseg?.at(0)
-        //         ?.trkpt?.at(0)?.$.lon;
-        // }
+        if (valhallaStore.route.trk?.at(0)?.trkseg?.at(0)?.trkpt?.at(0)) {
+            $formData.lat = valhallaStore.route.trk
+                ?.at(0)
+                ?.trkseg?.at(0)
+                ?.trkpt?.at(0)?.$.lat;
+            $formData.lon = valhallaStore.route.trk
+                ?.at(0)
+                ?.trkseg?.at(0)
+                ?.trkpt?.at(0)?.$.lon;
+        }
 
-        // if ($formData.lat && $formData.lon) {
-        //     const r = await searchLocationReverse($formData.lat, $formData.lon);
-        //     if (r) {
-        //         setFields("location", r);
-        //     }
-        // }
+        if ($formData.lat && $formData.lon) {
+            const r = await searchLocationReverse($formData.lat, $formData.lon);
+            if (r) {
+                setFields("location", r);
+            }
+        }
     }
 
     async function handleMapClick(e: M.MapMouseEvent) {
@@ -922,17 +919,15 @@
     }
 
     function toggleCropMarkers(active: boolean) {
+        console.log("toggleCropMarkers", active);
         if (active) {
             cropStartMarker?.setOpacity("1");
             cropEndMarker?.setOpacity("1");
         } else {
             cropStartMarker?.setOpacity("0");
             cropEndMarker?.setOpacity("0");
-            const totals = valhallaStore.route.features;
-            $formData.distance = totals.distance;
-            $formData.duration = totals.duration / 1000;
-            $formData.elevation_gain = totals.elevationGain;
-            $formData.elevation_loss = totals.elevationLoss;
+
+            updateTotals(valhallaStore.route);
         }
     }
 
@@ -966,7 +961,6 @@
             cropStartMarker.setLngLat([0, 0]).addTo(map!);
             cropEndMarker.setLngLat([0, 0]).addTo(map!);
         }
-
         const [start, end] = range;
 
         const flatRoute = valhallaStore.route.flatten();
@@ -995,11 +989,8 @@
             flatRoute[endIndex],
             valhallaStore.route,
         );
-        const totals = croppedGPX.features;
-        $formData.distance = totals.distance;
-        $formData.duration = totals.duration / 1000;
-        $formData.elevation_gain = totals.elevationGain;
-        $formData.elevation_loss = totals.elevationLoss;
+
+        updateTotals(croppedGPX);
     }
 
     function confirmCrop() {
@@ -1043,11 +1034,7 @@
 
     function updateTrailWithRouteData() {
         overwriteGPX = true;
-        const totals = valhallaStore.route.features;
-        $formData.distance = totals.distance;
-        $formData.duration = totals.duration / 1000;
-        $formData.elevation_gain = totals.elevationGain;
-        $formData.elevation_loss = totals.elevationLoss;
+        updateTotals(valhallaStore.route);
         $formData.expand!.gpx_data = valhallaStore.route.toString();
 
         if (!$formData.id) {
@@ -1055,6 +1042,14 @@
         }
     }
 
+    function updateTotals(gpx: GPX) {
+        const totals = gpx.features;
+        $formData.distance = totals.distance;
+        $formData.duration = totals.duration / 1000;
+        $formData.elevation_gain = totals.elevationGain;
+        $formData.elevation_loss = totals.elevationLoss;
+    }
+
     function updateTrailOnMap() {
         mapTrail = [$formData as Trail];
     }
@@ -1155,16 +1150,16 @@
 
     function undoRouteEdit() {
         undo();
-        updateTrailWithRouteData();
         clearAnchors();
         initRouteAnchors(valhallaStore.route, true);
+        updateTrailWithRouteData();
     }
 
     function redoRouteEdit() {
         redo();
-        updateTrailWithRouteData();
         clearAnchors();
         initRouteAnchors(valhallaStore.route, true);
+        updateTrailWithRouteData();
     }
 </script>
 
@@ -1208,7 +1203,13 @@
             <button
                 class="btn-primary"
                 type="button"
-                onclick={drawingActive ? stopDrawing : startDrawing}
+                onclick={async () => {
+                    if (drawingActive) {
+                        await stopDrawing();
+                    } else {
+                        startDrawing();
+                    }
+                }}
             >
                 {$formData.expand?.gpx_data
                     ? drawingActive