Update app_enhanced.py

app_enhanced.py

@@ -543,55 +543,30 @@ class EnhancedComicGenerator:
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
         .speech-bubble textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #4CAF50; background: rgba(255,255,255,0.95); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
         
-        /* <<< MODIFICATION START: New Artistic Speech Bubble CSS >>> */
+        /* <<< MODIFICATION START: New Advanced CSS for Speech Bubble with Sliders >>> */
         .speech-bubble.speech {
             background: var(--bubble-fill-color, white);
             color: var(--bubble-text-color, #333);
-            border-radius: 25px; /* Softer radius */
+            border-radius: 25px;
             padding: 0;
             border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
         }
 
         .speech-bubble.speech::after {
             content: '';
             position: absolute;
-            width: 0;
-            height: 0;
-        }
-
-        /* 4-WAY TAIL ROTATION CLASSES */
-        .speech-bubble.speech.tail-bottom::after {
-            border-left: 24px solid transparent;
-            border-right: 12px solid transparent;
-            border-top: 12px solid var(--bubble-fill-color, white);
-            border-bottom: 20px solid transparent;
-            left: 32px; 
-            bottom: -24px;
-        }
-        .speech-bubble.speech.tail-top::after {
-            border-left: 12px solid transparent;
-            border-right: 24px solid transparent;
-            border-bottom: 12px solid var(--bubble-fill-color, white);
-            border-top: 20px solid transparent;
-            right: 32px; 
-            top: -24px;
-        }
-        .speech-bubble.speech.tail-right::after {
-            border-top: 24px solid transparent;
-            border-bottom: 12px solid transparent;
-            border-left: 12px solid var(--bubble-fill-color, white);
-            border-right: 20px solid transparent;
-            top: 18px; 
-            right: -24px;
-        }
-        .speech-bubble.speech.tail-left::after {
-            border-top: 12px solid transparent;
-            border-bottom: 24px solid transparent;
-            border-right: 12px solid var(--bubble-fill-color, white);
-            border-left: 20px solid transparent;
-            top: 28px;
-            left: -24px;
+            background: var(--bubble-fill-color, white);
+            
+            /* Use CSS variables for dynamic control */
+            width: var(--tail-size, 25px);
+            height: var(--tail-size, 25px);
+            top: var(--tail-top);
+            left: var(--tail-left);
+            
+            /* The magic happens here */
+            transform: var(--tail-rotation, rotate(45deg));
+            clip-path: polygon(var(--tail-shape, 50%) 0, 100% 100%, 0 100%);
         }
         /* <<< MODIFICATION END >>> */
 
@@ -600,7 +575,6 @@ class EnhancedComicGenerator:
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
         .speech-bubble.idea { background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); border: 2px solid #FFA500; color: #6a4b00; border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
         
-        /* Rotation logic for Thought Bubble dots */
         .speech-bubble.thought::after { display: none; }
         .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
         .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; }
@@ -631,6 +605,8 @@ class EnhancedComicGenerator:
         .color-picker-grid div { text-align: center; }
         .color-picker-grid label { font-size: 11px; }
         .color-picker-grid input[type="color"] { height: 25px; padding: 2px; }
+        .slider-group { margin-top: 5px; }
+        .slider-group label { font-size: 11px; margin-right: 5px; }
     </style>
 </head>
 <body>
@@ -665,10 +641,21 @@ class EnhancedComicGenerator:
             <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
             <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
-        <!-- <<< MODIFICATION: Tail controls are now simpler, just one button >>> -->
+        <!-- <<< MODIFICATION: New Tail Controls Section >>> -->
         <div class="control-group" id="tail-controls" style="display: none;">
             <label>Tail Controls</label>
-            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
+             <div class="slider-group">
+                <label for="tail-pos-slider">Position</label>
+                <input type="range" id="tail-pos-slider" min="0" max="100" value="12" step="1">
+            </div>
+            <div class="slider-group">
+                <label for="tail-size-slider">Size</label>
+                <input type="range" id="tail-size-slider" min="15" max="50" value="25" step="1">
+            </div>
+             <div class="slider-group">
+                <label for="tail-shape-slider">Shape</label>
+                <input type="range" id="tail-shape-slider" min="0" max="100" value="50" step="1">
+            </div>
         </div>
         <div class="control-group">
             <label>Panel Tools (Select Panel):</label>
@@ -761,6 +748,21 @@ class EnhancedComicGenerator:
                     currentlySelectedBubble.style.setProperty('--bubble-fill-color', e.target.value);
                 }
             });
+            
+            // <<< MODIFICATION: Event listeners for new tail sliders >>>
+            document.getElementById('tail-pos-slider').addEventListener('input', (e) => {
+                if (currentlySelectedBubble) updateTailPosition(e.target.value);
+            });
+            document.getElementById('tail-size-slider').addEventListener('input', (e) => {
+                if (currentlySelectedBubble) {
+                    currentlySelectedBubble.style.setProperty('--tail-size', e.target.value + 'px');
+                }
+            });
+            document.getElementById('tail-shape-slider').addEventListener('input', (e) => {
+                if (currentlySelectedBubble) {
+                    currentlySelectedBubble.style.setProperty('--tail-shape', e.target.value + '%');
+                }
+            });
 
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
             document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
@@ -789,6 +791,8 @@ class EnhancedComicGenerator:
             bubbleDiv.style.left = data.left;
             bubbleDiv.style.top = data.top;
             applyBubbleType(bubbleDiv, 'speech');
+            // Set initial tail position on creation
+            updateTailPosition(12, bubbleDiv); // 12 is bottom-left quadrant
             return bubbleDiv;
         }
         
@@ -812,10 +816,6 @@ class EnhancedComicGenerator:
             bubble.classList.add(type);
             bubble.dataset.type = type;
 
-            if (type === 'speech') {
-                bubble.classList.add('tail-bottom');
-                bubble.dataset.tailPos = '0';
-            }
             if (type === 'thought') {
                 for (let i = 1; i <= 2; i++) {
                     const dot = document.createElement('div');
@@ -835,30 +835,39 @@ class EnhancedComicGenerator:
             if (!currentlySelectedBubble) return;
             currentlySelectedBubble.style.fontFamily = font;
         }
-        
-        // <<< MODIFICATION: rotateBubbleTail now handles both Speech and Thought bubbles >>>
-        function rotateBubbleTail() {
-            if (!currentlySelectedBubble) return;
 
-            const bubbleType = currentlySelectedBubble.dataset.type;
-
-            if (bubbleType === 'speech') {
-                const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
-                let currentPos = parseInt(currentlySelectedBubble.dataset.tailPos || 0);
-                currentlySelectedBubble.classList.remove(positions[currentPos]);
-                let nextPos = (currentPos + 1) % positions.length;
-                currentlySelectedBubble.classList.add(positions[nextPos]);
-                currentlySelectedBubble.dataset.tailPos = nextPos;
-            } else if (bubbleType === 'thought') {
-                const isFlippedH = currentlySelectedBubble.classList.contains('flipped');
-                const isFlippedV = currentlySelectedBubble.classList.contains('flipped-vertical');
-                if (!isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped'); }
-                else if (isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped-vertical'); }
-                else if (isFlippedH && isFlippedV) { currentlySelectedBubble.classList.remove('flipped'); }
-                else { currentlySelectedBubble.classList.remove('flipped-vertical'); }
-            } else {
-                 alert("Tail rotation is only available for Speech and Thought bubbles.");
+        // <<< MODIFICATION: Function to handle circular tail positioning >>>
+        function updateTailPosition(value, bubble = currentlySelectedBubble) {
+            if (!bubble) return;
+            bubble.dataset.tailCircularPos = value;
+            const val = parseInt(value);
+            let top, left, rotation;
+
+            if (val >= 0 && val < 25) { // Bottom Edge
+                const mappedVal = (val / 25) * 100;
+                top = '100%';
+                left = `${mappedVal}%`;
+                rotation = '45deg';
+            } else if (val >= 25 && val < 50) { // Right Edge
+                const mappedVal = 100 - ((val - 25) / 25) * 100;
+                top = `${mappedVal}%`;
+                left = '100%';
+                rotation = '135deg';
+            } else if (val >= 50 && val < 75) { // Top Edge
+                const mappedVal = 100 - ((val - 50) / 25) * 100;
+                top = '0%';
+                left = `${mappedVal}%`;
+                rotation = '225deg';
+            } else { // Left Edge
+                const mappedVal = ((val - 75) / 25) * 100;
+                top = `${mappedVal}%`;
+                left = '0%';
+                rotation = '315deg';
             }
+            
+            bubble.style.setProperty('--tail-top', top);
+            bubble.style.setProperty('--tail-left', left);
+            bubble.style.setProperty('--tail-rotation', `rotate(${rotation})`);
         }
         
         function selectPanel(panel) {
@@ -894,11 +903,15 @@ class EnhancedComicGenerator:
 
                 document.getElementById('zoom-slider').disabled = true;
                 bubbleControls.forEach(id => document.getElementById(id).disabled = false);
-
-                // <<< MODIFICATION: Show tail controls for both Speech and Thought bubbles >>>
-                const bubbleType = currentlySelectedBubble.dataset.type;
-                if (bubbleType === 'speech' || bubbleType === 'thought') {
+                
+                if (currentlySelectedBubble.dataset.type === 'speech') {
                     tailControls.style.display = 'block';
+                    const currentSize = parseInt(styles.getPropertyValue('--tail-size')) || 25;
+                    document.getElementById('tail-size-slider').value = currentSize;
+                    const currentShape = parseInt(styles.getPropertyValue('--tail-shape')) || 50;
+                    document.getElementById('tail-shape-slider').value = currentShape;
+                    const currentPos = currentlySelectedBubble.dataset.tailCircularPos || 12;
+                    document.getElementById('tail-pos-slider').value = currentPos;
                 } else {
                     tailControls.style.display = 'none';
                 }