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ử 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 người chỉnh sửa. Các biểu tượng tuỳ chỉnh cũng có thể sao chép 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, 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 nên triển khai setBubbleVisible để làm hiện hoặc ẩn bong bóng.

// 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 sẽ không tự động di chuyển theo biểu tượng đó. Bạn cần cập nhật vị trí của bong bóng hoặc ẩn bong bóng đó. Thông tin này có thể là được thực hiện bên trong phương thức onLocationChange của 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 một Phương thức isBubbleVisible trả về thông tin cho biết bong bóng có thể nhìn thấy hay không.

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