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:
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:
makeConstants_
makeRenderInfo_
makePathObject
(perlu diperhatikan bahwa tidak boleh ada garis bawah)makeDrawer_
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',
});