Update app_enhanced.py

app_enhanced.py

@@ -344,7 +344,7 @@ INDEX_HTML = '''
     /* HANDLES FOR DRAGGING */
     .handle {
         position: absolute;
-        /* UPDATED: 30px HANDLES */
+        /* UPDATED: MUCH LARGER HANDLES (30px) */
         width: 30px; height: 30px;
         background: #ff4757;
         border: 3px solid white;
@@ -378,6 +378,9 @@ INDEX_HTML = '''
         top: 0; left: 0;
         transform-origin: 0 0;
         cursor: grab;
+        /* CRITICAL FOR PANNING: Prevent ghost image */
+        user-select: none;
+        -webkit-user-drag: none;
     }
     .panel img.panning { cursor: grabbing; }
 
@@ -645,12 +648,11 @@ INDEX_HTML = '''
                 
                 const panData = page.panels[i] || { src: '' };
                 const img = document.createElement('img');
+                img.setAttribute('draggable', 'false'); // STOP BROWSER DRAG
                 img.onload = () => fitImageToPanel(img, pDiv, panData);
                 img.src = panData.src.includes('?') ? panData.src : panData.src + `?sid=${sid}`; 
-                img.onmousedown = (e) => startPan(e, img);
                 
                 pDiv.appendChild(img);
-                pDiv.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                 div.appendChild(pDiv);
             }
             
@@ -664,7 +666,6 @@ INDEX_HTML = '''
                 const hDiv = document.createElement('div');
                 hDiv.className = `handle ${h.cls||''}`; hDiv.id = `${pageId}-${h.id}`;
                 hDiv.dataset.role = h.id;
-                hDiv.onmousedown = (e) => startDragHandle(e, pageId, h.id);
                 div.appendChild(hDiv);
             });
 
@@ -672,13 +673,6 @@ INDEX_HTML = '''
                 page.pageBubbles.forEach(bData => div.appendChild(createBubbleHTML(bData)));
             }
             
-            div.onclick = (e) => {
-                if(e.target === div || e.target.classList.contains('comic-page')) {
-                    if(selectedBubble) selectedBubble.classList.remove('selected'); selectedBubble = null;
-                    if(selectedPanel) selectedPanel.classList.remove('selected'); selectedPanel = null;
-                }
-            };
-            
             pageWrapper.appendChild(div); 
             con.appendChild(pageWrapper);
             
@@ -723,55 +717,78 @@ INDEX_HTML = '''
         setH('h-tier', w/2, ty);
     }
 
-    // --- UNIFIED DRAG HANDLERS ---
+    // --- GLOBAL EVENT DELEGATION FOR RELIABILITY ---
     
-    function startDragHandle(e, pageId, handleRole) {
-        e.stopPropagation(); e.preventDefault();
-        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'); 
-    }
+    document.addEventListener('mousedown', (e) => {
+        const target = e.target;
+        
+        // 1. HANDLES
+        if (target.classList.contains('handle')) {
+            e.preventDefault(); e.stopPropagation();
+            dragMode = 'layout';
+            dragData = { handle: target.dataset.role, pageId: target.closest('.comic-page').id };
+            return;
+        }
+        
+        // 2. RESIZE HANDLES (Bubble corner)
+        if (target.classList.contains('resize-handle')) {
+            e.preventDefault(); e.stopPropagation();
+            dragMode = 'resize-bubble';
+            const bubble = target.closest('.speech-bubble');
+            const rect = bubble.getBoundingClientRect();
+            let dir = 'se'; // default
+            if(target.classList.contains('sw')) dir = 'sw';
+            if(target.classList.contains('ne')) dir = 'ne';
+            if(target.classList.contains('nw')) dir = 'nw';
+            
+            dragData = { 
+                el: bubble, dir: dir,
+                startX: e.clientX, startY: e.clientY,
+                startW: rect.width, startH: rect.height 
+            };
+            return;
+        }
+        
+        // 3. BUBBLES
+        const bubble = target.closest('.speech-bubble');
+        if (bubble) {
+            e.preventDefault(); e.stopPropagation();
+            selectBubble(bubble);
+            dragMode = 'bubble';
+            dragData = { 
+                el: bubble, 
+                startX: e.clientX, startY: e.clientY, 
+                initX: bubble.offsetLeft, initY: bubble.offsetTop 
+            };
+            return;
+        }
+        
+        // 4. PANELS/IMAGES
+        if (target.tagName === 'IMG' && target.closest('.panel')) {
+            e.preventDefault(); e.stopPropagation();
+            const panel = target.closest('.panel');
+            selectPanel(panel);
+            dragMode = 'pan';
+            dragData = {
+                el: target,
+                startX: e.clientX, startY: e.clientY,
+                startTx: parseFloat(target.dataset.translateX || 0),
+                startTy: parseFloat(target.dataset.translateY || 0)
+            };
+            target.classList.add('panning');
+            return;
+        }
+        
+        // 5. CLICK OFF (Deselect)
+        if (!target.closest('.edit-controls') && !target.closest('.modal-content')) {
+            if(selectedBubble) selectedBubble.classList.remove('selected'); selectedBubble = null;
+            if(selectedPanel) selectedPanel.classList.remove('selected'); selectedPanel = null;
+        }
+    });
 
-    // --- UNIFIED MOUSE MOVE ---
     document.addEventListener('mousemove', (e) => {
         if(!dragMode) return;
-        
-        e.preventDefault(); // Prevent selection/scrolling while dragging
+        e.preventDefault(); // Stop text selection
 
         if(dragMode === 'layout') {
             const pageEl = document.getElementById(dragData.pageId);
@@ -845,9 +862,7 @@ INDEX_HTML = '''
         const iW = img.naturalWidth || img.width;
         const iH = img.naturalHeight || img.height;
         
-        // CONTAIN LOGIC: Ensure WHOLE image fits
         const scale = Math.min(pW / iW, pH / iH);
-        
         const tx = (pW - iW * scale) / 2;
         const ty = (pH - iH * scale) / 2;
         
@@ -883,13 +898,8 @@ INDEX_HTML = '''
         if(data.tailPos) b.style.setProperty('--tail-pos', data.tailPos);
         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); });
-        
-        // BUBBLE DRAG HANDLER
-        b.onmousedown = (e) => startBubbleDrag(e, b);
+        ['nw', 'ne', 'sw', 'se'].forEach(dir => { const handle = document.createElement('div'); handle.className = `resize-handle ${dir}`; b.appendChild(handle); });
         
-        b.onclick = (e) => { e.stopPropagation(); };
-        b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
         return b;
     }
     
@@ -915,6 +925,17 @@ INDEX_HTML = '''
         handles.forEach(h=>h.style.display='block');
     }
     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'; } }
+    
+    // Select panel helper
+    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');
+        if(img) document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
+        document.getElementById('bubble-type-select').disabled = true; document.getElementById('font-select').disabled = true;
+    }
 </script>
 </body> </html> '''