Le icone integrate utilizzano un'interfaccia utente in stile fumetto popup per visualizzare editor o informazioni aggiuntive. Anche le icone personalizzate possono replicare questo comportamento, per mantenere un aspetto coerente.
Se l'icona deve mostrare un fumetto, devi implementare l'interfaccia IHasBubble
.
Mostrare o nascondere la bolla
Le icone che utilizzano le bolle dovrebbero implementare il metodo setBubbleVisible
per mostrare o nascondere la bolla.
// 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);
}
Affronta il processo di trascinamento del blocco
Quando l'icona cambia posizione, il fumetto non si sposta automaticamente insieme all'icona.
Devi aggiornare la posizione della bolla o nasconderla. Questa operazione può essere eseguita all'interno del metodo onLocationChange
dell'interfaccia di IIcon
.
onLocationChange(blockOrigin) {
super.onLocationChange(blockOrigin);
this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}
Restituisce la visibilità della bolla
L'interfaccia IHasBubble
richiede anche l'implementazione di un metodo isBubbleVisible
che restituisca se la bolla è visibile o meno.
isBubbleVisible() {
return !!this.myBubble;
}