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;
}