Ikon komentar penggantian

Anda dapat mengganti ikon komentar bawaan. Misalnya, Anda mungkin ingin balon pop-up komentar terlihat berbeda.

Untuk mengganti ikon komentar, perluas CommentIcon, ganti metode yang dipilih di ICommentIcon, dan daftarkan ikon baru Anda.

Catatan: Blockly memiliki tiga jenis ikon bawaan: komentar, peringatan, dan pengubah. Hanya ikon komentar yang dapat diganti.

Extend CommentIcon

Mulai dengan memperpanjang CommentIcon.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Mengganti metode di ICommentIcon dan Icon

Untuk menyesuaikan ikon, Anda dapat mengganti metode di ICommentIcon (dijelaskan di bagian berikut) dan Blockly.icons.Icon (dijelaskan di Membuat ikon kustom). Jangan mengganti getType, yang harus menampilkan 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 ikon Anda secara teknis tidak memiliki balon, Anda harus menyimpan informasi visibilitas di class Anda sehingga status tersimpan tetap dipertahankan. Jika tidak, Anda akan kehilangan informasi dari pengguna jika Anda memuat penyimpanan yang mencakup apakah komentar dibuka atau tidak.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

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

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

getBubbleSize() {
  return this.bubbleSize;
}

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

ICommentIcon juga memerlukan metode getBubbleLocation dan setBubbleLocation, yang mendapatkan dan menyetel lokasi balon di ruang kerja.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

Menyimpan dan memuat

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,
    x: this.bubbleLocation.x,
    y: this.bubbleLocation.y,
  }
}

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

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

Mendaftarkan ikon Anda

Terakhir, batalkan pendaftaran ikon komentar yang ada dan daftarkan ikon komentar Anda agar Blockly dapat membuat instance-nya. Gunakan string 'comment' untuk pembatalan pendaftaran dan IconTypes.COMMENT untuk pendaftaran.

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

Setelah Anda mendaftarkan ikon, Blockly akan menggunakannya sebagai pengganti ikon komentar bawaan, seperti saat pengguna mengklik "Tambahkan Komentar" di menu konteks atau Anda memanggil myBlock.setCommentText().