Rework route rendering to separate departure and return

src/pages/Editor.tsx

@@ -34,7 +34,7 @@ export function Editor() {
             name: route_name(),
             departure: departure_points().map(({lat,lng}) => [lat,lng]),
             departure_arrows: [],
-            return: departure_points().map(({lat,lng}) => [lat,lng]),
+            return: return_points().map(({lat,lng}) => [lat,lng]),
             return_arrows: [],
         };
 

src/pages/Index2.tsx

@@ -1,5 +1,5 @@
 import L from "leaflet";
-import { createResource, createSignal, For, onMount, Suspense } from "solid-js";
+import { createEffect, createResource, createSignal, For, onMount, Suspense } from "solid-js";
 import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
 import { Line, Lines, Route, Routes } from "../new_types";
 
@@ -23,7 +23,7 @@ export function Index2() {
         L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
             maxZoom: 17,
             minZoom: 12,
-            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+            attribution: "Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
         }).addTo(global_map);
     });
 
@@ -98,67 +98,107 @@ function LineEl(props: { line: Line }) {
 }
 
 function RouteEl(props: { line_name: string, route: Route, color: string }) {
-    const [active, setActive] = createSignal(false);
+    const [departure_active, set_departure_active] = createSignal(false);
+    const [return_active, set_return_active] = createSignal(false);
+    const [departure_count, set_departure_count] = createSignal(0);
+    const [return_count, set_return_count] = createSignal(0);
 
-    // Render the dots into the map
+    // Create departure and return polylines
-    const coords = props.route.points.map(([lat, lng]) => ({ lat, lng }));
+    const departure_polyline = L.polyline(props.route.departure, {color: props.color});
-    const line = L.polyline(coords, { color: props.color, opacity: LINE_OPACITY });
+    const return_polyline = L.polyline(props.route.return, {color: props.color});
-    line.addTo(global_map!);
 
-    // Store the route in the global map
+    // Rended the lines into the map
-    // Create line map if neccesary
+    createEffect(() => {
-    const line_name = props.line_name;
+        if (departure_count() > 0) {
-    if (!lines_store.has(line_name)) {
+            departure_polyline.addTo(global_map!);
-        lines_store.set(line_name, new Map());
+        } else {
+            departure_polyline.removeFrom(global_map!);
         }
-    // Create the arrows, if any
+    });
-    const arrows = [];
+    createEffect(() => {
-    if (props.route.arrows) {
+        if (return_count() > 0) {
-        for (const a of props.route.arrows) {
+            return_polyline.addTo(global_map!);
-            const arrow = L.polygon(a, {color: props.color});
+        } else {
-            arrows.push(arrow);
+            return_polyline.removeFrom(global_map!);
         }
+    });
+
+    const toggle_departure = () => {
+        const currently_active = departure_active();
+        if (currently_active) {
+            set_departure_count((c) => c - 1);
+            set_departure_active(false);
+        } else {
+            set_departure_count((c) => c + 1);
+            set_departure_active(true);
         }
-
+    };
-    // store
+    const toggle_return = () => {
-    lines_store.get(line_name)!.set(props.route.name, [line, arrows, 0]);
+        const currently_active = return_active();
-
+        if (currently_active) {
-    const set_highlighted = () => {
+            set_return_count((c) => c - 1);
-        const is_active = active();
+            set_return_active(false);
-        const arr = lines_store.get(props.line_name)?.get(props.route.name);
+        } else {
-
+            set_return_count((c) => c + 1);
-        if (is_active && arr !== undefined) {
+            set_return_active(true);
-            arr[2] -= 1;
-            setActive(false);
-        } else if (!is_active && arr !== undefined) {
-            arr[2] += 1;
-            setActive(true);
         }
     };
 
-    const active_classes = () => {
+    const departure_classes = () => {
-        if (active()) return "underline bg-[var(--hover-bg)] text-[var(--hover-on-bg)] border-[var(--hover-bg)]";
+        if (departure_count() > 0) {
-        else return "border-transparent";
+            return "bg-r-hover-bg text-r-hover-on-bg";
+        } else {
+            return "";
+        }
+    };
+    const return_classes = () => {
+        if (return_count() > 0) {
+            return "bg-r-hover-bg text-r-hover-on-bg";
+        } else {
+            return "";
+        }
     };
-
     return (
         <button
-            class={`grid grid-cols-[auto_2.5rem_3rem] w-full text-left cursor-pointer pl-10 border-2
+            class="grid grid-cols-[auto_2.75rem_3.5rem] w-full text-left cursor-pointer"
-                hover:bg-[var(--hover-br)] hover:text-[var(--hover-on-br)] hover:border-r-hover-bg ${active_classes()}`}
+        >
-            onClick={set_highlighted}
+            <span
-            onMouseEnter={() => highlight_route(props.line_name, props.route.name)}
+                class={"pl-10 border-2 border-transparent hover:border-r-hover-bg"}
-            onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)}
+                onMouseEnter={() => {
+                    set_departure_count((c) => c + 1);
+                    set_return_count((c) => c + 1);
+                }}
+                onMouseLeave={() => {
+                    set_departure_count((c) => c - 1);
+                    set_return_count((c) => c - 1);
+                }}
             >
-            <span>
                 Ruta {props.route.name}
             </span>
             <span
-                class="hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)] text-center"
+                class={`text-center border-2 border-transparent ${departure_classes()}`}
+                onMouseEnter={() => {
+                    set_departure_count((c) => c + 1);
+                }}
+                onMouseLeave={() => {
+                    set_departure_count((c) => c - 1);
+                }}
+                onClick={toggle_departure}
             >
                 Ida
             </span>
             <span
-                class="hover:bg-r-hover-bg hover:text-r-hover-on-bg text-center"
+                class={`text-center border-2 border-transparent ${return_classes()}`}
+                onMouseEnter={(ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    set_return_count((c) => c + 1);
+                }}
+                onMouseLeave={(ev) => {
+                    ev.stopPropagation();
+                    set_return_count((c) => c - 1);
+                }}
+                onClick={toggle_return}
             >
                 Vuelta
             </span>