Создание пользовательских рендереров

Чтобы создать пользовательский рендерер, вам нужно создать подкласс класса Renderer . Обратитесь к документации по концепции рендерера для получения дополнительной информации о том, что такое рендерер и что он делает.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

Без какой-либо настройки рендерер по умолчанию выглядит так:

базовый рендерер

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

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

Подкласс других компонентов рендеринга

Фактическая форма блока определяется подкомпонентами рендерера.

По умолчанию класс Renderer предоставляет рабочие версии всех компонентов рендерера . Это позволяет вам изменять один компонент, не беспокоясь об остальных.

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

Дополнительную информацию о том, что делает каждый отдельный компонент, можно найти в документации по компонентам рендеринга .

Переопределение заводских методов

После подклассификации компонентов рендерера вам необходимо переопределить методы фабрики Renderer для компонентов, которые вы подклассифицировали. Это позволяет рендереру правильно связывать различные компоненты вместе.

Для каждого вида компонента существует свой метод:

Зарегистрировать рендерер

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

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

const workspace = Blockly.inject(blocklyDiv, {
  renderer: 'custom_renderer',
});