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

Ajuste dblclick para edição de texto e cards quadrados na barra lateral de assets do canvas

Browse Source
This commit is contained in:
admtracksteel
2026-06-08 00:24:21 +00:00
parent 9ad5cdb5fb
commit 9435507bc7
2 changed files with 116 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+63 -3
View File
@@ -7741,12 +7741,31 @@ document.addEventListener('DOMContentLoaded', () => {
updateToolbarForSelected();
});
// Clique duplo para focar e editar texto
item.addEventListener('dblclick', (e) => {
if (!canvasModeActive) return;
if (item.querySelector('img')) return; // Evita editar imagens
e.stopPropagation();
item.setAttribute('contenteditable', 'true');
item.focus();
// Coloca o cursor de digitação no texto
const range = document.createRange();
range.selectNodeContents(item);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});
item.addEventListener('mousedown', (e) => {
if (!canvasModeActive) return;
if (e.target.classList.contains('canvas-resize-handle')) return;
if (document.activeElement === item && e.target !== item && !e.target.classList.contains('canvas-item')) {
// Se o item já estiver focado/editando, permite seleção de texto livre sem arrastar
if (item.getAttribute('contenteditable') === 'true' && document.activeElement === item) {
return;
}
@@ -7774,7 +7793,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (!canvasModeActive) return;
if (e.target.classList.contains('canvas-resize-handle')) return;
if (document.activeElement === item && e.target !== item) return;
if (item.getAttribute('contenteditable') === 'true' && document.activeElement === item) {
return;
}
selectedCanvasItem = item;
document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
@@ -8186,6 +8207,7 @@ document.addEventListener('DOMContentLoaded', () => {
item.style.justifyContent = 'center';
item.style.gap = '6px';
item.style.transition = 'all 0.2s';
item.style.aspectRatio = '1';
item.title = asset.nome;
item.addEventListener('mouseenter', () => {
@@ -8204,13 +8226,21 @@ document.addEventListener('DOMContentLoaded', () => {
previewHtml = `<img src="${asset.url}" style="width: 36px; height: 36px; object-fit: contain;">`;
} else if (asset.tipo === 'forma') {
if (asset.url === 'rect') {
previewHtml = `<div style="width: 36px; height: 26px; border: 2px solid var(--text-primary); border-radius: 2px;"></div>`;
previewHtml = `<div style="width: 36px; height: 24px; border: 2px solid var(--text-primary); border-radius: 2px;"></div>`;
} else if (asset.url === 'square') {
previewHtml = `<div style="width: 30px; height: 30px; border: 2px solid var(--text-primary); border-radius: 2px;"></div>`;
} else if (asset.url === 'circle') {
previewHtml = `<div style="width: 32px; height: 32px; border: 2px solid var(--text-primary); border-radius: 50%;"></div>`;
} else if (asset.url === 'ellipse') {
previewHtml = `<div style="width: 36px; height: 22px; border: 2px solid var(--text-primary); border-radius: 50%;"></div>`;
} else if (asset.url === 'line') {
previewHtml = `<div style="width: 36px; height: 2px; background: var(--text-primary); margin: 15px 0;"></div>`;
} else if (asset.url === 'triangle') {
previewHtml = `<div style="width: 32px; height: 32px; background: var(--text-primary); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>`;
} else if (asset.url === 'star') {
previewHtml = `<div style="font-size: 24px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; height: 32px;">⭐</div>`;
} else if (asset.url === 'arrow') {
previewHtml = `<div style="font-size: 24px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; height: 32px;">➡️</div>`;
}
}
@@ -8263,6 +8293,10 @@ document.addEventListener('DOMContentLoaded', () => {
item.style.border = '3px solid ' + (cartazTextColor.value || '#2d3748');
if (asset.url === 'rect') {
item.style.borderRadius = '4px';
} else if (asset.url === 'square') {
item.style.borderRadius = '4px';
item.style.width = '20%';
item.style.height = '20%';
} else if (asset.url === 'circle' || asset.url === 'ellipse') {
item.style.borderRadius = '50%';
item.style.width = '20%';
@@ -8272,6 +8306,32 @@ document.addEventListener('DOMContentLoaded', () => {
item.style.borderTop = '4px solid ' + (cartazTextColor.value || '#2d3748');
item.style.height = '10px';
item.style.width = '40%';
} else if (asset.url === 'triangle') {
item.style.border = 'none';
item.style.background = cartazTextColor.value || '#2d3748';
item.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
item.style.width = '20%';
item.style.height = '20%';
} else if (asset.url === 'star') {
item.style.border = 'none';
item.style.color = cartazTextColor.value || '#2d3748';
item.style.fontSize = '48px';
item.style.display = 'flex';
item.style.alignItems = 'center';
item.style.justifyContent = 'center';
item.innerHTML = '⭐';
item.style.width = '20%';
item.style.height = '20%';
} else if (asset.url === 'arrow') {
item.style.border = 'none';
item.style.color = cartazTextColor.value || '#2d3748';
item.style.fontSize = '48px';
item.style.display = 'flex';
item.style.alignItems = 'center';
item.style.justifyContent = 'center';
item.innerHTML = '➡️';
item.style.width = '20%';
item.style.height = '20%';
}
}