Personnalisation avancée

Blockly vous permet de personnaliser certaines fonctionnalités en remplaçant les classes Blockly correspondantes.

Classes remplaçables

Les classes Blockly suivantes peuvent être remplacées:

Classe Blockly Interface Noms d'enregistrement
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

* Il s'agit de la classe de base de tous les moteurs de rendu. Vous pouvez le sous-classer ou sous-classer un rendu existant. Consultez Créer un moteur de rendu.

Les interfaces de Blockly sont définies dans core/interfaces.

Créer une classe de remplacement

Pour créer une classe de remplacement, implémentez les fonctions dans l'interface correspondante. Vous pouvez implémenter toutes ces fonctions dans une nouvelle classe, ou étendre la classe Blockly et ne remplacer que les fonctions que vous souhaitez modifier. La seule exigence est que vous (ou la classe de base) implémentiez toutes les fonctions de l'interface et respectiez toutes les exigences décrites dans les commentaires sur l'interface.

Pour indiquer au vérificateur de type que vous implémentez une interface spécifique, annotez votre classe avec la balise JSDoc @implements {InterfaceName} (en JavaScript) ou le mot clé implements (en TypeScript).

Injecter votre classe de remplacement

Pour informer Blockly de votre classe de remplacement, utilisez la propriété plugins dans les options de configuration transmises à Blockly.inject. (Malgré le nom de cette propriété, votre classe n'a pas besoin d'être empaquetée et distribuée via npm, comme les plug-ins utilisés pour étendre Blockly.)

Vous pouvez transmettre votre sous-classe à la méthode inject.

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

Vous pouvez également enregistrer votre classe à l'aide de Blockly.registry et utiliser le nom du Registre pour injecter la classe. Cela est utile si vous stockez vos options de configuration au format JSON pur.

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

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