Gerenciamento de renderização

O sistema de gerenciamento de renderização informa ao renderizador quando renderizar os blocos novamente. Ele garante que, quando um bloco é modificado (por exemplo, os valores do campo são definidos ou as entradas são adicionadas), a forma do bloco seja atualizada para corresponder.

Quando importar

Você precisa interagir com esse sistema se for:

  • Adição de métodos ao Blockly que modificam a forma do bloco.
  • Adição de métodos ao Blockly que dependem do tamanho ou posicionamento atualizado. informações sobre um bloco.

Como funciona

  1. Colocar na fila automaticamente. Sempre que um bloco é modificado, "filas" do Blockly a renderizar para esse bloco. Alguns exemplos de modificações que enfileiram uma renderização são:

    • Como definir o valor de um campo
    • Adicionar ou remover uma entrada
    • Conectar ou desconectar um bloco filho

  2. Crie um conjunto. Quando um bloco é colocado na fila, o sistema de gerenciamento de renderização adiciona ele e todos os blocos pais a um conjunto de blocos que precisam ser renderizados novamente.

  3. Solicite uma chamada de retorno. Em seguida, o sistema de gerenciamento de renderização solicita um callback usando requestAnimationFrame. Esse callback recebe chamado pelo navegador à direita antes do frame atual ser desenhado.

  4. Renderizar novamente o conjunto (como uma árvore). Quando o callback requestAnimationFrame é chamado, o sistema de gerenciamento de renderização renderiza todos os blocos do conjunto de blocos de folhas para blocos raiz. Isso garante que os blocos filhos tenham informações de tamanho precisas antes que os blocos pais sejam renderizados para que os blocos pais possam se esticar em torno dos filhos.

Por que funciona como funciona?

Aguardar para renderizar novamente blocos até que o frame atual seja desenhado permite no sistema de gerenciamento de renderização para eliminar a duplicação de solicitações de renderização. Se os bloqueios fossem sempre renderizados imediatamente, o mesmo bloco pode ser renderizado desnecessariamente várias vezes seguidas. Em vez disso, as solicitações de renderização são agrupadas, e cada bloco alterado é renderizado apenas uma vez no final do frame, depois que o estado é finalizado. A eliminação de duplicações de operações de renderização torna o Blockly muito mais eficiente.

Por exemplo, inserir um bloco entre duas outras filas 11 é renderizado, mas apenas três realmente ocorrerem (uma para cada bloco). Isso é um aumento de 3,6x no desempenho.

Como usar

Geralmente, você não precisa se preocupar com o sistema de gerenciamento de renderização, porque ele funciona automaticamente quando você modifica um bloco. No entanto, há alguns casos em que você precisa interagir com ele diretamente.

Renderizações da fila

Se você estiver adicionando um novo método ao Blockly que precisa atualizar a forma de um bloco, chame BlockSvg.prototype.queueRender para colocar a renderização do bloco na fila.

Aguardar a conclusão das renderizações

Se você estiver adicionando um novo método ao Blockly que exija informações atualizadas de dimensionamento ou posicionamento sobre um bloco, aguarde a promessa renderManagement.finishQueuedRenders(). Essa promessa é resolvida depois que todas as renderizações em fila são concluídas ou imediatamente, se não houver renderizações em fila.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

Acionar renderizações em fila imediatamente

Se você estiver adicionando um novo método ao Blockly que exige atualização do dimensionamento ou de posicionamento sobre um bloco, e não é possível esperar até o próximo para concluir as renderizações, chame renderManagement.triggerQueuedRenders para forçar a ocorrência de qualquer renderização na fila imediatamente.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

Em geral, não convém fazer isso por ter um desempenho inferior. Ela só é necessária nos casos em que um atraso causa uma experiência ruim para o usuário. Por exemplo, os marcadores de inserção precisam de informações de posicionamento, e é importante que eles ofereçam feedback imediato aos usuários para acionar uma renderização imediata.

Há também alguns lugares no Core onde ele aciona renderizações imediatas para motivos de compatibilidade com versões anteriores. Eles serão removidos na v11.