Testcomic

Sleeping

App Files Files Community

jhh6576 commited on Nov 19, 2025

Commit

05654c6

verified ·

1 Parent(s): 0bcd22d

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +73 -36

app_enhanced.py CHANGED Viewed

@@ -543,14 +543,14 @@ 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 CSS Triangle Bubble >>> */
         .speech-bubble.speech {
             background: var(--bubble-fill-color, white);
             color: var(--bubble-text-color, #333);
             border-radius: .4em;
             padding: 0;
             border: none;
-            box-shadow: 0 0 5px rgba(0,0,0,0.2);
         }
         .speech-bubble.speech::after {
@@ -558,47 +558,43 @@ class EnhancedComicGenerator:
             position: absolute;
             width: 0;
             height: 0;
-            /* The color is inherited from the parent's fill color */
             border-color: transparent;
             border-style: solid;
         }
-        /* 4-WAY TAIL ROTATION CLASSES using the CSS Triangle method */
         .speech-bubble.speech.tail-bottom::after {
             bottom: 0;
-            left: 50%;
-            border-width: 20px;
             border-top-color: var(--bubble-fill-color, white);
             border-bottom: 0;
-            margin-left: -20px;
-            margin-bottom: -20px;
         }
         .speech-bubble.speech.tail-top::after {
             top: 0;
-            left: 50%;
-            border-width: 20px;
             border-bottom-color: var(--bubble-fill-color, white);
             border-top: 0;
-            margin-left: -20px;
-            margin-top: -20px;
         }
         .speech-bubble.speech.tail-right::after {
-            top: 50%;
             right: 0;
-            border-width: 20px;
             border-left-color: var(--bubble-fill-color, white);
             border-right: 0;
-            margin-top: -20px;
-            margin-right: -20px;
         }
         .speech-bubble.speech.tail-left::after {
-            top: 50%;
             left: 0;
-            border-width: 20px;
             border-right-color: var(--bubble-fill-color, white);
             border-left: 0;
-            margin-top: -20px;
-            margin-left: -20px;
         }
         /* <<< MODIFICATION END >>> */
@@ -632,6 +628,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; }
     </style>
 </head>
 <body>
@@ -663,10 +661,22 @@ class EnhancedComicGenerator:
                     <input type="color" id="bubble-fill-color" value="#FFFFFF" disabled>
                 </div>
             </div>
-            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
             <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
             <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
         <div class="control-group">
             <label>Panel Tools (Select Panel):</label>
             <button onclick="replacePanelImage()" class="action-button">🖼️ Replace Image</button>
@@ -758,6 +768,18 @@ class EnhancedComicGenerator:
                     currentlySelectedBubble.style.setProperty('--bubble-fill-color', 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);});
@@ -810,9 +832,8 @@ class EnhancedComicGenerator:
             bubble.dataset.type = type;
             if (type === 'speech') {
-                // <<< MODIFICATION: Set default tail position class >>>
                 bubble.classList.add('tail-bottom');
-                bubble.dataset.tailPos = '0';
             }
             if (type === 'thought') {
                 for (let i = 1; i <= 2; i++) {
@@ -826,6 +847,8 @@ class EnhancedComicGenerator:
         function changeBubbleType(type) {
             if (!currentlySelectedBubble) return;
             applyBubbleType(currentlySelectedBubble, type);
         }
         function changeFont(font) {
@@ -833,20 +856,19 @@ class EnhancedComicGenerator:
             currentlySelectedBubble.style.fontFamily = font;
         }
-        // <<< MODIFICATION: Updated rotate function for new classes >>>
-        function rotateBubbleTail() {
-            if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
-            if (currentlySelectedBubble.dataset.type !== 'speech') {
-                alert("Tail rotation is only available for the 'Speech' bubble type.");
-                return;
-            }
-            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;
         }
         function selectPanel(panel) {
@@ -860,6 +882,7 @@ class EnhancedComicGenerator:
             if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
             currentlySelectedBubble = bubble;
             const bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select'];
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
@@ -881,8 +904,22 @@ class EnhancedComicGenerator:
                 document.getElementById('zoom-slider').disabled = true;
                 bubbleControls.forEach(id => document.getElementById(id).disabled = false);
             } else {
                 bubbleControls.forEach(id => document.getElementById(id).disabled = true);
                 if(currentlySelectedPanel) document.getElementById('zoom-slider').disabled = false;
             }
         }

         .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 CSS for Speech Bubble with Sliders >>> */
         .speech-bubble.speech {
             background: var(--bubble-fill-color, white);
             color: var(--bubble-text-color, #333);
             border-radius: .4em;
             padding: 0;
             border: none;
+            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
         }
         .speech-bubble.speech::after {
             position: absolute;
             width: 0;
             height: 0;
             border-color: transparent;
             border-style: solid;
+            /* Use CSS variables for dynamic control from sliders */
+            border-width: var(--tail-size, 20px);
         }
         .speech-bubble.speech.tail-bottom::after {
             bottom: 0;
+            left: var(--tail-pos, 50%); /* Controlled by position slider */
             border-top-color: var(--bubble-fill-color, white);
             border-bottom: 0;
+            transform: translateX(-50%); /* Center the tip on the slider's value */
+            margin-bottom: calc(-1 * var(--tail-size, 20px));
         }
         .speech-bubble.speech.tail-top::after {
             top: 0;
+            left: var(--tail-pos, 50%);
             border-bottom-color: var(--bubble-fill-color, white);
             border-top: 0;
+            transform: translateX(-50%);
+            margin-top: calc(-1 * var(--tail-size, 20px));
         }
         .speech-bubble.speech.tail-right::after {
+            top: var(--tail-pos, 50%);
             right: 0;
             border-left-color: var(--bubble-fill-color, white);
             border-right: 0;
+            transform: translateY(-50%);
+            margin-right: calc(-1 * var(--tail-size, 20px));
         }
         .speech-bubble.speech.tail-left::after {
+            top: var(--tail-pos, 50%);
             left: 0;
             border-right-color: var(--bubble-fill-color, white);
             border-left: 0;
+            transform: translateY(-50%);
+            margin-left: calc(-1 * var(--tail-size, 20px));
         }
         /* <<< MODIFICATION END >>> */
         .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>
                     <input type="color" id="bubble-fill-color" value="#FFFFFF" disabled>
                 </div>
             </div>
             <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 (Speech Only)</label>
+             <div class="slider-group">
+                <label for="tail-pos-slider">Position</label>
+                <input type="range" id="tail-pos-slider" min="10" max="90" value="50" step="1">
+            </div>
+            <div class="slider-group">
+                <label for="tail-size-slider">Size</label>
+                <input type="range" id="tail-size-slider" min="10" max="40" value="20" step="1">
+            </div>
+            <button onclick="flipBubbleTail()" class="secondary-button">🔄 Flip Edge</button>
+        </div>
         <div class="control-group">
             <label>Panel Tools (Select Panel):</label>
             <button onclick="replacePanelImage()" class="action-button">🖼️ Replace Image</button>
                     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) {
+                    currentlySelectedBubble.style.setProperty('--tail-pos', e.target.value + '%');
+                }
+            });
+            document.getElementById('tail-size-slider').addEventListener('input', (e) => {
+                if (currentlySelectedBubble) {
+                    currentlySelectedBubble.style.setProperty('--tail-size', e.target.value + 'px');
+                }
+            });
             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);});
             bubble.dataset.type = type;
             if (type === 'speech') {
                 bubble.classList.add('tail-bottom');
+                bubble.dataset.tailEdge = 'bottom';
             }
             if (type === 'thought') {
                 for (let i = 1; i <= 2; i++) {
         function changeBubbleType(type) {
             if (!currentlySelectedBubble) return;
             applyBubbleType(currentlySelectedBubble, type);
+            // Reselect bubble to update UI controls visibility
+            selectBubble(currentlySelectedBubble);
         }
         function changeFont(font) {
             currentlySelectedBubble.style.fontFamily = font;
         }
+        // <<< MODIFICATION: Replaced rotate with flip function >>>
+        function flipBubbleTail() {
+            if (!currentlySelectedBubble || currentlySelectedBubble.dataset.type !== 'speech') return;
+            const edges = ['bottom', 'right', 'top', 'left'];
+            const currentEdge = currentlySelectedBubble.dataset.tailEdge || 'bottom';
+            let currentEdgeIndex = edges.indexOf(currentEdge);
+            currentlySelectedBubble.classList.remove('tail-' + edges[currentEdgeIndex]);
+            let nextEdgeIndex = (currentEdgeIndex + 1) % edges.length;
+            currentlySelectedBubble.classList.add('tail-' + edges[nextEdgeIndex]);
+            currentlySelectedBubble.dataset.tailEdge = edges[nextEdgeIndex];
         }
         function selectPanel(panel) {
             if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
             currentlySelectedBubble = bubble;
             const bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select'];
+            const tailControls = document.getElementById('tail-controls');
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
                 document.getElementById('zoom-slider').disabled = true;
                 bubbleControls.forEach(id => document.getElementById(id).disabled = false);
+                // <<< MODIFICATION: Show/hide tail controls and set slider values >>>
+                if (currentlySelectedBubble.dataset.type === 'speech') {
+                    tailControls.style.display = 'block';
+                    const currentSize = parseInt(styles.getPropertyValue('--tail-size')) || 20;
+                    document.getElementById('tail-size-slider').value = currentSize;
+                    const currentPos = parseInt(styles.getPropertyValue('--tail-pos')) || 50;
+                    document.getElementById('tail-pos-slider').value = currentPos;
+                } else {
+                    tailControls.style.display = 'none';
+                }
             } else {
                 bubbleControls.forEach(id => document.getElementById(id).disabled = true);
+                tailControls.style.display = 'none';
                 if(currentlySelectedPanel) document.getElementById('zoom-slider').disabled = false;
             }
         }