שימוש בבועות קופצות

סמלים מובנים משתמשים בממשק משתמש בסגנון בועה קופצת כדי להציג מידע נוסף או עורכי טקסט. אפשר גם ליצור סמלים מותאמים אישית שיהיו זהים לסמלים האלה, כדי לשמור על עיצוב עקבי.

אם הסמל צריך לכלול בועה, צריך להטמיע את הממשק 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 צריך גם להטמיע שיטה bubbleIsVisible שמחזירה את סטטוס החשיפה של הבועה.

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