fix(map): stop reprojecting routes on every pan frame

Both the index and route-detail maps bound adjustTrailStrokes to 'move',
reprojecting every route polyline vertex per frame. Pan doesn't change the
SVG scale or stroke width and Leaflet translates the renderer pane natively,
so the per-frame reprojection was wasted work that made touch panning crawl
when many routes were visible. Gate it on an actual zoom change; zoom
gestures still step zoom per frame, so constant stroke width is preserved.

Author: polybjorn

CHANGELOG.md

@@ -32,6 +32,7 @@ All notable changes to Ferd are recorded here. The format follows [Keep a Change
 - The navigation tabs, Add, and Menu buttons use one larger size at every width instead of shrinking on narrow screens, and the space above page content is tighter and no longer jumps when the window crosses a breakpoint.
 
 ### Fixed
+- Panning a map with routes visible is no longer sluggish on touch devices (and smoother on desktop): route geometry is re-projected only when the zoom changes, so a pure pan falls back to the map's native cheap translate instead of reprojecting every route vertex on each frame.
 - Index map: place pins no longer vanish on the right side of the map after the window is widened. The marker canvas now resizes with the map instead of holding its initial width and clipping pins past it.
 - Opening a large multi-segment route no longer flashes and re-fits the map a second or two in: the elevation area reserves its height up front instead of expanding once the GPX finishes parsing.
 - Very large routes (continental routes with tens of thousands of points, whether one track or many) open and pan smoothly in the detail view instead of stalling: map geometry thins to the current zoom, elevation profiles are sampled down, and route lines hold a constant width through zoom.

index.html

@@ -5208,6 +5208,27 @@
       }
     }
 
+    // Bind stroke-fixup to map motion. Pan-only 'move' frames don't change
+    // zoom, so the SVG scale and stroke widths are unchanged and Leaflet
+    // translates the renderer pane natively - reprojecting every route vertex
+    // per pan frame is wasted work that makes touch panning crawl when many
+    // routes are visible. Only reproject when the zoom actually changed (zoom
+    // gestures: desktop smooth-wheel, mobile pinch, both step zoom per frame).
+    // A trailing pass on zoomend/moveend guarantees correctness at rest.
+    function bindTrailStrokeMotion(map) {
+      let lastZoom = map.getZoom();
+      map.on('move', function () {
+        const z = map.getZoom();
+        if (z === lastZoom) return;
+        lastZoom = z;
+        adjustTrailStrokes();
+      });
+      map.on('zoomend moveend', function () {
+        lastZoom = map.getZoom();
+        adjustTrailStrokes();
+      });
+    }
+
     // Index-map route highlight. Clicking a route flags it as selected: it
     // fattens, goes fully opaque, and jumps to the front while the rest dim
     // back, so it stands out where several routes overlap. Style-based, so it
@@ -5595,8 +5616,7 @@
       // by the time we run, the SVG renderer has already applied its new
       // CSS scale transform - we read the freshest value to counter-scale
       // against. Also covers pan-only frames.
-      map.on('move', adjustTrailStrokes);
-      map.on('zoomend moveend', adjustTrailStrokes);
+      bindTrailStrokeMotion(map);
       map.on('zoomanim', function() {
         const start = performance.now();
         const tick = () => {
@@ -8810,8 +8830,7 @@
       // by the time we run, the SVG renderer has already applied its new
       // CSS scale transform - we read the freshest value to counter-scale
       // against. Also covers pan-only frames.
-      map.on('move', adjustTrailStrokes);
-      map.on('zoomend moveend', adjustTrailStrokes);
+      bindTrailStrokeMotion(map);
       map.on('zoomanim', function() {
         const start = performance.now();
         const tick = () => {