Pengelolaan render

Sistem pengelolaan render memberi tahu renderer kapan harus merender ulang blok. Metode ini memastikan bahwa saat blok dimodifikasi (misalnya, nilai kolom ditetapkan, atau input ditambahkan), bentuk blok akan diperbarui agar sesuai.

Kapan harus mengurus

Anda perlu berinteraksi dengan sistem ini jika Anda:

  • Menambahkan metode ke Blockly yang mengubah bentuk blok.
  • Menambahkan metode ke Blockly yang mengandalkan informasi ukuran atau posisi yang diperbarui tentang sebuah blok.

Cara kerjanya

  1. Buat antrean secara otomatis. Setiap kali sebuah blok dimodifikasi, Blockly "mengantrekan" render untuk blok tersebut. Beberapa contoh modifikasi yang mengantrekan render adalah:

    • Menetapkan nilai kolom
    • Menambahkan atau menghapus input
    • Menyambungkan atau memutuskan sambungan blok turunan

  2. Buat set. Saat blok dimasukkan ke dalam antrean, sistem pengelolaan render akan menambahkannya, dan semua blok induknya, ke kumpulan blok yang perlu dirender ulang.

  3. Minta ditelepon balik. Kemudian, sistem pengelolaan render meminta callback menggunakan requestAnimationFrame. Callback ini dipanggil oleh browser kanan sebelum frame saat ini digambar.

  4. Merender ulang kumpulan (sebagai hierarki). Saat callback requestAnimationFrame dipanggil, sistem pengelolaan render akan merender setiap blok dalam kumpulan dari blok daun ke blok root. Hal ini memastikan bahwa blok turunan memiliki informasi ukuran yang akurat sebelum blok induknya dirender sehingga blok induk dapat membentang di sekitar turunannya.

Mengapa cara kerjanya adalah

Menunggu untuk merender ulang blok hingga tepat sebelum frame saat ini digambar memungkinkan sistem pengelolaan render menghapus duplikat permintaan rendering. Jika blok selalu dirender dengan seketika, blok yang sama mungkin tidak perlu dirender beberapa kali berturut-turut. Sebagai gantinya, permintaan render dikelompokkan, dan setiap blok yang diubah hanya digambar satu kali di akhir frame, setelah statusnya diselesaikan. Operasi rendering duplikasi membuat Blockly jauh lebih efisien.

Misalnya, menyisipkan satu blok di antara dua blok lainnya akan mengantrekan 11 render, tetapi hanya 3 yang benar-benar terjadi (satu untuk setiap blok). Itu adalah peningkatan performa 3,6x lipat.

Cara menggunakannya

Biasanya Anda tidak perlu memedulikan sistem pengelolaan render, karena sistem ini bekerja secara otomatis saat Anda memodifikasi blok. Tetapi ada beberapa kasus di mana Anda harus berinteraksi secara langsung.

Render antrean

Jika menambahkan metode baru ke Blockly yang harus memperbarui bentuk blok, Anda perlu memanggil BlockSvg.prototype.queueRender untuk mengantrekan rendering blok.

Tunggu hingga render selesai

Jika Anda menambahkan metode baru ke Blockly yang memerlukan informasi ukuran atau posisi posisi tentang blok yang diperbarui, Anda harus menunggu janji renderManagement.finishQueuedRenders(). Promise ini di-resolve setelah render dalam antrean selesai, atau segera jika tidak ada render dalam antrean.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

Memicu render dalam antrean segera

Jika Anda menambahkan metode baru ke Blockly yang memerlukan informasi ukuran atau posisi posisi tentang blok yang diperbarui, dan Anda tidak dapat menunggu hingga frame berikutnya selesai untuk setiap render, Anda dapat memanggil renderManagement.triggerQueuedRenders untuk memaksa render yang diantrekan agar segera terjadi.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

Secara umum, Anda tidak ingin melakukan ini karena performanya lebih rendah. Ini hanya diperlukan jika penundaan menyebabkan pengalaman pengguna yang buruk. Misalnya, penanda penyisipan memerlukan informasi pemosisian, dan penting bagi penanda penyisipan memberikan masukan langsung kepada pengguna, agar dapat memicu rendering langsung.

Ada juga beberapa tempat di inti yang memicu rendering langsung karena alasan kompatibilitas mundur. Fitur ini akan dihapus di v11.