Tạo bong bóng tuỳ chỉnh

Bong bóng là một giao diện người dùng bật lên trông giống như ô lời thoại mà bạn thấy trong một truyện tranh. Các biểu tượng này có một "đuôi" trỏ vào một khối, và một "đầu" chứa các thành phần svg tuỳ ý.

Nếu bong bóng trò chuyện tích hợp sẵn không phù hợp với trường hợp sử dụng của bạn, bạn có thể tạo bong bóng tuỳ chỉnh bằng cách phân lớp con cho lớp Bubble.

Tạo chế độ xem

Khung hiển thị của bong bóng là tất cả các phần tử svg nằm bên trong "đầu" của bong bóng. Các phần tử này được tạo bên trong hàm khởi tạo của bong bóng và phải là phần tử con của phần tử this.contentContainer để tự động được dọn dẹp khi biểu tượng bị huỷ bỏ.

Mô-đun Blockly.utils.dom cung cấp giao diện rõ ràng để tạo thực thể svg.

class MyBubble extends Blockly.bubbles.Bubble {
  // See the Blockly.bubbles.Bubble class for information about what these
  // parameters are.
  constructor(workspace, anchor, ownerRect) {
    super(workspace, anchor, ownerRect);

    this.text = Blockly.utils.dom.createSvgElement(
          Blockly.utils.Svg.TEXT,
          {'class': 'my-bubble-class'},
          this.contentContainer);
    const node = Blockly.utils.dom.createTextNode('some text');
    this.text.appendChild(node);
  }
}

Đặt kích thước

Bạn cần đặt kích thước của bong bóng bằng cách sử dụng setSize để đường viền ngoài có thể bao quanh đúng cách nội dung của bong bóng đó. Bạn phải đặt thuộc tính này trong quá trình xây dựng và bất cứ khi nào kích thước của các thành phần trên giao diện người dùng thay đổi.

constructor(workspace, anchor, ownerRect) {
  // Create the view elements... (see above)

  const bbox = this.text.getBBox();
  this.setSize(
    new Blockly.utils.Size(
      bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
      bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
    ),
    true
  );
}

Vứt bỏ bong bóng

Bong bóng trò chuyện phải dọn sạch mọi phần tử dom hoặc tệp tham chiếu bên ngoài khi loại bỏ chúng. Theo mặc định, mọi dữ liệu tham chiếu được thêm vào this.contentContainer sẽ bị huỷ bỏ, nhưng các tham chiếu khác cần được dọn dẹp theo cách thủ công. Bạn nên thực hiện việc này trong phương thức dispose.

dispose() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}