Membuat perender baru

Untuk membuat perender kustom, Anda perlu membuat subclass dari class Renderer. Lihat dokumen konsep perender untuk mengetahui informasi selengkapnya tentang pengertian perender dan fungsinya.

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

Tanpa penyesuaian, perender default akan terlihat seperti ini:

perender dasar

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

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

Membuat subclass komponen perender lainnya

Bentuk blok yang sebenarnya ditentukan oleh subkomponen perender.

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

Misalnya, jika ingin mengubah bentuk koneksi, Anda dapat mengganti constants tanpa harus menyentuh komponen lainnya.

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

Mengganti metode factory

Setelah membuat subclass komponen render, Anda harus mengganti metode factory Renderer untuk komponen yang di-subclass-nya. Hal ini memungkinkan perender menghubungkan komponen yang berbeda dengan benar.

Ada metode untuk setiap jenis komponen:

Mendaftarkan perender

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

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

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