{pecas.map((p) => (
))}
{visiveis.map(({ pronta, peca }) => (
))}
);
});
/*
* A amostra de um elemento para vídeo: parada, como as outras; com o mouse em
* cima, toca a animação dele (recortada em volta das peças, com folga para o
* que se mexe).
*/
function AmostraQueToca({ pecas, medida, largura, altura, fundo }: { pecas: Peca[]; medida: { largura: number; altura: number }; largura: number; altura: number; fundo: string }) {
const [tocando, setTocando] = useState(false);
const pagina = useMemo(() => {
const x = Math.min(...pecas.map((p) => p.x));
const y = Math.min(...pecas.map((p) => p.y));
const w = Math.max(...pecas.map((p) => p.x + p.w)) - x;
const h = Math.max(...pecas.map((p) => p.y + p.h)) - y;
const fim = Math.max(1.6, ...pecas.map((p) => (p.animacao ? (p.animacao.fim ?? p.animacao.inicio + p.animacao.duracao) + 0.8 : 0)));
const doc: DocumentoDoBanner = { versao: 3, largura: medida.largura, altura: medida.altura, fundo: { pintura: solida(fundo), textura: { tipo: "nenhuma", cor: "#FFFFFF", opacidade: 0, quantidade: 1, tamanho: 0, centroX: 50, centroY: 50, giro: 0 } }, pecas, animacao: { duracao: Math.min(6, fim), fundo: "parado" } };
return { doc, recorte: { x: x - w * 0.12, y: y - h * 0.12, w: w * 1.24, h: h * 1.24 } };
}, [pecas, medida, fundo]);
return (
setTocando(true)} onMouseLeave={() => setTocando(false)}>
{tocando ?
);
}
/* A letra do atalho de teclado, ao lado do nome. */
function Tecla({ children }: { children: React.ReactNode }) {
return {children};
}
function Secao({ titulo, children, acao }: { titulo: string; children: React.ReactNode; acao?: React.ReactNode }) {
return (
{titulo}
{acao}
{produtos.some((p) => p.image_url) ? (
) : null}
);
}
if (aba === "elementos") {
const termo = semAcento(filtro.trim());
const filtrados =
{produtos
.filter((p) => p.image_url)
.slice(0, 30)
.map((p) => (
))}
{amostras.map(({ modelo, foto, neutro }) => (
))}
{vistos.map((c) => (
))}
Ponha a moldura e solte uma foto em cima dela.
Para desenhar à mão ou com a caneta, use as ferramentas no lado direito da arte.
{vistos.map((c) => (
))}
{aberta.nome}
{CATEGORIAS_DOS_ELEMENTOS.map((c) => (
))}
{COMBINACOES_PRONTAS.map((c) => (
))}
{
aoEnviarImagem(e.target.files);
/* Limpa a escolha: mandar as mesmas fotos de novo também funciona. */
e.target.value = "";
}} />
{imagensDaPessoa.length ? (
) : null}
{logo ? (
) : null}
aoEnviarImagem(lista)} inicial={ATALHOS_DO_BANCO[0]} />
);
}
/* As camadas moram em camadas.tsx (o editor abre o painel delas direto). */
if (aba === "artes") {
if (galeriaIndisponivel) {
return
{imagensDaPessoa.slice(0, 60).map((src) => (
))}
{comFoto.slice(0, 90).map((p) => (
))}
) : (
Nenhum produto com foto{filtro ? " com esse nome" : ""}.
)}A galeria de artes ainda não foi ligada no banco. Você pode criar e baixar normalmente; as artes passam a ficar guardadas assim que ela for ligada.
; } if (!artes) { return (Nenhuma arte guardada ainda. Esta aqui já fica guardada sozinha a cada mudança.
; return (As artes ficam guardadas sozinhas. Abrir uma de outro tamanho adapta ela a este.
{artes.map((arte) => {
const escala = 142 / arte.largura;
const alto = Math.min(150, arte.altura * escala);
return (
);
})}
{formas.map((f) => {
const amostra = {
id: `amostra-${f}`,
tipo: "forma",
x: 0,
y: 0,
w: 44,
h: 32,
rot: 0,
opacidade: 1,
forma: (f === "pilula" ? "retangulo" : f) as Forma,
pintura: solida(valor === f ? "#7C3AED" : "#C8C2DA"),
raio: f === "pilula" ? 16 : 6,
borda: null,
sombra: null,
pontas: f === "estrela" ? 5 : 14,
profundidade: f === "estrela" ? 0.55 : 0.22,
} as PecaDeForma;
return (
);
})}
);
}
const DEGRADES_PRONTOS: Pintura[] = [
degrade("#FFD400", "#FF5A00", 90),
degrade("#FF3D00", "#E11D48", 120),
degrade("#F472B6", "#7C3AED", 120),
degrade("#7C3AED", "#2563EB", 120),
degrade("#06B6D4", "#10B981", 120),
degrade("#84CC16", "#047857", 120),
degrade("#1E1B4B", "#0B0618", 160),
degrade("#FFFFFF", "#E4E4E7", 180),
];
/*
* As cores de um elemento em SVG (como o Canva): as bolinhas de todas as
* cores dele em cima (a escolhida com o anel), a paleta para trocar a
* escolhida e o "voltar às cores originais".
*/
function CoresDoVetor({ p, mudar, escolhida, aoEscolher }: { p: PecaDeImagem; mudar: (c: Partial
{vetor.cores.map((c) => (
{trocadas ? (
) : null}