ใช้ลูกโป่งป๊อปอัปที่มีไอคอน

ไอคอนในตัวใช้ UI รูปแบบฟองอากาศแบบป๊อปอัปเพื่อแสดงข้อมูลเพิ่มเติม หรือ เครื่องมือแก้ไข ไอคอนที่กำหนดเองยังสามารถจำลองลักษณะการทำงานนี้เพื่อรักษา ที่ต่อเนื่องกัน

ถ้าไอคอนของคุณควรแสดงลูกโป่ง คุณต้องติดตั้ง 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;
}