Update app_enhanced.py

app_enhanced.py

@@ -329,7 +329,7 @@ INDEX_HTML = r'''
     .splash-btn { padding: 20px 60px; font-size: 24px; background: var(--accent); color: #000; border: none; border-radius: 50px; cursor: pointer; font-family: 'Bangers'; letter-spacing: 2px; text-transform: uppercase; animation: pulse 2s infinite; transition: 0.2s; z-index: 2; }
     .splash-btn:hover { transform: scale(1.1) rotate(-2deg); background: #fff; }
 
-    /* LOADING SCREEN (ANIMATED RING) */
+    /* LOADING SCREEN */
     #loading-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 4000; flex-direction: column; align-items: center; justify-content: center; color: var(--accent); }
     .spinner { width: 80px; height: 80px; border: 8px solid rgba(255,255,255,0.1); border-top: 8px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; box-shadow: var(--neon-glow); }
     @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@@ -364,12 +364,13 @@ INDEX_HTML = r'''
     .comic-page { width: 1080px; height: 1080px; background: white; box-shadow: 0 0 30px rgba(0,0,0,0.5); position: relative; overflow: hidden; border: 5px solid #fff; flex-shrink: 0; }
     .comic-grid { width: 100%; height: 100%; position: relative; background: #fff; --y: 50%; --t1: 100%; --t2: 100%; --b1: 100%; --b2: 100%; --gap: 5px; }
     .placement-mode { cursor: crosshair !important; }
-    .panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: grab; }
+    
+    .panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: grab; z-index:1; }
     .panel:active { cursor: grabbing; }
-    .panel img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; transition: transform 0.1s ease-out; }
-    .panel.selected { border: 3px solid var(--accent); z-index: 5; }
+    .panel img { width: 100%; height: 100%; object-fit: contain; }
+    .panel.selected { border: 4px solid var(--accent); z-index: 5; }
     
-    /* CLIP PATHS */
+    /* CLIP PATHS - ADDED GAPS FOR "LINES" */
     .panel:nth-child(1) { clip-path: polygon(0 0, calc(var(--t1) - var(--gap)) 0, calc(var(--t2) - var(--gap)) calc(var(--y) - var(--gap)), 0 calc(var(--y) - var(--gap))); }
     .panel:nth-child(2) { clip-path: polygon(calc(var(--t1) + var(--gap)) 0, 100% 0, 100% calc(var(--y) - var(--gap)), calc(var(--t2) + var(--gap)) calc(var(--y) - var(--gap))); }
     .panel:nth-child(3) { clip-path: polygon(0 calc(var(--y) + var(--gap)), calc(var(--b1) - var(--gap)) calc(var(--y) + var(--gap)), calc(var(--b2) - var(--gap)) 100%, 0 100%); }
@@ -578,12 +579,15 @@ INDEX_HTML = r'''
         b.innerHTML = `<span class="bubble-text">${d.text}</span><div class="resize-handle"></div>`;
         
         b.onmousedown = (e) => {
-             if(currentTool==='add') return;
+             // If resizing, ignore move
              if(e.target.classList.contains('resize-handle')) {
                  window.dragActive = { b: b, startW: b.offsetWidth, startH: b.offsetHeight, mx: e.clientX, my: e.clientY, type: 'resize' };
-             } else {
-                 e.stopPropagation(); selectBubble(b);
-                 window.dragActive = { b: b, type: 'move' };
+                 e.stopPropagation(); // prevent panel dragging
+             } else if(currentTool !== 'add') {
+                 // Bubble dragging
+                 window.dragActive = { b: b, type: 'move', offsetX: e.clientX - b.offsetLeft, offsetY: e.clientY - b.offsetTop };
+                 selectBubble(b);
+                 e.stopPropagation(); // prevent panel dragging
              }
         };
         b.ondblclick = (e) => { e.stopPropagation(); const t=prompt("Edit:", b.innerText); if(t) b.querySelector('.bubble-text').innerText=t; };
@@ -598,10 +602,9 @@ INDEX_HTML = r'''
                 d.b.style.width = (d.startW + (e.clientX - d.mx)) + 'px';
                 d.b.style.height = (d.startH + (e.clientY - d.my)) + 'px';
             } else if(d.type === 'move') {
-                const rect = d.b.parentElement.getBoundingClientRect();
-                d.b.style.left = (e.clientX - rect.left - d.b.offsetWidth/2) + 'px';
-                d.b.style.top = (e.clientY - rect.top - d.b.offsetHeight/2) + 'px';
-            } else if(d.type === 'pan_image') { // FIXED IMAGE PANNING
+                d.b.style.left = (e.clientX - d.offsetX) + 'px';
+                d.b.style.top = (e.clientY - d.offsetY) + 'px';
+            } else if(d.type === 'pan_image') { // IMAGE PANNING
                 const dx = e.clientX - d.startX;
                 const dy = e.clientY - d.startY;
                 d.img.dataset.translateX = d.tx + dx;
@@ -611,10 +614,7 @@ INDEX_HTML = r'''
         }
     });
 
-    // Clean up drag states
-    document.addEventListener('mouseup', () => { 
-        window.dragActive = null;
-    });
+    document.addEventListener('mouseup', () => { window.dragActive = null; });
 
     function selectBubble(b) {
         if(selectedBubble) selectedBubble.classList.remove('selected');