Simge içeren pop-up baloncuklar

Yerleşik simgeler, pop-up balon stilinde bir kullanıcı arayüzü kullanarak ekstra bilgileri veya editörler. Özel simgeler de bu davranışı tekrarlayabilir, böylece tutarlı bir görünüm ve his sağlar.

Simgenizde bir balon görünürse IHasBubble arayüzü.

Balonu göster veya gizle

Baloncuk kullanan simgeler setBubbleVisible yöntemini kullanabilirsiniz.

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

Bloğu sürüklemeyi ele alma

Simgenin konumu değiştiğinde baloncuk simgeyle birlikte otomatik olarak hareket etmez. Balonun konumunu güncellemeniz veya gizlemeniz gerekir. Bu özellik, onLocationChange yöntemi içinde yapılır. IIcon arayüzü.

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

Balonun görünürlüğünü tekrar sağlayın

IHasBubble arayüzü ayrıca isBubbleVisible baloncuğun görünür olup olmadığını belirleyin.

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