Für die integrierten Symbole wird eine Benutzeroberfläche im Pop-up-Stil mit Blasen verwendet, um zusätzliche Informationen oder Bearbeiter anzuzeigen. Benutzerdefinierte Symbole können dieses Verhalten ebenfalls replizieren und so für ein einheitliches Erscheinungsbild sorgen.
Wenn für das Symbol ein Infofeld angezeigt werden soll, müssen Sie die Schnittstelle IHasBubble
implementieren.
Infofeld ein- oder ausblenden
Für Symbole, die Infofelder verwenden, sollte die Methode setBubbleVisible
implementiert werden, um das Infofeld ein- oder auszublenden.
// 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);
}
Durch Ziehen des Blocks umgehen
Ändert sich die Position des Symbols, bewegt sich das Infofeld nicht automatisch mit.
Sie müssen entweder die Position des Infofelds aktualisieren oder es ausblenden. Dazu können Sie die Methode onLocationChange
der IIcon
-Schnittstelle verwenden.
onLocationChange(blockOrigin) {
super.onLocationChange(blockOrigin);
this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}
Sichtbarkeit des Infofelds zurückgeben
Für die Schnittstelle IHasBubble
müssen Sie außerdem eine isBubbleVisible
-Methode implementieren, die zurückgibt, ob das Infofeld sichtbar ist oder nicht.
isBubbleVisible() {
return !!this.myBubble;
}