Sử dụng bong bóng bật lên có biểu tượng

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

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

Hiện hoặc ẩn bong bóng

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 hoặc ẩn bong bóng.

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

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

Khi biểu tượng thay đổi vị trí, bong bóng không tự động di chuyển theo vị trí đó. Bạn cần cập nhật vị trí của bong bóng hoặc ẩn bong bóng đó. 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

Giao diện IHasBubble cũng yêu cầu bạn triển khai phương thức isBubbleVisible trả về thông tin cho dù bong bóng có hiển thị hay không.

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