创建自定义对话泡

气泡是一个弹出式界面，看起来就像 漫画。它们有“尾巴”以及一个“头”符号，包含 任意 svg 元素。

如果内置气泡不适用于您的用例， 可以通过创建 Bubble 类的子类来创建自定义气泡。

创建视图

气泡的视图是位于“head”内的所有 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();
}