Mengganti ikon bawaan

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

Ikon komentar dapat diganti. Artinya, Anda dapat memberi tahu Blockly untuk membuat instance class ikon komentar Anda sendiri saat memanggil metode seperti myBlock.setCommentText(). Anda dapat melakukannya jika, misalnya, Anda ingin balon pop-up komentar terlihat berbeda.

Ikon peringatan dan mutator tidak dapat diganti.

Ikon komentar

Untuk mengganti ikon komentar, Anda harus membuat ikon kustom yang mengimplementasikan antarmuka ICommentIcon, lalu mendaftarkannya.

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 memiliki teks. Metode getText harus menampilkan teks komentar. Metode setText harus menetapkan teks komentar dan memperbarui visual apa pun.

getText() {
  return this.text;
}

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

Balon

Ikon komentar kustom Anda harus mengimplementasikan antarmuka IHasBubble untuk mendukung serialisasi. Meskipun secara teknis ikon Anda tidak memiliki balon, Anda harus menyimpan informasi visibilitas pada class agar status yang disimpan tetap dipertahankan. Jika tidak, Anda akan kehilangan informasi dari pengguna jika Anda memuat penyimpanan yang mencakup apakah komentar tersebut terbuka atau tidak.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Untuk informasi selengkapnya tentang balon, lihat Menggunakan balon pop-up.

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

getBubbleSize() {
  return this.bubbleSize;
}

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

Simpan dan muat

Ikon komentar kustom Anda harus mengimplementasikan antarmuka ISerializable. Status harus sesuai dengan antarmuka CommentState.

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 harus mendaftarkan ikon Anda agar Blockly dapat membuat instance-nya. Pastikan untuk menggunakan jenis IconTypes.COMMENT.

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