Para crear un procesador personalizado, debes subclasificar Renderer
. Consulta los documentos de conceptos del renderizador para obtener más información.
información sobre qué es un renderizador y qué hace.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Sin ninguna personalización, el procesador predeterminado se verá de la siguiente manera:
También puedes crear una subclase de uno de los otros procesadores integrados. y, luego, anular partes de ella.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Crea subclases de otros componentes del renderizador
La forma real del bloque está determinada por el subcomponentes del procesador.
De forma predeterminada, la clase Renderer proporciona versiones de trabajo de
todos los componentes del renderizador. Esto te permite modificar un
de un solo componente, sin preocuparse por los demás.
Por ejemplo, si quieres cambiar las formas de las conexiones, puedes anular el constantes sin tener que tocar los otros componentes.
Consulta los documentos de los componentes del procesador para obtener más información. información sobre qué hace cada componente.
Cómo anular métodos de fábrica
Después de subclasificar los componentes del renderizador, debes hacer lo siguiente:
anular los métodos de fábrica de Renderer para los componentes
en subclases. Esto permite que el procesador conecte correctamente los diferentes componentes.
entre sí.
Hay un método para cada tipo de componente:
makeConstants_makeRenderInfo_makePathObject(ten en cuenta que no hay guion bajo)makeDrawer_
Cómo registrar el procesador
Por último, una vez que hayas completado la creación del procesador personalizado, debes y registrarlo. De esta manera, se asocia el procesador con una cadena para que puedas pasarla a la configuración de inserción.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});