Bạn có thể ghi đè biểu tượng bình luận tích hợp. Ví dụ: bạn có thể muốn bong bóng bật lên của bình luận có diện mạo khác.
Để ghi đè biểu tượng bình luận, hãy mở rộng CommentIcon, ghi đè các phương thức đã chọn trong ICommentIcon và đăng ký biểu tượng mới của bạn.
Extend CommentIcon
Bắt đầu bằng cách mở rộng CommentIcon.
class MyCommentIcon extends Blockly.icons.CommentIcon {
constructor(sourceBlock) {
super(sourceBlock);
}
}
Ghi đè các phương thức trong ICommentIcon và Icon
Để tuỳ chỉnh biểu tượng, bạn có thể ghi đè các phương thức trong ICommentIcon (được mô tả trong các phần sau) và Blockly.icons.Icon (được mô tả trong phần Tạo biểu tượng tuỳ chỉnh).
Không ghi đè getType. Phương thức này phải trả về Blockly.icons.IconType.COMMENT.
Văn bản
Giao diện ICommentIcon yêu cầu bình luận phải có văn bản.
Phương thức getText phải trả về nội dung bình luận. Phương thức setText phải đặt văn bản của bình luận 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 của bạn phải triển khai giao diện IHasBubble để hỗ trợ việc chuyển đổi tuần tự. Ngay cả khi biểu tượng của bạn không có bong bóng, bạn vẫn nên lưu trữ thông tin về khả năng 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 nếu tải một tệp lưu bao gồm cả việc bình luận có đượ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 yêu cầu một phương thức getBubbleSize trả về kích thước và một setBubbleSize đặt kích thước đó. Lý do tương tự như trước đây về việc lưu trạng thái ngay cả khi biểu tượng của bạn không có bong bóng cũng áp dụng ở đây.
getBubbleSize() {
return this.bubbleSize;
}
setBubbleSize(size) {
this.bubbleSize = size;
this.myRenderMethod();
}
ICommentIcon cũng yêu cầu các phương thức getBubbleLocation và setBubbleLocation. Các phương thức này sẽ nhận và đặt vị trí của bong bóng trong không gian làm việc.
setBubbleLocation(location) {
this.bubbleLocation = location;
}
getBubbleLocation() {
return this.bubbleLocation;
}
Lưu và tải
Biểu tượng bình luận tuỳ chỉnh của bạn phải triển khai giao diện ISerializable. Trạng thái phải tuân thủ giao diện CommentState.
saveState() {
return {
text: this.text,
pinned: this.bubbleVisible,
height: this.bubbleSize.height,
width: this.bubbleSize.width,
x: this.bubbleLocation.x,
y: this.bubbleLocation.y,
}
}
loadState(state) {
this.setText(state.text);
this.setBubbleVisible(state.pinned);
this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
this.setBubbleLocation(new Blockly.utils.Coordinate(state.x, state.y));
}
Để biết thêm thông tin về cách chuyển đổi biểu tượng thành chuỗi, hãy xem phần Lưu và tải biểu tượng.
Đăng ký biểu tượng
Cuối cùng, hãy huỷ đăng ký biểu tượng bình luận hiện có và đăng ký biểu tượng bình luận của bạn để Blockly có thể khởi tạo biểu tượng đó. Sử dụng chuỗi 'comment' để huỷ đăng ký và IconTypes.COMMENT để đăng ký.
Blockly.icons.registry.unregister('comment');
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);
Sau khi bạn đăng ký biểu tượng, Blockly sẽ sử dụng biểu tượng đó thay cho biểu tượng nhận xét tích hợp, chẳng hạn như khi người dùng nhấp vào "Thêm nhận xét" trên trình đơn theo bối cảnh hoặc bạn gọi myBlock.setCommentText().