Update app_enhanced.py

app_enhanced.py

@@ -545,7 +545,7 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
 <div class="edit-controls">
     <h4>✏️ Interactive Editor</h4>
     <div class="control-group">
-        <label for="bubble-type-select">Bubble Tools:</label>
+        <label>Bubble Tools:</label>
         <select id="bubble-type-select" onchange="changeBubbleType(this.value)">
             <option value="speech">Speech</option><option value="thought">Thought</option><option value="reaction">Reaction</option><option value="narration">Narration</option><option value="idea">Idea</option>
         </select>
@@ -632,18 +632,29 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
         });
         document.querySelectorAll('.speech-bubble').forEach(b => initializeBubbleEvents(b));
         document.getElementById('zoom-slider').addEventListener('input', handleZoom);
+        
+        // Universal listeners for dragging and panning
+        document.addEventListener('mousemove', (e) => {
+            panImage(e);
+            drag(e);
+        });
+        document.addEventListener('mouseup', (e) => {
+            stopPan(e);
+            stopDrag(e);
+        });
+        document.addEventListener('mouseleave', (e) => {
+             stopPan(e);
+             stopDrag(e);
+        });
     }
 
     function initializePanelImageEvents(img) {
         img.addEventListener('mousedown', startPan);
-        document.addEventListener('mousemove', panImage);
-        document.addEventListener('mouseup', stopPan);
-        document.addEventListener('mouseleave', stopPan);
     }
     
     function initializeBubbleEvents(bubble) {
         bubble.addEventListener('dblclick', e => { e.stopPropagation(); editBubbleText(bubble); });
-        bubble.addEventListener('mousedown', e => startDrag(e));
+        bubble.addEventListener('mousedown', e => { e.stopPropagation(); startDrag(e); });
         bubble.addEventListener('click', e => { e.stopPropagation(); selectBubble(bubble); });
         bubble.addEventListener('wheel', e => {
             e.preventDefault();
@@ -763,6 +774,7 @@ body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-s
     }
     
     function drag(e) {
+        if (!draggedBubble) return;
         const parentRect = draggedBubble.parentElement.getBoundingClientRect();
         let x = e.clientX - parentRect.left - offset.x;
         let y = e.clientY - parentRect.top - offset.y;