Add optional arrows

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "scripts": {
     "start": "vite",
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "serve": "vite preview"
   },

src/new_types.ts

@@ -24,5 +24,6 @@ export interface Route {
     name: string
     /** `[lat,lng]`, stored as arrays to save space in JSON */
     points: Array<[number, number]>
+    arrows?: Array<[L.LatLng, L.LatLng, L.LatLng, L.LatLng]>
 }
 

src/pages/Arrow.tsx

@@ -8,6 +8,7 @@ export function Arrow() {
     const [first_point, set_first_point] = createSignal<L.LatLng | null>(null);
     const [second_point, set_second_point] = createSignal<L.LatLng | null>(null);
     const [points, setPoints] = createSignal<Array<[number, number]>>([]);
+    let arrows: Array<[L.LatLng, L.LatLng, L.LatLng, L.LatLng]> = [];
 
     onMount(() => {
         map = L.map(container as HTMLElement)
@@ -34,10 +35,11 @@ export function Arrow() {
                 // Compute the triangle
                 const p1 = first_point()!;
 
-                const [c1, c2, c3, c4] = compute_triangle_points(p1, point);
+                const points = compute_triangle_points(p1, point);
 
                 // Draw the arrow.
-                L.polygon([c1, c2, c3, c4], { color: "red" }).addTo(map!);
+                L.polygon(points, { color: "red" }).addTo(map!);
+                arrows.push(points);
 
                 // Reset
                 set_first_point(null);
@@ -95,6 +97,15 @@ export function Arrow() {
                         Punto 2: {second_point()?.lat ?? "<vacio>"}, {second_point()?.lng ?? "<vacio>"}
                     </div>
 
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={() => {
+                            navigator.clipboard.writeText(JSON.stringify(arrows))
+                                .then(() => alert("copiado"))
+                                .catch(() => alert("error copiando"));
+                        }}
+                    >
+                        Copiar flechas
+                    </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");
@@ -102,6 +113,7 @@ export function Arrow() {
                                 setPoints([]);
                                 set_first_point(null);
                                 set_second_point(null);
+                                arrows = [];
                             }
                         }}
                     >
@@ -146,9 +158,7 @@ function compute_triangle_points(start: L.LatLng, end: L.LatLng): [L.LatLng, L.L
     // Compute the angle of the rect
     // what do you call the "pendiente" of a rect?
     const pendiente = (y2 - y1) / (x2 - x1);
-    console.log("pendiente:", pendiente);
     const angle = Math.atan(pendiente);
-    console.log("angle: ", angle * (180 / Math.PI));
 
     // Vector pointing upwards
     const [vx, vy] = [delta, 0];

src/pages/Editor.tsx

@@ -66,7 +66,7 @@ export function Editor() {
     };
 
     return (
-        <div class="grid grid-cols-[30rem_auto]">
+        <div class="grid grid-cols-[20rem_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">

src/pages/Index.tsx

@@ -1,5 +1,5 @@
 import { Map, map, polyline, tileLayer } from "leaflet";
-import { createEffect, createResource, For, onMount, Suspense } from "solid-js";
+import { createEffect, createResource, createSignal, For, onMount, Suspense } from "solid-js";
 import { Line, RouteWrapper, Route, LineWrapper, PointsWrapper } from "../types";
 import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
 
@@ -85,6 +85,7 @@ function LineEl(props: { line: Line }) {
 }
 
 function RouteEl(props: { route: Route, parent_id: number, color: string }) {
+    const [draw, setDraw] = createSignal(false);
     const [points] = createResource<PointsWrapper>(async() => {
         const res = await fetch(`/data/cuenca_${props.parent_id}_ruta_${props.route.id_ruta}_ida.json`);
         if (!res.ok) throw new Error("Error fetching data");
@@ -97,7 +98,7 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) {
     });
 
     createEffect(() => {
-        if (points.state === "ready") {
+        if (points.state === "ready" && draw()) {
             // Render the dots into the map
             const coords = points()!.data[0]!.ruta_json;
 
@@ -107,7 +108,7 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) {
     });
 
     createEffect(() => {
-        if (return_points.state === "ready") {
+        if (return_points.state === "ready" && draw()) {
             // Render the dots into the map
             const coords = return_points()!.data[0]!.ruta_json;
 
@@ -117,7 +118,7 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) {
     });
 
     return (
-        <div class="pl-10">
+        <div class="pl-10" onClick={() => setDraw(true)}>
             Ruta {props.route.cod_ruta}
         </div>
     );

src/pages/Index2.tsx

@@ -172,6 +172,9 @@ function re_render_polylines() {
             if (active_count > 0) {
                 route_polilyne.setStyle({opacity: LINE_OPACITY});
                 render_count += 1;
+                // if the route has arrows and is manually toggled,
+                // render the arrows
+
             } else {
                 route_polilyne.setStyle({opacity: 0});
             }