ไอคอนลบล้างความคิดเห็น

คุณสามารถลบล้างไอคอนความคิดเห็นในตัวได้ เช่น คุณอาจต้องการให้ป๊อปอัปของความคิดเห็นมีลักษณะแตกต่างออกไป

บล็อกที่มีการไฮไลต์ไอคอนความคิดเห็น

หากต้องการลบล้างไอคอนความคิดเห็น ให้ขยาย CommentIcon ลบล้างวิธีการที่เลือกใน ICommentIcon และลงทะเบียนไอคอนใหม่

Extend CommentIcon

โดยเริ่มจากการขยายเวลา CommentIcon

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

แทนที่เมธอดใน ICommentIcon และ Icon

หากต้องการปรับแต่งไอคอน คุณสามารถลบล้างเมธอดใน ICommentIcon (อธิบายไว้ใน ส่วนต่อไปนี้) และ Blockly.icons.Icon (อธิบายไว้ในสร้างไอคอนที่กำหนดเอง) อย่าลบล้าง getType ซึ่งต้องแสดงผล 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();
}

ICommentIcon ยังต้องใช้เมธอด getBubbleLocation และ setBubbleLocation ซึ่งจะรับและตั้งค่าตำแหน่งของบับเบิลในพื้นที่ทำงาน

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

บันทึกและโหลด

ไอคอนความคิดเห็นที่กำหนดเองต้องใช้ISerializable อินเทอร์เฟซ สถานะควรเป็นไปตามอินเทอร์เฟซ 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));
}

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

ลงทะเบียนไอคอน

สุดท้าย ให้ยกเลิกการลงทะเบียนไอคอนความคิดเห็นที่มีอยู่และลงทะเบียนไอคอนความคิดเห็นเพื่อให้ Blockly สร้างอินสแตนซ์ได้ ใช้สตริง 'comment' สำหรับการยกเลิกการลงทะเบียนและ IconTypes.COMMENT สำหรับการลงทะเบียน

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

หลังจากลงทะเบียนไอคอนแล้ว Blockly จะใช้ไอคอนดังกล่าวแทนไอคอนความคิดเห็นในตัว เช่น เมื่อผู้ใช้คลิก "เพิ่มความคิดเห็น" ในเมนูบริบท หรือ คุณเรียกใช้ myBlock.setCommentText()