adds split gpx function

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -55,6 +55,10 @@
             segment: number;
             event: M.MapMouseEvent;
         }) => void;
+        onsegmentclick?: (data: {
+            segment: number;
+            event: M.MapMouseEvent;
+        }) => void;
         onselect?: (trail: Trail) => void;
         onunselect?: (trail: Trail) => void;
         onfullscreen?: () => void;
@@ -87,6 +91,7 @@
         clusterTrails = false,
         onmarkerdragend,
         onsegmentdragend,
+        onsegmentclick,
         onselect,
         onunselect,
         onfullscreen,
@@ -408,7 +413,7 @@
                 activeTrail = trails.findIndex((t) => t.id == trail.id);
             };
             layers[id].listener.onMouseMove = moveCrosshairToCursorPosition;
-            layers[id].listener.onMouseDown = (e) => handDragStart(e, id);
+            layers[id].listener.onMouseDown = (e) => handleDragStart(e, id);
 
             map.on("mouseenter", id, layers[id].listener.onEnter);
             map.on("mouseleave", id, layers[id].listener.onLeave);
@@ -529,7 +534,7 @@
         elevationMarker.setLngLat(e.lngLat);
     }
 
-    function handDragStart(e: M.MapMouseEvent, id: string) {
+    function handleDragStart(e: M.MapMouseEvent, id: string) {
         if (
             !drawing ||
             (e.originalEvent.target as HTMLElement | null)?.classList.contains(
@@ -549,13 +554,21 @@
         }
 
         map?.on("mousemove", moveElevationMarkerToCursorPosition);
-        map?.once("mouseup", handleDragEnd);
+        map?.once("mouseup", (e2) => handleDragEnd(e2, e));
     }
 
-    function handleDragEnd(e: M.MapMouseEvent) {
+    function handleDragEnd(end: M.MapMouseEvent, start: M.MapMouseEvent) {
         map?.off("mousemove", moveElevationMarkerToCursorPosition);
         epc?.hideCrosshair();
-        onsegmentdragend?.({ segment: draggingSegment!, event: e });
+        const distanceDragged = Math.sqrt(
+            Math.pow(end.originalEvent.x - start.originalEvent.x, 2) +
+                Math.pow(end.originalEvent.y - start.originalEvent.y, 2),
+        );
+        if (distanceDragged < 0.5) {
+            onsegmentclick?.({ segment: draggingSegment!, event: end });
+        } else {
+            onsegmentdragend?.({ segment: draggingSegment!, event: end });
+        }
         draggingSegment = null;
     }
 
@@ -1096,7 +1109,7 @@
             map!.getCanvas().style.cursor = "";
         });
 
-        map.on("load", () => {            
+        map.on("load", () => {
             initMap(true);
             layerManager.init();
             oninit?.(map!);

web/src/lib/components/trail/route_editor.svelte

@@ -121,7 +121,7 @@
                 recalculateElevationData = false;
                 crop = false;
                 editRoute = !editRoute;
-            }}><i class="fa fa-pen text-sm"></i></button
+            }}><i class="fa fa-route text-sm"></i></button
         >
         <button
             class="btn-icon"

web/src/lib/stores/valhalla_store.svelte.ts

@@ -1,12 +1,14 @@
 import GPX from "$lib/models/gpx/gpx";
 import type Track from "$lib/models/gpx/track";
 import TrackSegment from "$lib/models/gpx/track-segment";
+import { haversineDistance } from "$lib/models/gpx/utils";
 import Waypoint from "$lib/models/gpx/waypoint";
 import { type RoutingOptions, type ValhallaAnchor, type ValhallaHeightResponse, type ValhallaRouteResponse } from "$lib/models/valhalla";
 import { APIError } from "$lib/util/api_util";
 import { decodePolyline, encodePolyline } from "$lib/util/polyline_util";
-import { get } from "svelte/store";
+import type { LngLat } from "maplibre-gl";
 import { _ } from "svelte-i18n";
+import { get } from "svelte/store";
 
 
 const emtpyTrack: Track = { trkseg: [] }
@@ -138,7 +140,7 @@ export function reverseRoute() {
             ._content.getElementsByTagName("h5")[0];
         if (anchorPopupHeading) {
             anchorPopupHeading.textContent =
-                get(_)("valhallaStore.route-point") + " #" + (i + 1);
+                get(_)("route-point") + " #" + (i + 1);
         }
     });
 }
@@ -161,6 +163,31 @@ export async function recalculateHeight() {
     await valhallaStore.route.correctElevation();
 }
 
+export async function splitSegment(index: number, pos: LngLat) {
+    let seg = valhallaStore.route.trk?.at(0)?.trkseg?.at(index);
+    if (!seg || !seg.trkpt) {
+        return;
+    }
+    const points = seg.trkpt;
+
+    let bestSplitIndex: number = 0
+    let minDistance = Infinity
+    for (let i = 1; i < points.length; i++) {
+        const pt = points[i]
+        const dist = haversineDistance(pt.$.lat!, pt.$.lon!, pos.lat, pos.lng);
+
+        if (dist < minDistance) {
+            bestSplitIndex = i
+        }
+    }
+
+    const firstSegmentPoints = [...points.slice(0, index)];
+    const secondSegmentPoints = [...points.slice(index)];
+
+    seg.trkpt = firstSegmentPoints;
+    insertIntoRoute(secondSegmentPoints, index)
+}
+
 export function normalizeRouteTime() {
     let currentTime = new Date();