Add route. Naive triangulation

public/n/lines.json

@@ -26,5 +26,12 @@
         "color": "#ff7300",
         "hover_bg": "#ff7300",
         "hover_on_bg": "white"
+    },
+    {
+        "id": 5,
+        "name": "5",
+        "color": "#b8860b",
+        "hover_bg": "#b8860b",
+        "hover_on_bg": "white"
     }
 ]

src/App.tsx

@@ -3,6 +3,7 @@ import { Index } from "./pages/Index";
 import { Route, Router } from "@solidjs/router";
 import { Editor } from "./pages/Editor";
 import { Index2 } from "./pages/Index2";
+import { Arrow } from "./pages/Arrow";
 
 export default function() {
     return (
@@ -11,6 +12,7 @@ export default function() {
                 <Route path="/" component={Index} />
                 <Route path="/new" component={Index2} />
                 <Route path="/editor" component={Editor} />
+                <Route path="/arrow" component={Arrow} />
             </Router>
         </>
     );

src/pages/Arrow.tsx

@@ -0,0 +1,125 @@
+import L from "leaflet";
+import { createSignal, For, onMount } from "solid-js";
+
+let map: L.Map | null = null;
+
+export function Arrow() {
+    const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
+    const [points, setPoints] = createSignal<Array<L.LatLng>>([]);
+
+    onMount(() => {
+        map = L.map(container as HTMLElement)
+            .setView([-16.40171, -71.53040], 13);
+
+        L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
+            maxZoom: 18,
+            minZoom: 12,
+            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+        }).addTo(map);
+
+        // Set up click logic
+        map.addEventListener("click", (ev) => {
+            const p1 = ev.latlng;
+            const p2 = new L.LatLng(
+                p1.lat + 0.005,
+                p1.lng,
+            );
+
+            const [c1, c2, c3] = compute_triangle_points(p1, p2);
+
+            // Draw the arrow. TODO: direction
+            L.polygon([c1, c2, c3], { color: "red" }).addTo(map!);
+        });
+    });
+
+    return (
+        <div class="grid grid-cols-[30rem_auto]">
+            <div>
+                <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
+                <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
+                    Creador de flechas
+                </h2>
+
+                <p class="px-2">
+                    Haz click en cualquier parte del mapa para crear una flecha.
+                </p>
+
+                <div class="px-2 py-4">
+                    Puntos:
+                    <br />
+                    <div class="h-40 overflow-scroll p-2 my-2 rounded border-2 border-c-primary">
+                        <For each={points()}>
+                            {(p) => <p class="font-mono">{p.lat},{p.lng}</p>}
+                        </For>
+                    </div>
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={() => {
+                            if (points().length >= 1) {
+                                setPoints((x) => x.slice(0, -1));
+                            }
+                        }}
+                    >
+                        Retroceder
+                    </button>
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={() => {
+                            const confirmation = confirm("¿Estas seguro? Se perderán todos los puntos");
+                            if (confirmation) setPoints([]);
+                        }}
+                    >
+                        Reiniciar
+                    </button>
+                </div>
+            </div>
+            <div class="py-[0.5vh] pr-2">
+                <div class="rounded-lg overflow-hidden p-1"
+                    style="box-shadow: inset 0 0 5px 0px var(--main)"
+                >
+                    {container}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
+/**
+ *    p0
+ *    /\
+ *   /__\
+ * p1    p2
+ *
+ * [p0, p1, p2]
+ *
+ * Calculates the points for a isosceles triangle
+ * that points toward the passed line
+ *
+ * @param start The starting point
+ */
+function compute_triangle_points(start: L.LatLng, end: L.LatLng): [L.LatLng, L.LatLng, L.LatLng] {
+    // Assumes that the line is always straight, pointing up
+    // then it will handle rotation
+    const x_delta = 0.0005;
+    const y_delta = 0.0005;
+
+    const { lat: x1, lng: y1 } = start;
+    const { lat: x2, lng: y2 } = end;
+
+    // Middle point
+    const [x3, y3] = [(x1 + x2) / 2, (y1 + y2) / 2];
+    // Top
+    const [x4, y4] = [x3 + x_delta, y3];
+    // Bottom
+    const [x5, y5] = [x3 - x_delta, y3];
+    // Left
+    const [x6, y6] = [x5, y5 - x_delta];
+    // Right
+    const [x7, y7] = [x5, y5 + x_delta];
+
+    return [
+        new L.LatLng(x4, y4),
+        new L.LatLng(x6, y6),
+        new L.LatLng(x7, y7),
+    ];
+}
+