trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Z_WAYPOINT_HIGHLIGHTED (1200) for hovered waypoint markers

Browse source 
Highlighted waypoints now render above normal waypoints (1000) but
below POI markers (1500) and the elevation highlight dot (2000).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-11 01:51:39 +02:00
parent 337df6b527
commit 729b33a15f
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/planner/app/components/PlannerMap.tsx
View file

@ -10,7 +10,7 @@ import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx";
import { isOvernight } from "~/lib/overnight";
import { setOvernight } from "~/lib/overnight";
import { usePois } from "~/lib/use-pois";
import { Z_CURSOR, Z_WAYPOINT, Z_HIGHLIGHT } from "~/lib/z-index";
import { Z_CURSOR, Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "~/lib/z-index";
import { NoGoAreaLayer } from "./NoGoAreaLayer";
import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRoute";
import { RouteInteraction } from "./RouteInteraction";
@ -520,7 +520,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
key={i}
position={[wp.lat, wp.lon]}
draggable
zIndexOffset={Z_WAYPOINT}
zIndexOffset={highlightedWaypoint === i ? Z_WAYPOINT_HIGHLIGHTED : Z_WAYPOINT}
icon={waypointIcon(i, wp.overnight, highlightedWaypoint === i)}
eventHandlers={{
mouseover: () => {

3
apps/planner/app/lib/z-index.ts
View file

@ -5,8 +5,9 @@
* Rendering order (bottom to top):
* POI markers → cursor markers → ghost waypoint → waypoint markers → highlight dot
*/
export const Z_POI_MARKER = -1000;
export const Z_CURSOR = -1000;
export const Z_GHOST_WAYPOINT = -100;
export const Z_WAYPOINT = 1000;
export const Z_WAYPOINT_HIGHLIGHTED = 1200;
export const Z_POI_MARKER = 1500;
export const Z_HIGHLIGHT = 2000;