カスタムのバブルを作成する

バブルはポップアップ UI で、 表示されます。「しっぽ」があるブロックを指す「頭」次を含む 任意の svg 要素です。

組み込みのバブルがユースケースに適さない場合は、 Bubble クラスをサブクラス化することで、カスタムのバブルを作成できます。

ビューを作成する

バブルの表示は「頭」の内側にあるすべての svg 要素 クリックします。これらの要素はバブルのコンストラクタ内で作成され、 this.contentContainer 要素の子にする必要があります。これにより、 自動的にクリーンアップされます。

Blockly.utils.dom モジュールはクリーンなインターフェースを提供する 使用できます

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 を使用して設定し、外側のバブルが 枠線でバブルの内容を適切に囲むことができます。次の値を設定する必要があります。 UI 要素のサイズが変更されたときにも発生します。

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();
}