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

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

אם בסמל אמור להופיע בועה, צריך להטמיע את הממשק IHasBubble.

הצגה או הסתרה של הבועה

בסמלים שנעשה בהם שימוש בבועות צריך להטמיע את השיטה setBubbleVisible כדי להציג או להסתיר את הבועה.

// Implement the setBubbleVisible method of the IHasBubble interface.
setBubbleVisible(visible) {
  // State is already correct.
  if (!!this.myBubble === visible) return;

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