Membuat jenis ikon baru

Untuk membuat ikon kustom, Anda perlu menerapkan antarmuka IIcon. Atribut ini memberi tahu Blockly cara Anda ingin ikon dirender, apa yang Anda ingin lakukan jika diklik, dll.

Sebaiknya buat subclass dari class abstrak Icon, karena sudah menyediakan implementasi default dari banyak metode dalam antarmuka 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);
  }
}

Menentukan jenis ikon

Metode getType menampilkan nilai yang mewakili jenis ikon. 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 berada pada blok.

Melakukan inisialisasi tampilan

Metode initView adalah tempat Anda membuat elemen SVG ikon yang berada di blok. Elemen baru harus berupa turunan elemen this.svgRoot agar otomatis dibersihkan saat ikon dihancurkan.

Modul Blockly.utils.dom menyediakan antarmuka yang bersih 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 yang cukup lebar untuknya.

Ukurannya ditetapkan dalam "unit ruang kerja" arbitrer (yang tidak akan berubah saat ruang kerja berubah skala).

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

Menetapkan pesanan

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

Urutan tersebut dikontrol oleh nilai yang ditampilkan oleh metode getWeight. Ikon dengan bobot lebih positif dirender setelah ikon dengan bobot positif lebih kecil.

getWeight() {
  return 10;
}

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

Mengimplementasikan perilaku onclick

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

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

Merespons perubahan blokir

Beberapa ikon juga ingin merespons perubahan dalam blok tersebut, khususnya perubahan terhadap kemampuan pengeditan dan tingkat diciutkan.

Kemudahan diedit

Jika ikon Anda harus berperilaku berbeda, bergantung pada apakah blok dapat diedit atau tidak (misalnya, tidak dapat diklik saat blok tidak dapat diedit), implementasikan metode updateEditable. Metode ini akan otomatis dipanggil saat status blok yang dapat diedit berubah.

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

Menciutkan

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

isShownWhenCollapsed() {
  return true;
}

Lalu, 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 saat dibuang. Secara default, apa pun yang ditambahkan ke this.svgRoot akan dihapus, tetapi referensi lain harus dihapus secara manual. Hal ini harus dilakukan dalam metode dispose.

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

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