From f16c1dc2869aa2bd1fa8628ca12597375b0de582 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Mon, 8 Jun 2026 00:58:11 +0000
Subject: [PATCH] Correcao do salvamento automatico no canvas ao fechar o
 modal, ajustes de cores e exibicao de assets na impressao e inicializacao de
 data-rotation

---
 public/app.js | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/public/app.js b/public/app.js
index 7e3519c..eefa56d 100644
--- a/public/app.js
+++ b/public/app.js
@@ -7068,12 +7068,20 @@ document.addEventListener('DOMContentLoaded', () => {
 
   if (btnCloseCartazesModal) {
     btnCloseCartazesModal.addEventListener('click', () => {
+      if (canvasModeActive) {
+        exitCanvasMode();
+      }
       cartazesModal.style.display = 'none';
     });
   }
 
   cartazesModal.addEventListener('click', (e) => {
-    if (e.target === cartazesModal) cartazesModal.style.display = 'none';
+    if (e.target === cartazesModal) {
+      if (canvasModeActive) {
+        exitCanvasMode();
+      }
+      cartazesModal.style.display = 'none';
+    }
   });
 
   // Switch Tab
@@ -7300,12 +7308,14 @@ document.addEventListener('DOMContentLoaded', () => {
       const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4';
       const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato';
       
-      const imgContainerHtml = cartazPreviewImageContainer.style.display === 'block' && !canvasModeActive
+      const imgContainerHtml = cartazPreviewImageContainer.style.display === 'block' && cartazPreviewImageContainer.style.position !== 'absolute'
         ? `<div style="width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; border: 2px solid rgba(0,0,0,0.1); text-align: center; background: rgba(0,0,0,0.02);"><img src="${cartazPreviewImage.src}" style="max-width: 100%; max-height: 350px; object-fit: contain; display: inline-block;"></div>`
         : '';
 
       let printContent = '';
-      if (canvasModeActive) {
+      const hasCanvasItems = cartazPrintableArea.querySelectorAll('.canvas-item').length > 0;
+      
+      if (hasCanvasItems) {
         // Clone printable area and cleanup handles / active state borders for print output
         const tempContainer = document.createElement('div');
         tempContainer.innerHTML = cartazPrintableArea.innerHTML;
@@ -7313,8 +7323,7 @@ document.addEventListener('DOMContentLoaded', () => {
         tempContainer.querySelectorAll('.canvas-item').forEach(item => {
           item.classList.remove('active-item');
           item.removeAttribute('contenteditable');
-          // We can remove border style only if it was a dashed editing border
-          if (item.style.border.includes('dashed')) {
+          if (item.style.border && item.style.border.includes('dashed')) {
             item.style.border = 'none';
           }
         });
@@ -7338,6 +7347,11 @@ document.addEventListener('DOMContentLoaded', () => {
           <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
           <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Caveat:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
           <style>
+            * {
+              -webkit-print-color-adjust: exact !important;
+              print-color-adjust: exact !important;
+              box-sizing: border-box;
+            }
             @page {
               size: ${tamanho} ${orientacao === 'paisagem' ? 'landscape' : 'portrait'};
               margin: 10mm;
@@ -7408,11 +7422,6 @@ document.addEventListener('DOMContentLoaded', () => {
             .canvas-item {
               position: absolute !important;
               box-sizing: border-box;
-              background: rgba(255, 255, 255, 0.3);
-              border-radius: 8px;
-              padding: 10px;
-              border: none !important;
-              box-shadow: none !important;
             }
 
             @media print {
@@ -8275,7 +8284,9 @@ document.addEventListener('DOMContentLoaded', () => {
       item.style.color = '#2d3748';
       item.style.boxShadow = '3px 5px 10px rgba(0,0,0,0.15)';
       item.style.borderRadius = '4px';
-      item.style.transform = 'rotate(' + (Math.random() * 8 - 4) + 'deg)';
+      const randomRot = Math.round(Math.random() * 8 - 4);
+      item.style.transform = `rotate(${randomRot}deg)`;
+      item.setAttribute('data-rotation', randomRot);
       item.style.padding = '12px';
       item.style.fontFamily = "'Caveat', cursive";
       item.style.fontSize = '22px';
@@ -8288,9 +8299,11 @@ document.addEventListener('DOMContentLoaded', () => {
       item.innerHTML = `<img src="${asset.url}" style="width: 100%; height: 100%; object-fit: contain; pointer-events: none;">`;
       item.style.width = '20%';
       item.style.height = '20%';
+      item.setAttribute('data-rotation', '0');
     } else if (asset.tipo === 'forma') {
       item.style.background = 'transparent';
       item.style.border = '3px solid ' + (cartazTextColor.value || '#2d3748');
+      item.setAttribute('data-rotation', '0');
       if (asset.url === 'rect') {
         item.style.borderRadius = '4px';
       } else if (asset.url === 'square') {