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

Highlight waypoint marker on sidebar hover instead of red dot

Browse source 
Replace position-based CircleMarker highlight with index-based marker
highlighting. Hovered waypoint marker grows from 24px to 30px with an
outline ring in its color. Uses CSS transition for smooth animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-11 00:35:42 +02:00
parent 13c2925c18
commit 705252a1c6
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
3 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,17 +14,21 @@ import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRout
import { RouteInteraction } from "./RouteInteraction";
import "leaflet/dist/leaflet.css";
function waypointIcon(index: number, overnight?: boolean): L.DivIcon {
function waypointIcon(index: number, overnight?: boolean, highlighted?: boolean): L.DivIcon {
const bg = overnight ? "#8B6D3A" : "#2563eb";
const size = highlighted ? 30 : 24;
const offset = size / 2;
const ring = highlighted ? `outline:3px solid ${bg};outline-offset:2px;` : "";
return L.divIcon({
className: "",
html: `<div style="
width:24px;height:24px;border-radius:50%;
width:${size}px;height:${size}px;border-radius:50%;
background:${bg};color:white;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:600;
font-size:${highlighted ? 14 : 12}px;font-weight:600;
border:2px solid white;box-shadow:0 1px 4px rgba(0,0,0,0.3);
transform:translate(-12px,-12px);
transform:translate(-${offset}px,-${offset}px);
${ring}transition:all 0.15s ease;
">${overnight ? "☾" : index + 1}</div>`,
iconSize: [0, 0],
});
@ -66,6 +70,7 @@ interface PlannerMapProps {
onRouteRequest?: (waypoints: WaypointData[]) => void;
onImportError?: (message: string) => void;
highlightPosition?: [number, number] | null;
highlightedWaypoint?: number | null;
days?: DayStage[];
}
@ -228,7 +233,7 @@ function NoGoAreaButton({ active, onClick }: { active: boolean; onClick: () => v
);
}
export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportError, days }: PlannerMapProps) {
export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlightedWaypoint, onImportError, days }: PlannerMapProps) {
const { t } = useTranslation("planner");
const [waypoints, setWaypoints] = useState<WaypointData[]>([]);
const [draggingOver, setDraggingOver] = useState(false);
@ -466,7 +471,7 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, onImportErr
key={i}
position={[wp.lat, wp.lon]}
draggable
icon={waypointIcon(i, wp.overnight)}
icon={waypointIcon(i, wp.overnight, highlightedWaypoint === i)}
eventHandlers={{
mouseover: () => {
routeInteractionSuspendedRef.current = true;