Gestion du rendu

Le système de gestion de rendu indique au moteur de rendu à quel moment il doit réafficher blocs. Il s'assure 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 en conséquence.

Quand s'inquiéter

Vous devez interagir avec ce système si vous êtes :

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

Fonctionnement

  1. Mise en file d'attente automatique. Chaque fois qu'un bloc est modifié, Blockly "met en file d'attente" a pour ce bloc. Exemples de modifications entraînant la mise en file d'attente d'un rendu sont:

    • Définir la valeur d'un champ
    • Ajouter ou supprimer une entrée
    • Associer ou dissocier 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.

  3. Demandez à être rappelé. Ensuite, le système de gestion de rendu demande une à l'aide de requestAnimationFrame. Ce rappel reçoit appelé par le navigateur à droite avant que le cadre actuel ne soit dessiné.

  4. Réaffichez l'ensemble (sous forme d'arborescence). Lorsque le rappel requestAnimationFrame est appelé, le système de gestion du rendu affiche chaque bloc de l'ensemble, des blocs de feuilles aux blocs racine. Ainsi, les blocs enfants disposent des informations précises sur la taille avant l'affichage des blocs parents. des blocs parents peuvent s'étirer autour de leurs enfants.

Fonctionnement et fonctionnement

Le fait d'attendre le rendu des blocs jusqu'à ce que le cadre actuel soit dessiné permet au système de gestion de rendu de dédupliquer les demandes de rendu. Si les blocages étaient s'affiche toujours immédiatement, un même bloc peut s'afficher inutilement plusieurs fois de suite. Au lieu de cela, les requêtes de rendu sont groupé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 files d'attente 11 effectue le rendu, mais 3 se produisent réellement (un pour chaque bloc). Cela représente un gain de performances de 3,6 fois.

Comment l'utiliser ?

En général, vous n'avez pas besoin de vous soucier du système de gestion du rendu, car il fonctionne automatiquement lorsque vous modifiez un bloc. Mais il y a quelques cas où vous devez interagir avec elle directement.

Mettre en file d'attente des rendus

Si vous ajoutez une méthode à Blockly qui doit mettre à jour la forme d'un bloc, vous devez appeler BlockSvg.prototype.queueRender pour mettre en file d'attente l'affichage du bloc.

Attendre la fin de l'affichage

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

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

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

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

Si vous ajoutez une méthode à Blockly qui nécessite de mettre à jour les informations de dimensionnement ou de positionnement d'un bloc, et que vous ne pouvez pas attendre le frame suivant pour que les rendus soient terminés, 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, ce n'est pas utile, car les performances sont moins bonnes. Il est uniquement nécessaire lorsqu'un retard nuit à l'expérience utilisateur. Par exemple, les repères d'insertion ont besoin d'informations de positionnement. Il est important qu'ils fournissent aux utilisateurs des commentaires immédiats, afin qu'ils déclenchent un rendu immédiat.

À quelques endroits du noyau, il déclenche des rendus immédiats pour de rétrocompatibilité. Ils devraient être supprimés dans la version 11.