Remplacer les icônes intégrées

Blockly dispose de trois types d'icônes intégrées: les commentaires, les avertissements et les mutateurs.

Vous pouvez remplacer les icônes de commentaires. Cela signifie que vous pouvez demander à Blockly d'instancier votre propre classe d'icône de commentaire lorsque vous appelez des méthodes telles que myBlock.setCommentText() Cela peut être utile si, par exemple, vous souhaitez bulle pop-up du commentaire pour qu'elle soit différente.

Les icônes d'avertissement et de mutateur ne peuvent pas être remplacées.

Icône de commentaire

Pour remplacer l'icône de commentaire, vous devez créer une icône personnalisée qui intègre l'interface ICommentIcon, puis enregistrez-la.

Implémentation de base

Avant d'ajouter une logique spécifique aux commentaires, effectuez les implémentation de base de votre icône personnalisée.

Type

La méthode getType doit renvoyer l'icône de commentaire IconType.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

Texte

Dans l'interface ICommentIcon, le commentaire doit contenir du texte. La méthode getText doit renvoyer le texte du commentaire. La méthode setText doit définir le texte du commentaire et modifier les visuels.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Bulle

Votre icône de commentaire personnalisée doit implémenter l'interface IHasBubble. pour permettre la sérialisation. Même si techniquement votre icône n’a pas de bulle, vous devez stocker les informations de visibilité sur votre cours pour que les données est maintenu. Sinon, vous perdrez les informations de l'utilisateur si vous chargez Un enregistrement indiquant si le commentaire était ouvert ou non.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

Pour en savoir plus sur les bulles, consultez Utiliser des bulles pop-up.

L'interface ICommentIcon nécessite également une méthode getBubbleSize qui renvoie une taille et un setBubbleSize qui la définit. Le même raisonnement que précédemment dans même si, techniquement, aucune bulle ne s'applique ici, bien.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Enregistrer et charger

Votre icône de commentaire personnalisée doit intégrer l'ISerializable de commande. L'état doit être conforme à la CommentState de commande.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

Pour en savoir plus sur la sérialisation des icônes, consultez Enregistrez et chargez les icônes.

Inscription

Enfin, vous devez enregistrer votre icône afin que Blockly puisse l'instancier. Être veillez à utiliser le type IconTypes.COMMENT.

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);