From 00341ebf64af56c9d4fe70f34739b7f7f9132ac2 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Mon, 8 Jun 2026 20:50:30 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20corrigido=20bug=20de=20re?=
 =?UTF-8?q?size=20azul=20e=20al=C3=A7a=20cortada=20nas=20camadas=20do=20ca?=
 =?UTF-8?q?nvas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/app.js    | 37 ++++++++++++++++++++++++++++---------
 public/style.css | 19 +++++++++++++++----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/public/app.js b/public/app.js
index 16b1cc4..42ee593 100644
--- a/public/app.js
+++ b/public/app.js
@@ -8365,6 +8365,9 @@ document.addEventListener('DOMContentLoaded', () => {
       
       dragStartLeft = ((itemRect.left - parentRect.left) / parentRect.width) * 100;
       dragStartTop = ((itemRect.top - parentRect.top) / parentRect.height) * 100;
+
+      // Previne o highlight azul do browser durante o drag
+      document.body.style.userSelect = 'none';
       
       document.addEventListener('mousemove', handleCanvasDrag);
       document.addEventListener('mouseup', stopCanvasDrag);
@@ -8404,37 +8407,51 @@ document.addEventListener('DOMContentLoaded', () => {
         if (!canvasModeActive) return;
         e.stopPropagation();
         e.preventDefault();
-        
+
+        // Garante que o item clicado seja o selecionado
+        document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
+        selectedCanvasItem = item;
+        item.classList.add('active-item');
+        updateToolbarForSelected();
+
         isResizingCanvas = true;
         dragStartX = e.clientX;
         dragStartY = e.clientY;
-        
+
         const parentRect = cartazPrintableArea.getBoundingClientRect();
         const itemRect = item.getBoundingClientRect();
-        
+
         dragStartWidth = (itemRect.width / parentRect.width) * 100;
         dragStartHeight = (itemRect.height / parentRect.height) * 100;
-        
+
+        // Previne seleção de texto durante o drag de resize
+        document.body.style.userSelect = 'none';
+
         document.addEventListener('mousemove', handleCanvasResize);
         document.addEventListener('mouseup', stopCanvasResize);
       });
-      
+
       handle.addEventListener('touchstart', (e) => {
         if (!canvasModeActive) return;
         e.stopPropagation();
         e.preventDefault();
-        
+
+        document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
+        selectedCanvasItem = item;
+        item.classList.add('active-item');
+        updateToolbarForSelected();
+
         isResizingCanvas = true;
         const touch = e.touches[0];
         dragStartX = touch.clientX;
         dragStartY = touch.clientY;
-        
+
         const parentRect = cartazPrintableArea.getBoundingClientRect();
         const itemRect = item.getBoundingClientRect();
-        
+
         dragStartWidth = (itemRect.width / parentRect.width) * 100;
         dragStartHeight = (itemRect.height / parentRect.height) * 100;
-        
+
         document.addEventListener('touchmove', handleCanvasTouchResize, { passive: false });
         document.addEventListener('touchend', stopCanvasResize);
       });
@@ -8493,6 +8510,7 @@ document.addEventListener('DOMContentLoaded', () => {
   
   function stopCanvasDrag() {
     isDraggingCanvas = false;
+    document.body.style.userSelect = ''; // Restaura seleção de texto
     document.removeEventListener('mousemove', handleCanvasDrag);
     document.removeEventListener('mouseup', stopCanvasDrag);
     document.removeEventListener('touchmove', handleCanvasTouchDrag);
@@ -8551,6 +8569,7 @@ document.addEventListener('DOMContentLoaded', () => {
   
   function stopCanvasResize() {
     isResizingCanvas = false;
+    document.body.style.userSelect = ''; // Restaura seleção de texto
     document.removeEventListener('mousemove', handleCanvasResize);
     document.removeEventListener('mouseup', stopCanvasResize);
     document.removeEventListener('touchmove', handleCanvasTouchResize);
diff --git a/public/style.css b/public/style.css
index af42980..2204961 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3773,6 +3773,7 @@ code {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   user-select: text; /* Permite selecionar texto interno para edição */
+  overflow: visible !important; /* Garante que a alça de resize não seja cortada */
 }
 
 .canvas-item:hover {
@@ -3821,8 +3822,18 @@ code {
 .canvas-scene-layer {
   padding: 0 !important;
   background: transparent !important;
-  border-radius: 0 !important;
-  overflow: hidden;
+  border-radius: 4px !important;
+  overflow: visible !important; /* IMPORTANTE: permite que a alça de resize fique fora do item */
+}
+
+/* A imagem dentro da camada fica com overflow clipado no wrapper interno */
+.canvas-scene-layer img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  border-radius: 4px;
 }
 
 .canvas-scene-layer:hover {
@@ -3831,8 +3842,8 @@ code {
 }
 
 .canvas-scene-layer.active-item {
-  border: 2.5px solid #8b5cf6 !important;
-  box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
+  border: 2px dashed #8b5cf6 !important;
+  box-shadow: 0 0 14px rgba(139, 92, 246, 0.4);
 }
 
 /* Animação dos dots de loading */