mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 23:16:46 +00:00
Maurice
e11ae6f056
The road-trip addon's second half: the parts that let a planned drive be argued with rather than only read. Reshaping. A via records which stop it follows by position, and that position is resolved fresh every time the day is routed — so inserting, reordering or removing a stop moved the ground under every via after it, and the drive silently snapped back to the road it had been steered away from while the handle still sat on the map where it was left. The correction is computed against the day as it stands and written with the same change, in one transaction: a half-applied re-anchoring mixes two numbering schemes in one day. The one judgement that needs geometry — which half of a split leg a via belongs to when a stop lands in the middle of it — is measured on the road actually driven, so a fuel stop added to a bent leg keeps the bend on the side it belongs to. Alternatives. OSRM answers most long legs with exactly one route, which read as "there is no other way" when a perfectly good slower road existed. When it offers nothing, the same drive is asked for again without the motorway, and failing that without the tolls — one question at a time, stopping as soon as one lands. The offer says what it is rather than how much slower. Stops along the way. Everything the corridor search can find is a pause, not a destination: fuel, charging, rest areas, campsites, food and sights all sit inside the leg they were found on, carry their own colour and icon, and are left out of every stop count. That colour is defined once and read by the rail, the corridor list, the map pin and the picker — and it replaced the chains' logos, which turned a corridor full of petrol stations into a row of advertisements and left the brands with no logo on file looking like something else entirely. How long a stop takes was readable in the rail and writable nowhere; new places were given an invented hour that nobody had entered. It is now set from the rail, cleared as a zero because the update statement folds a null into "leave it alone", and new places start with nothing. Both columns are rebuilt on one type scale, anchored to the day plan's own sizes so switching tabs does not change the size of the text beside it. The rail reads as trip totals, day cards and a chain of stops with the drives between them; the corridor column as what to look for, how the search is getting on, and what it found. Six category pills over three lines became one dropdown, which is the space the results wanted. Also: the offered routes are framed on the map when the picker opens (`fitKey` carries no coordinates and each renderer reads it as "the selected day"), road trip mode does not cluster at all so the whole drive stays readable zoomed out, and the drive-time labels finally render in the app's own typeface instead of Leaflet's Helvetica. All of it in both renderers.
99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
/**
|
|
* Dragging a place off the map onto a day in the itinerary (#891).
|
|
*
|
|
* The drop half of this already existed: every day, every row and every gap
|
|
* between rows in the day plan reads a `placeId` and calls onAssignToDay with
|
|
* the position it was dropped at. All that was missing was a second place to
|
|
* pick a place UP from — until now the only one was the row in the places
|
|
* sidebar. This makes a map marker behave exactly like that row.
|
|
*
|
|
* `window.__dragData` is set alongside dataTransfer on purpose, and is not
|
|
* belt-and-braces: browsers hide dataTransfer's contents during `dragover`, so
|
|
* a drop target that wants to know what is coming while it hovers has no other
|
|
* way to look. The day plan reads both (getDragData), and this mirrors what
|
|
* PlacesSidebarRow already does so the two sources are indistinguishable to it.
|
|
*
|
|
* Both renderers get the same treatment through this one helper: Leaflet builds
|
|
* its markers from divIcon HTML and the GL renderers from createElement, but
|
|
* both end up as a real DOM node, which is all HTML5 drag needs.
|
|
*/
|
|
|
|
/** Wire a marker element up as a drag source for `placeId`. */
|
|
export function makeMarkerDraggable(el: HTMLElement, placeId: number): () => void {
|
|
el.setAttribute('draggable', 'true')
|
|
|
|
const onDragStart = (e: DragEvent) => {
|
|
e.dataTransfer?.setData('placeId', String(placeId))
|
|
if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copy'
|
|
window.__dragData = { placeId: String(placeId) }
|
|
el.classList.add('marker-dragging')
|
|
}
|
|
const onDragEnd = () => {
|
|
window.__dragData = null
|
|
el.classList.remove('marker-dragging')
|
|
}
|
|
// The map pans on mousedown anywhere on its surface, and a marker sits on that
|
|
// surface. Without this the map slides away under the pointer while the drag
|
|
// is starting, which makes the day plan an impossible target to reach.
|
|
const onMouseDown = (e: MouseEvent) => e.stopPropagation()
|
|
|
|
el.addEventListener('dragstart', onDragStart)
|
|
el.addEventListener('dragend', onDragEnd)
|
|
el.addEventListener('mousedown', onMouseDown)
|
|
|
|
return () => {
|
|
el.removeAttribute('draggable')
|
|
el.removeEventListener('dragstart', onDragStart)
|
|
el.removeEventListener('dragend', onDragEnd)
|
|
el.removeEventListener('mousedown', onMouseDown)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Wire a corridor hit up as a drag source, so it can be dropped onto the drive.
|
|
*
|
|
* The same HTML5 drag as `makeMarkerDraggable`, with the OSM id as payload instead of a
|
|
* place id — a corridor hit is not a place yet. The drop target is the map itself rather
|
|
* than the drawn line: a route polyline is a real element only in Leaflet (the GL
|
|
* renderers draw it into the canvas), and the drop coordinate answers "where on the drive"
|
|
* just as well once it is projected onto the routed geometry.
|
|
*/
|
|
export function makePoiDraggable(el: HTMLElement, osmId: string): () => void {
|
|
el.setAttribute('draggable', 'true')
|
|
|
|
const onDragStart = (e: DragEvent) => {
|
|
e.dataTransfer?.setData('poiOsmId', osmId)
|
|
if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copy'
|
|
window.__dragData = { poiOsmId: osmId }
|
|
el.classList.add('marker-dragging')
|
|
document.body.classList.add('dragging-poi')
|
|
}
|
|
const onDragEnd = () => {
|
|
window.__dragData = null
|
|
el.classList.remove('marker-dragging')
|
|
document.body.classList.remove('dragging-poi')
|
|
}
|
|
// Same reason as above: without this the map pans out from under the pointer as the
|
|
// drag begins, and the route is impossible to aim at.
|
|
const onMouseDown = (e: MouseEvent) => e.stopPropagation()
|
|
|
|
el.addEventListener('dragstart', onDragStart)
|
|
el.addEventListener('dragend', onDragEnd)
|
|
el.addEventListener('mousedown', onMouseDown)
|
|
|
|
return () => {
|
|
el.removeAttribute('draggable')
|
|
el.removeEventListener('dragstart', onDragStart)
|
|
el.removeEventListener('dragend', onDragEnd)
|
|
el.removeEventListener('mousedown', onMouseDown)
|
|
}
|
|
}
|
|
|
|
/** The OSM id being dragged, when a corridor hit is in flight. */
|
|
export function draggedPoiId(e: DragEvent): string | null {
|
|
const fromTransfer = e.dataTransfer?.getData('poiOsmId')
|
|
if (fromTransfer) return fromTransfer
|
|
// dataTransfer is unreadable during dragover, so the window mirror answers instead.
|
|
return window.__dragData?.poiOsmId ?? null
|
|
}
|