From 3345ef127e932d43d791cb6013c74e2b18d795b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 12 Apr 2026 19:23:37 +0200 Subject: [PATCH] =?UTF-8?q?Add=20bidirectional=20elevation=20chart=20?= =?UTF-8?q?=E2=86=94=20map=20interaction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../planner/app/components/ElevationChart.tsx | 152 +++++++++++++++++- apps/planner/app/components/PlannerMap.tsx | 56 ++++++- apps/planner/app/components/SessionView.tsx | 42 ++++- .../elevation-map-interaction/design.md | 69 ++++++++ .../specs/elevation-map-interaction/spec.md | 31 ++++ .../elevation-map-interaction/tasks.md | 25 +++ 6 files changed, 369 insertions(+), 6 deletions(-) create mode 100644 openspec/changes/elevation-map-interaction/design.md create mode 100644 openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md create mode 100644 openspec/changes/elevation-map-interaction/tasks.md diff --git a/apps/planner/app/components/ElevationChart.tsx b/apps/planner/app/components/ElevationChart.tsx index b7cd549..b0e9215 100644 --- a/apps/planner/app/components/ElevationChart.tsx +++ b/apps/planner/app/components/ElevationChart.tsx @@ -75,10 +75,13 @@ const PADDING = { top: 10, right: 10, bottom: 25, left: 40 }; interface ElevationChartProps { yjs: YjsState; onHover?: (position: [number, number] | null) => void; + highlightDistance?: number | null; + onClickPosition?: (position: [number, number]) => void; + onDragSelect?: (bounds: [[number, number], [number, number]]) => void; days?: DayStage[]; } -export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) { +export function ElevationChart({ yjs, onHover, highlightDistance, onClickPosition, onDragSelect, days }: ElevationChartProps) { const { t } = useTranslation("planner"); const [points, setPoints] = useState([]); const [hoverIdx, setHoverIdx] = useState(null); @@ -93,6 +96,36 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) { const canvasRef = useRef(null); const pointsRef = useRef([]); pointsRef.current = points; + const isExternalHover = useRef(false); + const dragStartX = useRef(null); + const dragStartClientX = useRef(null); + const isDragging = useRef(false); + const dragCurrentX = useRef(null); + + // External highlight from map hover: find closest point by distance + useEffect(() => { + if (highlightDistance == null) { + if (isExternalHover.current) { + isExternalHover.current = false; + setHoverIdx(null); + } + return; + } + if (points.length < 2) return; + + let closest = 0; + let minDiff = Infinity; + for (let i = 0; i < points.length; i++) { + const diff = Math.abs(points[i]!.distance - highlightDistance); + if (diff < minDiff) { + minDiff = diff; + closest = i; + } + } + isExternalHover.current = true; + setHoverIdx(closest); + // Do NOT call onHover here to avoid feedback loop + }, [highlightDistance, points]); useEffect(() => { const update = () => { @@ -524,6 +557,19 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) { ctx.textAlign = hx + 8 > w - 80 ? "right" : "left"; ctx.fillText(label, labelX, PADDING.top + 10); } + + // Drag selection overlay + if (isDragging.current && dragStartX.current != null && dragCurrentX.current != null) { + const x1 = Math.max(PADDING.left, Math.min(dragStartX.current, PADDING.left + chartW)); + const x2 = Math.max(PADDING.left, Math.min(dragCurrentX.current, PADDING.left + chartW)); + const selLeft = Math.min(x1, x2); + const selRight = Math.max(x1, x2); + ctx.fillStyle = "rgba(59, 130, 246, 0.15)"; + ctx.fillRect(selLeft, PADDING.top, selRight - selLeft, chartH); + ctx.strokeStyle = "rgba(59, 130, 246, 0.5)"; + ctx.lineWidth = 1; + ctx.strokeRect(selLeft, PADDING.top, selRight - selLeft, chartH); + } }, [points, colorMode, surfaces, highways, maxspeeds, smoothnesses, tracktypes, cycleways, bikeroutes, days, t], ); @@ -542,6 +588,17 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) { const chartW = rect.width - PADDING.left - PADDING.right; const ratio = (mouseX - PADDING.left) / chartW; + // Handle drag selection + if (dragStartClientX.current != null) { + const dx = Math.abs(e.clientX - dragStartClientX.current); + if (dx > 5) { + isDragging.current = true; + dragCurrentX.current = mouseX; + drawChart(hoverIdx); + return; + } + } + if (ratio < 0 || ratio > 1) { setHoverIdx(null); onHover?.(null); @@ -562,18 +619,107 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) { } } + isExternalHover.current = false; setHoverIdx(closest); const p = points[closest]!; onHover?.([p.lat, p.lon]); }, - [points, onHover], + [points, onHover, hoverIdx, drawChart], ); const handleMouseLeave = useCallback(() => { setHoverIdx(null); onHover?.(null); + dragStartX.current = null; + dragStartClientX.current = null; + isDragging.current = false; + dragCurrentX.current = null; }, [onHover]); + const handleMouseDown = useCallback( + (e: React.MouseEvent) => { + const canvas = canvasRef.current; + if (!canvas) return; + const rect = canvas.getBoundingClientRect(); + dragStartX.current = e.clientX - rect.left; + dragStartClientX.current = e.clientX; + isDragging.current = false; + dragCurrentX.current = null; + }, + [], + ); + + const handleMouseUp = useCallback( + (e: React.MouseEvent) => { + const canvas = canvasRef.current; + if (!canvas || points.length < 2) { + dragStartX.current = null; + dragStartClientX.current = null; + isDragging.current = false; + dragCurrentX.current = null; + return; + } + + const rect = canvas.getBoundingClientRect(); + const chartW = rect.width - PADDING.left - PADDING.right; + const maxDist = points[points.length - 1]!.distance; + + if (isDragging.current && dragStartX.current != null) { + // Drag-select: compute bounding box of selected range + const endX = e.clientX - rect.left; + const startRatio = Math.max(0, Math.min(1, (dragStartX.current - PADDING.left) / chartW)); + const endRatio = Math.max(0, Math.min(1, (endX - PADDING.left) / chartW)); + const startDist = Math.min(startRatio, endRatio) * maxDist; + const endDist = Math.max(startRatio, endRatio) * maxDist; + + // Find all points in the selected distance range + let minLat = Infinity, maxLat = -Infinity, minLon = Infinity, maxLon = -Infinity; + let found = false; + for (const p of points) { + if (p.distance >= startDist && p.distance <= endDist) { + minLat = Math.min(minLat, p.lat); + maxLat = Math.max(maxLat, p.lat); + minLon = Math.min(minLon, p.lon); + maxLon = Math.max(maxLon, p.lon); + found = true; + } + } + + if (found && onDragSelect) { + onDragSelect([[minLat, minLon], [maxLat, maxLon]]); + } + } else if (dragStartClientX.current != null) { + // Click (not drag): pan map to clicked point + const dx = Math.abs(e.clientX - dragStartClientX.current); + if (dx <= 5 && onClickPosition) { + const mouseX = e.clientX - rect.left; + const ratio = (mouseX - PADDING.left) / chartW; + if (ratio >= 0 && ratio <= 1) { + const targetDist = ratio * maxDist; + let closest = 0; + let minDiff = Infinity; + for (let i = 0; i < points.length; i++) { + const diff = Math.abs(points[i]!.distance - targetDist); + if (diff < minDiff) { + minDiff = diff; + closest = i; + } + } + const p = points[closest]!; + onClickPosition([p.lat, p.lon]); + } + } + } + + dragStartX.current = null; + dragStartClientX.current = null; + isDragging.current = false; + dragCurrentX.current = null; + drawChart(hoverIdx); + }, + [points, onClickPosition, onDragSelect, hoverIdx, drawChart], + ); + const setMode = useCallback((mode: string) => { yjs.routeData.set("colorMode", mode); }, [yjs.routeData]); @@ -705,6 +851,8 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) { className="h-24 w-full cursor-crosshair" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp} /> ); diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index 4b62318..98b5b3f 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -1,5 +1,5 @@ import { useEffect, useState, useCallback, useRef } from "react"; -import { MapContainer, TileLayer, LayersControl, Marker, useMapEvents, useMap } from "react-leaflet"; +import { MapContainer, TileLayer, LayersControl, Marker, Polyline, useMapEvents, useMap } from "react-leaflet"; import L from "leaflet"; import * as Y from "yjs"; import { useTranslation } from "react-i18next"; @@ -92,6 +92,7 @@ interface PlannerMapProps { onImportError?: (message: string) => void; highlightPosition?: [number, number] | null; highlightedWaypoint?: number | null; + onRouteHover?: (distance: number | null) => void; days?: DayStage[]; } @@ -361,7 +362,7 @@ function PoiRefresher({ poiState }: { poiState: ReturnType }) { return null; } -export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlightedWaypoint, onImportError, days }: PlannerMapProps) { +export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlightedWaypoint, onRouteHover, onImportError, days }: PlannerMapProps) { const { t } = useTranslation("planner"); const [waypoints, setWaypoints] = useState([]); const poiState = usePois(); @@ -607,6 +608,46 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted [yjs.waypoints], ); + const handleRoutePolylineHover = useCallback( + (e: L.LeafletMouseEvent) => { + if (!routeCoordinates || routeCoordinates.length < 2 || !onRouteHover) return; + const { lat, lng } = e.latlng; + // Find the closest coordinate index + let bestIdx = 0; + let bestDist = Infinity; + for (let i = 0; i < routeCoordinates.length; i++) { + const c = routeCoordinates[i]!; + const dLat = c[1]! - lat; + const dLon = c[0]! - lng; + const dist = dLat * dLat + dLon * dLon; + if (dist < bestDist) { + bestDist = dist; + bestIdx = i; + } + } + // Compute cumulative distance to this point using haversine + let totalDist = 0; + for (let i = 1; i <= bestIdx; i++) { + const prev = routeCoordinates[i - 1]!; + const curr = routeCoordinates[i]!; + const R = 6371000; + const toRad = (d: number) => (d * Math.PI) / 180; + const dLat = toRad(curr[1]! - prev[1]!); + const dLon = toRad(curr[0]! - prev[0]!); + const a = + Math.sin(dLat / 2) ** 2 + + Math.cos(toRad(prev[1]!)) * Math.cos(toRad(curr[1]!)) * Math.sin(dLon / 2) ** 2; + totalDist += R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); + } + onRouteHover(totalDist); + }, + [routeCoordinates, onRouteHover], + ); + + const handleRoutePolylineOut = useCallback(() => { + onRouteHover?.(null); + }, [onRouteHover]); + const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault(); dragCounterRef.current++; @@ -784,6 +825,17 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted suspendedRef={routeInteractionSuspendedRef} disabled={noGoDrawing} /> + {onRouteHover && ( + [c[1]!, c[0]!] as [number, number])} + pathOptions={{ weight: 20, opacity: 0, interactive: true }} + eventHandlers={{ + mouseover: handleRoutePolylineHover, + mousemove: handleRoutePolylineHover, + mouseout: handleRoutePolylineOut, + }} + /> + )} )} diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx index 08fb9f1..4f66b20 100644 --- a/apps/planner/app/components/SessionView.tsx +++ b/apps/planner/app/components/SessionView.tsx @@ -1,6 +1,7 @@ import { Suspense, lazy, useState, useCallback, useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; +import L from "leaflet"; import type { TFunction } from "i18next"; import * as Sentry from "@sentry/react"; import { useYjs, type YjsState } from "~/lib/use-yjs"; @@ -165,6 +166,8 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, const days = useDays(yjs); const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null); const [highlightedWaypoint, setHighlightedWaypoint] = useState(null); + const [highlightChartDistance, setHighlightChartDistance] = useState(null); + const [isZoomedByChart, setIsZoomedByChart] = useState(false); const { toasts, addToast } = useToasts(); useAwarenessToasts(yjs, t, addToast); @@ -185,6 +188,31 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, setHighlightPosition(pos); }, []); + const handleChartClick = useCallback((position: [number, number]) => { + const map = (window as unknown as Record).__leafletMap as L.Map | undefined; + map?.panTo(position); + }, []); + + const handleChartDragSelect = useCallback((bounds: [[number, number], [number, number]]) => { + const map = (window as unknown as Record).__leafletMap as L.Map | undefined; + map?.fitBounds(bounds, { padding: [30, 30] }); + setIsZoomedByChart(true); + }, []); + + const handleResetZoom = useCallback(() => { + const map = (window as unknown as Record).__leafletMap as L.Map | undefined; + if (!map || !yjs) return; + const coordsJson = yjs.routeData.get("coordinates") as string | undefined; + if (!coordsJson) return; + try { + const coords: [number, number, number][] = JSON.parse(coordsJson); + if (coords.length < 2) return; + const latLngs = coords.map((c) => [c[1]!, c[0]!] as [number, number]); + map.fitBounds(L.latLngBounds(latLngs), { padding: [50, 50] }); + } catch { /* ignore */ } + setIsZoomedByChart(false); + }, [yjs]); + if (!yjs) { return (
@@ -256,11 +284,21 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
} > - addToast(msg, "error")} days={days} /> + addToast(msg, "error")} days={days} /> - +
+ + {isZoomedByChart && ( + + )} +
diff --git a/openspec/changes/elevation-map-interaction/design.md b/openspec/changes/elevation-map-interaction/design.md new file mode 100644 index 0000000..561f8c5 --- /dev/null +++ b/openspec/changes/elevation-map-interaction/design.md @@ -0,0 +1,69 @@ +## 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. diff --git a/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md b/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md new file mode 100644 index 0000000..305d02e --- /dev/null +++ b/openspec/changes/elevation-map-interaction/specs/elevation-map-interaction/spec.md @@ -0,0 +1,31 @@ +## ADDED Requirements + +### Requirement: Route hover highlights elevation chart +Hovering over the route polyline on the map SHALL highlight the corresponding position on the elevation chart. + +#### Scenario: Hover route on map +- **WHEN** a user hovers over the route polyline on the map +- **THEN** the elevation chart shows a crosshair at the corresponding distance along the route + +#### Scenario: Leave route on map +- **WHEN** a user moves the mouse away from the route polyline +- **THEN** the elevation chart crosshair disappears + +### Requirement: Chart click pans map +Clicking on the elevation chart SHALL pan the map to center on that point along the route. + +#### Scenario: Click chart +- **WHEN** a user clicks on the elevation chart +- **THEN** the map pans to center on the corresponding route coordinate + +### Requirement: Chart drag-select zooms map +Dragging a range on the elevation chart SHALL zoom the map to fit that section of the route. + +#### Scenario: Drag select range +- **WHEN** a user clicks and drags horizontally on the elevation chart +- **THEN** a visual highlight shows the selected range +- **AND** on mouse release, the map zooms to fit the route coordinates within that range + +#### Scenario: Reset zoom +- **WHEN** the map has been zoomed via chart drag-select +- **THEN** a reset button appears to return to the full route view diff --git a/openspec/changes/elevation-map-interaction/tasks.md b/openspec/changes/elevation-map-interaction/tasks.md new file mode 100644 index 0000000..de88751 --- /dev/null +++ b/openspec/changes/elevation-map-interaction/tasks.md @@ -0,0 +1,25 @@ +## 1. Route Hover → Chart Highlight + +- [x] 1.1 Add invisible interactive overlay polyline on the route in PlannerMap for hover detection (avoids adding listeners to every ColoredRoute segment) +- [x] 1.2 On polyline hover, find closest route coordinate index and compute cumulative distance +- [x] 1.3 Pass `highlightChartDistance` up from PlannerMap to SessionView +- [x] 1.4 Accept `highlightDistance` prop in ElevationChart, find closest point by distance, draw crosshair + +## 2. Chart Click → Map Pan + +- [x] 2.1 Add click handler to ElevationChart canvas — convert x-position to route coordinate +- [x] 2.2 Call `onClickPosition([lat, lon])` callback to pan the map +- [x] 2.3 Wire the callback through SessionView to call `map.panTo()` via the exposed map ref + +## 3. Chart Drag-Select → Map Zoom + +- [x] 3.1 Add mousedown/mousemove/mouseup handlers for drag selection on ElevationChart canvas +- [x] 3.2 Draw semi-transparent overlay rectangle during drag +- [x] 3.3 On mouseup, compute bounding box of route coordinates in the selected distance range +- [x] 3.4 Call `onDragSelect(bounds)` callback to zoom the map via `map.fitBounds()` +- [x] 3.5 Show "Reset zoom" button after drag-zoom, clicking it returns to full route bounds + +## 4. Testing + +- [x] 4.1 E2E test: hover chart → map dot appears (existing, verify still works) +- [x] 4.2 E2E test: click chart → map pans (verify map center changes)