Personalização avançada

O Blockly permite personalizar determinadas funcionalidades substituindo as classes correspondentes.

Classes substituíveis

As seguintes classes do Blockly podem ser substituídas:

Classe do Blockly	Interface	Nome do tipo de registro
Blockly.dragging.Dragger	Blockly.IDragger	blockDragger
Blockly.ConnectionChecker	Blockly.IConnectionChecker	connectionChecker
Blockly.InsertionMarkerPreviewer	Blockly.IConnectionPreviewer	connectionPreviewer
Blockly.HorizontalFlyout	Blockly.IFlyout	flyoutsHorizontalToolbox
Blockly.VerticalFlyout	Blockly.IFlyout	flyoutsVerticalToolbox
Blockly.MetricsManager	Blockly.IMetricsManager	metricsManager
Blockly.Toolbox	Blockly.IToolbox	toolbox
Blockly.VariableMap	Blockly.IVariableMap	variableMap
Blockly.VariableModel	Blockly.IVariableModel	--

Para informações sobre como substituir um renderizador, consulte Criar renderizadores personalizados.

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 os requisitos descritos nos comentários dela.

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).

Informar ao Blockly sobre sua classe de substituição

Há duas maneiras de informar ao Blockly sobre sua classe de substituição: registre-a como a classe padrão do tipo dela (preferencial) ou injete-a usando a opção de configuração plugins.

Registre sua classe de substituição como padrão

A maneira preferencial de informar ao Blockly sobre sua classe de substituição é registrá-la como padrão para o tipo dela. Para fazer isso, chame Blockly.registry.register usando o nome Blockly.registry.DEFAULT e defina o parâmetro opt_allowOverrides como true.

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

Injetar sua classe de substituição

Também é possível injetar classes de substituição usando a opção de configuração plugins. É um objeto que usa nomes de tipos de registro como nomes de propriedades e classes de substituição ou nomes registrados como valores de propriedades.

Apesar do nome da propriedade plugins, sua classe não precisa ser empacotada e distribuída pelo npm como os plug-ins usados para estender o Blockly.

Transmita sua classe de substituição para Blockly.inject:

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

Ou registre sua classe usando Blockly.registry.register e transmita o nome registrado para Blockly.inject. Isso é útil se você armazena as opções de configuração como JSON puro.

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

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