Update app_enhanced.py

app_enhanced.py

@@ -916,9 +916,27 @@ class EnhancedComicGenerator:
 
         function updateImageTransform(img) {
             const zoom = (img.dataset.zoom || 100) / 100;
-            const x = img.dataset.translateX || 0;
-            const y = img.dataset.translateY || 0;
-            img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${zoom})`;
+            const x = parseFloat(img.dataset.translateX || 0);
+            const y = parseFloat(img.dataset.translateY || 0);
+            
+            const panel = img.parentElement;
+            const panelWidth = panel.offsetWidth;
+            const panelHeight = panel.offsetHeight;
+            const imgWidth = img.offsetWidth * zoom;
+            const imgHeight = img.offsetHeight * zoom;
+
+            // Calculate max allowable translation
+            const maxX = Math.max(0, (imgWidth - panelWidth) / 2);
+            const maxY = Math.max(0, (imgHeight - panelHeight) / 2);
+
+            // Clamp the translation values
+            const clampedX = Math.max(-maxX, Math.min(maxX, x));
+            const clampedY = Math.max(-maxY, Math.min(maxY, y));
+
+            img.dataset.translateX = clampedX;
+            img.dataset.translateY = clampedY;
+
+            img.style.transform = `translateX(${clampedX}px) translateY(${clampedY}px) scale(${zoom})`;
             img.classList.toggle('pannable', zoom > 1);
         }
 
@@ -926,6 +944,9 @@ class EnhancedComicGenerator:
             if (!currentlySelectedPanel) return;
             const img = currentlySelectedPanel.querySelector('img');
             img.dataset.zoom = event.target.value;
+            // Reset translation when zoom changes to avoid edge cases
+            img.dataset.translateX = 0;
+            img.dataset.translateY = 0;
             updateImageTransform(img);
         }
         
@@ -955,9 +976,12 @@ class EnhancedComicGenerator:
         function panImage(event) {
             if (!isPanning || !currentlySelectedPanel) return;
             const img = currentlySelectedPanel.querySelector('img');
-            img.dataset.translateX = panStartTranslateX + (event.clientX - panStartX);
-            img.dataset.translateY = panStartTranslateY + (event.clientY - panStartY);
-            updateImageTransform(img);
+            const dx = event.clientX - panStartX;
+            const dy = event.clientY - panStartY;
+            
+            img.dataset.translateX = panStartTranslateX + dx;
+            img.dataset.translateY = panStartTranslateY + dy;
+            updateImageTransform(img); // Clamping is handled here
         }
 
         function stopPan() {