Tạo loại biểu tượng mới

Để tạo biểu tượng tuỳ chỉnh, bạn cần triển khai giao diện IIcon. Thuộc tính này cho Blockly biết cách bạn muốn hiển thị biểu tượng, điều bạn muốn biểu tượng làm khi được nhấp vào, v.v.

Bạn nên phân lớp con của lớp trừu tượng Icon, vì lớp này đã cung cấp các cách triển khai mặc định cho nhiều phương thức trong giao diện IIcon.

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Chỉ định loại biểu tượng

Phương thức getType sẽ trả về một giá trị đại diện cho loại biểu tượng. Chuỗi này được dùng để đăng ký biểu tượng cho quá trình chuyển đổi tuần tự và truy xuất biểu tượng từ getIcon.

JavaScript

  getType() {
    return new Blockly.icons.IconType('my_icon');
  }

TypeScript

  getType(): Blockly.icons.IconType<MyIcon> {
    return new Blockly.icons.IconType<MyIcon>('my_icon');
  }

Tạo chế độ xem của biểu tượng

Khung hiển thị của biểu tượng đề cập đến các phần tử SVG nằm trong khối.

Khởi chạy khung hiển thị

Phương thức initView là nơi bạn tạo các phần tử SVG của biểu tượng nằm trong khối. Các phần tử mới phải là phần tử con của phần tử this.svgRoot để 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ể cho SVG.

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

Trả về kích thước

Phương thức getSize trả về kích thước của biểu tượng để trình kết xuất có thể tạo khối đủ rộng cho biểu tượng.

Kích thước này nằm trong các "đơn vị không gian làm việc" tuỳ ý (không thay đổi khi không gian làm việc thay đổi theo quy mô).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

Đặt thứ tự

Các biểu tượng có thứ tự tĩnh bên trong khối. Ví dụ: biểu tượng biến thể tích hợp sẵn luôn hiện phía trước biểu tượng nhận xét, biểu tượng này xuất hiện trước biểu tượng cảnh báo.

Đơn đặt hàng này được kiểm soát bằng giá trị mà phương thức getWeight trả về. Các biểu tượng có trọng số dương hơn sẽ được kết xuất sau biểu tượng có trọng số dương ít hơn.

getWeight() {
  return 10;
}

Triển khai hành vi nhấp

Nhiều biểu tượng có tính tương tác và thực hiện một hành động nào đó khi được nhấp vào. Ví dụ: tất cả các biểu tượng tích hợp đều sẽ hiển thị bong bóng trò chuyện khi được nhấp vào. Bạn có thể dùng phương thức onClick để triển khai việc này.

onClick() {
  // Do something when clicked.
}

Phản hồi các thay đổi về việc chặn

Một số biểu tượng cũng muốn phản hồi với các thay đổi trong khối, cụ thể là các thay đổi về khả năng chỉnh sửa và độ thu gọn.

Khả năng chỉnh sửa

Nếu biểu tượng có hành vi khác nhau tuỳ thuộc vào việc khối có thể chỉnh sửa hay không (ví dụ: không nhấp vào được khi không thể chỉnh sửa khối), hãy triển khai phương thức updateEditable. Phương thức này được gọi tự động khi trạng thái có thể chỉnh sửa của khối thay đổi.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

Độ thu gọn

Một số biểu tượng sẽ hiển thị khi khối được thu gọn, nhưng theo mặc định thì không. Nếu bạn muốn biểu tượng hiển thị, hãy ghi đè phương thức isShownWhenCollapsed để trả về true.

isShownWhenCollapsed() {
  return true;
}

Sau đó, hãy ghi đè phương thức updateCollapsed.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

Loại bỏ biểu tượng

Các biểu tượng phải xoá 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.svgRoot 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() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}