气泡是一个弹出式界面,类似于漫画中的对话气泡。它们有一个指向块的“尾部”和一个包含任意 svg 元素的“head”。
如果内置气泡不适用于您的用例,您可以通过创建 Bubble
类的子类来创建自定义气泡。
创建视图
气泡的视图是位于气泡“头部”中的所有 svg 元素。这些元素是在气泡的构造函数内创建的,它们应该是 this.contentContainer
元素的子元素,以便在图标销毁时自动清理。
Blockly.utils.dom
模块提供了一个干净的接口来实例化 svgs。
class MyBubble extends Blockly.bubbles.Bubble {
// See the Blockly.bubbles.Bubble class for information about what these
// parameters are.
constructor(workspace, anchor, ownerRect) {
super(workspace, anchor, ownerRect);
this.text = Blockly.utils.dom.createSvgElement(
Blockly.utils.Svg.TEXT,
{'class': 'my-bubble-class'},
this.contentContainer);
const node = Blockly.utils.dom.createTextNode('some text');
this.text.appendChild(node);
}
}
设置大小
需要使用 setSize
设置气泡的大小,以便外边框可以正确包围气泡的内容。它应在构建期间以及每当界面元素的大小发生变化时设置。
constructor(workspace, anchor, ownerRect) {
// Create the view elements... (see above)
const bbox = this.text.getBBox();
this.setSize(
new Blockly.utils.Size(
bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
),
true
);
}
处置气泡
气泡应在处理时清除所有 dom 元素或外部引用。默认情况下,附加到 this.contentContainer
的任何内容都会被销毁,但其他引用需要手动清理。此操作应在 dispose
方法中完成。
dispose() {
super.dispose();
// Dispose of other references.
this.myArbitraryReference.dispose();
}