El sistema de administración de renderización le indica al procesador cuándo debe volver a renderizar el bloques. Garantiza que, cuando se modifica un bloque (por ejemplo, cuando se establecen valores de campo, o entradas), la forma del bloque se actualiza para que coincida.
Cuándo debes preocuparte
Debes interactuar con este sistema en los siguientes casos:
- Agregar métodos a Blockly que modifiquen la forma del bloque
- Se agregaron métodos a Blockly que dependen de la información actualizada del tamaño o la posición de un bloque.
Cómo funciona
Colocar en cola automáticamente Cada vez que se modifica un bloque, Blockly "colas" a renderizar para ese bloque. Algunos ejemplos de modificaciones que ponen en cola una renderización son:
- Configura el valor de un campo
- Agrega o quita una entrada
- Conectar o desconectar un bloque para niños
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 con
requestAnimationFrame. Esta devolución de llamada obtiene que el navegador llama justo 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 los bloques de hoja hasta los bloques raíz. Esto garantiza que los bloques secundarios tengan información de tamaño precisa antes de que se rendericen sus bloques superiores para que estos puedan estirarse alrededor de sus elementos secundarios.
Por qué funciona de la manera en que lo hace
Esperar para volver a renderizar bloques hasta justo antes de que se dibuje el fotograma actual permite que el sistema de administración de renderización anule las solicitudes de renderización duplicadas. Si los bloques fueran siempre se renderiza de inmediato, se podría renderizar innecesariamente el mismo bloque varias veces seguidas. En cambio, las solicitudes de renderización se agrupan bloque modificado solo se dibuja una vez al final del fotograma, después de que su estado se finalizado. La anulación de duplicación de las operaciones de renderización hace que Blockly sea mucho más eficiente.
Por ejemplo, si insertas un bloque entre las otras dos colas, se renderizan 11, pero solo 3 (uno para cada bloque). Eso es un aumento de rendimiento de 3.6 veces.
Instrucciones de uso
Por lo general, no deberías tener que preocuparte por el sistema de administración de renderización. funciona automáticamente cuando modificas un bloque. Pero hay algunos casos en los que tienes que interactuar con él directamente.
Renderizaciones de cola
Si estás agregando un nuevo método a Blockly, debería actualizar la forma de un
debes llamar a BlockSvg.prototype.queueRender para que se renderice en la cola
bloque.
Espera a que finalicen las renderizaciones
Si agregas un método nuevo a Blockly que requiere información actualizada sobre el tamaño o la posición de un bloque, debes esperar la promesa de renderManagement.finishQueuedRenders(). Esta promesa se resuelve después de
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();
}
Activar las renderizaciones en cola de inmediato
Si agregas un método nuevo a Blockly que requiere información actualizada sobre el tamaño o la posición de un bloque, y no puedes esperar hasta el siguiente fotograma para que se completen las renderizaciones, puedes llamar a renderManagement.triggerQueuedRenders para forzar que las renderizaciones en cola se realicen de inmediato.
import * as renderManagement from './renderManagement.js';
function async myNewMethod() {
block.somethingThatModifiesTheShape();
// Trigger an immediate render.
renderManagement.triggerQueuedRenders();
myThingThatReliesOnPositioningInfo();
}
En general, este método no se recomienda porque tiene un rendimiento menor. Solo es necesario en los casos en que una demora genera una mala experiencia del usuario. Por ejemplo, los marcadores de inserción necesitan información de posicionamiento, y es importante que les proporcionen a los usuarios comentarios inmediatos para que activen una renderización inmediata.
También hay algunos lugares en el núcleo donde se activan renderizaciones inmediatas por motivos de retrocompatibilidad. Se planea quitarlas en la versión 11.