admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correcao do salvamento automatico no canvas ao fechar o modal, ajustes de cores e exibicao de assets na impressao e inicializacao de data-rotation

Browse Source
This commit is contained in:
admtracksteel
2026-06-08 00:58:11 +00:00
parent 9435507bc7
commit f16c1dc286
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+24 -11
View File
@@ -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') {