Zarządzanie renderowaniem

System zarządzania renderowaniem informuje mechanizm renderujący o tym, kiedy ponownie bloki. Zapewnia to, że po zmodyfikowaniu bloku (np. ustawieniu wartości pól, lub dane wejściowe) kształt bryły zostanie zaktualizowany w celu dopasowania.

Kiedy należy zwrócić uwagę

Musisz korzystać z tego systemu, jeśli:

  • Dodano metody do Blockly, które modyfikują kształt bryły.
  • Dodawanie do Blockly metod, które opierają się na zaktualizowanym rozmiarze lub pozycjonowaniu o blokadzie.

Jak to działa

  1. Dodaj automatycznie do kolejki. Gdy blok zostanie zmodyfikowany, Blockly „wstawia” renderowanie tego bloku do kolejki. Przykłady modyfikacji powodujących kolejkę renderowania to:

    • Ustawianie wartości pola
    • Dodawanie i usuwanie danych wejściowych
    • Łączenie i odłączanie blokady dziecka

  2. Utwórz zestaw. Gdy blok znajduje się w kolejce, system zarządzania renderowaniem dodaje go i wszystkie jego bloki nadrzędne do zestawu bloków, które mają wyrenderowano ponownie.

  3. Poproś o oddzwonienie. Następnie system zarządzania renderowaniem wysyła żądanie wywołanie zwrotne przy użyciu: requestAnimationFrame. To wywołanie zwrotne otrzymuje wywołana przez przeglądarkę w prawo przed narysowaniem bieżącej klatki.

  4. Wyrenderuj ponownie zestaw (jako drzewo). Gdy wywoływana jest funkcja requestAnimationFrame, system zarządzania renderowaniem renderuje wszystkie bloki w zbiorze, od bloków liściowych do bloków głównych. Dzięki temu bloki podrzędne mają dokładne informacje o swoim rozmiarze, zanim ich bloki nadrzędne zostaną wyrenderowane, co pozwala blokom nadrzędnym rozciągać się wokół bloków podrzędnych.

Dlaczego to działa tak, jak działa

Oczekiwanie na ponowne wyrenderowanie bloków do momentu, aż bezpośrednio przed wyświetleniem bieżącej ramki zezwala system zarządzania renderowaniem i usuwać duplikaty żądań renderowania. Gdyby blokady były zawsze renderowane natychmiast, ten sam blok może być niepotrzebnie renderowany wiele razy z rzędu. Żądania renderowania są grupowane, a każdy zmieniony blok jest rysowany tylko raz na końcu ramki, po upływie sfinalizowana. Usuwanie duplikatów operacji renderowania znacznie zwiększa wydajność Blockly.

Jeśli na przykład wstawisz jeden blok między dwoma innymi, kolejka będzie zawierać 11 renderowań, ale faktycznie zostanie wykonanych tylko 3 (po jednym dla każdego bloku). Oznacza to 3,6-krotny wzrost wydajności.

Jak używać tej funkcji

Zazwyczaj nie musisz się martwić systemem zarządzania renderowaniem, ponieważ działa on automatycznie po modyfikacji bloku. Jednak jest kilka przypadków, w których musisz wejść w bezpośrednią interakcję z nim.

Kolejka renderowania

Jeśli dodasz do Blockly nową metodę, która ma zmienić kształt bloku, musisz wywołać funkcję BlockSvg.prototype.queueRender, aby umieścić w kole renderowanie bloku.

Poczekaj na zakończenie renderowania

Jeśli dodajesz do Blockly nową metodę, która wymaga zaktualizowania rozmiaru lub pozycjonowania informacji o bloku, poczekaj Obietnica renderManagement.finishQueuedRenders(). Ta obietnica wygaśnie po wszystkie renderowanie w kolejce zostaną zakończone lub natychmiast, jeśli nie ma żadnych renderowania w kolejce.

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

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

Wyzwalacz w kolejce renderuje się natychmiast

Jeśli dodajesz do Blockly nową metodę, która wymaga zaktualizowania rozmiaru lub pozycjonowania informacji o bloku i nie można czekać do dla dowolnego renderowania, można wywołać funkcję renderManagement.triggerQueuedRenders, aby wymusić renderowanie w kolejce natychmiast.

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

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

Ogólnie nie jest to zalecane ze względu na mniejszą wydajność. Jest tylko konieczne w przypadkach, gdy opóźnienie wpływa na wrażenia użytkowników. Przykład: Znaczniki wstawiania wymagają informacji o pozycjonowaniu. pozwalają użytkownikom natychmiast uzyskiwać informacje zwrotne, gdy użytkownicy

Jest też kilka miejsc w jądrze, w których wywołuje ono natychmiastowe renderowanie ze względu na zgodność wsteczną. Zamierzamy je usunąć w wersji 11.