Icône "Ignorer le commentaire"

Vous pouvez remplacer l'icône de commentaire intégrée. Par exemple, vous pouvez modifier l'apparence de la bulle pop-up du commentaire.

Pour remplacer l'icône de commentaire, étendez CommentIcon, remplacez les méthodes sélectionnées dans ICommentIcon, puis enregistrez votre nouvelle icône.

Remarque : Blockly comporte trois types d'icônes intégrées : les commentaires, les avertissements et les mutateurs. Seule l'icône de commentaire peut être remplacée.

Extend CommentIcon

Commencez par étendre CommentIcon.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Remplacer les méthodes dans ICommentIcon et Icon

Pour personnaliser votre icône, vous pouvez remplacer les méthodes dans ICommentIcon (décrites dans les sections suivantes) et Blockly.icons.Icon (décrites dans Créer des icônes personnalisées). Ne remplacez pas getType, qui doit renvoyer Blockly.icons.IconType.COMMENT.

Texte

L'interface ICommentIcon exige que le commentaire contienne du texte. La méthode getText doit renvoyer le texte du commentaire. La méthode setText doit définir le texte du commentaire et mettre à jour les éléments 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 prendre en charge la sérialisation. Même si votre icône ne comporte pas techniquement de bulle, vous devez stocker les informations de visibilité dans votre classe afin que l'état enregistré soit conservé. Sinon, vous perdrez les informations de l'utilisateur si vous chargez une sauvegarde qui indique 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 les bulles pop-up.

L'interface ICommentIcon nécessite une méthode getBubbleSize qui renvoie une taille et une méthode setBubbleSize qui la définit. Le même raisonnement que précédemment s'applique ici : enregistrez l'état même si votre icône n'a pas techniquement de bulle.

getBubbleSize() {
  return this.bubbleSize;
}

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

ICommentIcon nécessite également les méthodes getBubbleLocation et setBubbleLocation, qui permettent d'obtenir et de définir l'emplacement de la bulle dans l'espace de travail.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

Enregistrer et charger

Votre icône de commentaire personnalisée doit implémenter l'interface ISerializable. L'état doit être conforme à l'interface CommentState.

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

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

Pour en savoir plus sur la sérialisation des icônes, consultez Enregistrer et charger des icônes.

Enregistrer votre icône

Enfin, annulez l'enregistrement de l'icône de commentaire existante et enregistrez votre icône de commentaire pour que Blockly puisse l'instancier. Utilisez la chaîne 'comment' pour la désinscription et IconTypes.COMMENT pour l'inscription.

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

Une fois votre icône enregistrée, Blockly l'utilisera à la place de l'icône de commentaire intégrée, par exemple lorsque l'utilisateur cliquera sur "Ajouter un commentaire" dans le menu contextuel ou que vous appellerez myBlock.setCommentText().