Update app_enhanced.py

app_enhanced.py

@@ -543,30 +543,101 @@ 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 Advanced CSS for Speech Bubble with Sliders >>> */
+        /* <<< MODIFICATION START: New Robust Bordered Bubble CSS >>> */
         .speech-bubble.speech {
             background: var(--bubble-fill-color, white);
             color: var(--bubble-text-color, #333);
-            border-radius: 25px;
+            border: 2px solid var(--bubble-border-color, #333);
+            border-radius: 10px;
             padding: 0;
-            border: none;
-            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
         }
 
-        .speech-bubble.speech::after {
+        .speech-bubble.speech:after, .speech-bubble.speech:before {
             content: '';
             position: absolute;
-            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%);
+            display: block;
+            width: 0;
+        }
+
+        /* 4-WAY TAIL ROTATION CLASSES */
+        /* BOTTOM */
+        .speech-bubble.speech.tail-bottom:after {
+            border-style: solid;
+            border-width: 15px 15px 0 0;
+            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1;
+        }
+        .speech-bubble.speech.tail-bottom:before {
+            border-style: solid;
+            border-width: 17px 17px 0 0;
+            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
+            bottom: -19px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 0;
+        }
+
+        /* TOP */
+        .speech-bubble.speech.tail-top:after {
+            border-style: solid;
+            border-width: 0 15px 15px 0;
+            border-color: transparent var(--bubble-fill-color, white) transparent transparent;
+            top: -15px;
+            left: 50%;
+            transform: translateX(-50%) rotate(180deg);
+            z-index: 1;
+        }
+        .speech-bubble.speech.tail-top:before {
+            border-style: solid;
+            border-width: 0 17px 17px 0;
+            border-color: transparent var(--bubble-border-color, #333) transparent transparent;
+            top: -19px;
+            left: 50%;
+            transform: translateX(-50%) rotate(180deg);
+            z-index: 0;
+        }
+
+        /* RIGHT */
+         .speech-bubble.speech.tail-right:after {
+            border-style: solid;
+            border-width: 15px 15px 0 0;
+            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
+            top: 50%;
+            right: -15px;
+            transform: translateY(-50%) rotate(90deg);
+            z-index: 1;
+        }
+        .speech-bubble.speech.tail-right:before {
+            border-style: solid;
+            border-width: 17px 17px 0 0;
+            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
+            top: 50%;
+            right: -19px;
+            transform: translateY(-50%) rotate(90deg);
+            z-index: 0;
+        }
+
+        /* LEFT */
+        .speech-bubble.speech.tail-left:after {
+            border-style: solid;
+            border-width: 15px 15px 0 0;
+            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
+            top: 50%;
+            left: -15px;
+            transform: translateY(-50%) rotate(-90deg);
+            z-index: 1;
+        }
+        .speech-bubble.speech.tail-left:before {
+            border-style: solid;
+            border-width: 17px 17px 0 0;
+            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
+            top: 50%;
+            left: -19px;
+            transform: translateY(-50%) rotate(-90deg);
+            z-index: 0;
         }
         /* <<< MODIFICATION END >>> */
 
@@ -605,8 +676,6 @@ 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>
@@ -641,21 +710,9 @@ class EnhancedComicGenerator:
             <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
             <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
-        <!-- <<< MODIFICATION: New Tail Controls Section >>> -->
         <div class="control-group" id="tail-controls" style="display: none;">
             <label>Tail Controls</label>
-             <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>
+            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
         </div>
         <div class="control-group">
             <label>Panel Tools (Select Panel):</label>
@@ -748,21 +805,6 @@ 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);});
@@ -791,8 +833,6 @@ 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;
         }
         
@@ -816,6 +856,10 @@ 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,39 +879,28 @@ class EnhancedComicGenerator:
             if (!currentlySelectedBubble) return;
             currentlySelectedBubble.style.fontFamily = font;
         }
-
-        // <<< 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';
+        
+        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.");
             }
-            
-            bubble.style.setProperty('--tail-top', top);
-            bubble.style.setProperty('--tail-left', left);
-            bubble.style.setProperty('--tail-rotation', `rotate(${rotation})`);
         }
         
         function selectPanel(panel) {
@@ -903,15 +936,10 @@ class EnhancedComicGenerator:
 
                 document.getElementById('zoom-slider').disabled = true;
                 bubbleControls.forEach(id => document.getElementById(id).disabled = false);
-                
-                if (currentlySelectedBubble.dataset.type === 'speech') {
+
+                const bubbleType = currentlySelectedBubble.dataset.type;
+                if (bubbleType === 'speech' || bubbleType === 'thought') {
                     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';
                 }