Pengelolaan render

Sistem pengelolaan render memberi tahu perender kapan harus merender ulang blok. Hal ini memastikan bahwa saat blok diubah (misalnya, nilai kolom ditetapkan, atau input ditambahkan), bentuk blok akan diperbarui agar cocok.

Kapan harus melakukan perawatan

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 blok.

Cara kerjanya

  1. Buat antrean secara otomatis. Setiap kali blok diubah, Blockly "queues" a {i>rendered<i} 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 telepon balik. Kemudian sistem pengelolaan render meminta menggunakan requestAnimationFrame. Callback ini mendapatkan dipanggil oleh browser kanan sebelum frame saat ini digambar.

  4. Render ulang set (sebagai hierarki). Saat callback requestAnimationFrame dipanggil, sistem pengelolaan render 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 meluas di sekitar turunannya.

Mengapa cara ini bekerja?

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

Misalnya, menyisipkan satu blok di antara dua blok lainnya akan mengantrekan 11 rendering, tetapi hanya 3 yang benar-benar terjadi (satu untuk setiap blok). Peningkatan performa ini 3,6 kali lipat.

Cara menggunakannya

Biasanya Anda tidak perlu memperhatikan sistem manajemen {i>render<i}, karena bekerja secara otomatis ketika Anda memodifikasi blok. Tetapi ada beberapa kasus di mana Anda harus berinteraksi dengannya secara langsung.

Render antrean

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

Tunggu hingga render selesai

Jika menambahkan metode baru ke Blockly yang memerlukan informasi ukuran atau pemosisi yang diperbarui tentang blok, Anda harus menunggu promise renderManagement.finishQueuedRenders(). Promise ini di-resolve setelah render yang diantrean selesai, atau langsung jika tidak ada render yang diantrean.

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

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

Pemicu proses render yang diantrekan segera dipicu

Jika Anda menambahkan metode baru ke Blockly yang memerlukan pembaruan ukuran atau informasi posisi tentang blok, dan Anda tidak bisa menunggu sampai agar setiap {i>render<i} selesai, Anda bisa memanggil renderManagement.triggerQueuedRenders untuk memaksa proses render apa pun yang diantrekan segera.

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

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

Secara umum, Anda tidak ingin melakukannya karena performanya kurang baik. Itu hanya diperlukan jika penundaan menyebabkan pengalaman pengguna yang buruk. Misalnya, penanda penyisipan memerlukan informasi pemosisian, dan penanda penyisipan harus memberikan masukan langsung kepada pengguna, sehingga memicu rendering langsung.

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