Sử dụng bong bóng cửa sổ bật lên

Các biểu tượng tích hợp sử dụng giao diện người dùng kiểu bong bóng bật lên để hiển thị thông tin bổ sung hoặc trình chỉnh sửa. Biểu tượng tuỳ chỉnh cũng có thể mô phỏng hành vi này để duy trì giao diện nhất quán.

Nếu biểu tượng của bạn hiển thị bong bóng trò chuyện, bạn cần triển khai giao diện IHasBubble.

Hiện hoặc ẩn bong bóng trò chuyện

Các biểu tượng sử dụng bong bóng trò chuyện phải triển khai phương thức setBubbleVisible để hiển thị hoặc ẩn bong bóng trò chuyện.

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

Xử lý việc kéo khối

Khi biểu tượng thay đổi vị trí, bong bóng trò chuyện sẽ không tự động di chuyển theo. Bạn cần cập nhật vị trí của bong bóng trò chuyện hoặc ẩn bong bóng trò chuyện đó. Bạn có thể thực hiện việc này bên trong phương thức onLocationChange của giao diện IIcon.

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

Trả về chế độ hiển thị của bong bóng trò chuyện

Giao diện IHasBubble cũng yêu cầu bạn triển khai phương thức bubbleIsVisible để trả về xem bong bóng trò chuyện có hiển thị hay không.

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