از حباب های پاپ آپ با آیکون ها استفاده کنید

آیکون های داخلی از یک رابط کاربری به سبک حباب بازشو برای نمایش اطلاعات اضافی یا ویرایشگرها استفاده می کنند. نمادهای سفارشی نیز می توانند این رفتار را تکرار کنند تا ظاهر و احساسی ثابت داشته باشند.

اگر نماد شما باید حباب را نشان دهد، باید رابط 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;
}