Цветовые поля

Поле цвета хранит строку в качестве value и строку в качестве text . Его value является строка в формате #rrggbb , а его text если возможно, может быть строкой в ​​формате #rgb .

Цветовое поле

Цветное поле с открытым редактором

Цветное поле в свернутом блоке

Создание

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff4040",
      "colourOptions":
        ['#ff4040', '#ff8080', '#ffc0c0',
         '#4040ff', '#8080ff', '#c0c0ff'],
      "colourTitles":
        ['dark pink', 'pink', 'light pink',
         'dark blue', 'blue', 'light blue'],
      "columns": 3
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff4040',
            {
                "colourOptions":
                  ['#ff4040', '#ff8080', '#ffc0c0',
                   '#4040ff', '#8080ff', '#c0c0ff'],
                "colourTitles":
                  ['dark pink', 'pink', 'light pink',
                   'dark blue', 'blue', 'light blue'],
                "columns": 3
            }), 'FIELDNAME');
  }
};

Конструктор цвета принимает следующее:

  • необязательное value
  • дополнительный валидатор
  • дополнительная карта опций, в том числе:
    • colourOptions
    • colourTitles
    • columns

value должно быть строкой в ​​формате #rrggbb . Если value не указано или данное value недопустимо, будет использоваться первая запись в массиве цветов по умолчанию.

В JSON также можно установить следующие параметры:

  • colourOptions
  • colourTitles
  • columns

Или их можно установить с помощью хуков JavaScript .

Сериализация

JSON

JSON для поля цвета выглядит так:

{
  "fields": {
    "FIELDNAME": "#ff0000"
  }
}

Где FIELDNAME — это строка, ссылающаяся на поле цвета, а значение — это значение, которое применяется к полю. Значение подчиняется тем же правилам, что и значение конструктора.

XML

XML-код поля цвета выглядит так:

<field name="FIELDNAME">#ff0000</field>

Атрибут name узла field содержит строку, ссылающуюся на поле цвета, а внутренний текст узла — это значение, которое следует применить к полю. Внутреннее текстовое значение подчиняется тем же правилам, что и значение конструктора.

Обратите внимание, что после десериализации и повторной сериализации все внутренние текстовые значения будут иметь формат #rrggbb . Иногда это важно при различении рабочих пространств.

Кастомизация

Параметры редактора

Функцию setColours можно использовать для установки параметров цвета цветового поля. Он принимает массив цветовых строк, который должен быть определен в формате #rrggbb , и необязательный массив всплывающих подсказок. Если массив подсказок не указан, будет использоваться массив подсказок по умолчанию.

Подсказки и цвета сопоставляются на основе индекса массива, а не значения. Если массив цветов длиннее массива подсказок, подсказками для дополнительных цветов будет их значение #rrggbb .

Функция setColumns устанавливает количество столбцов в палитре цветов.

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "COLOUR",
      "colour": "#ff4040"
    }
  ],
  "extensions": ["set_colours_extension"]
}

Blockly.Extensions.register('set_colours_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours(
      ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
      ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
  });

Это делается с помощью расширения JSON.

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    var field = new Blockly.FieldColour('#ff4040');
    field.setColours(
        ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
        ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(field, 'COLOUR');
  }
};

Индивидуальный редактор цветовых полей

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

Blockly.FieldColour.COLOURS = [
    '#ff4040', '#ff8080', '#ffc0c0',
    '#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
    'dark pink', 'pink', 'light pink',
    'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;

Создание валидатора цвета

Значением поля цвета является строка формата #rrggbb , поэтому любые валидаторы должны принимать строку формата #rrggbb и возвращать строку формата #rrggbb , null или undefined .

Вот пример валидатора, который меняет цвет блока в соответствии с цветом поля.

function(newValue) {
  this.getSourceBlock().setColour(newValue);
  return newValue;
}

Блокировать изменение цвета на основе его цветового поля