שימוש בבועות קופצות עם סמלים

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

אם בסמל אמורה להופיע בועה, צריך להטמיע את 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);
}

גרירה של החסימה

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

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

החזרת החשיפה של הבועה

בנוסף, בממשק של IHasBubble צריך להטמיע השיטה isBubbleVisible שמחזירה אם הבועה גלוי או לא גלוי.

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