Update app_enhanced.py

app_enhanced.py

@@ -375,14 +375,14 @@ INDEX_HTML = '''
         overflow: hidden; 
         border: 2px solid #000; 
         padding: 0;
-        /* SCALING FOR EDITOR VIEW */
+        /* SCALING FOR EDITOR VIEW ONLY - REMOVED FOR EXPORT */
         transform-origin: top center;
-        transform: scale(0.6); 
-        margin-bottom: -280px; /* Compensate for scale empty space */
+        /* transform: scale(0.6); - DISABLED to show True Size */
+        margin-bottom: 30px; 
     }
     
     /* === 5-PANEL TEMPLATE (2 TOP, 3 BOTTOM) === */
-    /* Background White for 12px Gutter (1.2% width, 1.7% height of 712px) */
+    /* Background White for 0px Gutter */
     .comic-grid { width: 100%; height: 100%; position: relative; background: #ffffff; }
     
     /* Panel Background White */
@@ -391,57 +391,58 @@ INDEX_HTML = '''
     .panel.selected img { outline: 3px solid #2196F3; outline-offset: -3px; }
     
     /* 
-       COORDINATES from Debugger Screenshot:
-       Row 1 Height: 46.63%
-       Row 2 Top: 48.45% (Gap = 1.82%)
-       
-       Panel 1 (TL): polygon(0% 0%, 59.07% 0%, 51.57% 100%, 0% 100%)
-       Panel 2 (TR): polygon(60.37% 0%, 100% 0%, 100% 100%, 52.87% 100%)
-       
-       Panel 3 (BL): polygon(0% 0%, 27.47% 0%, 33.77% 100%, 0% 100%)
-       Panel 4 (BM): polygon(28.77% 0%, 60.97% 0%, 67.27% 100%, 35.07% 100%)
-       Panel 5 (BR): polygon(62.27% 0%, 100% 0%, 100% 100%, 68.57% 100%)
+       0% GAP COORDINATES from Green Text:
+       Row 1 Split: Top=63.2%, Bottom=59.5%
+       Row 2 Left Split: Top=33.0%, Bottom=35.7%
+       Row 2 Right Split: Top=64.8%, Bottom=68.2%
+       Rows are 50% / 50%
     */
 
-    /* --- ROW 1 (TOP) --- Height 46.63% */
+    /* --- ROW 1 (TOP) --- Height 50% */
+    
+    /* Panel 1: Right ends at 63.2% / 59.5% */
     .panel:nth-child(1) {
-        top: 0; left: 0; height: 46.63%; width: 100%;
-        clip-path: polygon(0% 0%, 59.07% 0%, 51.57% 100%, 0% 100%);
+        top: 0; left: 0; height: 50%; width: 100%;
+        clip-path: polygon(0% 0%, 63.2% 0%, 59.5% 100%, 0% 100%);
     }
+    /* Panel 2: Left starts at 63.2% / 59.5% */
     .panel:nth-child(2) {
-        top: 0; left: 0; height: 46.63%; width: 100%;
-        clip-path: polygon(60.37% 0%, 100% 0%, 100% 100%, 52.87% 100%);
+        top: 0; left: 0; height: 50%; width: 100%;
+        clip-path: polygon(63.2% 0%, 100% 0%, 100% 100%, 59.5% 100%);
     }
 
-    /* --- ROW 2 (BOTTOM) --- Top: 48.45%, Height: 51.55% */
+    /* --- ROW 2 (BOTTOM) --- Top: 50%, Height: 50% */
+    
+    /* Panel 3: Right ends at 33.0% / 35.7% */
     .panel:nth-child(3) {
-        top: 48.45%; left: 0; height: 51.55%; width: 100%;
-        clip-path: polygon(0% 0%, 27.47% 0%, 33.77% 100%, 0% 100%);
+        top: 50%; left: 0; height: 50%; width: 100%;
+        clip-path: polygon(0% 0%, 33.0% 0%, 35.7% 100%, 0% 100%);
     }
+    /* Panel 4: Left starts 33.0%/35.7%. Right ends 64.8%/68.2% */
     .panel:nth-child(4) {
-        top: 48.45%; left: 0; height: 51.55%; width: 100%;
-        clip-path: polygon(28.77% 0%, 60.97% 0%, 67.27% 100%, 35.07% 100%);
+        top: 50%; left: 0; height: 50%; width: 100%;
+        clip-path: polygon(33.0% 0%, 64.8% 0%, 68.2% 100%, 35.7% 100%);
     }
+    /* Panel 5: Left starts 64.8%/68.2% */
     .panel:nth-child(5) {
-        top: 48.45%; left: 0; height: 51.55%; width: 100%;
-        clip-path: polygon(62.27% 0%, 100% 0%, 100% 100%, 68.57% 100%);
+        top: 50%; left: 0; height: 50%; width: 100%;
+        clip-path: polygon(64.8% 0%, 100% 0%, 100% 100%, 68.2% 100%);
     }
 
     /* ====================== */
     
     /* 
-       IMAGE FIT: 'contain' ensures full image is visible (100% fit) without crop.
-       Gaps are handled by the white background of the panel/grid.
+       IMAGE FIT: 'fill' ensures full image is visible (100% fit) and stretches to fill (0 white space).
     */
     .panel img { 
         width: 100%; height: 100%; 
-        object-fit: contain; /* DEFAULT: Show full image, padded with white */
+        object-fit: fill; /* STRETCH TO FILL (No Zoom, No Gaps) */
         transition: transform 0.1s ease-out; 
         transform-origin: center center; 
     }
     /* Toggle classes */
     .panel img.fit-cover { object-fit: cover !important; }
-    .panel img.fit-fill { object-fit: fill !important; }
+    .panel img.fit-contain { object-fit: contain !important; }
     
     .panel img.pannable { cursor: grab; }
     .panel img.panning { cursor: grabbing; }
@@ -979,24 +980,14 @@ INDEX_HTML = '''
     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 'contain' (no crop/zoom, but bars), 'fill' (stretch, no bars), and 'cover' (crop, no bars)
+    // NEW: Toggle between 'fill' (stretch 100%), 'cover' (crop), and 'contain' (bars)
     function toggleFitCover() {
         if(!selectedPanel) return alert("Select a panel");
         const img = selectedPanel.querySelector('img');
-        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
+        const current = img.style.objectFit || 'fill';
+        if(current === 'fill') img.style.objectFit = 'cover';
+        else if(current === 'cover') img.style.objectFit = 'contain';
+        else img.style.objectFit = 'fill';
         saveDraft(true);
     }
 
@@ -1009,13 +1000,6 @@ 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'); 
@@ -1033,8 +1017,8 @@ INDEX_HTML = '''
         for(let i = 0; i < pgs.length; i++) { 
             try { 
                 const u = await htmlToImage.toPng(pgs[i], { 
-                    pixelRatio: 2, // High quality for print
-                    style: { transform: 'none' } // Ensure no transforms for html-to-image
+                    pixelRatio: 2, // High quality
+                    style: { transform: 'none' } 
                 }); 
                 const a = document.createElement('a'); 
                 a.href = u; 
@@ -1046,11 +1030,8 @@ INDEX_HTML = '''
             } 
         } 
         
-        // --- RESTORE EDITOR SCALING AFTER EXPORT ---
-        comicPages.forEach(page => {
-            page.style.transform = 'scale(0.6)';
-            page.style.marginBottom = '-280px'; 
-        });
+        // 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.
     }
     
     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'; } }