Update app_enhanced.py

app_enhanced.py

@@ -344,7 +344,7 @@ INDEX_HTML = '''
     /* HANDLES FOR DRAGGING */
     .handle {
         position: absolute;
-        /* UPDATED: MUCH LARGER HANDLES (30px) */
+        /* UPDATED: 30px HANDLES */
         width: 30px; height: 30px;
         background: #ff4757;
         border: 3px solid white;
@@ -522,12 +522,10 @@ INDEX_HTML = '''
     let isProcessing = false;
     let interval, selectedBubble = null, selectedPanel = null;
     
-    // DRAG MODES
+    // UNIFIED DRAG STATE
     let dragMode = null; // 'layout', 'bubble', 'pan', 'resize-bubble'
     let dragData = {}; // Stores offsets and active IDs
     
-    let activeLayoutHandle = null, activePageId = null;
-    
     const DEFAULT_LAYOUT = {
         width: 1000, height: 700, gutter: 10, tierY: 350,
         r1: { topX: 500, botX: 500 }, 
@@ -725,7 +723,7 @@ INDEX_HTML = '''
         setH('h-tier', w/2, ty);
     }
 
-    // --- INTERACTION LOGIC (FIXED) ---
+    // --- UNIFIED DRAG HANDLERS ---
     
     function startDragHandle(e, pageId, handleRole) {
         e.stopPropagation(); e.preventDefault();
@@ -769,9 +767,11 @@ INDEX_HTML = '''
         img.classList.add('panning'); 
     }
 
-    // GLOBAL MOUSEMOVE
+    // --- UNIFIED MOUSE MOVE ---
     document.addEventListener('mousemove', (e) => {
         if(!dragMode) return;
+        
+        e.preventDefault(); // Prevent selection/scrolling while dragging
 
         if(dragMode === 'layout') {
             const pageEl = document.getElementById(dragData.pageId);
@@ -804,8 +804,10 @@ INDEX_HTML = '''
         }
         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); 
+            const tx = d.startTx + (e.clientX - d.startX);
+            const ty = d.startTy + (e.clientY - d.startY);
+            d.el.dataset.translateX = tx; 
+            d.el.dataset.translateY = ty; 
             updateImageTransform(d.el);
         }
     });