primocode 8.12.0 → 8.14.0

package/studio/web/js/ferramentas.js

@@ -2,7 +2,10 @@
    ferramentas.js — o que cada ferramenta oferece na interface.
    ========================================================================== */
 
-var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta"];
+// Os dez que o render.css define. A lista tinha seis: quatro temas existiam
+// no CSS, a IA podia usá-los, e o editor não os oferecia a ninguém.
+var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta",
+  "retro", "oceano", "doce", "mono"];
 
 var PALETA = ["#ff5a36", "#ffb03a", "#f4e04d", "#2fbf7f", "#1f8fe0", "#8b5cf6",
               "#f472b6", "#ffffff", "#9aa4b2", "#111318"];

package/studio/web/js/render.js

@@ -47,8 +47,16 @@ function _porPalavra(html) {
 function aplicarFundo(no, fundo) {
   if (!fundo) return;
   if (typeof fundo === "string") {
-    if (/^(malha|brilho|grade|pontos|suave|vinheta)$/.test(fundo)) no.setAttribute("data-fundo", fundo);
-    else no.style.background = fundo;
+    // Os ONZE que o render.css define.
+    //
+    // A lista aqui tinha seis. Os outros cinco — aurora, raios, ondas,
+    // nevoa, xadrez — caíam no `else` e viravam `background: "aurora"`:
+    // CSS inválido, fundo NENHUM. E são justamente os que a spec recomenda
+    // para vídeo, então toda cena que pedia aurora ou raios saía chapada.
+    // Era metade do "os vídeos ficaram todos iguais".
+    if (/^(malha|brilho|grade|pontos|suave|vinheta|aurora|nevoa|ondas|raios|xadrez)$/.test(fundo)) {
+      no.setAttribute("data-fundo", fundo);
+    } else no.style.background = fundo;
     return;
   }
   if (fundo.tipo === "gradiente") {
@@ -70,13 +78,23 @@ function aplicarFundo(no, fundo) {
 /* --------------------------------------------------------------- gráficos */
 
 function svgGrafico(e, l, a) {
-  var dados = (e.dados || []).map(function (d) {
+  /* Os dados podem chegar como "dados" ou como "itens", e o tipo como
+     "grafico", "estilo" ou "tipo".
+
+     O nome certo é `dados` + `grafico`, e é o que a spec ensina. Mas quem
+     escreve um gráfico — a IA ou uma pessoa — chuta `itens`, porque é o
+     campo de TODOS os outros elementos da mesma spec (lista, cartoes,
+     numeros usam `itens`). Com o nome trocado esta função devolvia string
+     vazia: o gráfico simplesmente não existia na tela, sem erro nenhum.
+     Aceitar as duas grafias custa uma linha e evita a falha muda. */
+  var bruto = e.dados || e.itens || [];
+  var dados = bruto.map(function (d) {
     return Array.isArray(d) ? { r: d[0], v: +d[1] || 0 } : { r: d.rotulo, v: +d.valor || 0 };
   });
   if (!dados.length) return "";
   var cores = e.cores || ["var(--c-tom)", "var(--c-tom2)", "#7c9cff", "#2fbf7f", "#f472b6", "#facc15"];
   var max = Math.max.apply(null, dados.map(function (d) { return d.v; })) || 1;
-  var tipo = e.grafico || "barras";
+  var tipo = e.grafico || e.estilo || e.tipoGrafico || "barras";
   var pad = { e: 8, d: 8, t: 14, b: 42 };
   var iw = l - pad.e - pad.d, ih = a - pad.t - pad.b;
   var p = ['<svg viewBox="0 0 ' + l + " " + a + '" width="' + l + '" height="' + a + '">'];
@@ -138,11 +156,233 @@ function svgGrafico(e, l, a) {
 /* -------------------------------------------------------------- elementos */
 
 var TIPOS_CONHECIDOS = { texto: 1, lista: 1, cartoes: 1, numeros: 1, tabela: 1, codigo: 1,
-  citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1 };
+  citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1,
+  objeto3d: 1 };
+
+/* ── chaves de animação ──────────────────────────────────────────────────
+   Transforma a lista de instantes de um elemento numa regra @keyframes de
+   verdade e prende ela no elemento.
+
+   Os nomes precisam ser únicos por página: o mesmo documento aparece várias
+   vezes ao mesmo tempo (palco, miniaturas do painel, clipes da tira), e
+   dois @keyframes de mesmo nome com conteúdo diferente se atropelariam —
+   a última regra injetada venceria em TODAS as cópias. */
+var _nChave = 0;
+
+function _numero(v, padrao) {
+  return typeof v === "number" && isFinite(v) ? v : padrao;
+}
+
+function aplicarChaves(no, e, ctx) {
+  var chaves = e.chaves.slice().sort(function (a, b) {
+    return _numero(a.t, 0) - _numero(b.t, 0);
+  });
+
+  var nome = "ch" + (++_nChave);
+  var passos = chaves.map(function (k) {
+    var pct = Math.max(0, Math.min(1, _numero(k.t, 0))) * 100;
+    var mov = [];
+    // x e y de uma chave são DESLOCAMENTO a partir de onde o elemento está.
+    // Assim a chave continua valendo se a pessoa arrastar o elemento no
+    // palco depois — o contrário obrigaria a refazer todas as chaves.
+    var dx = _numero(k.x, 0), dy = _numero(k.y, 0);
+    if (dx || dy) mov.push("translate(" + dx + "px," + dy + "px)");
+    var esc = _numero(k.escala, 1);
+    if (esc !== 1) mov.push("scale(" + esc + ")");
+    var giro = _numero(k.giro, 0);
+    if (giro) mov.push("rotate(" + giro + "deg)");
+
+    var linhas = ["transform:" + (mov.length ? mov.join(" ") : "none")];
+    var op = _numero(k.opacidade, 1);
+    linhas.push("opacity:" + op);
+    if (typeof k.desfoque === "number" && k.desfoque > 0) {
+      linhas.push("filter:blur(" + k.desfoque + "px)");
+    }
+    return pct.toFixed(3) + "%{" + linhas.join(";") + "}";
+  }).join("");
+
+  // A regra vai na RAIZ da cena, não dentro do elemento.
+  //
+  // Presa no próprio elemento ela era apagada segundos depois: quem desenha
+  // o conteúdo (texto, lista, número) escreve o innerHTML e leva junto tudo
+  // que estivesse ali. O elemento continuava com `animation-name: ch1`
+  // apontando para uma regra que não existia mais — a animação simplesmente
+  // não acontecia, sem erro nenhum no console. A cena só recebe filhos, e
+  // por isso a regra sobrevive lá.
+  var folha = document.createElement("style");
+  folha.textContent = "@keyframes " + nome + "{" + passos + "}";
+  (ctx.raiz || no).appendChild(folha);
+
+  var dur = _numero(ctx.duracao, 4);
+  no.style.animationName = nome;
+  no.style.animationDuration = dur + "s";
+  no.style.animationTimingFunction = e.suavizar === false ? "linear" : "cubic-bezier(.4,0,.2,1)";
+  no.style.animationFillMode = "both";
+  no.style.animationIterationCount = e.repetir ? "infinite" : "1";
+}
+
+/* ── identidade da marca ─────────────────────────────────────────────────
+   "Ele não escolhe as cores dos textos, não escolhe tema, não escolhe uma
+   imagem de fundo, não coloca uma logo. Ficou horrível."
+
+   O logo era o mais gritante: não havia NENHUM jeito de pôr um. Dava para
+   subir a imagem e posicionar à mão, cena por cena — o que ninguém faz num
+   vídeo de dez cenas, e a IA nunca fazia.
+
+   `doc.marca` resolve de uma vez: o logo aparece em todas as cenas, no
+   canto, no tamanho certo, sem entrar no fluxo do layout. E `marca.cor`
+   define a cor de destaque do documento inteiro, que é o que dá identidade
+   aos números, às barras do gráfico e aos detalhes.
+
+       "marca": { "logo": "/midia/logo.png", "cor": "#ff5a36",
+                  "canto": "inferior-direita", "opacidade": 0.85 }
+
+   `cena.semMarca: true` tira de uma cena específica — a capa costuma querer
+   o logo grande no meio, não pequeno no canto. */
+var CANTOS = {
+  "superior-esquerda": "top:5.2%;left:5%",
+  "superior-direita": "top:5.2%;right:5%",
+  "inferior-esquerda": "bottom:5.2%;left:5%",
+  "inferior-direita": "bottom:5.2%;right:5%",
+};
+
+function aplicarMarca(no, cena, doc, H) {
+  var m = doc && doc.marca;
+  if (!m || typeof m !== "object") return;
+  // A cor da marca vira a cor de destaque de tudo, a menos que a cena diga
+  // outra — é ela que pinta número, barra de gráfico e detalhe.
+  if (m.cor && !cena.tom) no.style.setProperty("--c-tom", m.cor);
+  if (!m.logo || cena.semMarca) return;
+
+  var caixa = document.createElement("div");
+  caixa.className = "marca-dagua";
+  caixa.style.cssText = "position:absolute;z-index:6;pointer-events:none;"
+    + (CANTOS[m.canto] || CANTOS["inferior-direita"])
+    + ";opacity:" + (m.opacidade != null ? m.opacidade : 0.85);
+  var img = document.createElement("img");
+  img.src = m.logo;
+  img.alt = "";
+  // Altura proporcional à tela, resolvida em PIXELS: a caixa é absoluta e
+  // sem altura própria, e porcentagem dentro dela não resolveria — o logo
+  // sairia no tamanho original, gigante num caso e sumido no outro.
+  var alturaPx = Math.round((H || 1080) * ((m.altura || 4.6) / 100));
+  img.style.cssText = "height:" + alturaPx + "px;width:auto;display:block";
+  caixa.appendChild(img);
+  no.appendChild(caixa);
+}
+
+/* ── objetos 3D ──────────────────────────────────────────────────────────
+   "Quero que tu coloque a função ali no vídeo, na apresentação de slides,
+   pra fazer objeto 3D com animação, tudo assim, bem top."
+
+   Isto é 3D de verdade — perspectiva, faces, profundidade — feito com
+   transform 3D do próprio navegador. Sem WebGL e sem biblioteca: o Studio
+   não tem dependência nenhuma e não vai passar a ter por causa disto. O que
+   dá para fazer assim cobre o que um vídeo institucional pede: um cubo
+   girando com o logo nas faces, um cartão com espessura, uma pilha de
+   camadas em profundidade.
+
+       { "tipo": "objeto3d", "forma": "cubo", "tamanho": 320,
+         "faces": ["Produto", "Dados", "IA"], "girar": 14 }
+
+   `girar` é a volta completa em segundos; 0 deixa parado no ângulo dado.
+   `faces` aceita texto ou URL de imagem. E como o elemento é um nó normal,
+   as chaves de animação valem aqui também: dá para o cubo atravessar a cena
+   girando. */
+var FORMAS_3D = { cubo: 1, caixa: 1, cartao: 1, prisma: 1, painel: 1 };
+
+function _face3d(conteudo, transform, cor) {
+  var f = document.createElement("div");
+  f.className = "face3d";
+  f.style.transform = transform;
+  if (cor) f.style.background = cor;
+  if (/^(https?:|\/)/.test(String(conteudo || ""))) {
+    var im = document.createElement("img");
+    im.src = conteudo;
+    im.alt = "";
+    f.appendChild(im);
+  } else if (conteudo) {
+    f.textContent = conteudo;
+  }
+  return f;
+}
+
+function montar3d(no, e) {
+  var forma = FORMAS_3D[e.forma] ? e.forma : "cubo";
+  var t = +e.tamanho || 320;
+  // A caixa e o prisma são o cubo achatado num eixo: uma medida só muda a
+  // silhueta inteira, e o autor não precisa pensar em seis faces.
+  var prof = forma === "cartao" || forma === "painel" ? Math.max(6, Math.round(t * 0.045))
+    : (forma === "caixa" ? Math.round(t * 0.62) : t);
+  var faces = Array.isArray(e.faces) ? e.faces : [];
+  var cores = Array.isArray(e.cores) ? e.cores : [];
+
+  no.classList.add("obj3d", "f-" + forma);
+  no.style.width = _px(t);
+  no.style.height = _px(forma === "cartao" ? Math.round(t * 0.62) : t);
+  no.style.perspective = _px(e.perspectiva || t * 3.4);
+
+  var corpo = document.createElement("div");
+  corpo.className = "corpo3d";
+  corpo.style.width = _px(t);
+  corpo.style.height = _px(forma === "cartao" ? Math.round(t * 0.62) : t);
+
+  var meia = prof / 2;
+  var h = forma === "cartao" ? Math.round(t * 0.62) : t;
+  var lados = [
+    ["translateZ(" + meia + "px)", 0],
+    ["rotateY(180deg) translateZ(" + meia + "px)", 1],
+    ["rotateY(90deg) translateZ(" + (t / 2) + "px)", 2],
+    ["rotateY(-90deg) translateZ(" + (t / 2) + "px)", 3],
+    ["rotateX(90deg) translateZ(" + (h / 2) + "px)", 4],
+    ["rotateX(-90deg) translateZ(" + (h / 2) + "px)", 5],
+  ];
+  // Cartão e painel têm só frente e verso: as bordas viram espessura, e
+  // desenhar seis faces num objeto de 6px de profundidade só faria sujeira.
+  var quantas = (forma === "cartao" || forma === "painel") ? 2 : 6;
+  for (var i = 0; i < quantas; i++) {
+    var lado = lados[i];
+    var f = _face3d(faces[lado[1]] != null ? faces[lado[1]] : (faces[0] || ""),
+                    lado[0], cores[lado[1] % (cores.length || 1)]);
+    // As laterais são estreitas (a profundidade) e o topo/base são baixos.
+    //
+    // Só mudar a medida não bastava: a face é `inset: 0`, então encostava na
+    // borda esquerda em vez de ficar no meio — e a rotação, que gira em
+    // torno do centro, abria o objeto. O cubo saía com as faces soltas, sem
+    // fechar. Reposicionar a face no centro antes de girar fecha a caixa.
+    if (i >= 2 && i < 4) {
+      f.style.width = _px(prof);
+      f.style.left = _px(Math.round((t - prof) / 2));
+    }
+    if (i >= 4) {
+      f.style.height = _px(prof);
+      f.style.top = _px(Math.round((h - prof) / 2));
+    }
+    corpo.appendChild(f);
+  }
+
+  var giro = e.girar == null ? 14 : +e.girar;
+  var inclina = e.inclinar == null ? -14 : +e.inclinar;
+  if (giro > 0) {
+    corpo.style.animation = "giro3d " + giro + "s linear infinite";
+    corpo.style.setProperty("--inc", inclina + "deg");
+  } else {
+    corpo.style.transform = "rotateX(" + inclina + "deg) rotateY(" + (e.angulo || -28) + "deg)";
+  }
+  no.appendChild(corpo);
+}
 
 function renderElemento(e, ctx) {
   var no = document.createElement("div");
   var tipo = e.tipo || "texto";
+  /* Qual elemento do documento é este nó.
+
+     O editor precisava saber, e antes deduzia pela ordem dos nós na tela.
+     A dedução estava errada: os layouts de fluxo separam cabeçalho de corpo
+     e desenham o cabeçalho primeiro, então a ordem na tela NÃO é a ordem do
+     documento. O efeito era clicar num texto e o editor selecionar outro —
+     e mexer no elemento errado. O índice vem carimbado daqui. */
+  if (ctx && ctx.ordem && ctx.ordem.has(e)) no.dataset.i = ctx.ordem.get(e);
   /* Tipo inventado ("titulo", "subtitulo"...) caía num default sem estilo:
      texto de 16px num canvas de 1920 — invisível — ou div vazio quando o
      conteúdo estava noutro campo. O servidor novo recusa; documentos velhos
@@ -178,11 +418,27 @@ function renderElemento(e, ctx) {
 
   /* animação */
   var an = e.anim || ctx.animPadrao;
-  if (an && an !== "nenhuma") {
+  if (an && an !== "nenhuma" && !(e.chaves && e.chaves.length > 1)) {
     no.setAttribute("data-an", typeof an === "string" ? an : (an.entrada || "subir"));
     no.style.setProperty("--atraso", (typeof an === "object" && an.atraso != null ? an.atraso : ctx.i * 0.09 + 0.1));
   }
 
+  /* ── chaves de animação ────────────────────────────────────────────────
+     Antes um elemento só sabia ENTRAR: escolhia-se um efeito de entrada e
+     acabava ali. Não dava para fazer nada percorrer a cena, crescer devagar
+     ou sumir no fim — que é o que separa animação de slide com efeito.
+
+     Uma chave é um instante: `{t: 0.5, x: 200, escala: 1.2}` diz onde o
+     elemento está na metade da cena. Duas ou mais viram uma animação CSS de
+     verdade, gerada aqui, com a duração da cena. O navegador interpola;
+     nós só descrevemos os pontos.
+
+     Quem tem chaves não recebe animação de entrada: as duas brigariam pelo
+     mesmo transform, e a chave é a mais específica das duas. */
+  if (ctx.animar && e.chaves && e.chaves.length > 1) {
+    aplicarChaves(no, e, ctx);
+  }
+
   switch (tipo) {
     case "texto": {
       var papel = PAPEIS[e.papel] || PAPEIS.corpo;
@@ -355,6 +611,11 @@ function renderElemento(e, ctx) {
       break;
     }
 
+    case "objeto3d": {
+      montar3d(no, e);
+      break;
+    }
+
     case "no": {
       if (e.destaque) no.classList.add("destaque");
       if (e.formato === "circulo") no.classList.add("circulo");
@@ -546,6 +807,7 @@ function renderCena(cena, doc, op) {
   if (cena.tom) no.style.setProperty("--c-tom", cena.tom);
   if (cena.tom2) no.style.setProperty("--c-tom2", cena.tom2);
   aplicarFundo(no, cena.fundo);
+  aplicarMarca(no, cena, doc, H);
 
   var layout = cena.layout || (op.layoutPadrao || "titulo");
   var elementos = (cena.elementos || []).slice();
@@ -560,7 +822,21 @@ function renderCena(cena, doc, op) {
   // tela vertical pede tipografia maior: os padrões são calibrados em 1920x1080
   var escalaTipo = H > W ? 1.35 : 1;
   no.style.setProperty("--esc", escalaTipo);
-  var ctx = { i: 0, escalaTipo: escalaTipo, animPadrao: op.animar ? (cena.anim || "subir") : null };
+  var ctx = {
+    i: 0, escalaTipo: escalaTipo,
+    animPadrao: op.animar ? (cena.anim || "subir") : null,
+    // as chaves precisam saber quanto dura a cena para virar segundos
+    animar: !!op.animar,
+    duracao: cena.duracao || 4,
+    raiz: no,
+    // objeto do elemento -> posição dele em cena.elementos, tirada ANTES de
+    // qualquer separação por layout
+    ordem: (function () {
+      var m = new Map();
+      (cena.elementos || []).forEach(function (e, i) { m.set(e, i); });
+      return m;
+    })(),
+  };
 
   if (layout === "livre") {
     fluxo.style.padding = "0";

package/studio/web/render.css

@@ -582,3 +582,50 @@
   .cena .el { animation: none !important; opacity: 1 !important; }
   .folha-doc { padding: 0; width: auto; min-height: 0; }
 }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Objetos 3D
+
+   Perspectiva de verdade, com transform 3D do navegador. Sem WebGL e sem
+   biblioteca — o Studio não tem dependência e não vai passar a ter por isto.
+   ═════════════════════════════════════════════════════════════════════════ */
+.el.obj3d { display: grid; place-items: center; }
+.corpo3d {
+  position: relative;
+  transform-style: preserve-3d;
+  transform: rotateX(-14deg) rotateY(-28deg);
+}
+.face3d {
+  /* Sem isto a borda e o padding SOMAM ao tamanho pedido: cada face fica
+     maior do que a medida usada no translateZ, e o cubo não fecha — as
+     faces ficam soltas, com fresta. O render.css é usado sozinho no HTML
+     exportado, então não dá para contar com o reset do core.css. */
+  box-sizing: border-box;
+  position: absolute; inset: 0;
+  display: grid; place-items: center;
+  background: var(--c-tom, #ff5a36);
+  color: #fff;
+  font: 700 clamp(14px, 2.2vw, 40px)/1.15 var(--f-display, inherit);
+  text-align: center;
+  padding: 6%;
+  border: 1px solid rgba(255, 255, 255, .16);
+  border-radius: 6px;
+  box-shadow: inset 0 0 90px rgba(0, 0, 0, .34);
+  backface-visibility: visible;
+  overflow: hidden;
+}
+.face3d img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* cada face pega uma luz diferente, senão o cubo vira uma mancha só */
+.face3d:nth-child(2) { filter: brightness(.78); }
+.face3d:nth-child(3) { filter: brightness(.88); }
+.face3d:nth-child(4) { filter: brightness(.7); }
+.face3d:nth-child(5) { filter: brightness(1.1); }
+.face3d:nth-child(6) { filter: brightness(.6); }
+
+@keyframes giro3d {
+  from { transform: rotateX(var(--inc, -14deg)) rotateY(0deg); }
+  to   { transform: rotateX(var(--inc, -14deg)) rotateY(360deg); }
+}
+
+/* painel: sem moldura, é uma superfície flutuando em profundidade */
+.el.obj3d.f-painel .face3d { border: 0; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }