alro65/AidsMonitoring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(daymark): lados paralelos + tamaño menor en enfilacion

Browse Source 
- sz 48→34 (símbolo más pequeño en mapa)
- Triángulo interior escalado desde el baricentro → lados
  estrictamente paralelos al exterior (triángulo similar, no
  recortado con offset independiente)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alvaro Enrique Romero Donado
2026-04-30 18:35:07 -04:00
parent aa1b93c7a8
commit 00f1eb92d8
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/map.js
+18 -18
View File
@@ -1216,10 +1216,10 @@ function _encBeaconCanvas(colours, catlam, region, sz = 44) {
}
// ── Range / Leading-mark dayboard — dos triángulos concéntricos ──────────────
// Símbolo estándar IALA: triángulo exterior BLANCO + triángulo interior NEGRO.
// Ambos apuntan hacia arriba. Sin patas, sin mástil — solo la marca diurna.
// Flare de luz en el ápice si la feature tiene LITCHR.
function _encRangeDaymarkCanvas(colours, hasLight, sz = 48) {
// Símbolo IALA: triángulo exterior BLANCO + interior NEGRO con lados
// estrictamente paralelos (triángulo similar centrado en el baricentro).
// Tamaño reducido para no dominar el mapa.
function _encRangeDaymarkCanvas(colours, hasLight, sz = 34) {
const c = _mkC(sz); const ctx = c.getContext('2d'); const cx = sz / 2;
// Light colour for optional flare
@@ -1227,7 +1227,7 @@ function _encRangeDaymarkCanvas(colours, hasLight, sz = 48) {
// ── Layout ───────────────────────────────────────────────────────────────
const triTop = sz * 0.06; // apex of outer triangle
const triBot = sz * 0.92; // base of outer triangle
const triBot = sz * 0.94; // base of outer triangle
const halfW = sz * 0.44; // half-width at base
// ── OUTER triangle — WHITE ───────────────────────────────────────────────
@@ -1238,29 +1238,29 @@ function _encRangeDaymarkCanvas(colours, hasLight, sz = 48) {
ctx.closePath();
ctx.fillStyle = '#ffffff';
ctx.fill();
// thin dark border so it reads against light backgrounds
ctx.strokeStyle = '#444';
ctx.strokeStyle = '#555';
ctx.lineWidth = 1.0;
ctx.stroke();
// ── INNER triangle — BLACK (45 % of outer) ───────────────────────────────
const iS = 0.45;
const triH = triBot - triTop;
const iTop = triTop + triH * (1 - iS) * 0.50;
const iBot = triBot - triH * (1 - iS) * 0.15;
const iHalf = halfW * iS * ((iBot - triTop) / triH);
// ── INNER triangle — BLACK, lados paralelos al exterior ──────────────────
// Escalar desde el baricentro garantiza lados paralelos (triángulo similar).
const r = 0.48; // escala del interior
const cy = (triTop + 2 * triBot) / 3; // baricentro Y del triángulo exterior
const iApexY = cy + r * (triTop - cy); // vértice superior del interior
const iBaseY = cy + r * (triBot - cy); // base del interior
const iHalf = halfW * r; // media-anchura → lados paralelos
ctx.beginPath();
ctx.moveTo(cx, iTop);
ctx.lineTo(cx + iHalf, iBot);
ctx.lineTo(cx - iHalf, iBot);
ctx.moveTo(cx, iApexY);
ctx.lineTo(cx + iHalf, iBaseY);
ctx.lineTo(cx - iHalf, iBaseY);
ctx.closePath();
ctx.fillStyle = '#111111';
ctx.fill();
ctx.strokeStyle = '#000';
ctx.lineWidth = 0.5;
ctx.lineWidth = 0.6;
ctx.stroke();
// ── Light flare at apex ───────────────────────────────────────────────────
// ── Light flare al ápice (si la feature tiene luz) ───────────────────────
if (hasLight) {
_drawLightFlare(ctx, cx, triTop - sz * 0.02, lightCss);
}