El sistema de administración de renderización le indica al procesador cuándo volver a renderizar los bloques. Garantiza que, cuando se modifica un bloque (p.ej., se configuran valores de campo o se agregan entradas), la forma del bloque se actualiza para coincidir.
Cuándo es importante
Debes interactuar con este sistema en los siguientes casos:
- Agregamos métodos a Blockly que modifican la forma del bloque.
- Agregar métodos a Blockly que dependan de información actualizada de tamaño o posicionamiento sobre un bloque
Cómo funciona
Agregar a la fila automáticamente. Cada vez que se modifica un bloque, Blockly "pone en cola" una renderización para ese bloque. Estos son algunos ejemplos de modificaciones que ponen en cola una renderización:
- Configura el valor de un campo
- Cómo agregar o quitar una entrada
- Conectar o desconectar un bloque secundario
Crea un conjunto. Cuando un bloque se pone en cola, el sistema de administración de renderización lo agrega, junto con todos sus bloques superiores, a un conjunto de bloques que se deben volver a renderizar.
Solicita una devolución de llamada. Luego, el sistema de administración de renderización solicita una devolución de llamada mediante
requestAnimationFrame. El navegador llama a esta devolución de llamada a la derecha antes de que se dibuje el fotograma actual.Vuelve a renderizar el conjunto (como un árbol). Cuando se llama a la devolución de llamada
requestAnimationFrame, el sistema de administración de renderización renderiza cada bloque del conjunto, desde bloques de hoja hasta bloques raíz. Esto garantiza que los bloques secundarios tengan información de tamaño precisa antes de que se rendericen los bloques superiores, de modo que los bloques superiores se puedan estirar alrededor de los elementos secundarios.
Por qué funciona y cómo funciona
Esperar a volver a renderizar los bloques hasta justo antes de que se dibuje el marco actual permite que el sistema de administración de renderización anule las solicitudes de renderización duplicadas. Si los bloques se renderizan siempre de inmediato, es posible que el mismo bloque se renderice innecesariamente varias veces seguidas. En cambio, las solicitudes de renderización se agrupan en lotes, y cada bloque modificado solo se dibuja una vez al final del fotograma, después de que finaliza su estado. Las operaciones de renderización con anulación de duplicación hacen que Blockly sea mucho más eficiente.
Por ejemplo, la inserción de un bloque entre dos colas de otras se procesa 11, pero solo ocurren 3 (una por cada bloque). Eso es un aumento de 3.6 veces en el rendimiento.
Instrucciones de uso
Por lo general, no deberías tener que preocuparte por el sistema de administración de renderización, ya que funciona automáticamente cuando modificas un bloque. Sin embargo, hay algunos casos en los que debes interactuar directamente con ella.
Renderizaciones de cola
Si agregas un método nuevo a Blockly que debería actualizar la forma de un bloque, debes llamar a BlockSvg.prototype.queueRender para poner en cola la renderización del bloque.
Espera a que finalicen los procesamientos
Si estás agregando un nuevo método a Blockly que requiere tener actualizada la información de tamaño o posicionamiento de un bloque, debes esperar la promesa renderManagement.finishQueuedRenders(). Esta promesa se resuelve después de que se completan las renderizaciones en cola o de inmediato si no hay renderizaciones en cola.
import * as renderManagement from './renderManagement.js';
function async myNewMethod() {
block.somethingThatModifiesTheShape();
// Await the promise.
await renderManagement.finishQueuedRenders();
myThingThatReliesOnPositioningInfo();
}
Activa los procesamientos en cola de inmediato
Si agregas un método nuevo a Blockly, que requiere tener actualizada la información de tamaño o posicionamiento sobre un bloque, y no puedes esperar hasta el siguiente fotograma para que se completen las renderizaciones, puedes llamar a renderManagement.triggerQueuedRenders para forzar que los procesamientos en cola sucedan de inmediato.
import * as renderManagement from './renderManagement.js';
function async myNewMethod() {
block.somethingThatModifiesTheShape();
// Trigger an immediate render.
renderManagement.triggerQueuedRenders();
myThingThatReliesOnPositioningInfo();
}
En general, no te conviene hacer esto porque es menos eficaz. Solo es necesaria en los casos en que una demora provoca una mala experiencia del usuario. Por ejemplo, los marcadores de inserción necesitan información de posicionamiento, y es importante que brinden comentarios inmediatos a los usuarios, de modo que activen una renderización inmediata.
También hay algunos lugares principales en los que activa renderizaciones inmediatas por motivos de retrocompatibilidad. Se planea quitar estas funciones en la versión 11.