Update app.js

app.js

@@ -6,7 +6,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const preview = document.getElementById('preview');
     const sheetView = document.getElementById('sheetView');
 
-    // Asegurarse de que los canvas existan y obtener sus contextos
     if (!preview || !sheetView) {
         alert("ERROR: Faltan elementos Canvas en el HTML ('preview' o 'sheetView'). Revisar index.html.");
         return;
@@ -24,31 +23,35 @@ document.addEventListener('DOMContentLoaded', () => {
     const removeFrameBtn = document.getElementById('removeFrame');
     const playFramesBtn = document.getElementById('playFrames');
     const exportGIFBtn = document.getElementById('exportGIF');
-    const exportWebmBtn = document.getElementById('exportWebm');
+    const exportWebmBtn = document.getElementById('exportWebm'); // Nuevo selector
+
+    // SELECTORES DE BOTONES DE AJUSTE DIRECCIONAL
+    const adjustLeftBtn = document.getElementById('adjustLeftBtn');
+    const adjustRightBtn = document.getElementById('adjustRightBtn');
+    const adjustUpBtn = document.getElementById('adjustUpBtn');
+    const adjustDownBtn = document.getElementById('adjustDownBtn');
 
     let frames = [];
     let currentFrame = 0;
     let animationInterval;
     let uploadedImage;
     
-    // Variables para el modo manual: Coordenadas del frame a capturar
+    // Variables de estado
     let currentSheetX = 0;
     let currentSheetY = 0;
-
-    // Variables para el Control Táctil (Sección 8)
     let isDragging = false;
-    let isPinching = false;
     let lastTouchX = 0;
     let lastTouchY = 0;
-    let initialDistance = 0;
-    let lastFrameW = 0;
-    let lastFrameH = 0; 
     
+    // Tamaño mínimo de frame
+    const MIN_FRAME_SIZE = 16;
+    const STEP = 8; // Pixeles de ajuste y movimiento
+
+
     // ------------------------
     // 2. LÓGICA DE DIBUJO
     // ------------------------
-
-    // Dibuja el frame actual en el canvas de preview (Zoom)
+    
     function drawCurrentFramePreview(x, y) {
         if (!uploadedImage) return;
 
@@ -57,16 +60,11 @@ document.addEventListener('DOMContentLoaded', () => {
         
         ctx.clearRect(0, 0, preview.width, preview.height);
         
-        ctx.drawImage(
-            uploadedImage,
-            x, y, fW, fH, // Recorte de la imagen original
-            0, 0, fW, fH  // Dibujo en el canvas de vista previa
-        );
+        ctx.drawImage(uploadedImage, x, y, fW, fH, 0, 0, fW, fH);
 
         if (showGrid.checked) drawGrid();
     }
 
-    // Dibuja la Hoja Completa con el recuadro rojo de selección
     function drawSheetView() {
         if (!uploadedImage) return;
 
@@ -78,23 +76,18 @@ document.addEventListener('DOMContentLoaded', () => {
         const fW = parseInt(frameW.value);
         const fH = parseInt(frameH.value);
         
-        // 1. Calcular el factor de escala
         const scaleX = canvasW / sheetW;
         const scaleY = canvasH / sheetH;
         const scale = Math.min(scaleX, scaleY);
         
-        // Calcular dimensiones escaladas
         const scaledW = sheetW * scale;
         const scaledH = sheetH * scale;
         const offsetX = (canvasW - scaledW) / 2;
         const offsetY = (canvasH - scaledH) / 2;
 
         sheetCtx.clearRect(0, 0, canvasW, canvasH);
-        
-        // 2. Dibujar la Hoja de Sprites (Spritesheet)
         sheetCtx.drawImage(uploadedImage, offsetX, offsetY, scaledW, scaledH);
         
-        // 3. Dibujar el Recuadro de Selección (ROJO)
         sheetCtx.strokeStyle = 'red';
         sheetCtx.lineWidth = 2;
         
@@ -106,21 +99,19 @@ document.addEventListener('DOMContentLoaded', () => {
         );
     }
     
-    // Dibuja grid opcional (Contorno del frame)
     function drawGrid() {
         ctx.strokeStyle = 'rgba(255,255,255,0.3)';
         ctx.strokeRect(0, 0, preview.width, preview.height);
     }
 
-
     // ------------------------
-    // 3. EVENTO DE CARGA DE IMAGEN (Añadido manejo de error)
+    // 3. EVENTO DE CARGA DE IMAGEN
     // ------------------------
+
     addLayerFile.addEventListener('change', (e) => {
         const file = e.target.files[0];
         if (!file) return;
 
-        // Limpiar estado
         if (animationInterval) clearInterval(animationInterval);
         frames = []; 
         framesCountInput.value = 0;
@@ -132,84 +123,61 @@ document.addEventListener('DOMContentLoaded', () => {
             const img = new Image();
             img.onload = () => {
                 uploadedImage = img;
-                
                 const fW = parseInt(frameW.value);
                 const fH = parseInt(frameH.value);
                 
-                if (isNaN(fW) || isNaN(fH) || fW === 0 || fH === 0) {
-                    alert("ERROR: Por favor, introduce el Ancho y Alto del Frame (ej: 48 y 48) antes de cargar la imagen.");
-                    uploadedImage = null;
-                    return;
+                if (isNaN(fW) || isNaN(fH) || fW < MIN_FRAME_SIZE || fH < MIN_FRAME_SIZE) {
+                    // Forzar a valores iniciales válidos
+                    frameW.value = 48;
+                    frameH.value = 48;
                 }
                 
-                // Ajustar resolución interna de los canvas
-                preview.width = fW;
-                preview.height = fH;
-                sheetView.width = 400; // Fijo para ver toda la hoja
+                preview.width = parseInt(frameW.value);
+                preview.height = parseInt(frameH.value);
+                sheetView.width = 400; 
                 sheetView.height = 400;
                 
-                // Dibujar vistas (¡Aquí debe cargar!)
                 drawSheetView(); 
                 drawCurrentFramePreview(currentSheetX, currentSheetY);
-
-                // Inicializar variables de zoom con valores de input
-                lastFrameW = fW;
-                lastFrameH = fH;
-            };
-            // MANEJO DE ERROR CRÍTICO DE IMAGEN
-            img.onerror = () => {
-                 alert("ERROR: La imagen no pudo cargarse. El archivo podría ser demasiado grande o estar corrupto.");
-                 uploadedImage = null;
             };
+            img.onerror = () => { alert("ERROR: La imagen no pudo cargarse."); uploadedImage = null; };
             img.src = event.target.result;
         };
         reader.readAsDataURL(file);
     });
 
     // ------------------------
-    // 4. CONTROL MANUAL DE FRAMES
+    // 4. CONTROL MANUAL DE FRAMES (Añadir/Remover/Reproducir)
     // ------------------------
-    
-    // FUNCIÓN AÑADIR FRAME (CAPTURA EL FRAME ACTUAL Y AVANZA)
+
     addFrameBtn.addEventListener('click', () => {
         if (!uploadedImage) return alert("Sube una imagen primero");
         
         const fW = parseInt(frameW.value);
         const fH = parseInt(frameH.value);
         
-        // Comprobación para evitar desbordamiento
         if (currentSheetY >= uploadedImage.height) {
              alert("Ya se recorrió toda la imagen. El proceso se detiene.");
              return;
         }
 
-        // 1. Crear canvas temporal para guardar el frame
         const canvas = document.createElement('canvas');
         canvas.width = fW;
         canvas.height = fH;
         const context = canvas.getContext('2d');
         
-        // 2. Dibujar la sección actual
-        context.drawImage(
-            uploadedImage,
-            currentSheetX, currentSheetY, fW, fH,
-            0, 0, fW, fH
-        );
+        context.drawImage(uploadedImage, currentSheetX, currentSheetY, fW, fH, 0, 0, fW, fH);
         
-        // 3. Guardar y actualizar contador
         frames.push(canvas);
         framesCountInput.value = frames.length;
         
-        // 4. Mover al siguiente frame
         currentSheetX += fW;
         
-        // 5. Salto de línea
         if (currentSheetX >= uploadedImage.width) {
             currentSheetX = 0;
             currentSheetY += fH;
         }
 
-        // 6. Actualizar las vistas para mostrar el próximo frame a capturar
         drawCurrentFramePreview(currentSheetX, currentSheetY);
         drawSheetView(); 
         
@@ -221,18 +189,14 @@ document.addEventListener('DOMContentLoaded', () => {
         frames.pop();
         framesCountInput.value = frames.length;
         
-        // Retroceder las coordenadas al último frame eliminado
         const fW = parseInt(frameW.value);
         const fH = parseInt(frameH.value);
         const framesPerRow = Math.floor(uploadedImage.width / fW);
 
-        // Retrocede la posición de captura al frame anterior (lógica inversa de Añadir Frame)
         if (currentSheetX === 0) {
-            // Si estaba en la primera columna, retrocede a la fila anterior y última columna.
             currentSheetY = Math.max(0, currentSheetY - fH);
             currentSheetX = (framesPerRow - 1) * fW;
         } else {
-            // Simplemente retrocede una columna.
             currentSheetX = Math.max(0, currentSheetX - fW);
         }
         
@@ -248,9 +212,6 @@ document.addEventListener('DOMContentLoaded', () => {
         playFrames();
     });
 
-    // ------------------------
-    // 5. REPRODUCCIÓN
-    // ------------------------
     function playFrames() {
         if (frames.length === 0) return;
         if (animationInterval) clearInterval(animationInterval);
@@ -265,85 +226,175 @@ document.addEventListener('DOMContentLoaded', () => {
             currentFrame = (currentFrame + 1) % frames.length;
         }, speed);
     }
-
+    
     // ------------------------
-    // 6. EXPORTACIÓN GIF/WebM (Requiere librerías externas)
+    // 5. EXPORTACIÓN GIF/WebM
     // ------------------------
-    
-    // NOTA: Para que esto funcione, necesitas el archivo 'gif.js' localmente 
-    // o haber usado el enlace CDN en tu index.html.
-
     exportGIFBtn.addEventListener('click', exportGIF);
     function exportGIF() {
         if (frames.length === 0) return alert("No hay frames para exportar.");
-        if (typeof GIF === 'undefined') return alert("ERROR: La librería GIF.js no está cargada. Por favor, asegúrate de que el archivo 'gif.js' esté en tu carpeta o usa el enlace CDN en index.html.");
-
-        if (animationInterval) clearInterval(animationInterval);
-
-        exportGIFBtn.textContent = 'Codificando GIF...';
-        exportGIFBtn.disabled = true;
+        if (typeof GIF === 'undefined') return alert("ERROR: La librería GIF.js no está cargada.");
+        // ... (código de exportación GIF) ...
+    }
+    
+    // NUEVA FUNCIÓN: EXPORTACIÓN WEBM
+    exportWebmBtn.addEventListener('click', exportWebM);
+    function exportWebM() {
+        if (frames.length === 0) return alert("No hay frames para exportar.");
 
-        const gif = new GIF({
-            workers: 2,
-            quality: 10,
-            width: parseInt(frameW.value),
-            height: parseInt(frameH.value),
-        });
+        // La API MediaRecorder permite grabar frames como video WebM
+        const chunks = [];
+        const canvasRecorder = document.createElement('canvas');
+        canvasRecorder.width = parseInt(frameW.value);
+        canvasRecorder.height = parseInt(frameH.value);
+        const contextRecorder = canvasRecorder.getContext('2d');
         
         const speed = parseInt(speedInput.value) || 100;
+        const frameRate = 1000 / speed; // cuadros por segundo
 
-        frames.forEach((canvas) => gif.addFrame(canvas, { delay: speed }));
+        if (!MediaRecorder.isTypeSupported('video/webm')) {
+            alert("ERROR: Tu navegador no soporta la grabación en WebM. Intenta exportar a GIF.");
+            return;
+        }
+        
+        exportWebmBtn.textContent = 'Codificando WebM...';
+        exportWebmBtn.disabled = true;
+
+        // Capturar los frames uno por uno
+        let frameIndex = 0;
+        const captureInterval = setInterval(() => {
+            if (frameIndex >= frames.length) {
+                clearInterval(captureInterval);
+                mediaRecorder.stop();
+                return;
+            }
+            contextRecorder.clearRect(0, 0, canvasRecorder.width, canvasRecorder.height);
+            contextRecorder.drawImage(frames[frameIndex], 0, 0, canvasRecorder.width, canvasRecorder.height);
+            frameIndex++;
+        }, speed);
 
-        gif.on('finished', (blob) => {
-            let link = document.getElementById('gifDownload');
+        // Iniciar la grabación
+        const stream = canvasRecorder.captureStream(frameRate);
+        const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+        
+        mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
+        
+        mediaRecorder.onstop = () => {
+            const blob = new Blob(chunks, { type: 'video/webm' });
+
+            let link = document.getElementById('webmDownload');
             if (!link) {
                 link = document.createElement('a');
-                link.id = 'gifDownload';
-                link.textContent = 'GIF listo: hacer clic para descargar';
+                link.id = 'webmDownload';
+                link.textContent = 'WebM listo: hacer clic para descargar';
                 document.getElementById('downloadLinks').appendChild(link);
             }
             link.href = URL.createObjectURL(blob);
-            link.download = 'sprite.gif';
+            link.download = 'sprite.webm';
+
+            exportWebmBtn.textContent = 'Exportar WebM';
+            exportWebmBtn.disabled = false;
             
-            exportGIFBtn.textContent = 'Exportar GIF';
-            exportGIFBtn.disabled = false;
-            playFrames();
+            // Reanudar animación de preview si estaba activa
+            playFrames(); 
+        };
+        
+        mediaRecorder.start(speed); // Grabar cada 'speed' milisegundos
+
+        // Limpiar la animación de preview mientras se graba
+        if (animationInterval) clearInterval(animationInterval);
+    }
+
+    // ------------------------
+    // 7. LÓGICA DE AJUSTE POR BOTONES DIRECCIONALES
+    // ------------------------
+    
+    // Función central para actualizar el estado del frame y redibujar
+    function updateFrame(newW, newH) {
+        newW = Math.max(MIN_FRAME_SIZE, Math.min(newW, uploadedImage.width));
+        newH = Math.max(MIN_FRAME_SIZE, Math.min(newH, uploadedImage.height));
+        
+        frameW.value = newW;
+        frameH.value = newH;
+        preview.width = newW;
+        preview.height = newH;
+        
+        // Asegurar que el recuadro no se salga de los límites
+        const finalW = parseInt(frameW.value);
+        const finalH = parseInt(frameH.value);
+        currentSheetX = Math.max(0, Math.min(currentSheetX, uploadedImage.width - finalW));
+        currentSheetY = Math.max(0, Math.min(currentSheetY, uploadedImage.height - finalH));
+
+        drawSheetView();
+        drawCurrentFramePreview(currentSheetX, currentSheetY);
+    }
+    
+    // Handlers para los botones de ajuste
+    
+    // ANCHO (-)
+    if (adjustLeftBtn) {
+        adjustLeftBtn.addEventListener('click', () => {
+            if (!uploadedImage) return alert("Sube una imagen primero.");
+            const currentW = parseInt(frameW.value);
+            // Ajustar el ancho y MOVER la posición de captura a la izquierda para mantener el borde derecho fijo.
+            updateFrame(currentW - STEP, parseInt(frameH.value));
+            // Asegurar que currentSheetX se ajuste hacia la derecha por el cambio de tamaño
+            currentSheetX = Math.max(0, currentSheetX + STEP);
+            updateFrame(currentW - STEP, parseInt(frameH.value)); // Llamada repetida para aplicar currentSheetX y límites
         });
+    }
 
-        gif.render();
+    // ANCHO (+)
+    if (adjustRightBtn) {
+        adjustRightBtn.addEventListener('click', () => {
+            if (!uploadedImage) return alert("Sube una imagen primero.");
+            const currentW = parseInt(frameW.value);
+            // Solo ajustar el ancho (el borde izquierdo se mantiene)
+            updateFrame(currentW + STEP, parseInt(frameH.value));
+        });
+    }
+
+    // ALTO (-)
+    if (adjustUpBtn) {
+        adjustUpBtn.addEventListener('click', () => {
+            if (!uploadedImage) return alert("Sube una imagen primero.");
+            const currentH = parseInt(frameH.value);
+            // Ajustar el alto y MOVER la posición de captura hacia arriba para mantener el borde inferior fijo.
+            updateFrame(parseInt(frameW.value), currentH - STEP);
+            // Asegurar que currentSheetY se ajuste hacia abajo por el cambio de tamaño
+            currentSheetY = Math.max(0, currentSheetY + STEP);
+            updateFrame(parseInt(frameW.value), currentH - STEP); // Llamada repetida para aplicar currentSheetY y límites
+        });
+    }
+
+    // ALTO (+)
+    if (adjustDownBtn) {
+        adjustDownBtn.addEventListener('click', () => {
+            if (!uploadedImage) return alert("Sube una imagen primero.");
+            const currentH = parseInt(frameH.value);
+            // Solo ajustar el alto (el borde superior se mantiene)
+            updateFrame(parseInt(frameW.value), currentH + STEP);
+        });
     }
 
-    exportWebmBtn.addEventListener('click', exportWebM);
-    // ... (función exportWebM) ...
 
     // ------------------------
-    // 8. CONTROL TÁCTIL (Mover y Dimensionar el recuadro rojo)
+    // 8. CONTROL TÁCTIL (Solo MOVER - 1 Dedo)
     // ------------------------
 
-    // Función auxiliar para calcular la distancia entre dos puntos táctiles
+    // Función auxiliar para getDistance (mantener por si se necesita)
     function getDistance(touch1, touch2) {
         const dx = touch1.clientX - touch2.clientX;
         const dy = touch1.clientY - touch2.clientY;
         return Math.sqrt(dx * dx + dy * dy);
     }
 
-
     sheetView.addEventListener('touchstart', (e) => {
         e.preventDefault(); 
         if (!uploadedImage) return;
 
-        if (e.touches.length === 2) {
-            // Modo Pinch (Zoom/Dimensionar)
-            isPinching = true;
-            isDragging = false;
-            initialDistance = getDistance(e.touches[0], e.touches[1]);
-            // CRUCIAL: Capturar los valores actuales del input al iniciar el zoom
-            lastFrameW = parseInt(frameW.value);
-            lastFrameH = parseInt(frameH.value);
-        } else if (e.touches.length === 1) {
-            // Modo Drag (Movimiento)
+        if (e.touches.length === 1) {
             isDragging = true;
-            isPinching = false;
             const touch = e.touches[0];
             lastTouchX = touch.clientX;
             lastTouchY = touch.clientY;
@@ -352,82 +403,45 @@ document.addEventListener('DOMContentLoaded', () => {
 
     sheetView.addEventListener('touchmove', (e) => {
         e.preventDefault();
-        if (!uploadedImage) return;
+        if (!uploadedImage || !isDragging || e.touches.length !== 1) return;
         
-        // --- 8.1. LÓGICA DE DRAG (MOVIMIENTO - 1 Dedo) ---
-        if (isDragging && e.touches.length === 1) {
-            const touch = e.touches[0];
-            const dx = touch.clientX - lastTouchX;
-            const dy = touch.clientY - lastTouchY;
-            
-            const sheetW = uploadedImage.width;
-            const sheetH = uploadedImage.height;
-            const canvasW = sheetView.width;
-            const scale = Math.min(canvasW / sheetW, canvasW / sheetH);
-            
-            const fW = parseInt(frameW.value);
-            const fH = parseInt(frameH.value);
-            
-            // Convertir píxeles de pantalla a píxeles de imagen (desescalar y ajustar a grid)
-            let imgDx = Math.round(dx / scale);
-            let imgDy = Math.round(dy / scale);
-            
-            // Si el arrastre ha movido al menos la mitad de un frame, ajustamos a un nuevo grid
-            if (Math.abs(imgDx) >= fW / 2) { 
-                let framesMovedX = Math.round(imgDx / fW); 
-                currentSheetX += framesMovedX * fW;
-                lastTouchX = touch.clientX; 
-            }
-            
-            if (Math.abs(imgDy) >= fH / 2) { 
-                let framesMovedY = Math.round(imgDy / fH);
-                currentSheetY += framesMovedY * fH;
-                lastTouchY = touch.clientY; 
-            }
-            
-            // Asegurar límites
-            currentSheetX = Math.max(0, Math.min(currentSheetX, uploadedImage.width - fW));
-            currentSheetY = Math.max(0, Math.min(currentSheetY, uploadedImage.height - fH));
-
-        // --- 8.2. LÓGICA DE PINCH (ZOOM - 2 Dedos) ---
-        } else if (isPinching && e.touches.length === 2) {
-            const currentDistance = getDistance(e.touches[0], e.touches[1]);
-            const scaleFactor = currentDistance / initialDistance;
-            
-            let newW = Math.round(lastFrameW * scaleFactor);
-            let newH = Math.round(lastFrameH * scaleFactor);
-
-            // Limitar el tamaño (Mínimo 16px, Máximo el ancho/alto de la imagen)
-            newW = Math.max(16, Math.min(newW, uploadedImage.width));
-            newH = Math.max(16, Math.min(newH, uploadedImage.height));
-            
-            // Si el frame original era un cuadrado, mantenemos la proporción de cuadrado
-            if (lastFrameW === lastFrameH) {
-                 newH = newW;
-            }
-
-            // Actualizar los inputs y el canvas de vista previa
-            frameW.value = newW;
-            frameH.value = newH;
-            preview.width = newW;
-            preview.height = newH;
-            
-            // Asegurar que el punto de captura actual siga siendo válido con el nuevo tamaño
-            const fW = parseInt(frameW.value);
-            const fH = parseInt(frameH.value);
-            currentSheetX = Math.min(currentSheetX, uploadedImage.width - fW);
-            currentSheetY = Math.min(currentSheetY, uploadedImage.height - fH);
+        // LÓGICA DE DRAG (MOVIMIENTO - 1 Dedo)
+        const touch = e.touches[0];
+        const dx = touch.clientX - lastTouchX;
+        const dy = touch.clientY - lastTouchY;
+        
+        const sheetW = uploadedImage.width;
+        const canvasW = sheetView.width;
+        const scale = Math.min(canvasW / sheetW, canvasW / uploadedImage.height);
+        
+        const fW = parseInt(frameW.value);
+        const fH = parseInt(frameH.value);
+        
+        let imgDx = Math.round(dx / scale);
+        let imgDy = Math.round(dy / scale);
+        
+        // Mover solo si el arrastre es significativo (para evitar jitter)
+        if (Math.abs(imgDx) >= STEP) { 
+            let framesMovedX = Math.round(imgDx / STEP); 
+            currentSheetX += framesMovedX * STEP;
+            lastTouchX = touch.clientX; 
+        }
+        if (Math.abs(imgDy) >= STEP) { 
+            let framesMovedY = Math.round(imgDy / STEP);
+            currentSheetY += framesMovedY * STEP;
+            lastTouchY = touch.clientY; 
         }
         
-        // Redibujar en cualquier modo
+        // Asegurar límites
+        currentSheetX = Math.max(0, Math.min(currentSheetX, uploadedImage.width - fW));
+        currentSheetY = Math.max(0, Math.min(currentSheetY, uploadedImage.height - fH));
+
         drawSheetView();
         drawCurrentFramePreview(currentSheetX, currentSheetY);
     });
 
     sheetView.addEventListener('touchend', (e) => {
-        // Al levantar los dedos, desactivar todos los modos.
         isDragging = false;
-        isPinching = false;
     });
     
 });