Zarządzanie renderowaniem

System zarządzania renderowaniem informuje mechanizm o tym, kiedy ponownie wyrenderować bloki. Po zmodyfikowaniu bloku (np. ustawieniu wartości pól lub dodaniu danych wejściowych) kształt bryły zostanie zaktualizowany w celu dopasowania.

Kiedy należy to obchodzić

Z tym systemem musisz wejść, jeśli:

  • Dodawanie do Blockly metod, które zmieniają kształt bryły.
  • Dodanie do Blockly metod, które korzystają ze zaktualizowanych informacji o rozmiarze lub pozycjonowaniu bloku.

Jak to działa

  1. Automatycznie dodaj do kolejki. Po zmodyfikowaniu bloku Blockly „kolejkuje” jego renderowanie. Oto kilka przykładów modyfikacji oczekujących renderowania:

    • Ustawianie wartości pola
    • Dodawanie i usuwanie danych wejściowych
    • Łączenie i rozłączanie blokady podrzędnej

  2. Utwórz zestaw. Gdy blok znajduje się w kolejce, system zarządzania renderowaniem dodaje ten blok wraz ze wszystkimi jego blokami nadrzędnymi do zestawu bloków, które muszą zostać ponownie wyrenderowane.

  3. Poproś o oddzwonienie. Następnie system zarządzania renderowaniem zażąda wywołania zwrotnego za pomocą requestAnimationFrame. To wywołanie zwrotne jest wywoływane przez przeglądarkę w prawo przed wyświetleniem bieżącej klatki.

  4. Ponownie wyrenderuj zestaw (jako drzewo). Po wywołaniu wywołania zwrotnego requestAnimationFrame system zarządzania renderowaniem wyrenderuje wszystkie bloki w zestawie – od bloków liści po bloki główne. Dzięki temu bloki podrzędne będą miały dokładne informacje o rozmiarze, zanim ich bloki nadrzędne zostaną wyrenderowane. W ten sposób bloki nadrzędne będą mogły rozciągać się wokół elementów podrzędnych.

Dlaczego to działa?

Oczekiwanie na ponowne wyrenderowanie bloków przed pobraniem bieżącej ramki pozwala systemowi zarządzania renderowaniem usuwać duplikaty żądań renderowania. Gdyby bloki były zawsze renderowane natychmiast, ten sam blok może być niepotrzebnie renderowany wiele razy z rzędu. Zamiast tego żądania renderowania są grupowane, a każdy zmieniony blok jest rysowany tylko raz na końcu klatki, po sfinalizowaniu jego stanu. Deduplikacja operacji renderowania znacznie zwiększa wydajność Blockly.

Na przykład wstawienie 1 bloku między 2 innymi kolejkami powoduje renderowanie 11 wyrenderowań, ale w rzeczywistości występują tylko 3 bloki (po jednym na każdy blok). To 3,6-krotny wzrost wydajności.

Jak używać tego narzędzia

System zarządzania renderowaniem zwykle nie powinien poświęcać czasu, ponieważ działa on automatycznie po zmodyfikowaniu blokady. ale są przypadki, w których trzeba wchodzić w bezpośrednią interakcję.

Kolejka renderowania

Jeśli dodajesz do Blockly nową metodę, która powinna zmieniać kształt bloku, musisz wywołać metodę BlockSvg.prototype.queueRender, by umieścić renderowany blok w kolejce.

Poczekaj na zakończenie renderowania

Jeśli dodajesz do Blockly nową metodę, która wymaga zaktualizowania informacji o rozmiarze lub pozycjonowaniu bloku, poczekaj na obietnicę renderManagement.finishQueuedRenders(). Ta obietnica znika po zakończeniu renderowania w kolejce lub od razu, jeśli nie ma żadnych renderowanych w kolejce.

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

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

Natychmiast aktywuj renderowanie w kolejce

Jeśli dodajesz do Blockly nową metodę, która wymaga zaktualizowania informacji o rozmiarze lub pozycjonowaniu bloku, oraz nie możesz czekać na zakończenie renderowania w przypadku następnej ramki, możesz wywołać metodę renderManagement.triggerQueuedRenders, aby wymusić natychmiastowe renderowanie w kolejce.

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

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

Ogólnie nie warto tego robić, ponieważ jest mniej wydajny. Jest to konieczne tylko wtedy, gdy opóźnienie obniża komfort korzystania z usługi. Na przykład znaczniki wstawiania wymagają informacji o pozycjonowaniu. Ważne są, aby przekazywały użytkownikom natychmiastową informację zwrotną, dzięki czemu wywołują natychmiastowe renderowanie.

Jest też kilka miejsc w rdzeni, które uruchamiają natychmiastowe renderowanie ze względu na zgodność wsteczną. Zamierzamy usunąć je w wersji 11.