Membuat jenis ikon baru

Untuk membuat ikon khusus, Anda harus menerapkan antarmuka IIcon. Ini memberi tahu Blockly bagaimana Anda ingin ikon dirender, sesuai keinginan Anda lakukan jika diklik, dll.

Sebaiknya buat subclass untuk class abstrak Icon, karena class tersebut sudah menyediakan implementasi default dari banyak metode di IIcon dalam antarmuka berbasis web yang sederhana.

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

Menentukan jenis ikon

Metode getType menampilkan nilai yang mewakili jenis ikon. Proses ini digunakan untuk mendaftarkan ikon untuk serialisasi, dan mengambil ikon dari getIcon.

JavaScript

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

TypeScript

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

Membuat tampilan ikon

Tampilan ikon mengacu pada elemen SVG yang ada di blok.

Melakukan inisialisasi tampilan

Metode initView adalah tempat Anda membuat elemen SVG ikon yang ada di blok tersebut. Elemen baru harus berupa turunan dari Elemen this.svgRoot sehingga akan otomatis dibersihkan saat ikon dihancurkan.

Modul Blockly.utils.dom menyediakan antarmuka yang rapi untuk membuat instance 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.
  );
}

Menampilkan ukuran

Metode getSize menampilkan ukuran ikon, sehingga renderer dapat membuat blok menjadi cukup lebar.

Ukurannya dalam "unit ruang kerja" arbitrer (yang tidak berubah sebagai ruang kerja skala perubahan).

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

Tetapkan pesanan

Ikon memiliki urutan statis dalam blok. Misalnya, mutator bawaan ikon selalu ditampilkan di depan ikon komentar, yang ditampilkan di depan ikon peringatan.

Urutan dikontrol oleh nilai yang ditampilkan oleh getWeight . Ikon dengan bobot yang lebih positif dirender setelah ikon dengan bobot yang lebih sedikit dan bobot positif.

getWeight() {
  return 10;
}

Catatan: bobot hanya diperiksa jika ikon ditambahkan ke blok, jadi bobot dinamis tidak didukung.

Mengimplementasikan perilaku onclick

Banyak ikon bersifat interaktif dan melakukan sesuatu saat diklik. Misalnya, semua ikon bawaan menampilkan balon saat diklik. Anda dapat gunakan metode onClick untuk menerapkannya.

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

Merespons perubahan blok

Beberapa ikon juga perlu merespons perubahan dalam blok, khususnya perubahan ke kemampuan edit dan keterciutkan.

Kemudahan diedit

Jika ikon Anda seharusnya berperilaku berbeda bergantung pada apakah blok tersebut dapat diedit atau tidak (misalnya, tidak dapat diklik saat blok tidak diedit), terapkan metode updateEditable. Metode ini dipanggil secara otomatis ketika status blok yang dapat diedit berubah.

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

Menurun

Beberapa ikon ditampilkan saat blok diciutkan, tetapi secara default tidak. Jika Anda ingin ikon Anda ditampilkan, ganti Metode isShownWhenCollapsed untuk menampilkan true.

isShownWhenCollapsed() {
  return true;
}

Kemudian, ganti metode updateCollapsed.

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

Membuang ikon

Ikon harus membersihkan elemen dom atau referensi eksternal ketika mereka dibuang. Secara default, apa pun yang ditambahkan ke this.svgRoot akan dihancurkan, tetapi referensi lain harus dibersihkan secara manual. Seharusnya, dilakukan dengan metode dispose.

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

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