Gestione del rendering

Il sistema di gestione del rendering indica al render quando eseguire nuovamente il rendering dei blocchi. Assicura che quando un blocco viene modificato (ad es. vengono impostati i valori dei campi, o input, la forma del blocco viene aggiornata di conseguenza.

Quando intervenire

Devi interagire con questo sistema se sei:

Aggiunta di metodi a Blockly che modificano la forma del blocco.
Aggiunta di metodi a Blockly che si basano su informazioni aggiornate sulle dimensioni o sul posizionamento di un blocco.

Come funziona

Metti in coda automaticamente. Ogni volta che un blocco viene modificato, Blockly mette in coda a per il blocco in questione. Alcuni esempi di modifiche che accodano un rendering sono:
- Impostare il valore di un campo
- Aggiunta o rimozione di un input
- Collegare o scollegare un blocco bambini
Crea un set. Quando un blocco viene messo in coda, il sistema di gestione del rendering lo aggiunge, insieme a tutti i blocchi principali, a un insieme di blocchi che devono essere sottoposti a nuovo rendering.
Richiedi di essere richiamato. Il sistema di gestione del rendering richiede quindi callback utilizzando requestAnimationFrame. Questo callback viene chiamato dal browser subito prima che venga disegnato il frame corrente.
Esegui nuovamente il rendering dell'insieme (come albero). Quando viene chiamato il callback requestAnimationFrame, il sistema di gestione del rendering esegue il rendering di ogni blocco del set, dai blocchi foglia ai blocchi principali. In questo modo, i blocchi secondari avranno informazioni accurate sulle dimensioni prima che i blocchi principali vengano visualizzati, in modo che i blocchi principali possano estendersi ai blocchi secondari.

Perché funziona in questo modo

L'attesa di eseguire il rendering dei blocchi fino a quando il frame corrente è disegnato consente il sistema di gestione del rendering per deduplicare le richieste di rendering. Se i blocchi fossero sempre visualizzati immediatamente, lo stesso blocco potrebbe essere visualizzato più volte di seguito inutilmente. Le richieste di rendering vengono invece raggruppate e ogni blocco modificato viene disegnato una sola volta alla fine del frame, dopo che il relativo stato è stato finalizzato. La deduplicazione delle operazioni di rendering rende Blockly molto più efficiente.

Ad esempio, l'inserimento di un blocco tra altri due rende la coda 11, ma 3 (uno per ogni blocco). Un aumento delle prestazioni di 3,6 volte.

Modalità d'uso

In genere non devi preoccuparti del sistema di gestione del rendering, perché funziona automaticamente quando modifichi un blocco. Ma ci sono alcuni casi in cui devi interagire direttamente.

Rendering in coda

Se aggiungi un nuovo metodo a Blockly che deve aggiornare la forma di un blocco, devi chiamare BlockSvg.prototype.queueRender per mettere in coda il rendering del blocco.

Attendi il completamento del rendering

Se aggiungi un nuovo metodo a Blockly che richiede informazioni aggiornate sulle dimensioni o sul posizionamento di un blocco, devi attendere la promessa renderManagement.finishQueuedRenders(). Questa promessa si risolve dopo vengono completati tutti i rendering in coda o immediatamente se non sono presenti rendering in coda.

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

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

Attiva immediatamente i rendering in coda

Se aggiungi un nuovo metodo a Blockly che richiede informazioni aggiornate sulle dimensioni o sul posizionamento di un blocco e non puoi attendere il frame successivo per il completamento di eventuali rendering, puoi chiamare renderManagement.triggerQueuedRenders per forzare l'esecuzione immediata di eventuali rendering in coda.

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

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

In generale, si sconsiglia di eseguire questa operazione perché le prestazioni sono inferiori. È necessario solo nel caso in cui un ritardo causi un'esperienza utente negativa. Ad esempio: gli indicatori di inserimento necessitano di informazioni di posizionamento, ed è importante che Gli indicatori di inserimento forniscono agli utenti un feedback immediato e attivano immediatamente eseguire il rendering.

Ci sono anche alcuni punti in cui attivare il rendering immediato dei contenuti per motivi di compatibilità con le versioni precedenti. È prevista la rimozione di questi elementi nella versione 11.