matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-05-20 14:44:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: unified routing with Drive mode default and Add stop wedge

Browse source 
- Add Drive (auto) as default route mode, first in travel modes list
- Hide boundary mode selector when Drive mode is active
- Restore Add stop radial menu wedge with stops system integration
- Unify routing through single computeRoute() function in store
- Add coordinate parsing to SearchBar for direct lat/lon input
- Bridge stops system with routeStart/routeEnd for seamless UX
- Support 3+ stops with Valhalla optimization

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-08 21:59:10 +00:00
commit 09d68adf09
4 changed files with 726 additions and 547 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/MapView.jsx
View file

@ -8,7 +8,7 @@ import { useStore } from '../store'
import { decodePolyline } from '../utils/decode'
import { fetchReverse, requestOffroute } from '../api'
import { getConfig, hasFeature } from '../config'
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2 } from 'lucide-react'
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2, Plus } from 'lucide-react'
import RadialMenu from './RadialMenu'
import useContextMenu from '../hooks/useContextMenu'
import toast from 'react-hot-toast'
@ -1669,21 +1669,10 @@ const MapView = forwardRef(function MapView(_, ref) {
lon: radialMenu.lon,
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
}
const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
const { routeStart, setRouteEnd, computeRoute } = useStore.getState()
setRouteEnd(place)
if (routeStart) {
setRouteLoading(true)
requestOffroute(routeStart, place, routeMode, boundaryMode)
.then((data) => {
if (data.status === "ok" && data.route) {
setRouteResult(data)
updateRouteDisplay(mapInstance.current, data.route)
} else {
setRouteError(data.error || "No route found")
}
})
.catch((e) => setRouteError(e.message))
.finally(() => setRouteLoading(false))
computeRoute()
} else {
toast("Set starting point first")
}
@ -1700,11 +1689,41 @@ const MapView = forwardRef(function MapView(_, ref) {
lon: radialMenu.lon,
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
}
const { clearRoute, setRouteStart } = useStore.getState()
const { clearRoute, setRouteStart, routeEnd, computeRoute } = useStore.getState()
clearRoute()
clearRouteDisplay(mapInstance.current)
setRouteStart(place)
toast("Now tap destination")
// If we already have a destination, compute route immediately
if (routeEnd) {
computeRoute()
} else {
toast("Now tap destination")
}
},
},
{
id: "add-stop",
label: "Add stop",
icon: Plus,
onSelect: () => {
setRadialMenu((m) => ({ ...m, open: false }))
const { stops, addStop } = useStore.getState()
const place = {
lat: radialMenu.lat,
lon: radialMenu.lon,
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
source: "radial_menu",
matchCode: null,
}
if (stops.length === 0) {
addStop(place)
useStore.setState({ gpsOrigin: false })
} else {
const success = addStop(place)
if (!success) {
toast("Maximum 10 stops reached")
}
}
},
},
{
@ -2390,6 +2409,12 @@ const MapView = forwardRef(function MapView(_, ref) {
updateBoundaryRef.current = updateBoundaryFn
useStore.getState().setUpdateBoundary(updateBoundaryFn)
// Register route display callbacks for store.computeRoute()
useStore.getState().setRouteDisplayCallbacks(
(routeGeojson) => updateRouteDisplay(map, routeGeojson),
() => clearRouteDisplay(map)
)
// POI/label hover affordance — cursor pointer + highlight
const interactiveLayers = ['pois', 'places_locality', 'places_region', 'places_country', 'places_subplace']

43
src/components/Panel.jsx
View file

@ -9,6 +9,7 @@ import ContactList from './ContactList'
import { PlaceCard } from './PlaceCard'
const TRAVEL_MODES = [
{ id: 'auto', label: 'Drive', Icon: Car },
{ id: 'foot', label: 'Foot', Icon: Footprints },
{ id: 'mtb', label: 'MTB', Icon: Bike },
{ id: 'atv', label: 'ATV', Icon: Car },
@ -151,26 +152,28 @@ export default function Panel({ onClearRoute }) {
})}
</div>
<div className="flex gap-1 mb-3">
{BOUNDARY_MODES.map((m) => {
const active = boundaryMode === m.id
return (
<button
key={m.id}
onClick={() => setBoundaryMode(m.id)}
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
style={{
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
}}
title={m.title}
>
<m.Icon size={14} />
<span className="hidden sm:inline">{m.label}</span>
</button>
)
})}
</div>
{routeMode !== 'auto' && (
<div className="flex gap-1 mb-3">
{BOUNDARY_MODES.map((m) => {
const active = boundaryMode === m.id
return (
<button
key={m.id}
onClick={() => setBoundaryMode(m.id)}
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
style={{
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
}}
title={m.title}
>
<m.Icon size={14} />
<span className="hidden sm:inline">{m.label}</span>
</button>
)
})}
</div>
)}
<ManeuverList />
</div>

43
src/components/SearchBar.jsx
View file

@ -6,6 +6,30 @@ import { buildAddress } from '../utils/place'
import { searchGeocode } from '../api'
import { hasFeature } from '../config'
/** Parse coordinate input like "42.35, -114.30" or "42.35 -114.30" */
function parseCoordinates(input) {
if (!input) return null
const trimmed = input.trim()
// Pattern: lat, lon or lat lon (with optional comma)
// Supports: "42.35, -114.30", "42.35 -114.30", "42.35,-114.30"
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
const match = trimmed.match(pattern)
if (!match) return null
const lat = parseFloat(match[1])
const lon = parseFloat(match[2])
// Validate ranges
if (isNaN(lat) || isNaN(lon)) return null
if (lat < -90 || lat > 90) return null
if (lon < -180 || lon > 180) return null
return { lat, lon }
}
/** Get category icon based on result type/source */
function CategoryIcon({ result }) {
const type = result.type || ''
@ -71,6 +95,25 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
return
}
// Check for coordinate input first
const coords = parseCoordinates(q)
if (coords) {
const coordResult = {
lat: coords.lat,
lon: coords.lon,
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
address: "Coordinates",
type: "coordinates",
source: "coordinates",
match_code: null,
raw: {},
}
setResults([coordResult])
setAutocompleteOpen(true)
setSearchLoading(false)
return
}
// Prepend matching contacts
let contactResults = []
if (hasFeature('has_contacts') && contacts.length > 0) {

186
src/store.js
View file

@ -1,4 +1,5 @@
import { create } from 'zustand'
import { requestOffroute, requestOptimizedRoute } from './api'
export const useStore = create((set, get) => ({
// ── Search state ──
@ -27,75 +28,181 @@ export const useStore = create((set, get) => ({
// Single routing system - all routes go through /api/offroute
routeStart: null, // { lat, lon, name }
routeEnd: null, // { lat, lon, name }
routeMode: "foot", // foot | mtb | atv | vehicle
routeMode: "auto", // foot | mtb | atv | vehicle
boundaryMode: "strict", // strict | pragmatic | emergency
routeResult: null, // Response from /api/offroute
routeLoading: false,
routeError: null,
// Map display callback - set by MapView
_updateRouteDisplay: null,
_clearRouteDisplay: null,
setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
setRouteEnd: (place) => set({ routeEnd: place }),
setRouteMode: (mode) => set({ routeMode: mode }),
setBoundaryMode: (mode) => set({ boundaryMode: mode }),
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
setRouteLoading: (loading) => set({ routeLoading: loading }),
setRouteError: (err) => set({ routeError: err, routeResult: null }),
clearRoute: () => set({
routeStart: null,
routeEnd: null,
routeResult: null,
routeError: null
}),
// ── Legacy compatibility (for components not yet migrated) ──
// Mode/boundary setters that trigger recalculation
setRouteMode: (mode) => {
set({ routeMode: mode })
get().computeRoute()
},
setBoundaryMode: (mode) => {
set({ boundaryMode: mode })
get().computeRoute()
},
clearRoute: () => {
const { _clearRouteDisplay } = get()
if (_clearRouteDisplay) _clearRouteDisplay()
set({
routeStart: null,
routeEnd: null,
routeResult: null,
routeError: null,
stops: [],
route: null
})
},
// ── UNIFIED ROUTING TRIGGER ──
// This is the SINGLE routing function for everything
computeRoute: async () => {
const { routeStart, routeEnd, routeMode, boundaryMode, _updateRouteDisplay } = get()
// Need both endpoints to route
if (!routeStart || !routeEnd) return
set({ routeLoading: true, routeError: null })
try {
const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
if (data.status === "ok" && data.route) {
set({ routeResult: data, routeError: null })
if (_updateRouteDisplay) _updateRouteDisplay(data.route)
} else {
set({ routeError: data.message || data.error || "No route found", routeResult: null })
}
} catch (e) {
set({ routeError: e.message, routeResult: null })
} finally {
set({ routeLoading: false })
}
},
// ── Stop list (master compatibility) ──
stops: [],
gpsOrigin: false,
pendingDestination: null,
route: null,
gpsOrigin: true, // whether GPS should be used as origin when available
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
route: null, // Legacy Valhalla response (for 3+ stop optimization)
addStop: (stop) => {
// Legacy: just set as route end point
const { routeStart, setRouteEnd } = get()
const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
if (!routeStart) {
set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
const { stops, routeMode, _updateRouteDisplay } = get()
if (stops.length >= 10) return false
const newStops = [...stops, { ...stop, id: crypto.randomUUID() }]
set({ stops: newStops })
// Route logic depends on stop count
if (newStops.length === 1) {
// Single stop = origin, waiting for second
const origin = newStops[0]
set({ routeStart: { lat: origin.lat, lon: origin.lon, name: origin.name } })
} else if (newStops.length === 2) {
// Two stops = use offroute (handles on-road and wilderness)
const origin = newStops[0]
const dest = newStops[1]
set({
routeStart: { lat: origin.lat, lon: origin.lon, name: origin.name },
routeEnd: { lat: dest.lat, lon: dest.lon, name: dest.name }
})
get().computeRoute()
} else {
setRouteEnd(place)
set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
// 3+ stops = use Valhalla multi-stop optimization
set({ routeLoading: true, routeError: null })
const locations = newStops.map((s) => ({ lat: s.lat, lon: s.lon }))
const costing = routeMode === "auto" ? "auto" : routeMode === "foot" ? "pedestrian" : routeMode === "mtb" ? "bicycle" : "auto"
requestOptimizedRoute(locations, costing)
.then((data) => {
if (data.trip) {
set({ route: data.trip, routeError: null })
// Update display via legacy route handler if available
if (_updateRouteDisplay && data.trip) {
// Multi-stop uses legacy route format, need to convert or use separate handler
}
}
})
.catch((e) => set({ routeError: e.message }))
.finally(() => set({ routeLoading: false }))
}
return true
},
removeStop: (id) => {
const { stops } = get()
const newStops = stops.filter((s) => s.id !== id)
set({ stops: newStops })
if (newStops.length === 0) {
get().clearRoute()
} else if (newStops.length === 1) {
// Back to single stop
const origin = newStops[0]
set({
routeStart: { lat: origin.lat, lon: origin.lon, name: origin.name },
routeEnd: null,
routeResult: null
})
}
},
clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
setStops: (stops) => set({ stops }),
reorderStops: (newStops) => set({ stops: newStops }),
clearStops: () => {
const { _clearRouteDisplay } = get()
if (_clearRouteDisplay) _clearRouteDisplay()
set({ stops: [], routeStart: null, routeEnd: null, routeResult: null, routeError: null })
},
setStops: (stops) => set({ stops }),
setGpsOrigin: (val) => set({ gpsOrigin: val }),
setPendingDestination: (place) => set({ pendingDestination: place }),
clearPendingDestination: () => set({ pendingDestination: null }),
// Master startDirections - restored verbatim
startDirections: (place) => {
// Legacy: set as destination
const { routeStart, setRouteEnd, clearRoute } = get()
clearRoute()
set({
routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
stops: [{ ...place, id: crypto.randomUUID() }],
selectedPlace: null
})
const { geoPermission, stops, addStop, clearStops } = get()
if (geoPermission === 'granted') {
clearStops()
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
set({ gpsOrigin: true, selectedPlace: null })
} else if (stops.length > 0) {
const origin = stops[0]
clearStops()
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
set({ selectedPlace: null })
} else {
// GPS denied, no stops: set pendingDestination only; origin-picker will add both
set({ pendingDestination: place, selectedPlace: null })
}
},
// Legacy route setter (for 3+ stop Valhalla optimization)
setRoute: (route) => set({ route, routeError: null }),
setRouteError: (err) => set({ routeError: err, route: null }),
// ── Place detail ──
selectedPlace: null,
clickMarker: null,
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
setSelectedPlace: (place) => set({ selectedPlace: place }),
// Boundary rendering function - set by MapView, called by PlaceCard
updateBoundary: null,
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
@ -103,12 +210,12 @@ export const useStore = create((set, get) => ({
clearClickMarker: () => set({ clickMarker: null }),
// ── UI state ──
sheetState: 'half',
sheetState: 'half', // 'collapsed' | 'half' | 'full'
panelOpen: true,
autocompleteOpen: false,
theme: 'dark',
themeOverride: null,
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
setSheetState: (s) => set({ sheetState: s }),
setViewMode: (mode) => {
@ -134,9 +241,9 @@ export const useStore = create((set, get) => ({
// ── Contacts ──
contacts: [],
contactsLoaded: false,
activeTab: 'routes',
editingContact: null,
pickingLocationFor: null,
activeTab: 'routes', // 'routes' | 'contacts'
editingContact: null, // null=closed, {}=new, {id:N}=edit
pickingLocationFor: null, // form data while user picks location on map
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
setActiveTab: (tab) => set({ activeTab: tab }),
@ -147,6 +254,7 @@ export const useStore = create((set, get) => ({
}))
// ── Panel state selector ──
// Returns string state, prioritizing preview to allow it alongside any route state
export const usePanelState = () => {
return useStore((s) => {
const hasPreview = !!s.selectedPlace