Renk alanları

Renk alanı, bir dizeyi value öğesi ve bir dizeyi text olarak depolar. value öğesi #rrggbb biçimine sahip bir dizedir. Bununla birlikte text değeri mümkünse #rgb biçimine sahip bir dize olabilir.

Renk alanı

Düzenleyici açık renk alanı

Daraltılmış bloktaki renk alanı

içerik üretimi

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

Renk oluşturucu aşağıdakileri dikkate alır:

  • isteğe bağlı bir value
  • isteğe bağlı validator
  • Aşağıdakiler dahil, isteğe bağlı bir seçenek haritası:
    • colourOptions
    • colourTitles
    • columns

value, #rrggbb biçiminde bir dize olmalıdır. value verilmezse veya belirtilen value geçersizse varsayılan renk dizisindeki ilk giriş kullanılır.

Aşağıdaki seçenekler JSON'de de ayarlanabilir:

  • colourOptions
  • colourTitles
  • columns

Alternatif olarak, JavaScript kancaları kullanılarak ayarlanabilir.

Serileştirme

JSON

Bir renk alanı için JSON şöyle görünür:

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

Burada FIELDNAME, bir renk alanına referans veren bir dizedir. Değer ise alana uygulanacak değerdir. Değer, oluşturucu değeriyle aynı kuralları izler.

XML

Bir renk alanı için XML şöyle görünür:

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

field düğümünün name özelliği, bir renk alanına referans veren bir dize içerir ve düğümün iç metni, alana uygulanacak değerdir. İç metin değeri, oluşturucu değeriyle aynı kuralları izler.

Seri durumdan çıkarılıp yeniden serileştirildikten sonra tüm iç metin değerlerinin #rrggbb biçiminde olacağını unutmayın. Bu, çalışma alanlarını farklılaştırırken bazen önemlidir.

Özelleştirme

Düzenleyici seçenekleri

Bir renk alanının renk seçeneklerini ayarlamak için setColours işlevi kullanılabilir. #rrggbb biçiminde tanımlanması gereken bir renk dizeleri dizisi ve isteğe bağlı bir ipucu dizisi içerir. İpucu dizisi sağlanmazsa varsayılan ipucu dizisi kullanılır.

İpuçları ve renkler, değere göre değil, dizi dizinine göre eşleştirilir. Renk dizisi, ipucu dizisinden uzunsa ekstra renkler için ipuçları, bunların #rrggbb değeri olur.

setColumns işlevi, renk seçicideki sütun sayısını ayarlar.

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

Bu işlem bir JSON uzantısı kullanılarak yapılır.

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

Özelleştirilmiş renk alanı düzenleyici

Varsayılan renkler, araç ipuçları ve sütunlar isteğe bağlı olarak genel olarak geçersiz kılınabilir. Yani, belirli bir alan yerine tüm renk alanlarını etkilerler.

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;

Renk doğrulayıcı oluşturma

Renk alanının değeri, #rrggbb biçim dizesidir. Bu nedenle tüm doğrulayıcılar, #rrggbb biçimi dizesini kabul etmeli ve null veya undefined biçiminde bir #rrggbb biçimi dizesi döndürmelidir.

Bloğun rengini alanın rengiyle eşleştirmek için değiştiren bir doğrulayıcı örneğini burada görebilirsiniz.

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

Renk alanına göre rengin değiştirilmesini engelleyin