Расширить существующее поле

Чтобы расширить существующее поле, вы должны создать подкласс встроенного поля (например, FieldTextInput , FieldColour ), а затем изменить его часть в соответствии с вашими потребностями. Некоторые части поля, которые вы можете изменить:

• Его редактор .
• Это встроенный дисплей .
• Текст , который он отображает.

Если вы хотите создать настраиваемое поле , которому не требуется поведение какого-либо встроенного поля, вам следует создать подкласс Field .

Общие расширения

Большинство настраиваемых полей расширяют один из этих трех типов:

• Ввод текста : если вы хотите, чтобы пользователи вводили данные в ваше поле, вам следует расширить FieldTextInput .
• Number : Если вы хотите сохранить число, вам следует расширить FieldNumber .
• Dropdown : если вы хотите создать раскрывающийся список, но хотите, чтобы в нем хранилась модель, отличная от модели строки или изображения по умолчанию, вам следует расширить FieldDropdown .
  • Внимание: перед расширением FieldDropdown убедитесь, что параметры настройки раскрывающегося поля не могут удовлетворить ваши потребности.

При определенных обстоятельствах вы можете захотеть расширить другой тип поля. Например FieldLabelSerializable расширяет FieldLabel .

Подклассы

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

  constructor(value, validator, config) {
    super(value, validator, config);
  }
}

Конструктор подкласса поля очень похож на конструктор настраиваемого поля . Подпись субконструктора обычно должна совпадать с подписью суперконструктора.

JSON и регистрация

Также необходимо один раз зарегистрировать поле:

Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);

и предоставьте реализацию fromJson в классе, чтобы она работала с форматом JSON:

static fromJson(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
  return new MyCustomTextField(value);
}

Дополнительные сведения о регистрации поля см. в разделе «JSON и регистрация» статьи «Создание настраиваемого поля».