Personalização avançada

O Blockly permite personalizar determinadas funcionalidades substituindo as classes do Blockly correspondentes.

Classes substituíveis

As seguintes classes do Blockly podem ser substituídas:

Classe do Blockly Interface Nomes de registro
Blockly.dragging.Dragger Blockly.IDragger blockDragger
Blockly.ConnectionChecker Blockly.IConnectionChecker connectionChecker
Blockly.InsertionMarkerPreviewer Blockly.IConnectionPreviewer connectionPreviewer
Blockly.Flyout Blockly.IFlyout flyoutsVerticalToolbox
flyoutsHorizontalToolbox
Blockly.MetricsManager Blockly.IMetricsManager metricsManager
Blockly.blockRendering.Renderer* -- renderer
Blockly.Toolbox Blockly.IToolbox toolbox

* Esta é a classe base de todos os renderizadores. É possível criar uma subclasse dele ou de um renderizador existente. Consulte Criar um novo renderizador.

As interfaces do Blockly são definidas em core/interfaces.

Criar uma classe substituta

Para criar uma classe de substituição, implemente as funções na interface correspondente. É possível implementar todas essas funções em uma nova classe ou estender a classe Blockly e substituir apenas as funções que você quer mudar. O único requisito é que você (ou a classe base) implemente todas as funções na interface e siga todos os requisitos descritos nos comentários na interface.

Para indicar ao verificador de tipos que você implementa uma interface específica, anote sua classe com a tag @implements {InterfaceName} JSDoc (em JavaScript) ou a palavra-chave implements (em TypeScript).

Injete a classe substituta

Para informar o Blockly sobre sua classe de substituição, use a propriedade plugins nas opções de configuração transmitidas para Blockly.inject. Apesar do nome dessa propriedade, sua classe não precisa ser empacotada e distribuída pelo npm, como os plug-ins usados para ampliar o Blockly.

É possível transmitir a subclasse para o método inject.

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

Ou você pode registrar sua classe usando Blockly.registry e o nome do registro para injetar a classe. Isso é útil se você armazenar suas opções de configuração como JSON puro.

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', SubClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}