trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
trails/openspec/changes/archive/2026-03-26-planner-route-interactions/tasks.md
Ullrich Schäfer ba044610b7
Add route interactions: click-to-split, drag-to-reshape, colored route rendering 
- Enrich BRouter response with per-point 3D coordinates and segment boundary
  tracking (EnrichedRoute interface)
- ColoredRoute component: plain, elevation gradient (green→yellow→red), and
  surface color modes with invisible wide polyline for click targeting
- Click-to-split: click on route polyline inserts waypoint at nearest point,
  mapped to correct segment via boundary indices
- MidpointHandles: draggable CircleMarkers at route segment midpoints for
  reshaping, hidden below zoom 12, opaque on hover
- Color mode toggle (select) synced via Yjs routeData
- i18n keys for color mode labels (en + de)
- Unit tests for segment boundary tracking (13 tests)
- E2E tests for enriched route response and color mode toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 22:36:42 +01:00

2.4 KiB
Raw Permalink Blame History

1. BRouter Data Pipeline

  • 1.1 Modify mergeGeoJsonSegments to preserve 3D coordinates (lon, lat, ele) and track segment boundary indices
  • 1.2 Add EnrichedRoute interface with coordinates, segmentBoundaries, surfaces, and stats
  • 1.3 Store enriched route data (including segment boundaries and surfaces) in Yjs routeData map
  • 1.4 Add tiledesc=true to BRouter requests and extract surface types from WayTags messages
  • 1.5 Write unit test for segment boundary tracking across multi-waypoint routes

2. Route Interaction (ghost marker)

  • 2.1 Create RouteInteraction component — single persistent draggable Marker following brouter-web pattern
  • 2.2 Listen on map.mousemove, snap ghost marker to nearest route point within 15px tolerance (distance-based, not polyline events)
  • 2.3 On click, insert waypoint at snapped position using segment boundary lookup
  • 2.4 On drag, insert waypoint at drop position with trailer lines to adjacent waypoints
  • 2.5 Suppress map click handler after ghost insert to prevent duplicate waypoints
  • 2.6 Guard against flickering: draggingRef freezes snap updates during drag, distance-based mouseout
  • 2.7 Disable route interaction when no-go area drawing mode is active

3. Route Coloring

  • 3.1 Create ColoredRoute component — renders segmented L.Polyline instances with per-point colors
  • 3.2 Implement elevation gradient: normalize elevation to 0-1 range, map to green→yellow→red
  • 3.3 Implement surface coloring: extract surface types from BRouter tiledesc, map to color palette
  • 3.4 Fall back to plain mode when surface data is unavailable
  • 3.5 Add color mode state (colorMode) to Yjs routeData map, synced across participants
  • 3.6 Add color mode select dropdown to session header
  • 3.7 Sync elevation chart colors with route — use same elevationColor() gradient in ElevationChart
  • 3.8 Add i18n keys for color mode labels (en + de)

4. Verify

  • 4.1 E2E test: click near route inserts waypoint at correct position
  • 4.2 E2E test: color mode toggle switches between plain/elevation/surface
  • 4.3 E2E test: enriched route response includes segment boundaries and coordinates
  • 4.4 Unit test: segment boundary computation with 1, 2, and 4 segments
  • 4.5 Visual verification: ghost marker, drag with trailers, all color modes (cmux browser)