Add persisten highlighting of path on click
This commit is contained in:
parent
955510dae8
commit
047a6ad218
@ -9,8 +9,9 @@ let global_map: L.Map | null = null;
|
||||
|
||||
// Stores the polyline rendered in the map.
|
||||
// The first object stores Lines, the second stores routes
|
||||
// Indexed by their names
|
||||
const lines_store: Map<string, Map<string, L.Polyline>> = new Map();
|
||||
// Indexed by their names.
|
||||
// The array is the polyline, and wether to render it (> 0) (set opacity to LINE_OPACITY)
|
||||
const lines_store: Map<string, Map<string, [L.Polyline, number]>> = new Map();
|
||||
|
||||
export function Index2() {
|
||||
const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
|
||||
@ -109,44 +110,69 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
|
||||
lines_store.set(line_name, new Map());
|
||||
}
|
||||
// store
|
||||
lines_store.get(line_name)!.set(props.route.name, line);
|
||||
lines_store.get(line_name)!.set(props.route.name, [line, 0]);
|
||||
|
||||
const set_highlighted = () => {
|
||||
const arr = lines_store.get(props.line_name)?.get(props.route.name);
|
||||
if (arr !== undefined) {
|
||||
arr[1] += 1;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class="pl-10 hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)]"
|
||||
<button
|
||||
class="inline-block w-full text-left cursor-pointer pl-10
|
||||
hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)]"
|
||||
onClick={set_highlighted}
|
||||
onMouseEnter={() => highlight_route(props.line_name, props.route.name)}
|
||||
onMouseLeave={() => unhighlight_route()}
|
||||
onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)}
|
||||
>
|
||||
Ruta {props.route.name}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function highlight_route(line_name: string, route_name: string) {
|
||||
for (const [line_key, line_map] of lines_store) {
|
||||
for (const [route_key, route_polilyne] of line_map) {
|
||||
if (line_key === line_name && route_key === route_name) {
|
||||
// Do nothing
|
||||
} else {
|
||||
// make transparent
|
||||
route_polilyne.setStyle({
|
||||
opacity: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
const arr = lines_store.get(line_name)?.get(route_name);
|
||||
if (arr !== undefined) {
|
||||
arr[1] += 1;
|
||||
}
|
||||
|
||||
re_render_polylines();
|
||||
}
|
||||
|
||||
function unhighlight_route() {
|
||||
function unhighlight_route(line_name: string, route_name: string) {
|
||||
const arr = lines_store.get(line_name)?.get(route_name);
|
||||
if (arr !== undefined) {
|
||||
arr[1] -= 1;
|
||||
}
|
||||
|
||||
re_render_polylines();
|
||||
}
|
||||
|
||||
function re_render_polylines() {
|
||||
// This keeps track of how many path are rendered.
|
||||
// If this is 0, then all paths should be rendered.
|
||||
let render_count = 0;
|
||||
for (const [, line_map] of lines_store) {
|
||||
for (const [, route_polilyne] of line_map) {
|
||||
// restore
|
||||
route_polilyne.setStyle({
|
||||
opacity: LINE_OPACITY,
|
||||
});
|
||||
for (const [, [route_polilyne, active_count]] of line_map) {
|
||||
if (active_count > 0) {
|
||||
route_polilyne.setStyle({opacity: LINE_OPACITY});
|
||||
render_count += 1;
|
||||
} else {
|
||||
route_polilyne.setStyle({opacity: 0});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (render_count === 0) {
|
||||
// enable all paths
|
||||
for (const [, line_map] of lines_store) {
|
||||
for (const [, [route_polilyne]] of line_map) {
|
||||
route_polilyne.setStyle({opacity: LINE_OPACITY});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user