Управление визуализацией

Система управления рендерингом сообщает рендереру , когда следует повторно визуализировать блоки. Он гарантирует, что при изменении блока (например, установке значений полей или добавлении входных данных) форма блока обновляется в соответствии с ней.

Когда следует заботиться

Вам необходимо взаимодействовать с этой системой, если вы:

  • Добавление в Blockly методов, изменяющих форму блока.
  • Добавление в Blockly методов, основанных на обновленной информации о размере или расположении блока.

Как это работает

  1. Автоматически стоять в очереди. Всякий раз, когда блок модифицируется, Blockly ставит в очередь рендеринг этого блока. Некоторые примеры модификаций, которые ставят в очередь рендеринг:

    • Установка значения поля
    • Добавление или удаление ввода
    • Подключение или отключение дочернего блока

  2. Создайте набор. Когда блок попадает в очередь, система управления рендерингом добавляет его и все его родительские блоки в набор блоков, которые необходимо отрисовать повторно.

  3. Запросите обратный звонок. Затем система управления рендерингом запрашивает обратный вызов с помощью requestAnimationFrame . Этот обратный вызов вызывается браузером непосредственно перед отрисовкой текущего кадра.

  4. Перерисуйте набор (как дерево). Когда вызывается обратный вызов requestAnimationFrame , система управления рендерингом визуализирует каждый блок в наборе, от конечных блоков до корневых блоков. Это гарантирует, что дочерние блоки имеют точную информацию о размере до того, как их родительские блоки будут отображены, поэтому родительские блоки могут растягиваться вокруг своих дочерних элементов.

Почему это работает, как это работает

Ожидание повторной визуализации блоков до тех пор, пока не будет отрисован текущий кадр, позволяет системе управления рендерингом выполнить дедупликацию запросов на рендеринг. Если бы блоки всегда отображались немедленно, один и тот же блок мог бы без необходимости отображаться несколько раз подряд. Вместо этого запросы на рендеринг группируются, и каждый измененный блок отрисовывается только один раз в конце кадра, после того как его состояние будет завершено. Дедупликация операций рендеринга делает Blockly намного более эффективным.

Например, вставка одного блока между двумя другими ставит в очередь 11 рендерингов, но на самом деле происходит только 3 (по одному на каждый блок). Это прирост производительности в 3,6 раза.

Как его использовать

Обычно вам не нужно беспокоиться о системе управления рендерингом, поскольку она работает автоматически при изменении блока. Но есть несколько случаев, когда вам придется взаимодействовать с ним напрямую.

Очередь рендеринга

Если вы добавляете в Blockly новый метод, который должен обновлять форму блока, вам нужно вызвать BlockSvg.prototype.queueRender для постановки в очередь рендеринга блока.

Дождитесь завершения рендеринга

Если вы добавляете в Blockly новый метод, который требует обновления информации о размере или расположении блока, вам следует дождаться обещания renderManagement.finishQueuedRenders() . Это обещание выполняется после завершения любой отрисовки в очереди или сразу же, если в очереди нет отрисовки. 

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

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

Немедленный запуск рендеринга в очереди

Если вы добавляете в Blockly новый метод, который требует обновления информации о размере или расположении блока, и вы не можете дождаться следующего кадра для завершения рендеринга, вы можете вызвать renderManagement.triggerQueuedRenders , чтобы заставить любой рендеринг в очереди выполняться немедленно.

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

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

В общем, вы не хотите этого делать, потому что это менее производительно. Это необходимо только в тех случаях, когда задержка приводит к ухудшению пользовательского опыта. Например, маркерам вставки нужна информация о местоположении, и важно, чтобы маркеры вставки давали пользователям немедленную обратную связь, чтобы они запускали немедленный рендеринг.

В ядре также есть несколько мест, где он запускает немедленный рендеринг по соображениям обратной совместимости. Их планируется удалить в версии 11.