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,8 +623,7 @@ class EnhancedComicGenerator:
         let currentlySelectedBubble = null;
         let currentlySelectedPanel = null;
         let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
-        let isResizing = false;
-        let resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
+        let isResizing = false, resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
         
         function renderComic(data) {
             const container = document.getElementById('comic-pages');
@@ -646,14 +645,12 @@ class EnhancedComicGenerator:
                     const img = document.createElement('img');
                     img.src = '/frames/final/' + panelData.image;
                     panelDiv.appendChild(img);
-                    // *** FIX: Corrected logic to show all bubbles ***
-                    if (pageData.bubbles && pageData.bubbles[panelIndex]) {
-                        const bubbleData = pageData.bubbles[panelIndex];
+                    if (pageData.bubbles && pageData.bubbles[panelIndex] && pageData.bubbles[panelIndex].dialog) {
                         const bubbleDiv = createBubbleElement({
                             id: `initial-${pageIndex}-${panelIndex}`,
-                            text: bubbleData.dialog || '',
-                            left: `${bubbleData.bubble_offset_x ?? 50}px`,
-                            top: `${bubbleData.bubble_offset_y ?? 20}px`,
+                            text: pageData.bubbles[panelIndex].dialog || '',
+                            left: `${pageData.bubbles[panelIndex].bubble_offset_x ?? 50}px`,
+                            top: `${pageData.bubbles[panelIndex].bubble_offset_y ?? 20}px`,
                         });
                         panelDiv.appendChild(bubbleDiv);
                     }
@@ -672,14 +669,12 @@ class EnhancedComicGenerator:
             });
             document.querySelectorAll('.speech-bubble').forEach(initializeBubbleEvents);
             document.getElementById('zoom-slider').addEventListener('input', handleZoom);
-            
             document.getElementById('bubble-text-color').addEventListener('input', (e) => {
                 if(currentlySelectedBubble) currentlySelectedBubble.style.color = e.target.value;
             });
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
                 if(currentlySelectedBubble) currentlySelectedBubble.style.backgroundColor = e.target.value;
             });
-
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
             document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
             document.addEventListener('mouseleave', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
@@ -689,7 +684,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); });
-            
             ['nw', 'ne', 'sw', 'se'].forEach(dir => {
                 const handle = document.createElement('div');
                 handle.className = `resize-handle ${dir}`;
@@ -765,28 +759,29 @@ 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 bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select'];
+
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
                 if (currentlySelectedPanel) currentlySelectedPanel.classList.remove('selected');
                 currentlySelectedPanel = null;
+                
                 const styles = window.getComputedStyle(currentlySelectedBubble);
                 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(id => document.getElementById(id).disabled = false);
             } else {
                 bubbleControls.forEach(id => document.getElementById(id).disabled = true);
+                if(currentlySelectedPanel) document.getElementById('zoom-slider').disabled = false;
             }
         }
         
@@ -797,6 +792,7 @@ class EnhancedComicGenerator:
             const textarea = document.createElement('textarea');
             const originalHeight = bubble.offsetHeight;
             bubble.style.height = `${originalHeight}px`;
+
             textarea.value = textSpan.textContent;
             bubble.appendChild(textarea);
             textSpan.style.display = 'none';
@@ -806,7 +802,6 @@ class EnhancedComicGenerator:
                 bubble.removeChild(textarea);
                 textSpan.style.display = '';
                 currentlyEditing = null;
-                bubble.style.height = 'auto'; // Let it reflow naturally
             };
             textarea.addEventListener('blur', finishEditing, { once: true });
             textarea.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); textarea.blur(); }});
@@ -841,7 +836,7 @@ class EnhancedComicGenerator:
                 selectBubble(null);
             }
         }
-        
+
         function startResize(e, dir) {
             e.preventDefault();
             e.stopPropagation();
@@ -863,10 +858,16 @@ class EnhancedComicGenerator:
             const dy = e.clientY - originalMouseY;
             const bubble = currentlySelectedBubble;
 
-            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('n')) { bubble.style.height = `${originalHeight - dy}px`; bubble.style.top = `${originalY + dy}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('n')) {
+                bubble.style.height = `${originalHeight - dy}px`;
+                bubble.style.top = `${originalY + dy}px`;
+            }
         }
 
         function stopResize() { isResizing = false; }
@@ -879,7 +880,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() {