สร้างไอคอนที่กําหนดเอง

หากต้องการสร้างไอคอนที่กำหนดเอง คุณต้องใช้IIconอินเทอร์เฟซ ซึ่งจะบอก Blockly ว่าคุณต้องการให้แสดงไอคอนอย่างไร สิ่งที่คุณต้องการให้ไอคอนทำเมื่อมีการคลิก ฯลฯ

เราขอแนะนำให้สร้างคลาสย่อยของคลาสแอบสแทร็กต์ Icon เนื่องจากคลาสนี้มีการติดตั้งใช้งานเริ่มต้นของเมธอดหลายรายการในอินเทอร์เฟซ IIcon อยู่แล้ว

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

ระบุประเภทของไอคอน

เมธอด getType จะแสดงค่าที่แสดงถึงประเภทของไอคอน โดยใช้สำหรับลงทะเบียนไอคอนเพื่อการทำให้เป็นอนุกรม และ เรียกข้อมูลไอคอนจาก getIcon

JavaScript

getType() {
  return new Blockly.icons.IconType('my_icon');
}

TypeScript

getType(): Blockly.icons.IconType<MyIcon> {
  return new Blockly.icons.IconType<MyIcon>('my_icon');
}

สร้างมุมมองของไอคอน

มุมมองของไอคอนหมายถึงองค์ประกอบ SVG ที่อยู่ในบล็อก

เริ่มต้นมุมมอง

วิธี initView คือการสร้างองค์ประกอบ SVG ของไอคอนที่อยู่ในบล็อก องค์ประกอบใหม่ควรเป็นองค์ประกอบย่อยขององค์ประกอบ this.svgRoot เพื่อให้ระบบล้างข้อมูลโดยอัตโนมัติเมื่อไอคอนถูกทำลาย

โมดูล Blockly.utils.dom มีอินเทอร์เฟซที่สะอาดตา สำหรับการสร้างอินสแตนซ์ SVG

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

แสดงผลขนาด

เมธอด getSize จะแสดงผลขนาดของไอคอน เพื่อให้โปรแกรมแสดงผลสามารถทำให้บล็อกกว้างพอสำหรับไอคอน

ขนาดอยู่ใน "หน่วยพื้นที่ทำงาน" ที่กำหนดเอง (ซึ่งจะไม่เปลี่ยนแปลงเมื่อพื้นที่ทำงาน เปลี่ยนสเกล)

getSize() {
  return new Blockly.utils.Size(16, 16);
}

กำหนดลำดับ

ไอคอนจะมีลำดับคงที่ภายในบล็อก เช่น ไอคอนมิวเตเตอร์ในตัว จะแสดงอยู่หน้าไอคอนความคิดเห็นเสมอ ซึ่งจะแสดงอยู่หน้า ไอคอนคำเตือน

ลำดับจะควบคุมโดยค่าที่เมธอด getWeight แสดงผล ระบบจะแสดงไอคอนที่มีน้ำหนักเป็นบวกมากกว่าหลังจากไอคอนที่มีน้ำหนักเป็นบวกน้อยกว่า

getWeight() {
  return 10;
}

หมายเหตุ: ระบบจะตรวจสอบน้ำหนักเมื่อต่อท้ายไอคอนกับบล็อกเท่านั้น ดังนั้นระบบจึงไม่รองรับน้ำหนักแบบไดนามิก

ติดตั้งใช้งานลักษณะการทำงานของ onclick

ไอคอนหลายรายการมีการโต้ตอบและจะดำเนินการบางอย่างเมื่อมีการคลิก เช่น ไอคอนในตัวทั้งหมดจะแสดงบับเบิลเมื่อมีการคลิก คุณใช้เมธอด onClick เพื่อติดตั้งใช้งานได้

onClick() {
  // Do something when clicked.
}

ตอบสนองต่อการเปลี่ยนแปลงการบล็อก

ไอคอนบางรายการยังต้องการตอบสนองต่อการเปลี่ยนแปลงในบล็อกด้วย โดยเฉพาะการเปลี่ยนแปลง ความสามารถในการแก้ไขและสถานะยุบ

ความสามารถในการแก้ไข

หากไอคอนควรทํางานแตกต่างกันไปตามว่าบล็อก แก้ไขได้หรือไม่ (เช่น คลิกไม่ได้เมื่อบล็อก แก้ไขไม่ได้) ให้ใช้เมธอด updateEditable ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อสถานะที่แก้ไขได้ของบล็อกเปลี่ยนแปลง

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

ยุบ

ไอคอนบางรายการจะแสดงเมื่อยุบบล็อก แต่โดยค่าเริ่มต้นจะไม่แสดง หากต้องการให้แสดงไอคอน ให้ลบล้างเมธอด isShownWhenCollapsed เพื่อแสดง true

isShownWhenCollapsed() {
  return true;
}

จากนั้นแทนที่เมธอด updateCollapsed

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

ทิ้งไอคอน

ไอคอนควรล้างองค์ประกอบ DOM หรือการอ้างอิงภายนอกเมื่อมีการ ทิ้ง โดยค่าเริ่มต้น ระบบจะทำลายทุกอย่างที่ต่อท้าย this.svgRoot แต่คุณต้องล้างข้อมูลอ้างอิงอื่นๆ ด้วยตนเอง โดยควรทำภายในเมธอด dispose

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}