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

Render arrows at a degree

Browse Source
This commit is contained in:
Araozu 2024-09-04 18:17:30 -05:00
parent 81ca9d1bd6
commit bac8157aec
1 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/Arrow.tsx
View File

@ -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
L.polygon([c1, c2, c3], { color: "red" }).addTo(map!);
// Draw the arrow.
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] {
// Assumes that the line is always straight, pointing up
// then it will handle rotation
const x_delta = 0.0005;
const y_delta = 0.0005;
function compute_triangle_points(start: L.LatLng, end: L.LatLng): [L.LatLng, L.LatLng, L.LatLng, L.LatLng] {
// Determines the size of the triangle
const delta = (start.lat < end.lat) ? 0.0002 : -0.0002;
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),
];
}