Para crear un renderizador personalizado, debes crear una subclase de la clase Renderer. Consulta los documentos de conceptos del renderizador para obtener más información sobre qué es un renderizador y qué hace.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Sin ninguna personalización, el renderizador predeterminado se ve de la siguiente manera:
También puedes crear una subclase de uno de los otros renderizadores integrados y, luego, anular partes de él.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Crea una subclase de otros componentes del renderizador
La forma real del bloque se determina según los subcomponentes del renderizador.
De forma predeterminada, la clase Renderer proporciona versiones funcionales de todos los componentes del renderizador. Esto te permite modificar un solo componente sin tener que preocuparte por los demás.
Por ejemplo, si quieres cambiar las formas de las conexiones, puedes anular las constantes sin tener que tocar los otros componentes.
Consulta los documentos del componente del renderizador para obtener más información sobre lo que hace cada componente individual.
Cómo anular métodos de fábrica
Después de crear una subclase de los componentes del renderizador, debes anular los métodos de fábrica de Renderer para los componentes de los que creaste una subclase. Esto permite que el renderizador conecte correctamente los diferentes componentes.
Hay un método para cada tipo de componente:
makeConstants_makeRenderInfo_makePathObject(ten en cuenta que no hay guiones bajos)makeDrawer_
Registra el renderizador
Por último, una vez que hayas completado la creación de tu renderizador personalizado, debes registrarlo. Esto asocia el renderizador con una cadena para que puedas pasarlo a tus opciones de configuración.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});