Эта страница переведена с помощью Cloud Translation API.

Добавьте поле плагина в Block Factory

Инструменты разработчика Blockly позволяют создавать собственные блоки с помощью блоков! Он поддерживает поля, которые публикуются как плагины, в дополнение к полям, которые входят в состав ядра Blockly. Если вы создали настраиваемое поле, вы можете добавить его поддержку в Фабрику блоков, следуя этому руководству. Настраиваемое поле должно быть опубликовано в npm, прежде чем вы сможете добавить его поддержку. Вам также необходимо обновить свое поле, чтобы идти в ногу с изменениями в Blockly, в противном случае нам может потребоваться удалить его из Block Factory в будущем.

Разработка на заводе блоков

Исходный код Block Factory находится в репозитории blockly-samples в каталоге examples/developer-tools .

Чтобы внести изменения в инструменты разработчика в блочных образцах, вам необходимо выполнить типичные шаги для разработки в блочных образцах. Однако, в отличие от работы с плагинами, вам нужно будет запустить npm install напрямую из каталога examples/developer-tools , а не на корневом уровне блочных образцов.

Установите плагин

Чтобы Фабрика блоков отображала ваше настраиваемое поле в предварительном просмотре, необходимо установить настраиваемое поле. Добавьте свое поле в качестве зависимости npm от инструментов разработчика. Затем зарегистрируйте его или выполните любую другую необходимую работу по настройке в developer-tools/src/blocks/index.ts .

Создайте блок для поля

Поскольку Фабрика блоков использует блоки для создания пользовательских блоков, вам понадобится блок, представляющий ваше настраиваемое поле.

Создайте определение блока

Вам необходимо спроектировать блок для вашего поля; если вы хотите получить мета, вы даже можете создать его с помощью Block Factory! Блок должен позволять пользователю настраивать параметры, необходимые для вашего поля, например значения по умолчанию и имя. Добавьте это определение блока в developer-tools/src/blocks/fields.ts и импортируйте его в developer-tools/src/blocks/index.ts .

Добавить блок в панель инструментов

Далее вам необходимо добавить этот блок в определение панели инструментов, чтобы сделать его доступным для пользователей. Определение набора инструментов находится в developer-tools/src/toolbox.ts . Ваш блок должен быть добавлен в категорию «Поля».

Генераторы кода

Фабрика блоков работает с использованием системы генератора кода, с которой вы уже знакомы по Blockly. Каждый блок имеет генератор блочного кода для каждого типа вывода, генерируемого фабрикой блоков, а родительские блоки собирают код для дочерних блоков в правильный вывод. Чтобы добавить поддержку настраиваемого поля, вам необходимо добавить функции генератора блочного кода для каждого из классов генератора кода.

Создайте файл для вашего блока полей в каталоге output-generators/fields . Вы добавите в этот файл генераторы блочного кода для каждого из следующих генераторов. Импортируйте этот файл в файл blocks/index.ts , чтобы функции генератора блочного кода были загружены в приложение.

Определение JavaScript

javascriptDefinitionGenerator создает код, который будет включен в определение JavaScript для блока, включающего ваше настраиваемое поле. Обычно это означает, что генератор блочного кода должен возвращать строку кода, которая выглядит как .appendField(new YourFieldConstructor(arg1, arg2), 'userSpecifiedName') . Обратите внимание, что эта строка кода не содержит точку с запятой, поскольку входные данные, содержащие несколько полей, будут иметь несколько вызовов метода appendField , связанных вместе. Аргументы конструктора извлекаются из значений, установленных пользователем в блоке полей. Вот пример генератора блочного кода для FieldAngle :

javascriptDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JavascriptDefinitionGenerator,
): string {
  const name = generator.quote_(block.getFieldValue('FIELDNAME'));
  const angle = block.getFieldValue('ANGLE');
  return `.appendField(new FieldAngle(${angle}), ${name})`;
};

Угловой блок, который пользователь перетащил из категории «Поля» панели инструментов «Фабрика блоков», содержит два поля:

FIELDNAME : пользователь может установить имя поля в своем пользовательском блоке.
ANGLE : пользователь может установить значение угла по умолчанию.

В этом генераторе блочного кода мы получаем значение угла по умолчанию и передаем его в качестве единственного аргумента конструктору FieldAngle . Имя поля всегда передается в качестве второго аргумента методу appendField .

Определение JSON

jsonDefinitionGenerator аналогичен, но он выводит часть определения блока JSON, соответствующую вашему полю. Обычно этот код представляет собой объект JSON, который включает в себя:

type : соответствует имени вашего поля в реестре полей Blockly.
name : пользователь может установить имя поля в своем пользовательском блоке.
любые другие пользовательские свойства, необходимые для метода инициализации json вашего поля.

Вот еще раз пример из FieldAngle :

jsonDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JsonDefinitionGenerator,
): string {
  const code = {
    type: 'field_angle',
    name: block.getFieldValue('FIELDNAME'),
    angle: block.getFieldValue('ANGLE'),
  };
  return JSON.stringify(code);
};

Заголовки кода

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

importHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `import {registerFieldAngle, FieldAngle} from '@blockly/field-angle';`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

scriptHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `<script src="https://unpkg.com/@blockly/field-angle"></script>`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

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

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

Заглушка генератора

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

Заглушка генератора пользовательского блока включает в себя заранее созданную переменную, представляющую каждое поле блока. Затем есть TODO который пользователь должен выполнить, чтобы собрать все эти переменные в окончательную строку кода, которую вернет его пользовательский блок. Это означает, что обычно все, что нужно сделать вашему генератору блочного кода, — это вернуть строку, которая создает эту пользовательскую переменную. Предположим, пользователь создает собственный блок, который добавит на его холст лучи солнечного света. Они добавляют в блок поле угла и называют его "SUN_DIRECTION" . Заглушка генератора для этого блока будет включать строку const angle_sun_direction = block.getFieldValue("SUN_DIRECTION"); . Это строка кода, которую должен вернуть наш генератор блочного кода для поля угла:

generatorStubGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: GeneratorStubGenerator,
): string {
  const name = block.getFieldValue('FIELDNAME');
  const fieldVar = generator.createVariableName('angle', name);
  return `const ${fieldVar} = block.getFieldValue(${generator.quote_(
    name,
  )});\n`;
};

Чтобы получить стандартизированное имя для переменной, вы можете вызвать generator.createVariableName и передать тип вашего поля (например, angle , number и т. д.) вместе с тем, как пользователь назвал свое поле.

Проверьте это

После того, как вы написали все эти части, вы сможете запустить Block Factory, запустив npm start в каталоге blockly-samples/examples/developer-tools . У вас должна быть возможность перетащить свой блок из категории полей, добавить его к входным данным блока и наблюдать за изменением выходных данных. Убедитесь, что предварительный просмотр блока выглядит правильно и что код для каждого из выходных разделов верен.