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. Thao tác này cho Blockly biết bạn muốn hiển thị biểu tượng như thế nào và bạn muốn biểu tượng đó hiển thị như thế nào thực hiện nếu được nhấp vào, v.v.

Bạn nên phân lớp con cho 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 của nhiều phương thức trong 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 trả về một giá trị đại diện cho loại của . Tệp 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 cho biểu tượng

Chế độ xem 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 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 để chúng được tự động dọn dẹp khi biểu tượng bị huỷ bỏ.

Mô-đun Blockly.utils.dom cung cấp một giao diện rõ ràng để tạo thực thể của 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 cho khối đủ rộng.

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

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

Đặt thứ tự

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

Thứ tự này do giá trị do getWeight trả về . Biểu tượng có trọng số dương hơn được hiển thị sau khi biểu tượng có ít trọng số hơn trọng số dương.

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 hành động nào đó khi được nhấp vào. Ví dụ: tất cả biểu tượng tích hợp đều hiện một bong bóng khi người dùng nhấp vào. Bạn có thể hãy sử 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ề quy tắc chặn

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

Khả năng chỉnh sửa

Liệu biểu tượng của bạn có hoạt động khác nhau tuỳ thuộc vào việc khối có thể chỉnh sửa hoặc không (ví dụ: không thể nhấp vào khi khối không phải là có thể chỉnh sửa), hãy triển khai phương thức updateEditable. Phương thức này tự động được gọi 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 xuất hiện khi khối được thu gọn, nhưng theo mặc định, chúng sẽ xuất hiện thì không. Nếu bạn muốn biểu tượng xuất hiện, hãy ghi đè Phương thức isShownWhenCollapsed để trả về true.

isShownWhenCollapsed() {
  return true;
}

Sau đó, 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.
}

Vứt bỏ biểu tượng

Các biểu tượng phải dọn dẹp mọi phần tử dom hoặc tham chiếu bên ngoài khi chúng bị loại bỏ. Theo mặc định, mọi giá trị được thêm vào this.svgRoot sẽ nhận được bị huỷ, nhưng các tham chiếu khác cần phải được xoá theo cách thủ công. Thông tin này phải là được thực hiện trong phương thức dispose.

dispose() {
  // Always call super!
  super.dispose();

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