Update app_enhanced.py

app_enhanced.py

@@ -336,27 +336,30 @@ INDEX_HTML = '''
         z-index: 1;
         overflow: hidden; 
         /* UPDATED: THICK WHITE BORDER */
-        border: 10px solid white;
-        box-shadow: 0 0 30px rgba(0,0,0,0.5); 
+        border: 12px solid white;
+        box-shadow: 0 0 40px rgba(0,0,0,0.5); 
+        box-sizing: border-box;
     }
     
     /* HANDLES FOR DRAGGING */
     .handle {
         position: absolute;
-        /* UPDATED: LARGER HANDLES */
-        width: 24px; height: 24px;
+        /* UPDATED: MUCH LARGER HANDLES (30px) */
+        width: 30px; height: 30px;
         background: #ff4757;
         border: 3px solid white;
         border-radius: 50%;
         cursor: ew-resize;
         z-index: 999;
         transform: translate(-50%, -50%);
-        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
+        transition: transform 0.1s;
     }
+    .handle:hover { transform: translate(-50%, -50%) scale(1.1); }
     .handle.horiz { 
         cursor: ns-resize; 
-        width: 60px; height: 18px; 
-        border-radius: 9px; 
+        width: 80px; height: 20px; 
+        border-radius: 10px; 
     }
     
     /* PANELS */
@@ -383,10 +386,12 @@ INDEX_HTML = '''
         position: absolute; display: flex; justify-content: center; align-items: center; 
         width: auto; height: auto; min-width: 80px; min-height: 50px; max-width: 250px;
         box-sizing: border-box; 
+        /* UPDATED Z-INDEX TO ENSURE DRAGGABILITY */
         z-index: 500; 
         cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
         font-size: 13px; text-align: center; 
         line-height: 1.2; --tail-pos: 50%; padding: 5px; 
+        user-select: none;
     }
     .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 501; }
     
@@ -516,8 +521,11 @@ INDEX_HTML = '''
     let currentSaveCode = null;
     let isProcessing = false;
     let interval, selectedBubble = null, selectedPanel = null;
-    let isDragging = false, isResizing = false, isPanning = false;
-    let startX, startY, initX, initY, panStartX, panStartY, panStartTx, panStartTy;
+    
+    // DRAG MODES
+    let dragMode = null; // 'layout', 'bubble', 'pan', 'resize-bubble'
+    let dragData = {}; // Stores offsets and active IDs
+    
     let activeLayoutHandle = null, activePageId = null;
     
     const DEFAULT_LAYOUT = {
@@ -632,6 +640,7 @@ INDEX_HTML = '''
             div.id = pageId;
             div.dataset.layout = JSON.stringify(layout);
             
+            // Generate 4 Panels
             for(let i=0; i<4; i++) {
                 const pDiv = document.createElement('div'); 
                 pDiv.className = 'panel'; pDiv.id = `${pageId}-p${i}`;
@@ -647,6 +656,7 @@ INDEX_HTML = '''
                 div.appendChild(pDiv);
             }
             
+            // Generate Handles
             const handles = [
                 {id: 'h1-top', t:0, l:0}, {id: 'h1-bot', t:0, l:0},
                 {id: 'h2-top', t:0, l:0}, {id: 'h2-bot', t:0, l:0},
@@ -715,42 +725,97 @@ INDEX_HTML = '''
         setH('h-tier', w/2, ty);
     }
 
+    // --- INTERACTION LOGIC (FIXED) ---
+    
     function startDragHandle(e, pageId, handleRole) {
         e.stopPropagation(); e.preventDefault();
-        activeLayoutHandle = handleRole;
-        activePageId = pageId;
-        isDragging = true; 
+        dragMode = 'layout';
+        dragData = { handle: handleRole, pageId: pageId };
+    }
+
+    function startBubbleDrag(e, bubble) {
+        if(e.target.classList.contains('resize-handle')) return;
+        e.stopPropagation(); e.preventDefault();
+        selectBubble(bubble);
+        dragMode = 'bubble';
+        dragData = { 
+            el: bubble, 
+            startX: e.clientX, startY: e.clientY, 
+            initX: bubble.offsetLeft, initY: bubble.offsetTop 
+        };
+    }
+
+    function startResize(e, dir) {
+        e.stopPropagation(); e.preventDefault();
+        dragMode = 'resize-bubble';
+        const rect = selectedBubble.getBoundingClientRect();
+        dragData = { 
+            el: selectedBubble, dir: dir,
+            startX: e.clientX, startY: e.clientY,
+            startW: rect.width, startH: rect.height 
+        };
+    }
+
+    function startPan(e, img) { 
+        e.preventDefault(); 
+        selectPanel(img.closest('.panel'));
+        dragMode = 'pan';
+        dragData = {
+            el: img,
+            startX: e.clientX, startY: e.clientY,
+            startTx: parseFloat(img.dataset.translateX || 0),
+            startTy: parseFloat(img.dataset.translateY || 0)
+        };
+        img.classList.add('panning'); 
     }
 
+    // GLOBAL MOUSEMOVE
     document.addEventListener('mousemove', (e) => {
-        if(isDragging && activeLayoutHandle && activePageId) {
-            const pageEl = document.getElementById(activePageId);
+        if(!dragMode) return;
+
+        if(dragMode === 'layout') {
+            const pageEl = document.getElementById(dragData.pageId);
             const rect = pageEl.getBoundingClientRect();
             const state = JSON.parse(pageEl.dataset.layout);
             const x = Math.max(0, Math.min(1000, (e.clientX - rect.left) * (1000 / rect.width))); 
             const y = Math.max(50, Math.min(650, (e.clientY - rect.top) * (700 / rect.height)));
+            const role = dragData.handle;
 
-            if(activeLayoutHandle === 'h1-top') state.r1.topX = x;
-            else if(activeLayoutHandle === 'h1-bot') state.r1.botX = x;
-            else if(activeLayoutHandle === 'h2-top') state.r2.topX = x;
-            else if(activeLayoutHandle === 'h2-bot') state.r2.botX = x;
-            else if(activeLayoutHandle === 'h-tier') state.tierY = y;
+            if(role === 'h1-top') state.r1.topX = x;
+            else if(role === 'h1-bot') state.r1.botX = x;
+            else if(role === 'h2-top') state.r2.topX = x;
+            else if(role === 'h2-bot') state.r2.botX = x;
+            else if(role === 'h-tier') state.tierY = y;
 
             pageEl.dataset.layout = JSON.stringify(state);
-            drawLayout(activePageId);
+            drawLayout(dragData.pageId);
+        }
+        else if(dragMode === 'bubble') {
+            const d = dragData;
+            d.el.style.left = (d.initX + e.clientX - d.startX) + 'px'; 
+            d.el.style.top = (d.initY + e.clientY - d.startY) + 'px'; 
+        }
+        else if(dragMode === 'resize-bubble') {
+            const d = dragData;
+            const dx = e.clientX - d.startX;
+            const dy = e.clientY - d.startY;
+            if(d.dir.includes('e')) d.el.style.width = (d.startW + dx)+'px'; 
+            if(d.dir.includes('s')) d.el.style.height = (d.startH + dy)+'px'; 
+        }
+        else if(dragMode === 'pan') {
+            const d = dragData;
+            d.el.dataset.translateX = d.startTx + (e.clientX - d.startX); 
+            d.el.dataset.translateY = d.startTy + (e.clientY - d.startY); 
+            updateImageTransform(d.el);
         }
-        else if(isDragging && selectedBubble) { 
-            selectedBubble.style.left = (initX + e.clientX - startX) + 'px'; 
-            selectedBubble.style.top = (initY + e.clientY - startY) + 'px'; 
-        } 
-        else if(isResizing && selectedBubble) { resizeBubble(e); } 
-        else if(isPanning && selectedPanel) { panImage(e); }
     });
 
     document.addEventListener('mouseup', () => {
-        if(activeLayoutHandle) { activeLayoutHandle = null; activePageId = null; saveDraft(true); }
-        if(isDragging || isResizing || isPanning) { saveDraft(true); }
-        isDragging = false; isResizing = false; isPanning = false; 
+        if(dragMode) {
+            if(dragMode === 'pan' && dragData.el) dragData.el.classList.remove('panning');
+            dragMode = null;
+            saveDraft(true);
+        }
     });
 
     function updateGutter(val) {
@@ -773,13 +838,12 @@ INDEX_HTML = '''
             return;
         }
         
-        // CONTAIN LOGIC: Ensure WHOLE image fits
         const pW = 1000; 
         const pH = panel.offsetHeight; 
         const iW = img.naturalWidth || img.width;
         const iH = img.naturalHeight || img.height;
         
-        // Math.min makes sure it fits fully (contain)
+        // CONTAIN LOGIC: Ensure WHOLE image fits
         const scale = Math.min(pW / iW, pH / iH);
         
         const tx = (pW - iW * scale) / 2;
@@ -802,21 +866,9 @@ INDEX_HTML = '''
         img.classList.toggle('pannable', true);
     }
 
-    function startPan(e, img) { 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 handleZoom(el) { if(!selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.zoom = el.value; updateImageTransform(img); }
     function resetPanelTransform() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); fitImageToPanel(img, selectedPanel, null); saveDraft(true); }
 
-    function selectPanel(el) { 
-        if(selectedPanel) selectedPanel.classList.remove('selected'); 
-        if(selectedBubble) { selectedBubble.classList.remove('selected'); selectedBubble = null; } 
-        selectedPanel = el; el.classList.add('selected'); 
-        document.getElementById('zoom-slider').disabled = false;
-        const img = el.querySelector('img');
-        document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
-        document.getElementById('bubble-type-select').disabled = true; document.getElementById('font-select').disabled = true;
-    }
-    
     function createBubbleHTML(data) {
         const b = document.createElement('div');
         const type = data.type || 'speech';
@@ -830,14 +882,15 @@ INDEX_HTML = '''
         const textSpan = document.createElement('span'); textSpan.className = 'bubble-text'; textSpan.textContent = data.text || ''; b.appendChild(textSpan);
         if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; b.appendChild(d); } }
         ['nw', 'ne', 'sw', 'se'].forEach(dir => { const handle = document.createElement('div'); handle.className = `resize-handle ${dir}`; handle.onmousedown = (e) => startResize(e, dir); b.appendChild(handle); });
-        b.onmousedown = (e) => { 
-            if(e.target.classList.contains('resize-handle')) return; 
-            e.stopPropagation(); selectBubble(b); isDragging = true; startX = e.clientX; startY = e.clientY; initX = b.offsetLeft; initY = b.offsetTop; 
-        };
+        
+        // BUBBLE DRAG HANDLER
+        b.onmousedown = (e) => startBubbleDrag(e, b);
+        
         b.onclick = (e) => { e.stopPropagation(); };
         b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
         return b;
     }
+    
     function selectBubble(el) { if(selectedBubble) selectedBubble.classList.remove('selected'); if(selectedPanel) { selectedPanel.classList.remove('selected'); selectedPanel = null; } selectedBubble = el; el.classList.add('selected'); document.getElementById('bubble-type-select').disabled = false; document.getElementById('font-select').disabled = false; document.getElementById('bubble-text-color').disabled = false; document.getElementById('bubble-fill-color').disabled = false; document.getElementById('bubble-type-select').value = el.dataset.type || 'speech'; }
     function addBubble() { if(!selectedPanel) return alert("Select a panel (click an image) to add bubble to that page."); const pageDiv = selectedPanel.closest('.comic-page'); const b = createBubbleHTML({ text: "Text", left: "100px", top: "100px", type: 'speech', classes: "speech-bubble speech tail-bottom" }); pageDiv.appendChild(b); selectBubble(b); saveDraft(true); }
     function deleteBubble() { if(!selectedBubble) return alert("Select a bubble"); selectedBubble.remove(); selectedBubble=null; saveDraft(true); }
@@ -847,8 +900,6 @@ INDEX_HTML = '''
     function slideTail(v) { if(selectedBubble) { selectedBubble.style.setProperty('--tail-pos', v+'%'); saveDraft(true); } }
     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 startResize(e, dir) { e.preventDefault(); e.stopPropagation(); isResizing = true; resizeHandle = dir; const rect = selectedBubble.getBoundingClientRect(); originalWidth = rect.width; originalHeight = rect.height; originalMouseX = e.clientX; originalMouseY = e.clientY; }
-    function resizeBubble(e) { if (!isResizing || !selectedBubble) return; const dx = e.clientX - originalMouseX; const dy = e.clientY - originalMouseY; if(resizeHandle.includes('e')) selectedBubble.style.width = (originalWidth + dx)+'px'; if(resizeHandle.includes('s')) selectedBubble.style.height = (originalHeight + dy)+'px'; }
     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); }