Membuat perender kustom

Untuk membuat perender kustom, Anda harus membuat subclass class Renderer. Lihat dokumen konsep perender untuk mengetahui informasi selengkapnya tentang apa itu perender dan fungsinya.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

Tanpa penyesuaian apa pun, perender default akan terlihat seperti ini:

perender dasar

Anda juga dapat membuat subclass salah satu perender bawaan lainnya, lalu mengganti bagian-bagiannya.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

Membuat subclass komponen perender lainnya

Bentuk sebenarnya dari blok ditentukan oleh subkomponen perender.

Secara default, class Renderer menyediakan versi yang berfungsi dari semua komponen perender. Hal ini memungkinkan Anda mengubah satu komponen, tanpa harus khawatir dengan komponen lainnya.

Misalnya, jika ingin mengubah bentuk koneksi, Anda dapat mengganti konstanta tanpa harus menyentuh komponen lain.

Lihat dokumen komponen perender untuk mengetahui informasi selengkapnya tentang fungsi setiap komponen.

Mengganti metode factory

Setelah membuat subclass komponen perender, Anda harus mengganti metode factory Renderer untuk komponen yang Anda buat subclass-nya. Hal ini memungkinkan perender menghubungkan berbagai komponen secara tepat.

Ada metode untuk setiap jenis komponen:

Mendaftarkan perender

Terakhir, setelah menyelesaikan pembuatan perender kustom, Anda harus mendaftarkannya. Tindakan ini mengaitkan perender dengan string sehingga Anda dapat meneruskannya ke opsi konfigurasi.

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

const workspace = Blockly.inject(blocklyDiv, {
  renderer: 'custom_renderer',
});