3345ef127e
Three new interactions: 1. Route hover → chart: Invisible interactive polyline (weight 20, opacity 0) detects mouse hover on the route, computes cumulative distance, and highlights the corresponding position on the chart. 2. Chart click → map pan: Clicking the elevation chart pans the map to center on that point along the route. Uses 5px threshold to distinguish from drag. 3. Chart drag-select → map zoom: Dragging a range on the chart shows a blue selection overlay, then zooms the map to fit the route coordinates in that range. "Reset zoom" button appears to restore the full route view. State flow avoids feedback loops: external highlights (from map hover) set the chart crosshair without re-emitting onHover back to the map. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
69 lines
2.9 KiB
Markdown
69 lines
2.9 KiB
Markdown
## Context
|
|
|
|
The Planner has one-directional interaction: hovering the elevation chart shows
|
|
a red dot on the map via `highlightPosition` state in `SessionView`. The reverse
|
|
direction (map → chart) and click/drag interactions don't exist.
|
|
|
|
The route coordinates are stored in Yjs `routeData` as a JSON array of
|
|
`[lon, lat, ele]` points. The elevation chart extracts these into
|
|
`ElevationPoint[]` with cumulative distance. The map renders the route via
|
|
`ColoredRoute` as Leaflet polylines.
|
|
|
|
## Decisions
|
|
|
|
### D1: Route hover → chart highlight
|
|
|
|
Add a `mousemove` handler on the `ColoredRoute` polyline segments. On hover,
|
|
find the closest route coordinate index, compute the cumulative distance at
|
|
that index, and pass it up to `SessionView` as `highlightChartDistance`. The
|
|
`ElevationChart` receives this distance and draws the crosshair at that
|
|
position — reusing the existing `drawChart(highlightIdx)` mechanism.
|
|
|
|
To avoid expensive per-pixel distance calculations on every mousemove, use
|
|
Leaflet's `closestLayerPoint` or project to screen coordinates and find the
|
|
nearest point in the coordinate array.
|
|
|
|
### D2: Chart click → map pan
|
|
|
|
Add an `onClick` handler to the elevation chart canvas. Convert the click
|
|
x-position to a distance along the route, find the corresponding coordinate,
|
|
and call `map.panTo([lat, lon])` via a callback. The map reference is exposed
|
|
via `window.__leafletMap` (already used by E2E tests).
|
|
|
|
### D3: Chart drag-select → map zoom
|
|
|
|
Add mousedown/mousemove/mouseup handlers to the chart canvas for range
|
|
selection. While dragging, draw a semi-transparent overlay on the selected
|
|
range. On mouseup, compute the route coordinates within the selected distance
|
|
range and call `map.fitBounds()` on their bounding box.
|
|
|
|
A visual "reset zoom" button appears after drag-zoom to return to the full
|
|
route view.
|
|
|
|
### D4: State flow
|
|
|
|
```
|
|
SessionView
|
|
├── highlightPosition: [lat, lon] | null (chart → map, existing)
|
|
├── highlightChartDistance: number | null (map → chart, new)
|
|
└── onMapFitBounds: (bounds) => void (chart → map, new)
|
|
|
|
ElevationChart
|
|
├── onHover(position) — existing, chart → map
|
|
├── onClick(position) — new, chart → map pan
|
|
├── onDragSelect(bounds) — new, chart → map zoom
|
|
└── highlightDistance — new, map → chart
|
|
|
|
PlannerMap / ColoredRoute
|
|
└── onRouteHover(distance) — new, map → chart
|
|
```
|
|
|
|
## Risks / Trade-offs
|
|
|
|
- **Performance**: Route hover on the map triggers distance lookup on every
|
|
mousemove. Mitigate by throttling and using screen-space projection.
|
|
- **Polyline interactivity**: ColoredRoute renders many small polyline segments.
|
|
Making them all interactive adds event listeners. Alternative: use a single
|
|
invisible overlay polyline for hover detection.
|
|
- **Drag conflict**: Chart drag-select must not conflict with chart hover.
|
|
Use a minimum drag distance threshold (5px) before entering drag mode.
|