Ajuste de puntos al hacer zoom

regla_portland_offline.html

@@ -155,7 +155,7 @@
         <i class="fa-solid fa-crosshairs mr-1.5 animate-pulse"></i> <span id="status-text">Haz clic para añadir puntos en la carta (A -> B -> C...)</span>
       </div>
 
-<!--	
+<!--
       <div class="absolute bottom-3 right-3 bg-slate-950/80 border border-slate-800 text-[9.5px] text-slate-400 px-2.5 py-1 rounded-md backdrop-blur-sm pointer-events-none z-10">
         Usa el zoom o las barras de desplazamiento para explorar la carta
       </div>
@@ -408,6 +408,8 @@
       // --- LÍNEAS FINAS DE COORDENADAS (LATITUD Y LONGITUD) PARA CADA PUNTO ---
       state.points.forEach((p, idx) => {
         const color = pointColors[idx % pointColors.length];
+        const px = p.x * state.zoom;
+        const py = p.y * state.zoom;
         
         ctx.strokeStyle = color;
         ctx.lineWidth = 1;
@@ -415,14 +417,14 @@
 
         // Línea Horizontal (Latitud - l) a través de todo el Canvas
         ctx.beginPath();
-        ctx.moveTo(0, p.y);
-        ctx.lineTo(canvas.width, p.y);
+        ctx.moveTo(0, py);
+        ctx.lineTo(canvas.width, py);
         ctx.stroke();
 
         // Línea Vertical (Longitud - L) a través de todo el Canvas
         ctx.beginPath();
-        ctx.moveTo(p.x, 0);
-        ctx.lineTo(p.x, canvas.height);
+        ctx.moveTo(px, 0);
+        ctx.lineTo(px, canvas.height);
         ctx.stroke();
 
         ctx.setLineDash([]);
@@ -434,24 +436,24 @@
         ctx.lineWidth = 3;
         ctx.setLineDash([6, 4]);
         ctx.beginPath();
-        ctx.moveTo(state.points[0].x, state.points[0].y);
+        ctx.moveTo(state.points[0].x * state.zoom, state.points[0].y * state.zoom);
         for (let i = 1; i < state.points.length; i++) {
-          ctx.lineTo(state.points[i].x, state.points[i].y);
+          ctx.lineTo(state.points[i].x * state.zoom, state.points[i].y * state.zoom);
         }
         ctx.stroke();
         ctx.setLineDash([]);
 
         // Escribir la distancia en millas náuticas sobre cada segmento
         if (state.pixelsPerNauticalMileBase !== null) {
-          let currentPixelsPerNM = state.pixelsPerNauticalMileBase * state.zoom;
           for (let i = 0; i < state.points.length - 1; i++) {
             let pA = state.points[i];
             let pB = state.points[i + 1];
-            let distPixels = Math.hypot(pB.x - pA.x, pB.y - pA.y);
-            let distNM = distPixels / currentPixelsPerNM;
+            // Distancia en coordenadas base
+            let distPixelsBase = Math.hypot(pB.x - pA.x, pB.y - pA.y);
+            let distNM = distPixelsBase / state.pixelsPerNauticalMileBase;
 
-            let midX = (pA.x + pB.x) / 2;
-            let midY = (pA.y + pB.y) / 2;
+            let midX = ((pA.x + pB.x) / 2) * state.zoom;
+            let midY = ((pA.y + pB.y) / 2) * state.zoom;
 
             ctx.save();
             ctx.translate(midX, midY);
@@ -477,10 +479,12 @@
       // Dibujar marcadores de puntos de ruta con el color correspondiente
       state.points.forEach((p, idx) => {
         const color = pointColors[idx % pointColors.length];
+        const px = p.x * state.zoom;
+        const py = p.y * state.zoom;
 
         ctx.fillStyle = color;
         ctx.beginPath();
-        ctx.arc(p.x, p.y, 6, 0, Math.PI * 2);
+        ctx.arc(px, py, 6, 0, Math.PI * 2);
         ctx.fill();
         ctx.strokeStyle = '#ffffff';
         ctx.lineWidth = 2;
@@ -488,11 +492,11 @@
 
         // Fondo para mejor legibilidad del nombre del punto
         ctx.fillStyle = 'rgba(15, 23, 42, 0.75)';
-        ctx.fillRect(p.x + 8, p.y - 12, 55, 16);
+        ctx.fillRect(px + 8, py - 12, 55, 16);
 
         ctx.fillStyle = color;
         ctx.font = 'bold 11px sans-serif';
-        ctx.fillText(`Punto ${p.label}`, p.x + 12, p.y);
+        ctx.fillText(`Punto ${p.label}`, px + 12, py);
       });
     }
 
@@ -781,7 +785,10 @@
 
       if (state.mode === 'ADD_POINTS') {
         const nextChar = String.fromCharCode(65 + state.points.length);
-        state.points.push({ x: clickX, y: clickY, label: nextChar });
+        // Almacenar coordenadas base (independientes del zoom)
+        const baseX = clickX / state.zoom;
+        const baseY = clickY / state.zoom;
+        state.points.push({ x: baseX, y: baseY, label: nextChar });
 
         if (state.points.length === 2) {
           const pA = state.points[0];
@@ -799,8 +806,8 @@
           document.getElementById('ruler-angle-slider').value = state.rulerAngle;
           document.getElementById('disk-angle-slider').value = state.diskAngle;
 
-          state.rulerX = (pA.x + pB.x) / 2;
-          state.rulerY = (pA.y + pB.y) / 2;
+          state.rulerX = ((pA.x + pB.x) / 2) * state.zoom;
+          state.rulerY = ((pA.y + pB.y) / 2) * state.zoom;
         }
 
         draw();