Campos de cor

Um campo de cor armazena uma string como value e uma string como text. O value é uma string com o formato #rrggbb, enquanto o text pode ser uma string com o formato #rgb, se possível.

Campo de cor

Campo de cor com o editor aberto

Campo de cor em bloco recolhido

com base em trends

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');
  }
};

O construtor de cor aceita o seguinte:

  • um value opcional
  • um validator opcional
  • um mapa opcional de opções, incluindo:
    • colourOptions
    • colourTitles
    • columns

O value precisa ser uma string no formato #rrggbb. Se nenhuma value for informada ou a value fornecida for inválida, a primeira entrada na matriz de cores padrão será usada.

As opções a seguir também podem ser definidas em JSON:

  • colourOptions
  • colourTitles
  • columns

Ou eles podem ser definidos usando ganchos JavaScript.

Serialização

JSON

O JSON de um campo de cor fica assim:

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

Em que FIELDNAME é uma string que se refere a um campo de cor e o valor é o valor a ser aplicado ao campo. O valor segue as mesmas regras do valor do construtor.

XML

O XML de um campo de cor fica assim:

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

O atributo name do nó field contém uma string que faz referência a um campo de cor, e o texto interno do nó é o valor a ser aplicado ao campo. O valor do texto interno segue as mesmas regras do valor do construtor.

Observe que, depois de desserializado e serializado, todos os valores de texto internos estarão no formato #rrggbb. Isso às vezes é importante ao diferenciar espaços de trabalho.

Personalização

Opções do editor

A função setColours pode ser usada para definir as opções de cor de um campo de cores. Ele usa uma matriz de strings de cores, que precisam ser definidas no formato #rrggbb, e uma matriz opcional de dicas de ferramentas. Se a matriz de dica não for fornecida, a matriz de dica padrão será usada.

A correspondência das dicas e cores é feita com base no índice da matriz, e não no valor. Se a matriz de cores for maior que a matriz de dica, as dicas das cores extras serão o valor #rrggbb delas.

A função setColumns define o número de colunas no seletor de cores.

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);
  });

Isso é feito usando uma extensão 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');
  }
};

Editor de campo de cores personalizado

Opcionalmente, as cores, dicas e colunas padrão podem ser substituídas globalmente. Isso significa que eles afetarão todos os campos de cores, e não um campo específico.

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;

Como criar um validador de cores

O valor de um campo de cor é uma string de formato #rrggbb. Portanto, todos os validadores precisam aceitar uma string de formato #rrggbb e retornar uma string de formato #rrggbb, null ou undefined.

Veja um exemplo de um validador que muda a cor do bloco para corresponder à cor do campo.

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

Bloquear a mudança de cor com base no campo de cor