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

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);