Mengganti ikon bawaan

Blockly memiliki tiga jenis ikon bawaan: komentar, peringatan, dan mutator.

Ikon komentar dapat diganti. Ini berarti Anda dapat memberi tahu Blockly untuk membuat instance kelas ikon komentar Anda sendiri saat Anda memanggil metode seperti myBlock.setCommentText(). Anda mungkin perlu melakukan ini jika, misalnya, Anda ingin balon pop-up komentar agar terlihat berbeda.

Ikon peringatan dan mutator tidak dapat diganti.

Ikon komentar

Untuk mengganti ikon komentar, Anda perlu membuat ikon khusus yang mengimplementasikan antarmuka ICommentIcon, lalu daftarkan.

Penerapan dasar

Sebelum menambahkan logika khusus komentar, selesaikan penerapan dasar ikon kustom Anda.

Jenis

Metode getType harus menampilkan ikon komentar IconType.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

Teks

Antarmuka ICommentIcon mengharuskan komentar berisi teks. Metode getText harus menampilkan teks komentar. Metode setText harus mengatur teks komentar dan memperbarui visual apa pun.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Balon

Ikon komentar kustom Anda harus menerapkan antarmuka IHasBubble untuk mendukung serialisasi. Bahkan jika ikon Anda secara teknis tidak memiliki gelembung, Anda harus menyimpan informasi visibilitas di class Anda sehingga file yang disimpan dipertahankan. Jika tidak, Anda akan kehilangan informasi dari pengguna jika Anda memuat penyimpanan yang menyertakan apakah komentar tersebut bisa dibuka atau tidak.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

Untuk informasi lebih lanjut tentang balon, lihat Menggunakan balon pop-up.

Antarmuka ICommentIcon juga memerlukan metode getBubbleSize yang menampilkan ukuran, dan setBubbleSize yang menyetelnya. Alasan yang sama dari pembahasan sebelumnya menyimpan status meskipun ikon Anda secara teknis tidak memiliki balon yang berlaku di sini sebagai ya.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Simpan dan muat

Ikon komentar kustom Anda harus menerapkan ISerializable dalam antarmuka berbasis web yang sederhana. Negara bagian harus sesuai dengan CommentState dalam antarmuka berbasis web yang sederhana.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

Untuk mengetahui informasi selengkapnya tentang serialisasi ikon, lihat Menyimpan dan memuat ikon.

Pendaftaran

Terakhir, Anda perlu mendaftarkan ikon Anda agar Blockly dapat membuat instance-nya. Menjadi pastikan Anda menggunakan jenis IconTypes.COMMENT.

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