ลบล้างไอคอนในตัว

Blockly มีไอคอนในตัว 3 ประเภท ได้แก่ ความคิดเห็น คำเตือน และการเปลี่ยนแปลง

ไอคอนความคิดเห็นสามารถลบล้างได้ ซึ่งหมายความว่าคุณสามารถบอกให้ Blockly สร้างคลาสไอคอนความคิดเห็น ของคุณเองเมื่อเรียกใช้เมธอดอย่าง myBlock.setCommentText() ได้ คุณอาจต้องการทำเช่นนี้ เช่น หากต้องการให้ลูกโป่งป๊อปอัปของความคิดเห็นดูแตกต่างออกไป

ไอคอนคำเตือนและไอคอนการเปลี่ยนแปลงไม่สามารถลบล้างได้

ไอคอนความคิดเห็น

หากต้องการลบล้างไอคอนความคิดเห็น คุณต้องสร้างไอคอนที่กำหนดเองที่ใช้งานอินเทอร์เฟซ 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 รัฐควรสอดคล้องกับอินเทอร์เฟซ 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));
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำให้ไอคอนเป็นอนุกรมได้ที่บันทึกและโหลดไอคอน

การลงทะเบียน

สุดท้าย คุณต้องลงทะเบียนไอคอนเพื่อให้ Blockly สามารถสร้างอินสแตนซ์ได้ โปรดใช้ประเภท IconTypes.COMMENT

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