Gestion du rendu

Le système de gestion de rendu indique au rendu quand afficher à nouveau les blocs. Elle garantit que lorsqu'un bloc est modifié (par exemple, lorsque des valeurs de champ sont définies ou que des entrées sont ajoutées), la forme du bloc est mise à jour pour correspondre.

Quand s'en occuper ?

Vous devez interagir avec ce système dans les cas suivants:

  • Ajout de méthodes à Blockly qui modifient la forme du volume
  • Ajout de méthodes à Blockly qui reposent sur des informations de taille ou de positionnement mises à jour pour un bloc.

Fonctionnement

  1. Mise en file d'attente automatique Chaque fois qu'un bloc est modifié, Blockly "met en file d'attente" un rendu pour ce bloc. Voici quelques exemples de modifications qui mettent un rendu en file d'attente:

    • Définir la valeur d'un champ
    • Ajout ou suppression d'une entrée
    • Connecter ou déconnecter un bloc enfant

  2. Créez un ensemble. Lorsqu'un bloc est mis en file d'attente, le système de gestion de rendu l'ajoute, ainsi que tous ses blocs parents, à un ensemble de blocs qui doivent être à nouveau affichés.

  3. Demandez à être rappelé. Le système de gestion de rendu demande ensuite un rappel à l'aide de requestAnimationFrame. Ce rappel est appelé par le navigateur juste avant que le frame actuel ne soit affiché.

  4. Rendu à nouveau l'ensemble (sous forme d'arborescence) Lorsque le rappel requestAnimationFrame est appelé, le système de gestion de rendu affiche chaque bloc de l'ensemble, des blocs feuilles aux blocs racines. Cela garantit que les blocs enfants disposent d'informations de taille précises avant que leurs blocs parents ne soient affichés, afin que les blocs parents puissent s'étirer autour de leurs enfants.

Fonctionnement

Le fait d'attendre juste avant le rendu du frame actuel permet au système de gestion de rendu de dédupliquer les requêtes de rendu. Si les blocs étaient toujours affichés immédiatement, le même bloc pourrait s'afficher inutilement plusieurs fois de suite. Au lieu de cela, les requêtes de rendu sont regroupées, et chaque bloc modifié n'est dessiné qu'une seule fois à la fin du frame, une fois son état finalisé. La déduplication des opérations de rendu rend Blockly beaucoup plus efficace.

Par exemple, l'insertion d'un bloc entre deux autres met en file d'attente 11 rendus, mais seuls trois se produisent (un pour chaque bloc). Autrement dit, vos performances ont été multipliées par 3,6.

Comment l'utiliser ?

Vous ne devriez généralement pas avoir à vous soucier du système de gestion de rendu, car il fonctionne automatiquement lorsque vous modifiez un bloc. Mais il y a quelques cas où vous devez interagir directement avec elle.

Rendus de la file d'attente

Si vous ajoutez à Blockly une nouvelle méthode qui devrait mettre à jour la forme d'un bloc, vous devez appeler BlockSvg.prototype.queueRender pour rendre le bloc en file d'attente.

Attendre la fin du rendu

Si vous ajoutez à Blockly une nouvelle méthode nécessitant des informations de dimensionnement ou de positionnement mises à jour pour un bloc, vous devez attendre la promesse renderManagement.finishQueuedRenders(). Cette promesse est résolue une fois les rendus en file d'attente terminés ou immédiatement s'il n'y en a pas.

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

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

Déclencher les rendus en file d'attente immédiatement

Si vous ajoutez une nouvelle méthode à Blockly qui nécessite des informations de dimensionnement ou de positionnement mises à jour sur un bloc, et que vous ne pouvez pas attendre le frame suivant pour un rendu, vous pouvez appeler renderManagement.triggerQueuedRenders pour forcer les rendus en file d'attente à se produire immédiatement.

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

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

En général, vous ne souhaitez pas effectuer cette opération, car elle est moins performante. Elle n'est nécessaire que dans les cas où un retard entraîne une mauvaise expérience utilisateur. Par exemple, les repères d'insertion nécessitent des informations de positionnement. Il est important qu'ils fournissent un retour immédiat aux utilisateurs afin de déclencher un rendu immédiat.

Il existe également quelques endroits dans le cœur où il déclenche des rendus immédiats pour des raisons de rétrocompatibilité. Elles seront supprimées dans la version 11.