Blockly có 3 loại biểu tượng tích hợp là: nhận xét, cảnh báo và biểu tượng biến đổi.
Các biểu tượng nhận xét có thể ghi đè. Điều này có nghĩa là bạn có thể yêu cầu Blockly tạo thực thể cho lớp biểu tượng nhận xét của riêng mình khi gọi các phương thức như myBlock.setCommentText(). Bạn có thể cần thực hiện việc này nếu muốn bong bóng bật lên của nhận xét trông khác.
Biểu tượng cảnh báo và biến thể không thể ghi đè được.
Biểu tượng nhận xét
Để ghi đè biểu tượng nhận xét, bạn cần tạo một biểu tượng tuỳ chỉnh giúp triển khai giao diện ICommentIcon, sau đó đăng ký biểu tượng đó.
Cách triển khai cơ bản
Trước khi thêm logic dành riêng cho nhận xét, hãy hoàn tất quy trình 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 nhận xét phải có văn bản.
Phương thức getText phải trả về văn bản của nhận xét. Phương thức setText phải đặt 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 nhận xét tuỳ chỉnh phải triển khai giao diện IHasBubble để hỗ trợ tính năng chuyển đổi tuần tự. Ngay cả khi về mặt kỹ thuật, biểu tượng không có bong bóng trò chuyện, bạn vẫn nên lưu trữ thông tin về chế độ hiển thị trên lớp để duy trì trạng thái đã lưu. Nếu không, bạn sẽ mất thông tin của người dùng khi tải một bản lưu cho biết nhận xét có 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, hãy xem bài viết 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ề một kích thước và một setBubbleSize đặt kích thước đó. Lý do tương tự như trước đây về trạng thái lưu ngay cả khi biểu tượng của bạn về mặt kỹ thuật không có bong bóng trò chuyện cũng áp dụng ở đây.
getBubbleSize() {
return this.bubbleSize;
}
setBubbleSize(size) {
this.bubbleSize = size;
this.myRenderMethod();
}
Lưu và tải
Biểu tượng nhận xét tuỳ chỉnh phải triển khai giao diện ISerializable. Trạng thái phải phù hợp với giao diện 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ề việc chuyển đổi tuần tự biểu tượng, hãy xem phần 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 bản sao biểu tượng. Hãy nhớ sử dụng loại IconTypes.COMMENT.
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);