Rendering-Management

Das Renderverwaltungssystem teilt dem Renderer mit, wann die Blöcke neu gerendert werden sollen. So wird sichergestellt, dass die Form des Blocks aktualisiert wird, wenn ein Block geändert wird (z. B. wenn Feldwerte festgelegt oder Eingaben hinzugefügt werden).

Wann ist es an der Zeit, sich um die Gesundheit zu kümmern?

Sie müssen mit diesem System interagieren, wenn Sie:

Methoden zu Blockly hinzufügen, die die Form des Blocks ändern.
Blockly-Methoden hinzufügen, die auf aktualisierten Informationen zur Größe oder Positionierung eines Blocks basieren

Funktionsweise

Automatisch in die Warteschlange stellen Immer wenn ein Block geändert wird, stellt Blockly die Verbindung in die Warteschlange a für diesen Block rendern. Beispiele für Änderungen, die ein Rendern in die Warteschlange stellen:
- Wert eines Felds festlegen
- Eingabe hinzufügen oder entfernen
- Verbindung zu einem untergeordneten Block herstellen oder aufheben
Erstellen Sie einen Satz. Wenn ein Block in die Warteschlange gestellt wird, fügt das Renderverwaltungssystem ihn und alle übergeordneten Blöcke einer Gruppe von Blöcken hinzu, die neu gerendert werden müssen.
Sie können einen Rückruf anfordern. Dann fordert das Rendering-Managementsystem mithilfe von requestAnimationFrame zurückrufen. Dieser Callback erhält rechts vor dem Zeichnen des aktuellen Frames aufgerufen.
Set (als Baum) noch einmal rendern Wenn der requestAnimationFrame-Callback aufgerufen wird, rendert das Renderverwaltungssystem jeden Block im Set, von Blattblöcken bis hin zu Stammblöcken. Dadurch wird sichergestellt, dass bevor die übergeordneten Blöcke gerendert werden, übergeordnete Blöcke können sich um ihre untergeordneten Elemente erstrecken.

So funktionierts

Wenn das System mit der Rendering-Verwaltung wartet, bis kurz vor dem Zeichnen des aktuellen Frames Blöcke noch einmal gerendert werden, können Rendering-Anfragen dedupliziert werden. Wenn Blockierungen immer sofort gerendert wird, kann derselbe Block unnötigerweise und zwar mehrmals hintereinander. Stattdessen werden die Renderinganfragen gruppiert und jeder geänderte Block wird nur einmal am Ende des Frames gezeichnet, nachdem sein Status endgültig festgelegt wurde. Durch das Deduplizieren von Renderingvorgängen wird Blockly viel effizienter.

Wenn Sie beispielsweise einen Block zwischen zwei andere einfügen, werden 11 Renderings angefordert, aber nur 3 werden tatsächlich ausgeführt (jeweils eins für jeden Block). Das entspricht einer Leistungssteigerung um das 3,6-Fache.

Verwendung

Normalerweise müssen Sie sich nicht um das Renderverwaltungssystem kümmern, da es automatisch funktioniert, wenn Sie einen Block ändern. Es gibt jedoch einige Fälle, in denen müssen Sie direkt damit interagieren.

Warteschlangendarstellungen

Wenn Sie Blockly eine neue Methode hinzufügen, mit der die Form eines Blocks aktualisiert werden soll, müssen Sie BlockSvg.prototype.queueRender aufrufen, um das Rendern des Blocks in die Warteschlange zu stellen.

Warten, bis die Renderings abgeschlossen sind

Wenn Sie eine neue Methode zu Blockly hinzufügen, die eine aktualisierte Größe oder zur Positionierung eines Blocks, sollten Sie warten, renderManagement.finishQueuedRenders(). Dieses Versprechen verfällt nach dem Alle Renderings in der Warteschlange werden abgeschlossen oder sofort, wenn keine Renderings in der Warteschlange vorhanden sind.

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

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

Auslöse sofort gewartete Renderings

Wenn Sie Blockly eine neue Methode hinzufügen, für die aktualisierte Informationen zur Größe oder Positionierung eines Blocks erforderlich sind, und Sie nicht bis zum nächsten Frame warten können, bis alle Renderings abgeschlossen sind, können Sie renderManagement.triggerQueuedRenders aufrufen, um alle gepufferten Renderings sofort auszuführen.

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

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

Im Allgemeinen sollten Sie dies nicht tun, da die Leistung weniger gut ist. Sie ist nur dann erforderlich, wenn eine Verzögerung zu einer schlechten Nutzererfahrung führt. Beispiel: Einfügungsmarkierungen benötigen Positionierungsinformationen und es ist wichtig, Einfügemarkierungen geben den Nutzenden sofortiges Feedback, sodass sie sofort eine und rendern.

Außerdem gibt es einige Stellen im Code, an denen aus Gründen der Abwärtskompatibilität sofort gerendert wird. Diese werden voraussichtlich in Version 11 entfernt.