Update app_enhanced.py

app_enhanced.py

@@ -509,7 +509,7 @@ class EnhancedComicGenerator:
         .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.1s ease-out; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
-        .speech-bubble { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; max-width: 220px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
+        .speech-bubble { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
         .bubble-text { padding: 2px; word-wrap: break-word; }
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
         .speech-bubble textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #4CAF50; background: rgba(255,255,255,0.95); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
@@ -623,6 +623,7 @@ class EnhancedComicGenerator:
         let currentlySelectedBubble = null;
         let currentlySelectedPanel = null;
         let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
+        let isResizing = false, resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
         
         function renderComic(data) {
             const container = document.getElementById('comic-pages');
@@ -685,8 +686,6 @@ class EnhancedComicGenerator:
             bubble.addEventListener('dblclick', e => { e.stopPropagation(); editBubbleText(bubble); });
             bubble.addEventListener('mousedown', e => { e.stopPropagation(); startDrag(e); });
             bubble.addEventListener('click', e => { e.stopPropagation(); selectBubble(bubble); });
-            
-            // Add resize handles
             ['nw', 'ne', 'sw', 'se'].forEach(dir => {
                 const handle = document.createElement('div');
                 handle.className = `resize-handle ${dir}`;
@@ -762,20 +761,12 @@ class EnhancedComicGenerator:
             panel.classList.add('selected');
             currentlySelectedPanel = panel;
             selectBubble(null);
-            
-            const img = currentlySelectedPanel.querySelector('img');
-            document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
-            document.getElementById('zoom-slider').disabled = false;
         }
 
         function selectBubble(bubble) {
             if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
             currentlySelectedBubble = bubble;
-            const textColorPicker = document.getElementById('bubble-text-color');
-            const fillColorPicker = document.getElementById('bubble-fill-color');
-            const typeSelect = document.getElementById('bubble-type-select');
-            const fontSelect = document.getElementById('font-select');
-            const bubbleControls = [textColorPicker, fillColorPicker, typeSelect, fontSelect];
+            const bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select'];
 
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
@@ -783,15 +774,16 @@ class EnhancedComicGenerator:
                 currentlySelectedPanel = null;
                 
                 const styles = window.getComputedStyle(currentlySelectedBubble);
-                textColorPicker.value = rgbToHex(styles.color);
-                fillColorPicker.value = rgbToHex(styles.backgroundColor);
-                typeSelect.value = currentlySelectedBubble.dataset.type || 'speech';
-                fontSelect.value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
+                document.getElementById('bubble-text-color').value = rgbToHex(styles.color);
+                document.getElementById('bubble-fill-color').value = rgbToHex(styles.backgroundColor);
+                document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
+                document.getElementById('font-select').value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
 
                 document.getElementById('zoom-slider').disabled = true;
-                bubbleControls.forEach(c => c.disabled = false);
+                bubbleControls.forEach(id => document.getElementById(id).disabled = false);
             } else {
-                bubbleControls.forEach(c => c.disabled = true);
+                bubbleControls.forEach(id => document.getElementById(id).disabled = true);
+                if(currentlySelectedPanel) document.getElementById('zoom-slider').disabled = false;
             }
         }
         
@@ -800,9 +792,8 @@ class EnhancedComicGenerator:
             currentlyEditing = bubble;
             const textSpan = bubble.querySelector('.bubble-text');
             const textarea = document.createElement('textarea');
-            // FIX: Preserve height before editing
-            const originalHeight = bubble.style.height || `${bubble.offsetHeight}px`;
-            bubble.style.height = originalHeight;
+            const originalHeight = bubble.offsetHeight;
+            bubble.style.height = `${originalHeight}px`;
 
             textarea.value = textSpan.textContent;
             bubble.appendChild(textarea);
@@ -812,9 +803,6 @@ class EnhancedComicGenerator:
                 textSpan.textContent = textarea.value;
                 bubble.removeChild(textarea);
                 textSpan.style.display = '';
-                // FIX: Re-apply height, then set to auto to allow natural flow
-                bubble.style.height = originalHeight; 
-                setTimeout(() => { bubble.style.height = 'auto'; }, 0);
                 currentlyEditing = null;
             };
             textarea.addEventListener('blur', finishEditing, { once: true });
@@ -851,9 +839,6 @@ class EnhancedComicGenerator:
             }
         }
 
-        let isResizing = false;
-        let resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
-
         function startResize(e, dir) {
             e.preventDefault();
             e.stopPropagation();
@@ -875,25 +860,19 @@ class EnhancedComicGenerator:
             const dy = e.clientY - originalMouseY;
             const bubble = currentlySelectedBubble;
 
-            if (resizeHandle.includes('e')) {
-                bubble.style.width = `${originalWidth + dx}px`;
-            }
+            if (resizeHandle.includes('e')) bubble.style.width = `${originalWidth + dx}px`;
             if (resizeHandle.includes('w')) {
                 bubble.style.width = `${originalWidth - dx}px`;
                 bubble.style.left = `${originalX + dx}px`;
             }
-            if (resizeHandle.includes('s')) {
-                bubble.style.height = `${originalHeight + dy}px`;
-            }
+            if (resizeHandle.includes('s')) bubble.style.height = `${originalHeight + dy}px`;
             if (resizeHandle.includes('n')) {
                 bubble.style.height = `${originalHeight - dy}px`;
                 bubble.style.top = `${originalY + dy}px`;
             }
         }
 
-        function stopResize() {
-            isResizing = false;
-        }
+        function stopResize() { isResizing = false; }
 
         function clearSavedState() {
             if (confirm("Reset all edits?")) {
@@ -903,7 +882,18 @@ class EnhancedComicGenerator:
         }
 
         async function exportPagesToPNG() {
-            // function content...
+            const pages = document.querySelectorAll('.comic-page');
+            if (pages.length === 0) return alert("No pages found.");
+            alert(`Starting export of ${pages.length} page(s).`);
+            for (let i = 0; i < pages.length; i++) {
+                try {
+                    const canvas = await html2canvas(pages[i], { scale: 2 });
+                    const link = document.createElement('a');
+                    link.download = `comic-page-${i + 1}.png`;
+                    link.href = canvas.toDataURL('image/png');
+                    link.click();
+                } catch (err) { alert(`Failed to export page ${i + 1}.`); }
+            }
         }
         
         function replacePanelImage() {
@@ -921,8 +911,8 @@ class EnhancedComicGenerator:
                     .then(data => {
                         if (data.success) {
                             img.src = `/frames/final/${data.new_filename}?t=${new Date().getTime()}`;
-                            img.style.objectFit = 'contain'; // FIX: Show full image
-                            resetPanelTransform(); // FIX: Reset any old zoom/pan
+                            img.style.objectFit = 'contain';
+                            resetPanelTransform();
                         } else { alert('Error replacing image: ' + data.error); }
                         img.style.opacity = '1';
                     })
@@ -936,15 +926,41 @@ class EnhancedComicGenerator:
         }
         
         function adjustFrame(direction) {
-            // function content...
+            if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
+            const img = currentlySelectedPanel.querySelector('img');
+            let filename = img.src.substring(img.src.lastIndexOf('/') + 1).split('?')[0];
+            img.style.opacity = '0.5';
+            fetch('/regenerate_frame', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename, direction })
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.success) {
+                    img.src = `/frames/final/${filename}?t=${new Date().getTime()}`;
+                } else { alert('Error: ' + data.message); }
+                img.style.opacity = '1';
+            })
+            .catch(() => {
+                alert('An error occurred.');
+                img.style.opacity = '1';
+            });
         }
 
         function updateImageTransform(img) {
-            // function content...
+            const zoom = (img.dataset.zoom || 100) / 100;
+            const x = img.dataset.translateX || 0;
+            const y = img.dataset.translateY || 0;
+            img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${zoom})`;
+            img.classList.toggle('pannable', zoom > 1);
         }
 
         function handleZoom(event) {
-            // function content...
+            if (!currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.zoom = event.target.value;
+            updateImageTransform(img);
         }
         
         function resetPanelTransform() {
@@ -958,15 +974,30 @@ class EnhancedComicGenerator:
         }
 
         function startPan(event) {
-            // function content...
+            if (event.button !== 0) return;
+            const img = event.target;
+            if (parseFloat(img.dataset.zoom || 100) <= 100) return;
+            event.preventDefault();
+            isPanning = true;
+            img.classList.add('panning');
+            panStartX = event.clientX;
+            panStartY = event.clientY;
+            panStartTranslateX = parseFloat(img.dataset.translateX || 0);
+            panStartTranslateY = parseFloat(img.dataset.translateY || 0);
         }
 
         function panImage(event) {
-            // function content...
+            if (!isPanning || !currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.translateX = panStartTranslateX + (event.clientX - panStartX);
+            img.dataset.translateY = panStartTranslateY + (event.clientY - panStartY);
+            updateImageTransform(img);
         }
 
         function stopPan() {
-            // function content...
+            if (!isPanning) return;
+            isPanning = false;
+            currentlySelectedPanel?.querySelector('img')?.classList.remove('panning');
         }
 
         function addBubbleToPanel() {
@@ -984,7 +1015,39 @@ class EnhancedComicGenerator:
         }
         
         function gotoTimestamp() {
-            // function content...
+            if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
+            const input = document.getElementById('timestamp-input');
+            const timeStr = input.value.trim();
+            if (!timeStr) return;
+            let parsedSeconds = 0;
+            if (timeStr.includes(':')) {
+                const parts = timeStr.split(':');
+                parsedSeconds = parseInt(parts[0], 10) * 60 + parseFloat(parts[1]);
+            } else {
+                parsedSeconds = parseFloat(timeStr);
+            }
+            if (isNaN(parsedSeconds)) { alert("Invalid time format."); return; }
+            const img = currentlySelectedPanel.querySelector('img');
+            let filename = img.src.substring(img.src.lastIndexOf('/') + 1).split('?')[0];
+            img.style.opacity = '0.5';
+            fetch('/goto_timestamp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename, timestamp: parsedSeconds })
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.success) {
+                    img.src = `/frames/final/${filename}?t=${new Date().getTime()}`;
+                    input.value = '';
+                    resetPanelTransform();
+                } else { alert('Error: ' + data.message); }
+                img.style.opacity = '1';
+            })
+            .catch(() => {
+                alert('An error occurred.');
+                img.style.opacity = '1';
+            });
         }
     </script>
 </body>