Update app_enhanced.py

app_enhanced.py

@@ -545,11 +545,12 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
 <div class="edit-controls">
     <h4>✏️ Interactive Editor</h4>
     <div class="control-group">
-        <label for="bubble-type-select">Bubble Tools (Select Bubble):</label>
+        <label for="bubble-type-select">Bubble Tools:</label>
         <select id="bubble-type-select" onchange="changeBubbleType(this.value)">
             <option value="speech">Speech</option><option value="thought">Thought</option><option value="reaction">Reaction</option><option value="narration">Narration</option><option value="idea">Idea</option>
         </select>
         <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
+        <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
     </div>
     <div class="control-group">
         <label>Panel Tools (Select Panel):</label>
@@ -563,7 +564,7 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
         <label>Zoom & Pan (Select Panel):</label>
         <div class="zoom-controls">
             <button onclick="resetPanelTransform()" class="secondary-button" style="padding: 4px 6px;">Reset</button>
-            <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5">
+            <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled>
         </div>
     </div>
     <div class="control-group">
@@ -635,9 +636,9 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
 
     function initializePanelImageEvents(img) {
         img.addEventListener('mousedown', startPan);
-        document.addEventListener('mousemove', panImage); // Listen on document to allow mouse to leave image
+        document.addEventListener('mousemove', panImage);
         document.addEventListener('mouseup', stopPan);
-        document.addEventListener('mouseleave', stopPan); // Stop if mouse leaves window
+        document.addEventListener('mouseleave', stopPan);
     }
     
     function initializeBubbleEvents(bubble) {
@@ -668,9 +669,43 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
         return bubbleDiv;
     }
     
-    function applyBubbleType(bubble, type) { /* (function unchanged) */ }
-    function changeBubbleType(type) { /* (function unchanged) */ }
-    function rotateBubbleTail() { /* (function unchanged) */ }
+    function applyBubbleType(bubble, type) {
+        bubble.querySelectorAll('.thought-dot').forEach(el => el.remove());
+        let classesToKeep = 'speech-bubble';
+        if (bubble.classList.contains('selected')) classesToKeep += ' selected';
+        if (bubble.classList.contains('flipped')) classesToKeep += ' flipped';
+        if (bubble.classList.contains('flipped-vertical')) classesToKeep += ' flipped-vertical';
+        bubble.className = classesToKeep;
+        bubble.classList.add(type);
+        bubble.dataset.type = type;
+        if (type === 'thought') {
+            for (let i = 1; i <= 2; i++) {
+                const dot = document.createElement('div');
+                dot.className = `thought-dot thought-dot-${i}`;
+                bubble.appendChild(dot);
+            }
+        }
+    }
+    
+    function changeBubbleType(type) {
+        if (!currentlySelectedBubble) return;
+        applyBubbleType(currentlySelectedBubble, type);
+    }
+    
+    function rotateBubbleTail() {
+        if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
+        const isFlippedH = currentlySelectedBubble.classList.contains('flipped');
+        const isFlippedV = currentlySelectedBubble.classList.contains('flipped-vertical');
+        if (!isFlippedH && !isFlippedV) {
+            currentlySelectedBubble.classList.add('flipped');
+        } else if (isFlippedH && !isFlippedV) {
+            currentlySelectedBubble.classList.add('flipped-vertical');
+        } else if (isFlippedH && isFlippedV) {
+            currentlySelectedBubble.classList.remove('flipped');
+        } else {
+            currentlySelectedBubble.classList.remove('flipped-vertical');
+        }
+    }
     
     function selectPanel(panel) {
         document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected'));
@@ -678,7 +713,6 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
         currentlySelectedPanel = panel;
         selectBubble(null);
         
-        // Update zoom slider to reflect selected panel's state
         const img = currentlySelectedPanel.querySelector('img');
         const zoomSlider = document.getElementById('zoom-slider');
         zoomSlider.value = img.dataset.zoom || 100;
@@ -690,34 +724,141 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
         currentlySelectedBubble = bubble;
         if (currentlySelectedBubble) {
             currentlySelectedBubble.classList.add('selected');
-            document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected'));
+            if(currentlySelectedPanel) currentlySelectedPanel.classList.remove('selected');
+            currentlySelectedPanel = null;
             document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
             document.getElementById('zoom-slider').disabled = true;
         }
     }
     
-    function editBubbleText(bubble) { /* (function unchanged) */ }
-    function startDrag(e) { /* (function unchanged) */ }
-    function drag(e) { /* (function unchanged) */ }
-    function stopDrag() { /* (function unchanged) */ }
-    function clearSavedState() { /* (function unchanged) */ }
-    async function exportPagesToPNG() { /* (function unchanged) */ }
-    function replacePanelImage() { /* (function unchanged) */ }
-    function adjustFrame(direction) { /* (function unchanged) */ }
-
-    // --- NEW ZOOM AND PAN FUNCTIONS ---
+    function editBubbleText(bubble) {
+        if (currentlyEditing) return;
+        currentlyEditing = bubble;
+        const textSpan = bubble.querySelector('.bubble-text');
+        const currentText = textSpan.textContent;
+        textSpan.style.display = 'none';
+        bubble.style.height = 'auto';
+        const textarea = document.createElement('textarea');
+        textarea.value = currentText;
+        bubble.appendChild(textarea);
+        textarea.focus();
+        const finishEditing = () => {
+            textSpan.textContent = textarea.value;
+            bubble.removeChild(textarea);
+            textSpan.style.display = '';
+            currentlyEditing = null;
+            bubble.style.height = 'auto';
+        };
+        textarea.addEventListener('blur', finishEditing, { once: true });
+        textarea.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); textarea.blur(); }});
+    }
+    
+    function startDrag(e) {
+        const bubble = e.target.closest('.speech-bubble');
+        if (!bubble || currentlyEditing) return;
+        draggedBubble = bubble;
+        selectBubble(bubble);
+        const rect = bubble.getBoundingClientRect();
+        offset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+    
+    function drag(e) {
+        const parentRect = draggedBubble.parentElement.getBoundingClientRect();
+        let x = e.clientX - parentRect.left - offset.x;
+        let y = e.clientY - parentRect.top - offset.y;
+        draggedBubble.style.left = `${x}px`;
+        draggedBubble.style.top = `${y}px`;
+    }
+    
+    function stopDrag() {
+        draggedBubble = null;
+    }
+    
+    function clearSavedState() {
+        if (confirm("Reset all edits to the original AI-generated comic?")) {
+            localStorage.removeItem('comicEditorState');
+            window.location.reload();
+        }
+    }
+    
+    async function exportPagesToPNG() {
+        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() {
+        if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
+        const img = currentlySelectedPanel.querySelector('img');
+        const uploader = document.getElementById('image-uploader');
+        const oneTimeListener = (event) => {
+            const file = event.target.files[0];
+            if (!file) return;
+            const formData = new FormData();
+            formData.append('image', file);
+            img.style.opacity = '0.5';
+            fetch('/replace_panel', { method: 'POST', body: formData })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        img.src = `/frames/final/${data.new_filename}?t=${new Date().getTime()}`;
+                    } else { alert('Error replacing image: ' + data.error); }
+                    img.style.opacity = '1';
+                })
+                .catch(error => {
+                    alert('An error occurred during the upload.');
+                    img.style.opacity = '1';
+                });
+            uploader.removeEventListener('change', oneTimeListener);
+            uploader.value = '';
+        };
+        uploader.addEventListener('change', oneTimeListener, { once: true });
+        uploader.click();
+    }
+    
+    function adjustFrame(direction) {
+        if (!currentlySelectedPanel) { alert("Please select a panel first to adjust its frame."); return; }
+        const img = currentlySelectedPanel.querySelector('img');
+        const currentSrc = img.src;
+        let filename = currentSrc.substring(currentSrc.lastIndexOf('/') + 1);
+        if (filename.includes('?')) { filename = filename.split('?')[0]; }
+        img.style.opacity = '0.5';
+        fetch('/regenerate_frame', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filename: filename, direction: direction })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                img.src = `/frames/final/${filename}?t=${new Date().getTime()}`;
+                console.log(data.message);
+            } else { alert('Error: ' + data.message); }
+            img.style.opacity = '1';
+        })
+        .catch(error => {
+            alert('An error occurred during frame adjustment.');
+            img.style.opacity = '1';
+        });
+    }
 
     function updateImageTransform(img) {
         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})`;
-
-        if (zoom > 1) {
-            img.classList.add('pannable');
-        } else {
-            img.classList.remove('pannable');
-        }
+        if (zoom > 1) { img.classList.add('pannable'); } else { img.classList.remove('pannable'); }
     }
 
     function handleZoom(event) {
@@ -728,7 +869,7 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
     }
     
     function resetPanelTransform() {
-        if (!currentlySelectedPanel) return;
+        if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
         const img = currentlySelectedPanel.querySelector('img');
         img.dataset.zoom = 100;
         img.dataset.translateX = 0;
@@ -738,13 +879,11 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
     }
 
     function startPan(event) {
-        // Only pan if left mouse button is clicked and image is zoomed
         if (event.button !== 0) return;
         const img = event.target;
         const zoom = parseFloat(img.dataset.zoom || 100);
         if (zoom <= 100) return;
-
-        event.preventDefault(); // Prevent default image drag behavior
+        event.preventDefault();
         isPanning = true;
         img.classList.add('panning');
         panStartX = event.clientX;
@@ -767,9 +906,27 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
         if (!isPanning) return;
         isPanning = false;
         if (currentlySelectedPanel) {
-            const img = currentlySelectedPanel.querySelector('img');
-            img.classList.remove('panning');
+            currentlySelectedPanel.querySelector('img').classList.remove('panning');
+        }
+    }
+
+    function addBubbleToPanel() {
+        if (!currentlySelectedPanel) {
+            alert("Please select a panel first to add a bubble to it.");
+            return;
         }
+
+        const newBubble = createBubbleElement({
+            id: `new-bubble-${Date.now()}`,
+            text: 'New Text...',
+            left: '10%',
+            top: '10%'
+        });
+
+        currentlySelectedPanel.appendChild(newBubble);
+        initializeBubbleEvents(newBubble);
+        selectBubble(newBubble);
+        editBubbleText(newBubble);
     }
 </script>
 </body>