From 00f1eb92d8bc2a996664ce88e68044a5e5d0c6e7 Mon Sep 17 00:00:00 2001 From: aerom Date: Thu, 30 Apr 2026 18:35:07 -0400 Subject: [PATCH] =?UTF-8?q?fix(daymark):=20lados=20paralelos=20+=20tama?= =?UTF-8?q?=C3=B1o=20menor=20en=20enfilacion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/js/map.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/frontend/js/map.js b/frontend/js/map.js index 81d5218..3222b46 100644 --- a/frontend/js/map.js +++ b/frontend/js/map.js @@ -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); }