Создать новый рендерер

Чтобы создать собственный модуль визуализации, вам необходимо создать подкласс класса 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',
});