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; 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; 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; }
         .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,7 +623,6 @@ 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');
@@ -686,6 +685,8 @@ 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}`;
@@ -761,12 +762,20 @@ 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'];
+            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];
 
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
@@ -774,16 +783,15 @@ class EnhancedComicGenerator:
                 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();
+                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('zoom-slider').disabled = true;
-                bubbleControls.forEach(id => document.getElementById(id).disabled = false);
+                bubbleControls.forEach(c => c.disabled = false);
             } else {
-                bubbleControls.forEach(id => document.getElementById(id).disabled = true);
-                if(currentlySelectedPanel) document.getElementById('zoom-slider').disabled = false;
+                bubbleControls.forEach(c => c.disabled = true);
             }
         }
         
@@ -792,8 +800,9 @@ class EnhancedComicGenerator:
             currentlyEditing = bubble;
             const textSpan = bubble.querySelector('.bubble-text');
             const textarea = document.createElement('textarea');
-            const originalHeight = bubble.offsetHeight;
-            bubble.style.height = `${originalHeight}px`;
+            // FIX: Preserve height before editing
+            const originalHeight = bubble.style.height || `${bubble.offsetHeight}px`;
+            bubble.style.height = originalHeight;
 
             textarea.value = textSpan.textContent;
             bubble.appendChild(textarea);
@@ -803,6 +812,9 @@ 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 });
@@ -839,6 +851,9 @@ class EnhancedComicGenerator:
             }
         }
 
+        let isResizing = false;
+        let resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
+
         function startResize(e, dir) {
             e.preventDefault();
             e.stopPropagation();
@@ -860,19 +875,25 @@ 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?")) {
@@ -900,8 +921,8 @@ class EnhancedComicGenerator:
                     .then(data => {
                         if (data.success) {
                             img.src = `/frames/final/${data.new_filename}?t=${new Date().getTime()}`;
-                            img.style.objectFit = 'contain';
-                            resetPanelTransform();
+                            img.style.objectFit = 'contain'; // FIX: Show full image
+                            resetPanelTransform(); // FIX: Reset any old zoom/pan
                         } else { alert('Error replacing image: ' + data.error); }
                         img.style.opacity = '1';
                     })