Para criar um renderizador personalizado, você precisa criar uma subclasse para Renderer.
. Consulte os documentos sobre conceitos do renderizador para mais
informações sobre o que é um renderizador e o que ele faz.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Sem personalização, o renderizador padrão fica assim:
Você também pode criar uma subclasse para um dos outros renderizadores integrados. e modificar partes dele.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Criar subclasses de outros componentes do renderizador
O formato real do bloco é determinado pelo subcomponentes do renderizador.
Por padrão, a classe Renderer fornece versões de trabalho do
todos os componentes do renderizador. Isso permite modificar uma
componente único, sem ter que se preocupar com os outros.
Por exemplo, se você quiser mudar o formato das conexões, substitua o constantes sem precisar tocar nos outros componentes.
Confira os documentos do componente do renderizador para mais informações sobre o que cada componente faz.
Substituir métodos de fábrica
Depois de subclassificar os componentes do renderizador, você precisa
substituir os métodos de fábrica do Renderer para os componentes que você
com subclasses. Isso permite que o renderizador conecte corretamente os diferentes componentes
juntas.
Há um método para cada tipo de componente:
makeConstants_makeRenderInfo_makePathObject(sem sublinhado)makeDrawer_
Registrar o renderizador
Por fim, depois de criar seu renderizador personalizado, você precisa registrá-la. Isso associa o renderizador a uma string para que você possa transmiti-lo à configuração de injeção.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});