Ikon {i>built-in<i} menggunakan UI bergaya balon pop-up untuk menampilkan informasi tambahan atau Google. Ikon khusus juga bisa meniru perilaku ini, untuk mempertahankan tampilan dan nuansa yang konsisten.
Jika ikon Anda seharusnya menampilkan gelembung, Anda perlu menerapkan
Antarmuka IHasBubble
.
Menampilkan atau menyembunyikan balon
Ikon yang menggunakan balon harus menerapkan
Metode setBubbleVisible
untuk menampilkan atau menyembunyikan balon.
// 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);
}
Menangani pemblokiran
Saat ikon berubah lokasi, balon tidak otomatis bergerak mengikutinya.
Anda perlu memperbarui lokasi balon atau menyembunyikannya. Dapat berupa
dilakukan di dalam metode onLocationChange
dari
Antarmuka IIcon
.
onLocationChange(blockOrigin) {
super.onLocationChange(blockOrigin);
this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}
Menampilkan visibilitas balon
Antarmuka IHasBubble
juga mengharuskan Anda mengimplementasikan
Metode isBubbleVisible
yang menampilkan apakah balon
terlihat atau tidak.
isBubbleVisible() {
return !!this.myBubble;
}