Yeni alan türü oluşturma

Yeni bir alan türü oluşturmadan önce, alanları özelleştirmeyle ilgili diğer yöntemlerden birinin ihtiyaçlarınıza uygun olup olmadığını değerlendirin. Uygulamanızın yeni bir değer türü depolaması gerekiyorsa veya mevcut bir değer türü için yeni bir kullanıcı arayüzü oluşturmak istiyorsanız muhtemelen yeni bir alan türü oluşturmanız gerekir.

Yeni bir alan oluşturmak için aşağıdakileri yapın:

1. Bir oluşturucu uygulayın.
2. Bir JSON anahtarı kaydedin ve fromJson uygulamasını uygulayın.
3. Bloktaki kullanıcı arayüzünün ve etkinlik işleyicilerin başlatılmasını işleme.
4. Etkinlik işleyicileri ortadan kaldırma (kullanıcı arayüzünü kaldırma işlemi sizin için gerçekleştirilir).
5. Değer işlemeyi uygulayın.
6. Erişilebilirlik için alanınızın değerinin metin temsilini ekleyin.
7. Aşağıdakiler gibi ek işlevler ekleyin:
   • Düzenleyici.
   • Engellenen ekran güncellemeleri.
   • Serileştirme.
8. Alanınızla ilgili ek özellikleri yapılandırın. Örneğin:
   • Düzenlenebilir ve seri hale getirilebilir özellikler
   • İmleç

Bu bölümde, Bir Alanın Anatomisi'ndeki içerikleri okuyup bildiğiniz varsayılmaktadır.

Özel alan örneği için Özel Alanlar demosunu inceleyin.

Oluşturucu uygulama

Alanın ilk değerini ve isteğe bağlı olarak bir yerel doğrulayıcıyı ayarlamak, alanın oluşturucusunun sorumluluğundadır. Özel alanın oluşturucusu, kaynak bloğun JSON veya JavaScript'te tanımlandığından bağımsız olarak kaynak bloğu başlatma sırasında çağrılır. Dolayısıyla özel alan, yapım sırasında kaynak bloka erişemez.

Aşağıdaki kod örneği GenericField adlı bir özel alan oluşturur:

class GenericField extends Blockly.Field {
  constructor(value, validator) {
    super(value, validator);

    this.SERIALIZABLE = true;
  }
}

Yöntem imzası

Alan oluşturucular genellikle bir değer ve yerel bir doğrulayıcı alır. Değer isteğe bağlıdır ve bir değer iletmezseniz (veya sınıf doğrulamasını geçemeyen bir değer iletirseniz) üst sınıfın varsayılan değeri kullanılır. Varsayılan Field sınıfı için bu değer null'dir. Bu varsayılan değeri istemiyorsanız uygun bir değer ilettiğinizden emin olun. Doğrulayıcı parametresi yalnızca düzenlenebilir alanlar için bulunur ve genellikle isteğe bağlı olarak işaretlenir. Doğrulayıcılar hakkında daha fazla bilgiyi Doğrulayıcılar belgelerinde bulabilirsiniz.

Yapı

Oluşturucunuzun içindeki mantık şu akışı izlemelidir:

1. Değeri düzgün bir şekilde başlatmak ve alanınız için yerel doğrulayıcıyı ayarlamak için devralınan süper oluşturucuyu (tüm özel alanlar Blockly.Field veya alt sınıflarının birinden devralmalıdır) çağırın.
2. Alanınız seri hale getirilebilirse oluşturucuda ilgili özelliği ayarlayın. Düzenlenebilir alanlar seri hale getirilebilir, alanlar ise varsayılan olarak düzenlenebilir olmalıdır. Bu nedenle, seri hale getirilmemesi gerektiğini bilmiyorsanız muhtemelen bu özelliği true (doğru) değerine ayarlamanız gerekir.
3. İsteğe bağlı: Ek özelleştirme uygulayın (örneğin, Etiket alanları, bir css sınıfının iletilmesine izin verir ve bu sınıf daha sonra metne uygulanır).

JSON ve kayıt

JSON blok tanımlarında, alanlar bir dizeyle (ör. field_number, field_textinput) tanımlanır. Bu dizelerden alan nesnelerine giden bir haritayı bloke ederek bulundurur ve inşaat sırasında uygun nesneye fromJson çağrısı yapar.

Alan türünüzü bu haritaya eklemek için Blockly.fieldRegistry.register yöntemini çağırın ve alan sınıfını ikinci bağımsız değişken olarak geçirin:

Blockly.fieldRegistry.register('field_generic', GenericField);

Ayrıca fromJson fonksiyonunuzu da tanımlamanız gerekir. Uygulamanız öncelikle replaceMessageReferences ifadesini kullanan dize tablosu başvurularını kaldırmalı ve daha sonra değerleri oluşturucuya iletmelidir.

GenericField.fromJson = function(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(
      options['value']);
  return new CustomFields.GenericField(value);
};

Not: JSON tanımı kullanılırken yerel doğrulayıcılar şu anda desteklenmemektedir. Ancak bir uzantı aracılığıyla uygulanabilir.

Başlatılıyor

Alanınız oluşturulduğunda temel olarak yalnızca bir değer içerir. Başlatma, DOM'un derlendiği, modelin oluşturulduğu (alanda bir model varsa) ve etkinliklerin bağlandığı yerdir.

Blokta ekran

Başlatma sırasında alanın bloktaki ekranı için ihtiyacınız olan her şeyi oluşturmak sizin sorumluluğunuzdadır.

Varsayılanlar, arka plan ve metin

Varsayılan initView işlevi, açık renkli bir rect öğesi ve bir text öğesi oluşturur. Alanınızda bunların her ikisinin ve bazı ekstra ekstraların yer almasını istiyorsanız geri kalan DOM öğelerinizi eklemeden önce üst sınıf initView işlevini çağırın. Alanınızda bu öğelerden yalnızca birinin yer almasını istiyorsanız createBorderRect_ veya createTextElement_ işlevlerini kullanabilirsiniz.

DOM yapısını özelleştirme

Alanınız genel bir metin alanıysa (ör. Metin Girişi) DOM oluşturma işlemi sizin için halledilir. Aksi takdirde, alanınızın gelecekte oluşturulması sırasında ihtiyaç duyacağınız DOM öğelerini oluşturmak için initView işlevini geçersiz kılmanız gerekir.

Örneğin, bir açılır liste alanı hem resim hem de metin içerebilir. initView ürününde tek bir resim öğesi ve tek bir metin öğesi oluşturur. Daha sonra render_ sırasında, belirlenen seçeneğin türüne göre etkin öğeyi gösterir ve diğerini gizler.

DOM öğeleri, Blockly.utils.dom.createSvgElement yöntemi veya geleneksel DOM oluşturma yöntemleri kullanılarak oluşturulabilir.

Bir alanın bloktaki ekranı için gereksinimler şunlardır:

• Tüm DOM öğeleri, alanın fieldGroup_ alt öğeleri olmalıdır. Alan grubu otomatik olarak oluşturulur.
• Tüm DOM öğeleri, alanın bildirilen boyutlarının içinde kalmalıdır.

Bloktaki ekranınızı özelleştirme ve güncelleme hakkında daha fazla ayrıntı için Oluşturma bölümüne bakın.

Metin Sembolleri Ekleme

Bir alanın metnine sembol (Açı alanının derece simgesi gibi) eklemek isterseniz sembol öğesini (genellikle bir <tspan> içinde bulunur) doğrudan alanın textElement_ öğesine ekleyebilirsiniz.

Giriş etkinlikleri

Varsayılan olarak alanlar, ipucu etkinliklerini ve fareyle üzerine gelme etkinliklerini (düzenleyicileri göstermek için kullanılır) kaydeder. Diğer etkinlik türlerini dinlemek isterseniz (ör. bir alanda sürükleme işlemini yapmak istiyorsanız) alanın bindEvents_ işlevini geçersiz kılmanız gerekir.

bindEvents_() {
  // Call the superclass function to preserve the default behavior as well.
  super.bindEvents_();

  // Then register your own additional event listeners.
  this.mouseDownWrapper_ =
  Blockly.browserEvents.conditionalBind(this.getClickTarget_(), 'mousedown', this,
      function(event) {
        this.originalMouseX_ = event.clientX;
        this.isMouseDown_ = true;
        this.originalValue_ = this.getValue();
        event.stopPropagation();
      }
  );
  this.mouseMoveWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mousemove', this,
      function(event) {
        if (!this.isMouseDown_) {
          return;
        }
        var delta = event.clientX - this.originalMouseX_;
        this.setValue(this.originalValue_ + delta);
      }
  );
  this.mouseUpWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mouseup', this,
      function(_event) {
        this.isMouseDown_ = false;
      }
  );
}

Not: bindEvents_ geçersiz kılınırken her zaman temel işlevi çağırmanız gerekir.

Bir etkinliğe bağlamak için genellikle Blockly.utils.browserEvents.conditionalBind işlevini kullanmanız gerekir. Bu etkinlik bağlama yöntemi, sürükleme sırasında yapılan ikincil dokunmaları filtreler. İşleyicinizin devam eden bir sürüklemenin ortasında bile çalışmasını istiyorsanız Blockly.browserEvents.bind işlevini kullanabilirsiniz.

Atma

Alanın bindEvents_ işlevinde herhangi bir özel etkinlik işleyici kaydettiyseniz bunların dispose işlevindeki kayıtlarının iptal edilmesi gerekir.

Not: İptal etme işlemini geçersiz kılarken her zaman temel işlevi çağırmanız gerekir.

Alanınızın görünümünü doğru şekilde başlattıysanız (tüm DOM öğelerini fieldGroup_ öğesine ekleyerek) alanın DOM'u otomatik olarak imha edilir.

Değer İşleme

→ Bir alanın değeri ve metni hakkında bilgi edinmek için Bir alanın anatomisi konusuna bakın.

Doğrulama sırası

Sınıf doğrulayıcıyı uygulama

Alanlar yalnızca belirli değerleri kabul etmelidir. Örneğin, sayı alanları yalnızca sayıları kabul etmelidir, renk alanları ise yalnızca renkleri kabul eder. Bu, sınıf ve yerel doğrulayıcılar aracılığıyla sağlanır. Sınıf doğrulayıcı, yerel doğrulayıcılarla aynı kurallara uyar. Tek fark, kurucuda da çalıştırılması ve bu nedenle kaynak bloka referans vermemesidir.

Alanınızın sınıf doğrulayıcısını uygulamak için doClassValidation_ işlevini geçersiz kılın.

doClassValidation_(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

Not: doClassValidation_'a geçirilen newValue, herhangi bir türde olabilir (diğer geliştiricilerin sorumluluklarına bağlı olarak) bu nedenle sıra dışı durumları ele almaya hazırlıklı olun.

Geçerli değerleri işleme

setValue ile bir alana iletilen değer geçerliyse doValueUpdate_ geri çağırma alırsınız. Varsayılan olarak doValueUpdate_ işlevi şu şekildedir:

• value_ özelliğini newValue olarak ayarlar.
• isDirty_ özelliğini true olarak ayarlar.

Yalnızca değeri depolamanız gerekiyorsa ve herhangi bir özel işlem yapmak istemiyorsanız doValueUpdate_ değerini geçersiz kılmanız gerekmez.

Aksi halde, aşağıdakiler gibi işlemler yapmak isterseniz:

• Özel newValue depolama alanı.
• Diğer tesisleri newValue adresine göre değiştirin.
• Mevcut değerin geçerli olup olmadığını kaydedin.

doValueUpdate_ öğesini geçersiz kılmanız gerekecek:

doValueUpdate_(newValue) {
  super.doValueUpdate_(newValue);
  this.displayValue_ = newValue;
  this.isValueValid_ = true;
}

Dikkat: Değeri ayarlarken alanınızın blok veya çalışma alanı özelliklerine erişmesi gerekiyorsa, bu özellikler yoksa doValueUpdate_ hatasını düzgün bir şekilde yapmanız gerekir.

Geçersiz değerleri işleme

setValue ile alana iletilen değer geçersizse doValueInvalid_ geri çağırması alırsınız. doValueInvalid_ işlevi, varsayılan olarak hiçbir şey yapmaz. Bu, varsayılan olarak geçersiz değerlerin gösterilmeyeceği anlamına gelir. Ayrıca, isDirty_ özelliği ayarlanmayacağı için alanın yeniden oluşturulmayacağı anlamına da gelir.

Geçersiz değerleri görüntülemek isterseniz doValueInvalid_ değerini geçersiz kılmanız gerekir. Çoğu durumda bir displayValue_ özelliğini geçersiz değere ayarlamanız, isDirty_ özelliğini true olarak ayarlamanız ve bloktaki ekranınvalue_ yerine displayValue_ değerine göre güncellenmesi için geçersiz kılmayı_ ayarlamanız gerekir.

doValueInvalid_(newValue) {
  this.displayValue_ = newValue;
  this.isDirty_ = true;
  this.isValueValid_ = false;
}

Uyarı: value_ özelliğini hiçbir zaman geçersiz bir değere ayarlamayın. Alan değerleri, kod oluşturmada kullanılmak üzere her zaman geçerli olmalıdır.

Çok parçalı değerler

Alanınızda çok parçalı bir değer (ör. listeler, vektörler, nesneler) bulunuyorsa bu bölümlerin ayrı değerler gibi işlenmesini isteyebilirsiniz.

doClassValidation_(newValue) {
  if (FieldTurtle.PATTERNS.indexOf(newValue.pattern) == -1) {
    newValue.pattern = null;
  }

  if (FieldTurtle.HATS.indexOf(newValue.hat) == -1) {
    newValue.hat = null;
  }

  if (FieldTurtle.NAMES.indexOf(newValue.turtleName) == -1) {
    newValue.turtleName = null;
  }

  if (!newValue.pattern || !newValue.hat || !newValue.turtleName) {
    this.cachedValidatedValue_ = newValue;
    return null;
  }
  return newValue;
}

Yukarıdaki örnekte newValue öğesinin her bir özelliği tek tek doğrulanmıştır. Daha sonra doClassValidation_ işlevinin sonunda, herhangi bir bağımsız özellik geçersizse değer, null (geçersiz) döndürülmeden önce cacheValidatedValue_ özelliğinde önbelleğe alınır. Ayrı olarak doğrulanmış özelliklerle nesnenin önbelleğe alınması, doValueInvalid_ işlevinin her bir mülkü ayrı ayrı yeniden doğrulamak yerine sadece bir !this.cacheValidatedValue_.property kontrolü yaparak bunları ayrı olarak işlemesine olanak tanır.

Çok parçalı değerleri doğrulamaya yönelik bu kalıp, yerel doğrulayıcılarda da kullanılabilir ancak şu anda bu kalıbı zorunlu kılmanın bir yolu yoktur.

isDirty_

isDirty_, alanın yeniden oluşturulması gerekip gerekmediğini belirtmek için setValue işlevinde ve alanın diğer bölümlerinde kullanılan bir işarettir. Alanın görüntülenme değeri değiştiyse isDirty_ genellikle true olarak ayarlanmalıdır.

Metin

→ Bir alandaki metnin nerede kullanıldığı ve alanın değerinden ne açıdan farklı olduğu hakkında bilgi edinmek için Bir alanın anatomisi bölümüne bakın.

Alanınızın metni, alanınızın değerinden farklıysa doğru metni sağlamak için getText işlevini geçersiz kılmanız gerekir.

getText() {
  let text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
  if (this.value_.hat == 'Stovepipe' || this.value_.hat == 'Propeller') {
    text += ' hat';
  }
  return text;
}

Düzenleyici oluşturma

showEditor_ işlevini tanımlarsanız Blockly, tıklamaları otomatik olarak dinler ve uygun zamanda showEditor_ öğesini çağırır. Blokly'nin kullanıcı arayüzünün geri kalanı üzerinde kayan DropDownDiv ve WidgetDiv adlı iki özel div'den birine sarmalayarak HTML'yi düzenleyicinizde görüntüleyebilirsiniz.

Önemli: Düzenleyicinin ekranında yapılan güncellemeler, hemen uygulanmak yerine oluşturma sırasında gerçekleştirilmelidir. Bu, doğrulayıcıların değeri uygulanmadan önce müdahale etmesini sağlar.

DropDownDiv - WidgetDiv

DropDownDiv, bir alana bağlı bir kutu içinde yaşayan düzenleyiciler sağlamak için kullanılır. Görünür sınırlar içinde kalırken otomatik olarak sahanın yakınında olacak şekilde konumlandırılır. Açı seçici ve renk seçici, DropDownDiv için iyi örneklerdir.

WidgetDiv, bir kutunun içinde çalışmayan düzenleyiciler sağlamak için kullanılır. Sayı alanları, alanı bir HTML metin giriş kutusuyla kapatmak için WidgetDiv'i kullanır. DropDropDiv sizin için konumlandırmayı işlerken, WidgetDiv bunu yapmaz. Öğelerin manuel olarak konumlandırılması gerekir. Koordinat sistemi, pencerenin sol üst köşesine göre piksel koordinatlarındadır. Metin girişi düzenleyicisi, WidgetDiv için iyi bir örnektir.

DropDownDiv örnek kodu

showEditor_() {
  // Create the widget HTML
  this.editor_ = this.dropdownCreate_();
  Blockly.DropDownDiv.getContentDiv().appendChild(this.editor_);

  // Set the dropdown's background colour.
  // This can be used to make it match the colour of the field.
  Blockly.DropDownDiv.setColour('white', 'silver');

  // Show it next to the field. Always pass a dispose function.
  Blockly.DropDownDiv.showPositionedByField(
      this, this.disposeWidget_.bind(this));
}

Not: HTML'yi programatik olarak oluşturmak oldukça uzun bir işlemdir, bu nedenle burada sunulmaz. Bunun bir örneği için Özel Alanlar Demosu'nu inceleyin .

WidgetDiv örnek kodu

showEditor_() {
  // Show the div. This automatically closes the dropdown if it is open.
  // Always pass a dispose function.
  Blockly.WidgetDiv.show(
    this, this.sourceBlock_.RTL, this.widgetDispose_.bind(this));

  // Create the widget HTML.
  var widget = this.createWidget_();
  Blockly.WidgetDiv.getDiv().appendChild(widget);
}

Not: Widget HTML'sini programatik olarak oluşturmak oldukça uzun bir işlemdir, bu nedenle burada verilmemiştir. Bunun bir örneği, Metin Giriş Alanı uygulamasının kullanımını inceleyin.

Not: Giriş gibi çalışması amaçlanan bir widget oluşturuyorsanız ancak özel bir öğe kullanıyorsanız öğeyi giriş olarak işlemesi için Blockly'yi bilgilendirmek amacıyla öğenize data-is-text-input='true' ekleyebilirsiniz.

Temizleme

Hem DropDownDiv hem de WidgetDiv, widget HTML öğelerini kaldırır ancak bu öğelere uyguladığınız tüm etkinlik işleyicileri manuel olarak atmanız gerekir.

widgetDispose_() {
  for (let i = this.editorListeners_.length, listener;
      listener = this.editorListeners_[i]; i--) {
    Blockly.browserEvents.unbind(listener);
    this.editorListeners_.pop();
  }
}

dispose işlevi, DropDownDiv üzerinde null bağlamında çağrılır. WidgetDiv üzerinde WidgetDiv bağlamında çağrılır. Her iki durumda da, yukarıdaki DropDownDiv ve WidgetDiv örneklerinde gösterildiği gibi, bir elden çıkarma işlevini aktarırken bind işlevini kullanmak en iyi seçenektir.

→ Düzenleyicilerin imhasına özgü olmayan imha hakkında daha fazla bilgi için İmha bölümüne göz atın.

Engellenen ekran güncelleniyor

render_ işlevi, alanın bloktaki görüntüsünü dahili değeriyle eşleşecek şekilde güncellemek için kullanılır.

Yaygın örneklerden bazıları şunlardır:

• Metni değiştirme (açılır liste)
• Rengi (renk) değiştirme

Önemli: Bu alan hiçbir zaman render_ öğesini doğrudan çağırmamalıdır. Bunun yerine, isDirty_ özelliği true değerine ayarlanarak yeniden oluşturma işlemleri tetiklenmelidir.

Varsayılanlar

Varsayılan render_ işlevi, görünen metni getDisplayText_ işlevinin sonucuna ayarlar. getDisplayText_ işlevi, maksimum metin uzunluğuna uyacak şekilde kısaltıldıktan sonra alanın value_ özelliğini bir dizeye döndürür.

Varsayılan bloktaki ekranı kullanıyorsanız ve varsayılan metin davranışı alanınız için geçerliyse render_ değerini geçersiz kılmanız gerekmez.

Varsayılan metin davranışı alanınız için uygunsa ancak alanınızın bloktaki ekranında ek statik öğeler varsa varsayılan render_ işlevini çağırabilirsiniz. Ancak alanın boyutunu güncellemek için yine de bunu geçersiz kılmanız gerekir.

Varsayılan metin davranışı alanınız için uygun değilse veya alanınızın bloktaki ekranında ek dinamik öğeler varsa render_ işlevini özelleştirmeniz gerekir.

Oluşturmayı özelleştirme

Varsayılan oluşturma davranışı alanınızda işe yaramazsa özel oluşturma davranışını tanımlamanız gerekir. Bu, özel görüntü metni ayarlamaktan resim öğelerini değiştirmeye ve arka plan renklerini güncellemeye kadar her şeyi kapsayabilir.

Tüm DOM özelliği değişiklikleri yasaldır. Unutulmaması gereken iki nokta şunlardır:

1. DOM oluşturma işlemi, daha verimli olduğu için başlatma sırasında gerçekleştirilmelidir.
2. size_ özelliğini her zaman bloktaki ekranın boyutuyla eşleşecek şekilde güncellemeniz gerekir.

render_() {
  switch(this.value_.hat) {
    case 'Stovepipe':
      this.stovepipe_.style.display = '';
      break;
    case 'Crown':
      this.crown_.style.display = '';
      break;
    case 'Mask':
      this.mask_.style.display = '';
      break;
    case 'Propeller':
      this.propeller_.style.display = '';
      break;
    case 'Fedora':
      this.fedora_.style.display = '';
      break;
  }

  switch(this.value_.pattern) {
    case 'Dots':
      this.shellPattern_.setAttribute('fill', 'url(#polkadots)');
      break;
    case 'Stripes':
      this.shellPattern_.setAttribute('fill', 'url(#stripes)');
      break;
    case 'Hexagons':
      this.shellPattern_.setAttribute('fill', 'url(#hexagons)');
      break;
  }

  this.textContent_.nodeValue = this.value_.turtleName;

  this.updateSize_();
}

Önemli: Alanınızın görünen metnini güncellemek için her zaman this.textContent_.nodeValue kullanın. Bu, metin sembollerinin desteklenmesine yardımcı olur.

Boyut güncelleniyor

Bir alanın size_ özelliğinin güncellenmesi, blok oluşturma koduna alanın nasıl konumlandırılacağına dair bilgi verdiği için çok önemlidir. Bu size_ metriğinin tam olarak ne olması gerektiğini anlamanın en iyi yolu denemeler yapmaktır.

updateSize_() {
  const bbox = this.movableGroup_.getBBox();
  let width = bbox.width;
  let height = bbox.height;
  if (this.borderRect_) {
    width += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    height += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    this.borderRect_.setAttribute('width', width);
    this.borderRect_.setAttribute('height', height);
  }
  // Note how both the width and the height can be dynamic.
  this.size_.width = width;
  this.size_.height = height;
}

Dikkat: Oluşturma sırasında getBBox çağrısı, düzende bölmelere yol açabilir. Bu nedenle, boyutu almanın başka yollarını araştırmak isteyebilirsiniz.

Not: Bir alanın genişliği ve yüksekliği dinamik olabilir. Ayrıca, boyutun kendi işlevine dahil edilmesi gerekmez. İşlemin kendi işlevi içinde olması gerekmez.render_ içinde. Ancak kodu daha düzenli tutmak için genellikle bu ağlar birbirinden ayrılır.

Eşleşen blok renkleri

Alanınızdaki öğelerin, ekli oldukları bloğun renkleriyle eşleşmesini istiyorsanız applyColour yöntemini geçersiz kılmanız gerekir. Renge, blokun stil özelliği üzerinden erişmelisiniz.

applyColour() {
  const sourceBlock = this.sourceBlock_;
  if (sourceBlock.isShadow()) {
    this.arrow_.style.fill = sourceBlock.style.colourSecondary;
  } else {
    this.arrow_.style.fill = sourceBlock.style.colourPrimary;
  }
}

Not: applyColour yöntemindeki renkleri önbelleğe almak isteyebilirsiniz. Böylece bu yöntem etkinleştirildiğinde bu renkleri düzenleyicinize uygulayabilirsiniz.

Düzenlenebilirlik güncelleniyor

updateEditable işlevi, alanınızın düzenlenebilir olup olmadığına bağlı olarak nasıl görüneceğini değiştirmek için kullanılabilir. Varsayılan işlev, düzenlenebilir bir durumda/olmadığında arka planın fareyle üzerine gelme yanıtı (kenarlık) almasını/olmamasını sağlar. Bloktaki ekranın, düzenlenebilirliğine bağlı olarak boyutu değişmemesi gerekir, ancak diğer tüm değişikliklere izin verilir.

updateEditable() {
  if (!this.fieldGroup_) {
    // Not initialized yet.
    return;
  }
  super.updateEditable();

  const group = this.getClickTarget_();
  if (!this.isCurrentlyEditable()) {
    group.style.cursor = 'not-allowed';
  } else {
    group.style.cursor = this.CURSOR;
  }
}

Dikkat: Bir alanın imleciyle karıştırmak kolay değildir.

Serileştirme

Serileştirme, daha sonra çalışma alanına yeniden yüklenebilmesi için alanınızın durumunu kaydetmekle ilgilidir.

Çalışma alanınızın durumu her zaman alanın değerini içerir, ancak alanınızın kullanıcı arayüzünün durumu gibi başka durumları da içerebilir. Örneğin, alanınız kullanıcının ülkeleri seçmesine olanak tanıyan yakınlaştırılabilir bir haritaysa yakınlaştırma düzeyini de serileştirebilirsiniz.

Alanınız seri hale getirilebilir durumdaysa SERIALIZABLE özelliğini true olarak ayarlamanız gerekir.

Blockly, alanlar için iki dizi serileştirme kancası sağlar. Bir çift kanca, yeni JSON serileştirme sistemiyle, diğer çift ise eski XML serileştirme sistemiyle çalışır.

saveState ve loadState

saveState ve loadState, yeni JSON serileştirme sistemiyle çalışan serileştirme kancalarıdır.

Bazı durumlarda, varsayılan uygulamalar çalışacağı için bunları sağlamanız gerekmez. (1) Alanınız temel Blockly.Field sınıfının doğrudan alt sınıfıysa, (2) değeriniz JSON serileştirilebilir türdeyse ve (3) yalnızca değeri seri hale getirmeniz gerekiyorsa varsayılan uygulama sorunsuz bir şekilde çalışır.

Aksi takdirde, saveState işleviniz, alanın durumunu temsil eden bir JSON seri hale getirilebilir nesne/değeri döndürür. loadState işleviniz de aynı JSON seri hale getirilebilir nesnesini/değerini kabul etmeli ve bunu alana uygulamalıdır.

saveState() {
  return {
    'country': this.getValue(),  // Value state
    'zoom': this.getZoomLevel(), // UI state
  };
}

loadState(state) {
  this.setValue(state['country']);
  this.setZoomLevel(state['zoom']);
}

Tam serileştirme ve veri yedekleme

saveState, isteğe bağlı doFullSerialization parametresi de alır. Bu, normalde farklı bir serileyici tarafından serileştirilmiş duruma referans veren alanlar (ör. yedekleme veri modelleri) tarafından kullanılır. Parametre, blok seri durumdan çıkarıldığında referans verilen durumun kullanılamayacağını belirtir. Bu nedenle, tüm serileştirme işlemini alanın kendisi yapması gerekir. Örneğin bu, tek bir blok serileştirildiğinde veya bir blok kopyalayıp yapıştırıldığında geçerlidir.

Bunun iki yaygın kullanım alanı vardır:

• Yedekleme veri modelinin var olmadığı bir çalışma alanına tek bir blok yüklendiğinde, alanın kendi durumunda yeni bir veri modeli oluşturmak için yeterli bilgi olur.
• Bir blok kopyalayıp yapıştırıldığında alan, mevcut bir bloka referans vermek yerine her zaman yeni bir yedekleme veri modeli oluşturur.

Bunu kullanan alanlardan biri yerleşik değişken alanıdır. Normalde, başvuruda bulunduğu değişkenin kimliğini seriler, ancak doFullSerialization doğruysa tüm durumunu seriler.

saveState(doFullSerialization) {
  const state = {'id': this.variable_.getId()};
  if (doFullSerialization) {
    state['name'] = this.variable_.name;
    state['type'] = this.variable_.type;
  }
  return state;
}

loadState(state) {
  const variable = Blockly.Variables.getOrCreateVariablePackage(
      this.getSourceBlock().workspace,
      state['id'],
      state['name'],   // May not exist.
      state['type']);  // May not exist.
  this.setValue(variable.getId());
}

Değişken alanı, değişkeninin mevcut olmadığı bir çalışma alanına yüklenirse referans verilecek yeni bir değişken oluşturabilmesini sağlamak için bunu yapar.

toXml ve fromXml

toXml ve fromXml, eski XML serileştirme sistemiyle çalışan serileştirme kancalarıdır. Bu kancaları yalnızca gerektiğinde kullanın (ör. henüz taşınmamış eski bir kod tabanı üzerinde çalışıyorsanız) aksi takdirde saveState ve loadState kullanın.

toXml işleviniz, alanın durumunu temsil eden bir XML düğümü döndürmelidir. fromXml işleviniz de aynı XML düğümünü kabul etmeli ve alana uygulamalıdır.

toXml(fieldElement) {
  fieldElement.textContent = this.getValue();
  fieldElement.setAttribute('zoom', this.getZoomLevel());
  return fieldElement;
}

fromXml(fieldElement) {
  this.setValue(fieldElement.textContent);
  this.setZoomLevel(fieldElement.getAttribute('zoom'));
}

Düzenlenebilir ve seri hale getirilebilir özellikler

EDITABLE özelliği, alanda etkileşim kurulabileceğini belirten kullanıcı arayüzünün olup olmayacağını belirler. Varsayılan olarak true değerine ayarlanır.

SERIALIZABLE özelliği, alanın serileştirilip serileştirilmeyeceğini belirler. Varsayılan olarak false değerine ayarlanır. Bu özellik true ise seri hale getirme ve serileştirme işlevleri sağlamanız gerekebilir (Serileştirme bölümüne bakın).

Önemli: EDITABLE alanınız için true ise SERIALIZABLE değeri de true olarak ayarlanmalıdır. Geriye dönük uyumluluk nedeniyle bu durum varsayılan olarak geçerli değildir.

İmleci özelleştirme

CURSOR özelliği, kullanıcıların fareyle alanınızın üzerine geldiğinde göreceği imleci belirler. Geçerli bir CSS imleç dizesi olmalıdır. Varsayılan olarak, tutma imleci olan .blocklyDraggable tarafından tanımlanan imleç kullanılır.