Ghi đè biểu tượng tích hợp sẵn

Blockly có 3 loại biểu tượng được tích hợp sẵn: nhận xét, cảnh báo và đối tượng thay đổi.

Bạn có thể ghi đè các biểu tượng bình luận. Điều này có nghĩa là bạn có thể yêu cầu Blockly tạo thực thể lớp biểu tượng nhận xét của riêng bạn khi bạn gọi các phương thức như myBlock.setCommentText(). Bạn có thể muốn thực hiện việc này nếu, ví dụ, bạn muốn bong bóng bật lên của bình luận đó để trông khác.

Không thể ghi đè biểu tượng cảnh báo và biểu tượng biến đổi.

Biểu tượng bình luận

Để ghi đè biểu tượng bình luận, bạn cần tạo một biểu tượng tuỳ chỉnh giúp triển khai giao diện ICommentIcon, rồi đăng ký giao diện đó.

Cách triển khai cơ bản

Trước khi thêm logic cho nhận xét cụ thể, hãy hoàn tất cách triển khai cơ bản của biểu tượng tuỳ chỉnh.

Loại

Phương thức getType phải trả về biểu tượng nhận xét IconType.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

Văn bản

Giao diện ICommentIcon yêu cầu chú thích phải có văn bản. Phương thức getText phải trả về nội dung của nhận xét. Phương thức setText phải thiết lập văn bản của nhận xét và cập nhật mọi hình ảnh.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Bong bóng

Biểu tượng bình luận tuỳ chỉnh phải triển khai giao diện IHasBubble để hỗ trợ chuyển đổi tuần tự. Ngay cả khi về mặt kỹ thuật, biểu tượng của bạn không có bong bóng bạn nên lưu trữ thông tin chế độ hiển thị trên lớp để trạng thái được duy trì. Nếu không, bạn sẽ mất thông tin của người dùng nếu bạn tải bản lưu cho biết nhận xét có đang mở hay không.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

Để biết thêm thông tin về bong bóng trò chuyện, hãy xem phần Sử dụng bong bóng bật lên.

Giao diện ICommentIcon cũng yêu cầu một phương thức getBubbleSize trả về kích thước và setBubbleSize đặt kích thước đó. Lý do tương tự của lưu trạng thái ngay cả khi biểu tượng của bạn về mặt kỹ thuật không áp dụng bong bóng ở đây tốt.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Lưu và tải

Biểu tượng bình luận tuỳ chỉnh phải triển khai ISerializable . Trạng thái phải tuân thủ CommentState .

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

Để biết thêm thông tin về quá trình chuyển đổi tuần tự biểu tượng, hãy xem Lưu và tải biểu tượng.

Đăng ký

Cuối cùng, bạn cần đăng ký biểu tượng để Blockly có thể tạo thực thể cho biểu tượng đó. Hãy hãy nhớ sử dụng loại IconTypes.COMMENT.

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);