Para criar um renderizador personalizado, você precisa criar uma subclasse para a classe
Renderer. Consulte os documentos do conceito de renderizador para ver mais
informações sobre o que é um renderizador e o que ele faz.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Sem qualquer personalização, o renderizador padrão tem a seguinte aparência:
Também é possível criar uma subclasse de um dos outros renderizadores integrados e, em seguida, substituir partes deles.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Criar subclasses de outros componentes do renderizador
A forma real do bloco é determinada pelos subcomponentes do renderizador.
Por padrão, a classe Renderer fornece versões funcionais de
todos os componentes do renderizador. Isso permite modificar um
único componente, sem precisar se preocupar com os outros.
Por exemplo, se você quiser mudar as formas das conexões, substitua as constants sem precisar tocar nos outros componentes.
Consulte os documentos de componentes 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, é necessário
substituir os métodos de fábrica do Renderer para os componentes da
subclasse. Isso permite que o renderizador conecte corretamente os diferentes
componentes.
Há um método para cada tipo de componente:
makeConstants_makeRenderInfo_makePathObject(não há sublinhado)makeDrawer_
Registrar o renderizador
Por fim, depois de concluir a criação do renderizador personalizado, você precisa registrá-lo. 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',
});