Menggunakan balon pop-up

Ikon bawaan menggunakan UI bergaya balon pop-up untuk menampilkan informasi tambahan atau editor. Ikon kustom juga dapat mereplikasi perilaku ini, untuk mempertahankan tampilan dan nuansa yang konsisten.

Jika ikon harus menampilkan balon, Anda harus mengimplementasikan antarmuka IHasBubble.

Menampilkan atau menyembunyikan balon

Ikon yang menggunakan balon harus menerapkan metode setBubbleVisible untuk menampilkan atau menyembunyikan balon.

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

Menangani penarikan blok

Saat ikon mengubah lokasi, balon tidak otomatis berpindah bersamanya. Anda harus memperbarui lokasi balon, atau menyembunyikannya. Hal ini dapat dilakukan di dalam metode onLocationChange dari antarmuka IIcon.

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

Menampilkan visibilitas balon

Antarmuka IHasBubble juga mengharuskan Anda mengimplementasikan metode bubbleIsVisible yang menampilkan apakah balon terlihat atau tidak.

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