Utiliser des bulles pop-up avec des icônes

Les icônes intégrées utilisent une interface utilisateur de style bulle pop-up pour afficher des informations ou des éditeurs supplémentaires. Les icônes personnalisées peuvent également reproduire ce comportement, afin de conserver une apparence cohérente.

Si votre icône doit afficher une bulle, vous devez implémenter l'interface IHasBubble.

Afficher ou masquer l'info-bulle

Les icônes qui utilisent des bulles doivent implémenter la méthode setBubbleVisible pour afficher ou masquer la bulle.

// Implement the setBubbleVisible method of the IHasBubble interface.
setBubbleVisible(visible) {
  // State is already correct.
  if (!!this.myBubble === visible) return;

  if (visible) {
    this.myBubble = new MyBubble(this.getAnchorLocation(), this.getOwnerRect());
  } else {
    this.myBubble?.dispose();
  }
}

// Implement helper methods for getting the anchor location and bounds.

// Returns the location of the middle of this icon in workspace coordinates.
getAnchorLocation() {
  const size = this.getSize();
  const midIcon = new Blockly.utils.Coordinate(size.width / 2, size.height / 2);
  return Blockly.utils.Coordinate.sum(this.workspaceLocation, midIcon);
}

// Returns the rect the bubble should avoid overlapping, i.e. the block this
// icon is appended to.
getOwnerRect() {
  const bbox = this.sourceBlock.getSvgRoot().getBBox();
  return new Blockly.utils.Rect(
      bbox.y, bbox.y + bbox.height, bbox.x, bbox.x + bbox.width);
}

Gérer le déplacement du bloc

Lorsque l'icône change d'emplacement, l'info-bulle ne se déplace pas automatiquement en même temps que celle-ci. Vous devez soit mettre à jour l'emplacement de la bulle, soit la masquer. Pour ce faire, utilisez la méthode onLocationChange de l'interface IIcon.

onLocationChange(blockOrigin) {
  super.onLocationChange(blockOrigin);
  this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}

Renvoyer la visibilité de la bulle

L'interface IHasBubble nécessite également d'implémenter une méthode isBubbleVisible qui indique si la bulle est visible ou non.

isBubbleVisible() {
  return !!this.myBubble;
}