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	Nom du type de registre
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	--

Pour savoir comment remplacer un moteur de rendu, consultez Créer des moteurs de rendu personnalisés.

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

Indiquer à Blockly votre classe de remplacement

Il existe deux façons d'indiquer à Blockly votre classe de remplacement : l'enregistrer comme classe par défaut de son type (méthode recommandée) ou l'injecter à l'aide de l'option de configuration plugins.

Enregistrer votre classe de remplacement comme classe par défaut

La méthode recommandée pour informer Blockly de votre classe de remplacement consiste à l'enregistrer comme classe par défaut pour son type. Pour ce faire, appelez Blockly.registry.register en utilisant le nom Blockly.registry.DEFAULT et définissez le paramètre opt_allowOverrides sur true.

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

Injecter votre classe de remplacement

Vous pouvez également injecter des classes de remplacement à l'aide de l'option de configuration plugins. Il s'agit d'un objet qui utilise des noms de types de registre comme noms de propriétés et des classes de remplacement ou des noms enregistrés comme valeurs de propriétés.

(Malgré le nom de la propriété plugins, votre classe n'a pas besoin d'être empaquetée et distribuée via npm comme les plug-ins utilisés pour étendre Blockly.)

Transmettez votre classe de remplacement à Blockly.inject :

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

Vous pouvez également enregistrer votre classe à l'aide de Blockly.registry.register et transmettre le nom enregistré à Blockly.inject. Cela peut être utile si vous stockez vos options de configuration au format JSON pur.

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

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