内置图标使用弹出式气泡样式的界面显示额外信息或 编辑。自定义图标也可以复制此行为, 保持一致的外观和风格
如果图标应显示一个气泡,您需要实现
IHasBubble
接口。
显示或隐藏气泡
使用气泡的图标应实现
setBubbleVisible
方法,用于显示或隐藏气泡。
// 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);
}
解决拖动块的问题
当图标的位置发生变化时,气泡不会自动随之移动。
您需要更新气泡的位置或将其隐藏。可以是
已在 API 的 onLocationChange
方法中完成,
IIcon
接口。
onLocationChange(blockOrigin) {
super.onLocationChange(blockOrigin);
this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}
返回气泡的可见性
IHasBubble
接口还要求您实现
isBubbleVisible
方法,该方法会返回气泡是否
是否可见。
isBubbleVisible() {
return !!this.myBubble;
}