Используйте всплывающие пузыри с иконками

Встроенные значки используют пользовательский интерфейс в виде всплывающего окна для отображения дополнительной информации или редакторов. Пользовательские значки также могут повторять это поведение, чтобы поддерживать единообразный внешний вид.

Если на вашем значке должен отображаться пузырь, вам необходимо реализовать интерфейс 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);
}

Разберитесь с перетаскиванием блока

Когда значок меняет местоположение, пузырь не перемещается вместе с ним автоматически. Вам нужно либо обновить местоположение пузырька, либо скрыть его. Это можно сделать внутри метода onLocationChange интерфейса IIcon .

onLocationChange(blockOrigin) {
  super.onLocationChange(blockOrigin);
  this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}

Вернуть видимость пузырька

Интерфейс IHasBubble также требует реализации метода isBubbleVisible , который возвращает, видим ли пузырь или нет.

isBubbleVisible() {
  return !!this.myBubble;
}