Pour créer une icône personnalisée, vous devez implémenter l'interface IIcon.
Cela indique à Blockly comment vous souhaitez que votre icône s'affiche, ce que vous voulez qu'elle fasse en cas de clic, etc.
Nous vous recommandons de sous-classer la classe abstraite Icon, car elle fournit déjà des implémentations par défaut de nombreuses méthodes dans l'interface IIcon.
class MyIcon extends Blockly.icons.Icon {
// The constructor should always take in the source block so that svg elements
// can be properly created.
constructor(sourceBlock) {
super(sourceBlock);
}
}
Spécifier le type d'icône
La méthode getType renvoie une valeur représentant le type de l'icône. Elle permet d'enregistrer l'icône pour la sérialisation et de la récupérer à partir de getIcon.
JavaScript
getType() {
return new Blockly.icons.IconType('my_icon');
}
TypeScript
getType(): Blockly.icons.IconType<MyIcon> {
return new Blockly.icons.IconType<MyIcon>('my_icon');
}
Créer la vue de l'icône
L'affichage de l'icône fait référence aux éléments SVG qui se trouvent sur le bloc.
Initialiser la vue
La méthode initView vous permet de créer les éléments SVG de votre icône qui se trouvent dans le bloc. Les nouveaux éléments doivent être des enfants de l'élément this.svgRoot afin qu'ils soient automatiquement nettoyés lorsque l'icône est détruite.
Le module Blockly.utils.dom fournit une interface épurée pour instancier les SVG.
initView(pointerdownListener) {
if (this.svgRoot) return; // Already initialized.
// This adds the pointerdownListener to the svgRoot element.
// If you do not call `super` you must do this yourself.
super.initView(pointerdownListener);
Blockly.utils.dom.createSvgElement(
Blockly.utils.Svg.CIRCLE,
{
'class': 'my-css-class',
'r': '8',
'cx': '8',
'cy': '8',
},
this.svgRoot // Append to the svgRoot.
);
}
Renvoyer la taille
La méthode getSize renvoie la taille de l'icône, afin que le moteur de rendu puisse élargir suffisamment le bloc.
La taille est exprimée en "unités d'espace de travail" arbitraires (qui ne changent pas lorsque l'espace de travail change d'échelle).
getSize() {
return new Blockly.utils.Size(16, 16);
}
Définir l'ordre
Les icônes ont un ordre statique dans le bloc. Par exemple, les icônes de mutateur intégrées s'affichent toujours devant les icônes de commentaire, devant les icônes d'avertissement.
L'ordre est contrôlé par la valeur renvoyée par la méthode getWeight. Les icônes avec plus de pondérations positives sont affichées après les icônes ayant moins de pondérations positives.
getWeight() {
return 10;
}
Implémenter le comportement de "onclick"
De nombreuses icônes sont interactives et ont une fonction lorsqu'un utilisateur clique dessus. Par exemple, les icônes intégrées affichent toutes une bulle lorsque l'utilisateur clique dessus. Vous pouvez utiliser la méthode onClick pour implémenter cela.
onClick() {
// Do something when clicked.
}
Répondre aux modifications qui ont été bloquées
Certaines icônes souhaitent également répondre aux modifications apportées au bloc, en particulier aux changements de modification et de réduction.
Modifiable
Si votre icône doit se comporter différemment selon que le bloc est modifiable ou non (par exemple, s'il n'est pas cliquable lorsque le bloc n'est pas modifiable), implémentez la méthode updateEditable. Cette méthode est appelée automatiquement lorsque l'état modifiable du bloc change.
updateEditable() {
if (this.sourceBlock.isEditable()) {
// Do editable things.
} else {
// Do non-editable things.
}
}
Réduit
Certaines icônes s'affichent lorsque le bloc est réduit, mais ce n'est pas le cas par défaut. Si vous souhaitez que votre icône s'affiche, remplacez la méthode isShownWhenCollapsed pour renvoyer true.
isShownWhenCollapsed() {
return true;
}
Ensuite, remplacez la méthode updateCollapsed.
updateCollapsed() {
// By default icons are hidden when the block is collapsed. We want it to
// be shown, so do nothing.
}
Supprimer l'icône
Les icônes doivent nettoyer tous les éléments dom ou références externes lorsqu'ils sont mis au rebut. Par défaut, tous les éléments ajoutés à this.svgRoot sont détruits, mais les autres références doivent être nettoyées manuellement. Pour ce faire, utilisez la méthode dispose.
dispose() {
// Always call super!
super.dispose();
this.myBubble?.dispose();
this.myOtherReference?.dispose();
}