Создавайте собственные пузыри

Пузырь – это всплывающий пользовательский интерфейс, похожий на речевой пузырь, который можно увидеть в комиксах. У них есть «хвост», указывающий на блок, и «голова», содержащая произвольные элементы SVG.

Если встроенные пузырьки не подходят для вашего случая использования, вы можете создать собственный пузырь, создав подкласс класса Bubble .

Создать представление

Представление пузырька — это все элементы SVG, находящиеся внутри «головы» пузырька. Эти элементы создаются внутри конструктора пузырька и должны быть дочерними элементами элемента this.contentContainer , чтобы автоматически очищаться при уничтожении значка.

Модуль Blockly.utils.dom предоставляет понятный интерфейс для создания экземпляров SVG.

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