Update app_enhanced.py

app_enhanced.py

@@ -386,7 +386,16 @@ INDEX_HTML = '''
     .comic-grid { width: 100%; height: 100%; position: relative; background: #ffffff; }
     
     /* Panel Background White */
-    .panel { position: absolute; overflow: hidden; background: #ffffff; cursor: pointer; border: 0; display:flex; justify-content:center; align-items:center; }
+    .panel { 
+        position: absolute; 
+        overflow: hidden; 
+        background: #ffffff; 
+        cursor: pointer; 
+        border: 0; 
+        display:flex; 
+        justify-content:center; 
+        align-items:center; /* Center image within the panel if object-fit: contain */
+    }
     .panel.selected { z-index: 20; }
     .panel.selected img { outline: 3px solid #2196F3; outline-offset: -3px; }
     
@@ -438,12 +447,17 @@ INDEX_HTML = '''
     /* 
        IMAGE FIT: 'contain' ensures full image is visible (100% fit) without crop.
        Gaps are handled by the white background of the panel/grid.
+       Removed all transform:scale from here.
     */
     .panel img { 
-        width: 100%; height: 100%; 
+        width: 100%; 
+        height: 100%; 
         object-fit: contain; /* DEFAULT: Show full image, padded with white */
-        transition: transform 0.1s ease-out; 
-        transform-origin: center center; 
+        image-rendering: auto; /* Ensures no blur from scaling */
+        transform: none !important; /* Force no JS transforms on image itself */
+        max-width: 100%; /* Force original size */
+        max-height: 100%; /* Force original size */
+        display: block; /* Important for proper centering and sizing */
     }
     /* Toggle classes */
     .panel img.fit-cover { object-fit: cover !important; }
@@ -786,7 +800,7 @@ INDEX_HTML = '''
                 img.dataset.zoom = pan.zoom || 100; img.dataset.translateX = pan.tx || 0; img.dataset.translateY = pan.ty || 0;
                 
                 // RESTORE FIT STATE
-                if(pan.fit) img.style.objectFit = pan.fit;
+                img.style.objectFit = pan.fit || 'contain'; // Default to 'contain' to avoid initial crop
                 
                 updateImageTransform(img);
                 img.onmousedown = (e) => startPan(e, img);
@@ -885,6 +899,7 @@ INDEX_HTML = '''
     document.addEventListener('mousemove', (e) => { 
         if(isDragging && selectedBubble) { selectedBubble.style.left = (initX + e.clientX - startX) + 'px'; selectedBubble.style.top = (initY + e.clientY - startY) + 'px'; } 
         if(isResizing && selectedBubble) { resizeBubble(e); } 
+        // No panning when object-fit is contain (unless zoomed manually via slider)
         if(isPanning && selectedPanel) { panImage(e); }
     });
     
@@ -974,25 +989,86 @@ INDEX_HTML = '''
     document.getElementById('bubble-text-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveDraft(true); } });
     document.getElementById('bubble-fill-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); saveDraft(true); } });
     
-    function handleZoom(el) { if(!selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.zoom = el.value; updateImageTransform(img); }
+    function handleZoom(el) { 
+        if(!selectedPanel) return; 
+        const img = selectedPanel.querySelector('img'); 
+        img.dataset.zoom = el.value; 
+        // Only apply transform:scale if zoom > 100 and object-fit is NOT contain/fill
+        if(parseFloat(el.value) > 100 && img.style.objectFit !== 'contain' && img.style.objectFit !== 'fill') {
+            updateImageTransform(img);
+        } else if (parseFloat(el.value) === 100) {
+            img.style.transform = 'none'; // Reset transform if zoom is 100
+            img.dataset.translateX = 0; // Reset pan as well
+            img.dataset.translateY = 0;
+        }
+    }
     document.getElementById('zoom-slider').addEventListener('change', () => saveDraft(true));
-    function startPan(e, img) { if(parseFloat(img.dataset.zoom || 100) <= 100) return; e.preventDefault(); isPanning = true; selectedPanel = img.closest('.panel'); panStartX = e.clientX; panStartY = e.clientY; panStartTx = parseFloat(img.dataset.translateX || 0); panStartTy = parseFloat(img.dataset.translateY || 0); img.classList.add('panning'); }
-    function panImage(e) { if(!isPanning || !selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.translateX = panStartTx + (e.clientX - panStartX); img.dataset.translateY = panStartTy + (e.clientY - panStartY); updateImageTransform(img); }
-    function updateImageTransform(img) { const z = (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(${z})`; img.classList.toggle('pannable', z > 1); }
-    function resetPanelTransform() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); img.dataset.zoom = 100; img.dataset.translateX = 0; img.dataset.translateY = 0; document.getElementById('zoom-slider').value = 100; updateImageTransform(img); saveDraft(true); }
+    function startPan(e, img) { 
+        // Only allow pan if image is 'cover' or zoomed in
+        if((img.style.objectFit === 'contain' && parseFloat(img.dataset.zoom || 100) <= 100) || img.style.objectFit === 'fill') return; 
+        e.preventDefault(); 
+        isPanning = true; 
+        selectedPanel = img.closest('.panel'); 
+        panStartX = e.clientX; 
+        panStartY = e.clientY; 
+        panStartTx = parseFloat(img.dataset.translateX || 0); 
+        panStartTy = parseFloat(img.dataset.translateY || 0); 
+        img.classList.add('panning'); 
+    }
+    function panImage(e) { 
+        if(!isPanning || !selectedPanel) return; 
+        const img = selectedPanel.querySelector('img'); 
+        img.dataset.translateX = panStartTx + (e.clientX - panStartX); 
+        img.dataset.translateY = panStartTy + (e.clientY - panStartY); 
+        updateImageTransform(img); 
+    }
+    function updateImageTransform(img) { 
+        // THIS FUNCTION IS NOW MODIFIED TO ONLY APPLY TRANSFORM IF NECESSARY
+        const z = (img.dataset.zoom || 100) / 100; 
+        const x = img.dataset.translateX || 0; 
+        const y = img.dataset.translateY || 0; 
+        
+        // If zoom is 100 and object-fit is 'contain' or 'fill', don't apply transform
+        if (z === 1 && (img.style.objectFit === 'contain' || img.style.objectFit === 'fill')) {
+            img.style.transform = 'none';
+        } else {
+            img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${z})`; 
+        }
+        img.classList.toggle('pannable', z > 1 || img.style.objectFit === 'cover'); 
+    }
+    function resetPanelTransform() { 
+        if(!selectedPanel) return alert("Select a panel"); 
+        const img = selectedPanel.querySelector('img'); 
+        img.dataset.zoom = 100; 
+        img.dataset.translateX = 0; 
+        img.dataset.translateY = 0; 
+        document.getElementById('zoom-slider').value = 100; 
+        updateImageTransform(img); 
+        saveDraft(true); 
+    }
     
     function replacePanelImage() { if(!selectedPanel) return alert("Select a panel"); const inp = document.getElementById('image-uploader'); inp.onchange = async (e) => { const fd = new FormData(); fd.append('image', e.target.files[0]); const img = selectedPanel.querySelector('img'); const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd}); const d = await r.json(); if(d.success) { img.src = `/frames/${d.new_filename}?sid=${sid}`; saveDraft(true); } inp.value = ''; }; inp.click(); }
     async function adjustFrame(dir) { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/regenerate_frame?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, direction:dir}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
     async function gotoTimestamp() { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); let v = document.getElementById('timestamp-input').value.trim(); if(!v) return; if(v.includes(':')) { let p = v.split(':'); v = parseInt(p[0]) * 60 + parseFloat(p[1]); } else { v = parseFloat(v); } if(isNaN(v)) return alert("Invalid time"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/goto_timestamp?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, timestamp:v}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; document.getElementById('timestamp-input').value = ''; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
     
-    // NEW: Toggle between 'fill' (stretch 100%), 'cover' (crop), and 'contain' (bars)
+    // NEW: Toggle between 'contain' (no crop/zoom, but bars), 'fill' (stretch, no bars), and 'cover' (crop, no bars)
     function toggleFitCover() {
         if(!selectedPanel) return alert("Select a panel");
         const img = selectedPanel.querySelector('img');
-        const current = img.style.objectFit || 'contain';
-        if(current === 'contain') img.style.objectFit = 'fill';
-        else if(current === 'fill') img.style.objectFit = 'cover';
-        else img.style.objectFit = 'contain';
+        const current = img.style.objectFit || 'contain'; // Default if not set
+        if(current === 'contain') {
+            img.style.objectFit = 'fill'; // Stretch to fill
+        } else if(current === 'fill') {
+            img.style.objectFit = 'cover'; // Fill, but crop to maintain aspect ratio
+        } else { // current === 'cover'
+            img.style.objectFit = 'contain'; // Show full image
+        }
+        // Reset transforms when toggling object-fit to avoid weird interactions
+        img.dataset.zoom = 100; 
+        img.dataset.translateX = 0; 
+        img.dataset.translateY = 0; 
+        document.getElementById('zoom-slider').value = 100; 
+        updateImageTransform(img); // Re-evaluate transform based on new object-fit
         saveDraft(true);
     }
 
@@ -1005,6 +1081,13 @@ INDEX_HTML = '''
         if(selectedPanel) selectedPanel.classList.remove('selected');
         alert(`Exporting ${pgs.length} page(s)...`); 
         
+        // --- PREPARE FOR EXPORT: Remove editor scaling ---
+        const comicPages = document.querySelectorAll('.comic-page');
+        comicPages.forEach(page => {
+            page.style.transform = 'none'; // Remove scaling from comic-page
+            page.style.marginBottom = '0'; // Remove margin compensation
+        });
+
         // --- 0% ERROR FIX ---
         // 1. Lock specific pixel dimensions + 1px buffer to prevent word wrapping
         const bubbles = document.querySelectorAll('.speech-bubble'); 
@@ -1022,8 +1105,8 @@ INDEX_HTML = '''
         for(let i = 0; i < pgs.length; i++) { 
             try { 
                 const u = await htmlToImage.toPng(pgs[i], { 
-                    pixelRatio: 2, // High quality
-                    style: { transform: 'none' } 
+                    pixelRatio: 2, // High quality for print
+                    style: { transform: 'none' } // Ensure no transforms for html-to-image
                 }); 
                 const a = document.createElement('a'); 
                 a.href = u; 
@@ -1035,8 +1118,11 @@ INDEX_HTML = '''
             } 
         } 
         
-        // Optional: Reload page or reset styles if user wants to continue editing immediately
-        // In this app, styles are locked until reload, which is safer for the export focus.
+        // --- RESTORE EDITOR SCALING AFTER EXPORT ---
+        comicPages.forEach(page => {
+            page.style.transform = 'scale(0.6)';
+            page.style.marginBottom = '-280px'; 
+        });
     }
     
     function goBackToUpload() { if(confirm('Go home? Unsaved changes will be lost.')) { document.getElementById('editor-container').style.display = 'none'; document.getElementById('upload-container').style.display = 'flex'; document.getElementById('loading-view').style.display = 'none'; } }