Render arrows at a degree

src/pages/Arrow.tsx

@@ -34,10 +34,10 @@ export function Arrow() {
                 // Compute the triangle
                 const p1 = first_point()!;
 
-                const [c1, c2, c3] = compute_triangle_points(p1, point);
+                const [c1, c2, c3, c4] = compute_triangle_points(p1, point);
 
-                // Draw the arrow. TODO: direction
+                // Draw the arrow.
-                L.polygon([c1, c2, c3], { color: "red" }).addTo(map!);
+                L.polygon([c1, c2, c3, c4], { color: "red" }).addTo(map!);
 
                 // Reset
                 set_first_point(null);
@@ -134,29 +134,51 @@ export function Arrow() {
  *
  * @param start The starting point
  */
-function compute_triangle_points(start: L.LatLng, end: L.LatLng): [L.LatLng, L.LatLng, L.LatLng] {
+function compute_triangle_points(start: L.LatLng, end: L.LatLng): [L.LatLng, L.LatLng, L.LatLng, L.LatLng] {
-    // Assumes that the line is always straight, pointing up
+    // Determines the size of the triangle
-    // then it will handle rotation
+    const delta = (start.lat < end.lat) ? 0.0002 : -0.0002;
-    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];
+
+    // 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];
+
+    // Rotate that vector to get the delta for each component
+    const [nvx, nvy] = [
+        (vx * Math.cos(angle)) - (vy * Math.sin(angle)),
+        (vx * Math.sin(angle)) + (vy * Math.cos(angle)),
+    ];
+    // Round to 5 decimals
+    const [x_delta, y_delta] = [
+        (Math.round(nvx * 100000)) / 100000,
+        (Math.round(nvy * 100000)) / 100000,
+    ];
+
+    // Use x_delta and y_delta to get the neccesary points
+
     // Top
-    const [x4, y4] = [x3 + x_delta, y3];
+    const [x4, y4] = [x3 + x_delta, y3 + y_delta];
     // Bottom
-    const [x5, y5] = [x3 - x_delta, y3];
+    const [x5, y5] = [x3 - x_delta, y3 - y_delta];
     // Left
-    const [x6, y6] = [x5, y5 - x_delta];
+    const [x6, y6] = [x5 + y_delta, y5 - x_delta];
     // Right
-    const [x7, y7] = [x5, y5 + x_delta];
+    const [x7, y7] = [x5 - y_delta, y5 + x_delta];
 
     return [
         new L.LatLng(x4, y4),
         new L.LatLng(x6, y6),
+        new L.LatLng(x3, y3),
         new L.LatLng(x7, y7),
     ];
 }