Utiliser des bulles

Les icônes intégrées utilisent une UI de type bulle pop-up pour afficher des informations ou des éditeurs supplémentaires. Les icônes personnalisées peuvent également reproduire ce comportement pour conserver un aspect cohérent.

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

Afficher ou masquer la 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.
async setBubbleVisible(visible) {
  // State is already correct.
  if (!!this.myBubble === visible) return;

  // Wait for queued renders to finish so that the icon will be correctly
  // positioned before displaying the bubble.
  await Blockly.renderManagement.finishQueuedRenders();

  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 glissement du bloc

Lorsque l'icône change de position, la bulle ne se déplace pas automatiquement avec elle. Vous devez soit modifier l'emplacement de la bulle, soit la masquer. Vous pouvez le faire dans la méthode onLocationChange de l'interface IIcon.

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

Rétablir la visibilité de la bulle

L'interface IHasBubble nécessite également que vous implémentiez une méthode bubbleIsVisible qui indique si la bulle est visible ou non.

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