Update app_enhanced.py

app_enhanced.py

@@ -330,41 +330,55 @@ INDEX_HTML = '''
     .page-wrapper { margin: 30px auto; display: flex; flex-direction: column; align-items: center; }
     .page-title { text-align: center; color: #333; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
     
-    .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 2px solid #000; padding: 10px; }
+    /* === SIZE 864x1080 === */
+    .comic-page { 
+        background: white; 
+        width: 864px; 
+        height: 1080px; 
+        box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
+        position: relative; 
+        overflow: hidden; 
+        border: 2px solid #000; 
+        padding: 10px; 
+    }
     
-    /* === LAYOUTS === */
-    .comic-grid { width: 100%; height: 100%; position: relative; background: #000; display:grid; gap: 10px; }
+    /* === CUSTOM SLANT LAYOUT === */
+    .comic-grid { width: 100%; height: 100%; position: relative; background: #000; display: block; }
     
-    .comic-grid.layout-rows { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
-    .comic-grid.layout-cols { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: 1fr; }
-    .comic-grid.layout-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+    .panel { position: absolute; overflow: hidden; background: #000; cursor: pointer; border: 2px solid #000; }
+    .comic-grid.layout-custom-slant .panel { border: none; background: transparent; width: 100%; height: 100%; }
     
-    /* === CUSTOM SLANT LAYOUT === */
-    .comic-grid.layout-custom-slant { display: block; position: relative; }
-    .comic-grid.layout-custom-slant .panel { position: absolute; width: 100%; border: none; background: transparent; }
-    /* Panel 1 (Top) */
-    .comic-grid.layout-custom-slant .panel:nth-child(1) { top: 0; height: 100%; z-index:2; clip-path: polygon(0 0, 100% 0, 100% var(--split-r, 55%), 0 var(--split-l, 45%)); }
-    /* Panel 2 (Bottom) */
-    .comic-grid.layout-custom-slant .panel:nth-child(2) { top: 0; height: 100%; z-index:1; clip-path: polygon(0 var(--split-l, 45%), 100% var(--split-r, 55%), 100% 100%, 0 100%); }
-    .comic-grid.layout-custom-slant .panel:nth-child(n+3) { display: none; }
-    
-    /* Split Handles */
-    .split-handle {
-        position: absolute; width: 20px; height: 20px; background: #2196F3; border: 2px solid white; border-radius: 50%;
-        cursor: ns-resize; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3); display: none;
+    /* Top Panel (1) */
+    /* Clip polygon uses custom props split-l and split-r (0-100%) */
+    .comic-grid.layout-custom-slant .panel:nth-child(1) { 
+        top: 0; left: 0;
+        z-index:2; 
+        clip-path: polygon(0 0, 100% 0, 100% var(--split-r, 55%), 0 var(--split-l, 45%)); 
     }
-    .layout-custom-slant .split-handle { display: block; }
-    .split-handle.left { left: -10px; top: var(--split-l, 45%); }
-    .split-handle.right { right: -10px; top: var(--split-r, 55%); }
     
+    /* Bottom Panel (2) */
+    .comic-grid.layout-custom-slant .panel:nth-child(2) { 
+        top: 0; left: 0;
+        z-index:1; 
+        clip-path: polygon(0 var(--split-l, 45%), 100% var(--split-r, 55%), 100% 100%, 0 100%); 
+    }
     
-    .panel { overflow: hidden; background: #eee; cursor: pointer; border: 2px solid #000; position: relative; }
-    .layout-custom-slant .panel { border: none; }
     .panel.selected { z-index: 20; border-color: #2196F3; }
     
+    /* DRAG POINTS */
+    .split-handle {
+        position: absolute; width: 24px; height: 24px; 
+        background: #2196F3; border: 3px solid white; border-radius: 50%;
+        cursor: ns-resize; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.4); 
+    }
+    .split-handle:hover { transform: scale(1.2); }
+    .split-handle.left { left: -12px; top: var(--split-l, 45%); }
+    .split-handle.right { right: -12px; top: var(--split-r, 55%); }
+    
+    
     .panel img { 
         width: 100%; height: 100%; 
-        object-fit: contain; 
+        object-fit: contain; /* DEFAULT: Contain to show full image */
         transition: transform 0.1s ease-out; 
         transform-origin: center center; 
         pointer-events: auto; 
@@ -489,16 +503,6 @@ INDEX_HTML = '''
         
         <button onclick="undoLastAction()" class="undo-btn">↩️ Undo</button>
         
-        <div class="control-group">
-            <label>📐 Layout Style:</label>
-            <select id="layout-select" onchange="changeLayout(this.value)">
-                <option value="layout-rows">Rows (Horizontal)</option>
-                <option value="layout-cols">Cols (Vertical)</option>
-                <option value="layout-grid">Grid (2x2)</option>
-                <option value="layout-custom-slant">Custom Slant (Drag Points)</option>
-            </select>
-        </div>
-        
         <div class="control-group">
             <label>💾 Save & Load:</label>
             <button onclick="saveComic()" class="save-btn">💾 Save Comic</button>
@@ -671,10 +675,6 @@ INDEX_HTML = '''
         const pages = [];
         document.querySelectorAll('.comic-page').forEach(p => {
             const grid = p.querySelector('.comic-grid');
-            let layout = 'layout-rows';
-            if(grid.classList.contains('layout-cols')) layout = 'layout-cols';
-            if(grid.classList.contains('layout-grid')) layout = 'layout-grid';
-            if(grid.classList.contains('layout-custom-slant')) layout = 'layout-custom-slant';
             
             // Layout Split Pos
             const splitL = grid.style.getPropertyValue('--split-l') || '45%';
@@ -703,7 +703,7 @@ INDEX_HTML = '''
                     bubbles: bubbles 
                 });
             });
-            pages.push({ layout: layout, splitL: splitL, splitR: splitR, panels: panels });
+            pages.push({ layout: 'layout-custom-slant', splitL: splitL, splitR: splitR, panels: panels });
         });
         return pages;
     }
@@ -723,18 +723,16 @@ INDEX_HTML = '''
             const div = document.createElement('div'); div.className = 'comic-page';
             const grid = document.createElement('div'); 
             
-            grid.className = 'comic-grid ' + (page.layout || 'layout-rows');
-            if(page.layout === 'layout-custom-slant') {
-                grid.style.setProperty('--split-l', page.splitL || '45%');
-                grid.style.setProperty('--split-r', page.splitR || '55%');
-                
-                // Add handles
-                const hL = document.createElement('div'); hL.className = 'split-handle left';
-                hL.onmousedown = (e) => startSplitDrag(e, hL, grid, 'left');
-                const hR = document.createElement('div'); hR.className = 'split-handle right';
-                hR.onmousedown = (e) => startSplitDrag(e, hR, grid, 'right');
-                grid.appendChild(hL); grid.appendChild(hR);
-            }
+            grid.className = 'comic-grid layout-custom-slant';
+            grid.style.setProperty('--split-l', page.splitL || '45%');
+            grid.style.setProperty('--split-r', page.splitR || '55%');
+            
+            // Add handles
+            const hL = document.createElement('div'); hL.className = 'split-handle left';
+            hL.onmousedown = (e) => startSplitDrag(e, hL, grid, 'left');
+            const hR = document.createElement('div'); hR.className = 'split-handle right';
+            hR.onmousedown = (e) => startSplitDrag(e, hR, grid, 'right');
+            grid.appendChild(hL); grid.appendChild(hR);
             
             page.panels.forEach((pan) => {
                 const pDiv = document.createElement('div'); pDiv.className = 'panel';
@@ -754,7 +752,6 @@ INDEX_HTML = '''
                 grid.appendChild(pDiv);
             });
             div.appendChild(grid); pageWrapper.appendChild(div); con.appendChild(pageWrapper);
-            if(pageIdx === 0) document.getElementById('layout-select').value = (page.layout || 'layout-rows');
         });
         selectedBubble = null; selectedPanel = null;
     }
@@ -856,7 +853,6 @@ INDEX_HTML = '''
     function panImage(e) { if(!isPanning || !selectedPanel) return; const img = selectedPanel.querySelector('img'); const dx = e.clientX - panStartX; const dy = e.clientY - panStartY; img.dataset.translateX = panStartTx + dx; img.dataset.translateY = panStartTy + dy; 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', true); }
     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 changeLayout(newLayout) { document.querySelectorAll('.comic-grid').forEach(g => { g.className = 'comic-grid ' + newLayout; if(newLayout === 'layout-custom-slant' && !g.querySelector('.split-handle')) { const hL = document.createElement('div'); hL.className = 'split-handle left'; hL.onmousedown = (e) => startSplitDrag(e, hL, g, 'left'); const hR = document.createElement('div'); hR.className = 'split-handle right'; hR.onmousedown = (e) => startSplitDrag(e, hR, g, 'right'); g.appendChild(hL); g.appendChild(hR); } }); saveDraft(true); }
     function toggleFitMode() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); if(img.classList.contains('fit-cover')) { img.classList.remove('fit-cover'); document.getElementById('fit-btn').innerText = "Fit: Contain"; } else { img.classList.add('fit-cover'); document.getElementById('fit-btn').innerText = "Fit: Cover"; } 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); }