fernando/aqp-combi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve path highlighting on click

Browse Source
This commit is contained in:
Araozu 2024-09-04 11:45:06 -05:00
parent 047a6ad218
commit edf0abe86a
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/Index2.tsx
View File

@ -1,5 +1,5 @@
import L from "leaflet"; import L from "leaflet";
import { createResource, For, onMount, Suspense } from "solid-js"; import { createResource, createSignal, For, onMount, Suspense } from "solid-js";
import { LineSegmentsIcon } from "../icons/LineSegmentsIcon"; import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
import { Line, Lines, Route, Routes } from "../new_types"; import { Line, Lines, Route, Routes } from "../new_types";
@ -98,6 +98,8 @@ function LineEl(props: { line: Line }) {
} }
function RouteEl(props: { line_name: string, route: Route, color: string }) { function RouteEl(props: { line_name: string, route: Route, color: string }) {
const [active, setActive] = createSignal(false);
// Render the dots into the map // Render the dots into the map
const coords = props.route.points.map(([lat, lng]) => ({ lat, lng })); const coords = props.route.points.map(([lat, lng]) => ({ lat, lng }));
const line = L.polyline(coords, { color: props.color, opacity: LINE_OPACITY }); const line = L.polyline(coords, { color: props.color, opacity: LINE_OPACITY });
@ -113,16 +115,27 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
lines_store.get(line_name)!.set(props.route.name, [line, 0]); lines_store.get(line_name)!.set(props.route.name, [line, 0]);
const set_highlighted = () => { const set_highlighted = () => {
const is_active = active();
const arr = lines_store.get(props.line_name)?.get(props.route.name); const arr = lines_store.get(props.line_name)?.get(props.route.name);
if (arr !== undefined) {
if (is_active && arr !== undefined) {
arr[1] -= 1;
setActive(false);
} else if (!is_active && arr !== undefined) {
arr[1] += 1; arr[1] += 1;
setActive(true);
} }
}; };
const active_classes = () => {
if (active()) return "underline bg-[var(--hover-bg)] text-[var(--hover-on-bg)]";
else return "";
};
return ( return (
<button <button
class="inline-block w-full text-left cursor-pointer pl-10 class={`inline-block w-full text-left cursor-pointer pl-10
hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)]" hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)] ${active_classes()}`}
onClick={set_highlighted} onClick={set_highlighted}
onMouseEnter={() => highlight_route(props.line_name, props.route.name)} onMouseEnter={() => highlight_route(props.line_name, props.route.name)}
onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)} onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)}