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%';
}
}
server.js
+53 -33
View File
@@ -2241,39 +2241,59 @@ async function initDatabase() {
);
`);
const checkAssets = await dbPool.query("SELECT COUNT(*) FROM escola.biblioteca_assets;");
if (parseInt(checkAssets.rows[0].count) === 0) {
console.log('[Database Init] Inserindo assets padrão na biblioteca (Design Canvas 2.0)...');
await dbPool.query(`
INSERT INTO escola.biblioteca_assets (tipo, nome, url, tags) VALUES
('postit', 'Post-it Amarelo', '#feff9c', ARRAY['post-it', 'amarelo', 'anotacao']),
('postit', 'Post-it Azul', '#7afcff', ARRAY['post-it', 'azul', 'anotacao']),
('postit', 'Post-it Rosa', '#ff7eb9', ARRAY['post-it', 'rosa', 'anotacao']),
('postit', 'Post-it Verde', '#98ff98', ARRAY['post-it', 'verde', 'anotacao']),
('postit', 'Post-it Laranja', '#ffb7b2', ARRAY['post-it', 'laranja', 'anotacao']),
('sticker', 'Escola', 'https://openmoji.org/data/color/svg/1F3EB.svg', ARRAY['escola', 'colegio', 'aula']),
('sticker', 'Lápis', 'https://openmoji.org/data/color/svg/270F.svg', ARRAY['lapis', 'escrever', 'desenhar']),
('sticker', 'Caderno', 'https://openmoji.org/data/color/svg/1F4DD.svg', ARRAY['caderno', 'anotacao', 'estudo']),
('sticker', 'Paleta de Arte', 'https://openmoji.org/data/color/svg/1F3A8.svg', ARRAY['arte', 'paleta', 'pintura', 'desenho']),
('sticker', 'Quebra-cabeça', 'https://openmoji.org/data/color/svg/1F9E9.svg', ARRAY['jogo', 'quebra-cabeca', 'brinquedo']),
('sticker', 'Ursinho', 'https://openmoji.org/data/color/svg/1F9F8.svg', ARRAY['brinquedo', 'ursinho', 'fofo']),
('sticker', 'Foguete', 'https://openmoji.org/data/color/svg/1F680.svg', ARRAY['foguete', 'espaco', 'voar']),
('sticker', 'Notas Musicais', 'https://openmoji.org/data/color/svg/1F3B6.svg', ARRAY['musica', 'som', 'notas']),
('sticker', 'Gatinho', 'https://openmoji.org/data/color/svg/1F431.svg', ARRAY['animal', 'gato', 'gatinho', 'fofo']),
('sticker', 'Cachorrinho', 'https://openmoji.org/data/color/svg/1F436.svg', ARRAY['animal', 'cao', 'cachorro', 'fofo']),
('sticker', 'Maçã', 'https://openmoji.org/data/color/svg/1F34E.svg', ARRAY['fruta', 'maca', 'comida']),
('sticker', 'Balão', 'https://openmoji.org/data/color/svg/1F388.svg', ARRAY['festa', 'balao', 'bexiga']),
('sticker', 'Estrela Brilhante', 'https://openmoji.org/data/color/svg/1F31F.svg', ARRAY['estrela', 'brilho', 'premio']),
('sticker', 'Coração', 'https://openmoji.org/data/color/svg/1F496.svg', ARRAY['amor', 'coracao', 'carinho']),
('sticker', 'Balão de Fala', 'https://openmoji.org/data/color/svg/1F4AC.svg', ARRAY['fala', 'dialogo', 'comunicacao']),
('forma', 'Retângulo', 'rect', ARRAY['forma', 'retangulo', 'quadrado', 'fundo']),
('forma', 'Círculo', 'circle', ARRAY['forma', 'circulo', 'bola', 'redondo']),
('forma', 'Elipse', 'ellipse', ARRAY['forma', 'elipse', 'oval']),
('forma', 'Linha Horizontal', 'line', ARRAY['forma', 'linha', 'divisoria']);
`);
}
console.log('[Database Init] Atualizando assets padrão na biblioteca (Design Canvas 2.0)...');
await dbPool.query(`TRUNCATE escola.biblioteca_assets;`);
await dbPool.query(`
INSERT INTO escola.biblioteca_assets (tipo, nome, url, tags) VALUES
('postit', 'Post-it Amarelo', '#feff9c', ARRAY['post-it', 'amarelo', 'anotacao']),
('postit', 'Post-it Azul', '#7afcff', ARRAY['post-it', 'azul', 'anotacao']),
('postit', 'Post-it Rosa', '#ff7eb9', ARRAY['post-it', 'rosa', 'anotacao']),
('postit', 'Post-it Verde', '#98ff98', ARRAY['post-it', 'verde', 'anotacao']),
('postit', 'Post-it Laranja', '#ffb7b2', ARRAY['post-it', 'laranja', 'anotacao']),
('postit', 'Post-it Roxo', '#e2bbff', ARRAY['post-it', 'roxo', 'anotacao']),
('postit', 'Post-it Ciano', '#bae1ff', ARRAY['post-it', 'ciano', 'anotacao']),
('postit', 'Post-it Branco', '#ffffff', ARRAY['post-it', 'branco', 'clean']),
('sticker', 'Escola', 'https://openmoji.org/data/color/svg/1F3EB.svg', ARRAY['escola', 'colegio', 'aula']),
('sticker', 'Lápis', 'https://openmoji.org/data/color/svg/270F.svg', ARRAY['lapis', 'escrever', 'desenhar']),
('sticker', 'Caderno', 'https://openmoji.org/data/color/svg/1F4DD.svg', ARRAY['caderno', 'anotacao', 'estudo']),
('sticker', 'Paleta de Arte', 'https://openmoji.org/data/color/svg/1F3A8.svg', ARRAY['arte', 'paleta', 'pintura', 'desenho']),
('sticker', 'Quebra-cabeça', 'https://openmoji.org/data/color/svg/1F9E9.svg', ARRAY['jogo', 'quebra-cabeca', 'brinquedo']),
('sticker', 'Ursinho', 'https://openmoji.org/data/color/svg/1F9F8.svg', ARRAY['brinquedo', 'ursinho', 'fofo']),
('sticker', 'Foguete', 'https://openmoji.org/data/color/svg/1F680.svg', ARRAY['foguete', 'espaco', 'voar']),
('sticker', 'Notas Musicais', 'https://openmoji.org/data/color/svg/1F3B6.svg', ARRAY['musica', 'som', 'notas']),
('sticker', 'Gatinho', 'https://openmoji.org/data/color/svg/1F431.svg', ARRAY['animal', 'gato', 'gatinho', 'fofo']),
('sticker', 'Cachorrinho', 'https://openmoji.org/data/color/svg/1F436.svg', ARRAY['animal', 'cao', 'cachorro', 'fofo']),
('sticker', 'Maçã', 'https://openmoji.org/data/color/svg/1F34E.svg', ARRAY['fruta', 'maca', 'comida']),
('sticker', 'Balão', 'https://openmoji.org/data/color/svg/1F388.svg', ARRAY['festa', 'balao', 'bexiga']),
('sticker', 'Estrela Brilhante', 'https://openmoji.org/data/color/svg/1F31F.svg', ARRAY['estrela', 'brilho', 'premio']),
('sticker', 'Coração', 'https://openmoji.org/data/color/svg/1F496.svg', ARRAY['amor', 'coracao', 'carinho']),
('sticker', 'Balão de Fala', 'https://openmoji.org/data/color/svg/1F4AC.svg', ARRAY['fala', 'dialogo', 'comunicacao']),
('sticker', 'Estrela de Ouro', 'https://openmoji.org/data/color/svg/2B50.svg', ARRAY['estrela', 'ouro', 'premio']),
('sticker', 'Medalha', 'https://openmoji.org/data/color/svg/1F3C5.svg', ARRAY['medalha', 'premio', 'vitoria']),
('sticker', 'Troféu', 'https://openmoji.org/data/color/svg/1F3C6.svg', ARRAY['trofeu', 'premio', 'campeao']),
('sticker', 'Lâmpada (Ideia)', 'https://openmoji.org/data/color/svg/1F4A1.svg', ARRAY['lampada', 'ideia', 'pensamento']),
('sticker', 'Sol', 'https://openmoji.org/data/color/svg/2600.svg', ARRAY['sol', 'dia', 'tempo']),
('sticker', 'Nuvem', 'https://openmoji.org/data/color/svg/2601.svg', ARRAY['nuvem', 'chuva', 'tempo']),
('sticker', 'Arco-íris', 'https://openmoji.org/data/color/svg/1F308.svg', ARRAY['arco-iris', 'cores', 'natureza']),
('sticker', 'Planta/Folha', 'https://openmoji.org/data/color/svg/1F331.svg', ARRAY['planta', 'folha', 'natureza', 'crescer']),
('sticker', 'Livros', 'https://openmoji.org/data/color/svg/1F4DA.svg', ARRAY['livros', 'leitura', 'estudo']),
('sticker', 'Lupa', 'https://openmoji.org/data/color/svg/1F50D.svg', ARRAY['lupa', 'pesquisa', 'detetive']),
('sticker', 'Globo', 'https://openmoji.org/data/color/svg/1F30D.svg', ARRAY['globo', 'terra', 'mapa', 'mundo']),
('sticker', 'Relógio', 'https://openmoji.org/data/color/svg/231A.svg', ARRAY['relogio', 'tempo', 'hora']),
('sticker', 'Tesoura', 'https://openmoji.org/data/color/svg/2702.svg', ARRAY['tesoura', 'recorte', 'escola']),
('sticker', 'Pincel', 'https://openmoji.org/data/color/svg/1F58C.svg', ARRAY['pincel', 'pintura', 'arte']),
('sticker', 'Régua', 'https://openmoji.org/data/color/svg/1F4CF.svg', ARRAY['regua', 'medida', 'escola']),
('forma', 'Retângulo', 'rect', ARRAY['forma', 'retangulo', 'fundo']),
('forma', 'Círculo', 'circle', ARRAY['forma', 'circulo', 'bola', 'redondo']),
('forma', 'Elipse', 'ellipse', ARRAY['forma', 'elipse', 'oval']),
('forma', 'Linha Horizontal', 'line', ARRAY['forma', 'linha', 'divisoria']),
('forma', 'Quadrado', 'square', ARRAY['forma', 'quadrado']),
('forma', 'Triângulo', 'triangle', ARRAY['forma', 'triangulo']),
('forma', 'Estrela', 'star', ARRAY['forma', 'estrela']),
('forma', 'Seta', 'arrow', ARRAY['forma', 'seta', 'direcao'])
`);
// Garantir que a coluna character_description_english exista na tabela projetos_comics
await dbPool.query(`ALTER TABLE escola.projetos_comics ADD COLUMN IF NOT EXISTS character_description_english TEXT;`);