incluimos version tablet

regla_portland_tablet.html

@@ -18,6 +18,10 @@
     .cursor-grab-custom { cursor: grab; }
     .cursor-grab-custom:active { cursor: grabbing; }
     .cursor-crosshair-custom { cursor: crosshair; }
+    /* Previene el scroll por defecto del navegador al tocar el Canvas */
+    #plotterCanvas {
+      touch-action: none;
+    }
   </style>
 </head>
 <body class="bg-slate-950 text-slate-100 h-screen w-screen flex flex-col font-sans select-none overflow-hidden m-0 p-0">
@@ -587,7 +591,7 @@
         btn.className = "bg-rose-500 hover:bg-rose-400 text-slate-950 font-bold px-3.5 py-1 rounded-lg text-xs transition-all flex items-center gap-2 shadow-md";
         document.getElementById('btn-ab-text').innerText = "Finalizar Puntos";
         badge.classList.remove('hidden');
-        statusText.innerText = "Haz clic en la carta para añadir puntos (A -> B -> C...)";
+        statusText.innerText = "Haz clic para añadir puntos en la carta (A -> B -> C...)";
       } else {
         resetToMoveMode();
       }
@@ -609,10 +613,11 @@
       draw();
     }
 
-    canvas.addEventListener('mousedown', (e) => {
+    // Lógica compartida para inicio de interacción (Mouse / Touch)
+    function handlePointerStart(clientX, clientY) {
       const rect = canvas.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
+      const clickX = clientX - rect.left;
-      const clickY = e.clientY - rect.top;
+      const clickY = clientY - rect.top;
 
       if (state.mode === 'ADD_POINTS') {
         const nextChar = String.fromCharCode(65 + state.points.length);
@@ -629,7 +634,6 @@
           if (angleDeg < 0) angleDeg += 360;
           
           state.rulerAngle = Math.round(angleDeg);
-          // Configuración automática de la rosa según la orientación de la regla
           state.diskAngle = (360 - state.rulerAngle) % 360;
 
           document.getElementById('ruler-angle-slider').value = state.rulerAngle;
@@ -640,7 +644,7 @@
         }
 
         draw();
-        return;
+        return false;
       }
 
       const dist = Math.hypot(clickX - state.rulerX, clickY - state.rulerY);
@@ -650,24 +654,69 @@
         state.dragStartY = clickY - state.rulerY;
         canvas.classList.remove('cursor-grab-custom');
         canvas.classList.add('cursor-grabbing');
+        return true; // Se inició el arrastre
       }
-    });
+      return false;
+    }
 
-    canvas.addEventListener('mousemove', (e) => {
+    // Lógica compartida para movimiento (Mouse / Touch)
+    function handlePointerMove(clientX, clientY) {
       if (state.isDragging && state.mode === 'MOVE') {
         const rect = canvas.getBoundingClientRect();
-        state.rulerX = (e.clientX - rect.left) - state.dragStartX;
+        state.rulerX = (clientX - rect.left) - state.dragStartX;
-        state.rulerY = (e.clientY - rect.top) - state.dragStartY;
+        state.rulerY = (clientY - rect.top) - state.dragStartY;
         draw();
       }
-    });
+    }
 
-    window.addEventListener('mouseup', () => {
+    // Lógica compartida para fin de interacción
+    function handlePointerEnd() {
       if (state.isDragging) {
         state.isDragging = false;
         canvas.classList.remove('cursor-grabbing');
         canvas.classList.add('cursor-grab-custom');
       }
+    }
+
+    // --- MANEJADORES EVENTOS MOUSE ---
+    canvas.addEventListener('mousedown', (e) => {
+      handlePointerStart(e.clientX, e.clientY);
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      handlePointerMove(e.clientX, e.clientY);
+    });
+
+    window.addEventListener('mouseup', () => {
+      handlePointerEnd();
+    });
+
+    // --- MANEJADORES EVENTOS TOUCH (TABLETS / MÓVILES) ---
+    canvas.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        const isDraggingRuler = handlePointerStart(touch.clientX, touch.clientY);
+        // Prevenir el scroll del mapa si se está tocando la regla o agregando puntos
+        if (isDraggingRuler || state.mode === 'ADD_POINTS') {
+          e.preventDefault();
+        }
+      }
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', (e) => {
+      if (state.isDragging && e.touches.length === 1) {
+        e.preventDefault(); // Prevenir desplazamiento de pantalla mientras se arrastra la regla
+        const touch = e.touches[0];
+        handlePointerMove(touch.clientX, touch.clientY);
+      }
+    }, { passive: false });
+
+    window.addEventListener('touchend', () => {
+      handlePointerEnd();
+    });
+
+    window.addEventListener('touchcancel', () => {
+      handlePointerEnd();
     });
 
     document.getElementById('disk-angle-slider').addEventListener('input', (e) => {
@@ -691,4 +740,4 @@
   </script>
 
 </body>
-</html>
+</html>