Blockly มีไอคอนในตัว 3 ประเภท ได้แก่ ความคิดเห็น คำเตือน และการเปลี่ยนแปลง
ไอคอนความคิดเห็นจะลบล้างได้ ซึ่งหมายความว่าคุณสามารถบอกให้ Blockly สร้างอินสแตนซ์
คลาสไอคอนความคิดเห็นของคุณเองเมื่อเรียกใช้เมธอด เช่น
myBlock.setCommentText()
คุณอาจต้องการทำเช่นนี้ในกรณี เช่น
ลูกโป่งป๊อปอัปของความคิดเห็นเพื่อดูแตกต่างออกไป
คุณไม่สามารถลบล้างไอคอนคำเตือนและไอคอน Mutator
ไอคอนความคิดเห็น
ในการลบล้างไอคอนความคิดเห็น คุณต้องสร้างไอคอนที่กำหนดเองเพื่อใช้งาน
ICommentIcon
แล้วลงทะเบียนอินเทอร์เฟซ
การติดตั้งใช้งานขั้นพื้นฐาน
ก่อนเพิ่มตรรกะเฉพาะความคิดเห็น ให้ทำดังนี้ การใช้งานพื้นฐานกับไอคอนที่กำหนดเอง
ประเภท
เมธอด getType
ต้องแสดงไอคอนความคิดเห็น IconType
class MyCommentIcon extends Blockly.icons.Icon {
getType() {
return Blockly.icons.IconType.COMMENT;
}
}
ข้อความ
อินเทอร์เฟซ ICommentIcon
กำหนดให้ความคิดเห็นมีข้อความ
เมธอด getText
ต้องแสดงข้อความของความคิดเห็น เมธอด setText
ต้องตั้งค่าข้อความของความคิดเห็นและอัปเดตภาพ
getText() {
return this.text;
}
setText(text) {
this.text = text;
this.myRenderMethod();
}
ลูกโป่ง
ไอคอนความคิดเห็นที่กำหนดเองต้องใช้อินเทอร์เฟซ IHasBubble
เพื่อรองรับการเรียงอันดับ แม้ว่าในทางเทคนิคแล้วไอคอนจะไม่มีลูกโป่ง
คุณควรเก็บข้อมูลการมองเห็นในชั้นเรียน เพื่อให้
จะอยู่ในสถานะเดิม ไม่เช่นนั้น ข้อมูลจากผู้ใช้จะหายไปหากคุณโหลด
บันทึกที่ระบุว่าความคิดเห็นนั้นเปิดอยู่หรือไม่
bubbleIsVisible() {
return this.bubbleVisible;
}
setBubbleVisible(visible: boolean) {
this.bubbleVisible = visible;
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับบับเบิลได้ที่การใช้บับเบิลป๊อปอัป
อินเทอร์เฟซ ICommentIcon
ต้องการเมธอด getBubbleSize
ที่ส่งคืน
ขนาด และ setBubbleSize
ที่กำหนดขนาด เหตุผลเดียวกันจาก
แม้ว่าในทางเทคนิคแล้วไอคอนของคุณจะไม่มีลูกโป่งก็ตาม
getBubbleSize() {
return this.bubbleSize;
}
setBubbleSize(size) {
this.bubbleSize = size;
this.myRenderMethod();
}
บันทึกและโหลด
ไอคอนความคิดเห็นที่กำหนดเองจะต้องใช้ ISerializable
ของ Google รัฐควรเป็นไปตามCommentState
ของ Google
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));
}
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเรียงลำดับไอคอน โปรดดูที่ บันทึกและโหลดไอคอน
การลงทะเบียน
สุดท้าย คุณต้องลงทะเบียนไอคอนเพื่อให้ Blockly สร้างอินสแตนซ์ได้ เป็น
อย่าลืมใช้ประเภท IconTypes.COMMENT
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);