Pop-up balonları kullanma

Yerleşik simgeler, ek bilgileri veya düzenleyicileri görüntülemek için pop-up balon tarzı bir kullanıcı arayüzü kullanır. Özel simgeler de tutarlı bir görünüm ve his sağlamak için bu davranışı taklit edebilir.

Simgeniz bir baloncuk gösteriyorsa IHasBubble arayüzünü uygulamanız gerekir.

Balonu gösterme veya gizleme

Balon kullanan simgelerde, balonu göstermek veya gizlemek için setBubbleVisible yöntemi uygulanmalıdır.

// 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ükleme

Simge konum değiştirdiğinde balon otomatik olarak onunla birlikte hareket etmez. Balonun konumunu güncellemeniz veya gizlemeniz gerekir. Bu işlem, IIcon arayüzünün onLocationChange yöntemi içinde yapılabilir.

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

Baloncuğun görünürlüğünü geri alma

IHasBubble arayüzü, balonun görünür olup olmadığını döndüren bir bubbleIsVisible yöntemi de uygulamanızı gerektirir.

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