สร้างไอคอนประเภทใหม่

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

เราขอแนะนำให้จัดประเภทย่อยของคลาส Abstract Icon เนื่องจากมีอยู่แล้ว มีการตั้งค่าเริ่มต้นของวิธีการต่างๆ ใน IIcon ของ Google

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

ตั้งค่าลำดับ

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

ลำดับจะถูกควบคุมโดยค่าที่ 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();
}