Personalización avanzada

Blockly te permite personalizar ciertas funciones reemplazando las clases de Blockly correspondientes.

Clases reemplazables

Se pueden reemplazar las siguientes clases de Blockly:

Clase de Blockly	Interfaz	Nombre del 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 obtener información sobre cómo reemplazar un renderizador, consulta Crea renderizadores personalizados.

Crea una clase de reemplazo

Para crear una clase de reemplazo, implementa las funciones en la interfaz correspondiente. Puedes implementar todas estas funciones en una clase nueva o extender la clase Blockly y anular solo las funciones que quieras cambiar. El único requisito es que tú (o la clase base) implementen todas las funciones de la interfaz y cumplan con los requisitos que se describen en los comentarios de la interfaz.

Para indicarle al verificador de tipos que implementas una interfaz específica, anota tu clase con la etiqueta @implements {InterfaceName} de JSDoc (en JavaScript) o la palabra clave implements (en TypeScript).

Informa a Blockly sobre tu clase de reemplazo

Hay dos formas de informar a Blockly sobre tu clase de reemplazo: registrarla como la clase predeterminada de su tipo (opción preferida) o insertarla con la opción de configuración plugins.

Registra tu clase de reemplazo como la predeterminada

La forma preferida de indicarle a Blockly tu clase de reemplazo es registrarla como la predeterminada para su tipo. Para ello, llama a Blockly.registry.register con el nombre Blockly.registry.DEFAULT y establece el parámetro opt_allowOverrides en true.

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

Cómo inyectar tu clase de reemplazo

También puedes insertar clases de reemplazo con la opción de configuración plugins. Es un objeto que usa nombres de tipos de registro como nombres de propiedades y clases de reemplazo o nombres registrados como valores de propiedades.

(A pesar del nombre de la propiedad plugins, tu clase no necesita empaquetarse ni distribuirse a través de npm como los complementos que se usan para extender Blockly).

Pasa tu clase de reemplazo a Blockly.inject:

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

También puedes registrar tu clase con Blockly.registry.register y pasar el nombre registrado a Blockly.inject. Esto es útil si almacenas tus opciones de configuración como JSON puro.

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

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