quando eu clicar em aplicar texto, o texto deve ser colocado diretamnete dentro do balão. e faça mais estilos de balões, se possivel use alguma biblioteca para isso para faciloitar

index.html

@@ -89,7 +89,7 @@
                 <!-- Adicionar Balão -->
                 <div class="mb-6">
                     <h3 class="font-semibold mb-2 text-gray-700">Adicionar Balão</h3>
-                    <div class="grid grid-cols-2 gap-2">
+        <div class="grid grid-cols-3 gap-2">
                         <button id="addSpeech" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded flex flex-col items-center">
                             <i data-feather="message-circle" class="mb-1"></i>
                             <span class="text-xs">Fala</span>
@@ -110,8 +110,24 @@
                             <i data-feather="square" class="mb-1"></i>
                             <span class="text-xs">Narração</span>
                         </button>
+                        <button id="addCloud" class="bg-yellow-500 hover:bg-yellow-600 text-white p-2 rounded flex flex-col items-center">
+                            <i data-feather="cloud" class="mb-1"></i>
+                            <span class="text-xs">Nuvem</span>
+                        </button>
+                        <button id="addStar" class="bg-pink-500 hover:bg-pink-600 text-white p-2 rounded flex flex-col items-center">
+                            <i data-feather="star" class="mb-1"></i>
+                            <span class="text-xs">Estrela</span>
+                        </button>
+                        <button id="addHeart" class="bg-red-400 hover:bg-red-500 text-white p-2 rounded flex flex-col items-center">
+                            <i data-feather="heart" class="mb-1"></i>
+                            <span class="text-xs">Coração</span>
+                        </button>
+                        <button id="addExplosion" class="bg-orange-500 hover:bg-orange-600 text-white p-2 rounded flex flex-col items-center">
+                            <i data-feather="zap" class="mb-1"></i>
+                            <span class="text-xs">Explosão</span>
+                        </button>
                     </div>
-                </div>
+</div>
 
                 <!-- Editar Texto -->
                 <div class="mb-6">
@@ -407,9 +423,82 @@
                         strokeWidth: 2
                     });
                     break;
+                case 'cloud':
+                    balloonShape = new Konva.Rect({
+                        width: 220,
+                        height: text.height() + 20,
+                        fill: '#ffffff',
+                        stroke: '#000000',
+                        strokeWidth: 2,
+                        cornerRadius: [30, 30, 30, 30, 30, 30, 30, 30]
+                    });
+                    break;
+                case 'star':
+                    balloonShape = new Konva.Star({
+                        numPoints: 5,
+                        innerRadius: 30,
+                        outerRadius: 60,
+                        fill: '#ffffff',
+                        stroke: '#000000',
+                        strokeWidth: 2
+                    });
+                    break;
+                case 'heart':
+                    // Criar coração usando paths
+                    balloonShape = new Konva.Shape({
+                        sceneFunc: function(context, shape) {
+                            const width = 80;
+                            const height = 70;
+                            context.beginPath();
+                            context.moveTo(40, 15);
+                            context.bezierCurveTo(40, 10, 20, 0, 10, 15);
+                            context.bezierCurveTo(0, 30, 20, 50, 40, 65);
+                            context.bezierCurveTo(60, 50, 80, 30, 70, 15);
+                            context.bezierCurveTo(60, 0, 40, 10, 40, 15);
+                            context.closePath();
+                            context.fillStrokeShape(shape);
+                        },
+                        fill: '#ffffff',
+                        stroke: '#000000',
+                        strokeWidth: 2,
+                        width: 80,
+                        height: 70
+                    });
+                    break;
+                case 'explosion':
+                    balloonShape = new Konva.Shape({
+                        sceneFunc: function(context, shape) {
+                            const spikes = 8;
+                            const outerRadius = 40;
+                            const innerRadius = 20;
+                            
+                            context.beginPath();
+                            for (let i = 0; i < spikes; i++) {
+                                const angle = (i * 2 * Math.PI) / spikes;
+                                const x1 = outerRadius * Math.cos(angle);
+                                const y1 = outerRadius * Math.sin(angle);
+                                const x2 = innerRadius * Math.cos(angle + Math.PI / spikes);
+                                const y2 = innerRadius * Math.sin(angle + Math.PI / spikes);
+                                
+                                if (i === 0) {
+                                    context.moveTo(x1, y1);
+                                } else {
+                                    context.lineTo(x1, y1);
+                                }
+                                context.lineTo(x2, y2);
+                            }
+                            context.closePath();
+                            context.fillStrokeShape(shape);
+                        },
+                        fill: '#ffffff',
+                        stroke: '#000000',
+                        strokeWidth: 2,
+                        width: 80,
+                        height: 80
+                    });
+                    break;
             }
-
-            group.add(balloonShape);
+group.add(balloonShape);
             group.add(text);
 
             // Adicionar transformador para redimensionamento
@@ -514,23 +603,55 @@ saveState();
         document.getElementById('addWhisper').addEventListener('click', () => {
             createBalloon('whisper');
         });
-
         document.getElementById('addRect').addEventListener('click', () => {
             createBalloon('rect');
         });
 
-        document.getElementById('applyText').addEventListener('click', () => {
+        document.getElementById('addCloud').addEventListener('click', () => {
+            createBalloon('cloud');
+        });
+
+        document.getElementById('addStar').addEventListener('click', () => {
+            createBalloon('star');
+        });
+
+        document.getElementById('addHeart').addEventListener('click', () => {
+            createBalloon('heart');
+        });
+
+        document.getElementById('addExplosion').addEventListener('click', () => {
+            createBalloon('explosion');
+        });
+document.getElementById('applyText').addEventListener('click', () => {
             if (selectedBalloon) {
                 selectedBalloon.text(document.getElementById('textInput').value);
-                const balloonShape = selectedBalloon.parent.findOne('Rect');
-                balloonShape.width(selectedBalloon.width() + 20);
-                balloonShape.height(selectedBalloon.height() + 20);
+                const balloonShape = selectedBalloon.parent.children[0]; // Primeiro elemento é o balão
+                
+                // Ajustar tamanho do balão baseado no tipo
+                if (balloonShape instanceof Konva.Rect) {
+                    balloonShape.width(selectedBalloon.width() + 20);
+                    balloonShape.height(selectedBalloon.height() + 20);
+                } else if (balloonShape instanceof Konva.Star) {
+                    // Para estrela, ajustar tamanho baseado no texto
+                    const textHeight = selectedBalloon.height();
+                    const newSize = Math.max(textHeight + 40, 60);
+                    balloonShape.innerRadius(newSize * 0.5);
+                    balloonShape.outerRadius(newSize);
+                } else if (balloonShape instanceof Konva.Shape) {
+                    // Para formas customizadas, ajustar escala baseado no texto
+                    const textWidth = selectedBalloon.width();
+                    const textHeight = selectedBalloon.height();
+                    const scaleX = Math.max((textWidth + 20) / balloonShape.width(), 1);
+                    const scaleY = Math.max((textHeight + 20) / balloonShape.height(), 1);
+                    balloonShape.scaleX(scaleX);
+                    balloonShape.scaleY(scaleY);
+                }
+                
                 layer.batchDraw();
                 saveState();
             }
         });
-
-        document.getElementById('fontSelect').addEventListener('change', (e) => {
+document.getElementById('fontSelect').addEventListener('change', (e) => {
             if (selectedBalloon) {
                 selectedBalloon.fontFamily(e.target.value);
                 layer.batchDraw();
@@ -557,17 +678,15 @@ saveState();
                 saveState();
             }
         });
-
         document.getElementById('balloonColor').addEventListener('input', (e) => {
             if (selectedBalloon) {
-                const balloonShape = selectedBalloon.parent.findOne('Rect');
+                const balloonShape = selectedBalloon.parent.children[0]; // Primeiro elemento é o balão
                 balloonShape.fill(e.target.value);
                 layer.batchDraw();
                 saveState();
             }
         });
-
-        document.getElementById('alignLeft').addEventListener('click', () => {
+document.getElementById('alignLeft').addEventListener('click', () => {
             if (selectedBalloon) {
                 selectedBalloon.align('left');
                 layer.batchDraw();