Özel simgeler oluşturma

Özel simge oluşturmak için IIcon arayüzünü uygulamanız gerekir. Bu, Blockly'ye simgenizin nasıl oluşturulmasını ve ne yapılmasını istediğinizi bildirir. tıklanırsa ne yapılmalıdır, vb.

Zaten Icon soyut sınıfını içereceğinden alt sınıflandırılmasını öneririz. IIcon içinde birçok yöntemin varsayılan uygulamalarını sunar kullanır.

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Simgenin türünü belirtin

getType yöntemi, simgesini tıklayın. Simgeyi serileştirme amacıyla kaydetmek ve simge getIcon konumundan alınıyor.

JavaScript

getType() {
  return new Blockly.icons.IconType('my_icon');
}

TypeScript

getType(): Blockly.icons.IconType<MyIcon> {
  return new Blockly.icons.IconType<MyIcon>('my_icon');
}

Simgenin görünümünü oluşturun

Simgenin görünümü, blokta bulunan SVG öğelerini ifade eder.

Görünümü başlat

initView yöntemi, sayfanızdaki SVG öğelerini oluşturduğunuz yerdir. görebilirsiniz. Yeni öğeler this.svgRoot öğe. Simge açıldığında otomatik olarak temizlenirler imha edilir.

Blockly.utils.dom modülü temiz bir arayüz sunar. için bu yöntemin kullanılmasıdır.

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

Bedeni döndürün

getSize yöntemi, simgenin boyutunu döndürür. Dolayısıyla, oluşturucu, bloğu bunun için yeterince geniş hale getirebilir.

Boyut, rastgele "çalışma alanı birimlerinde"dir (çalışma alanı olarak değişmez.) ).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

Sırayı belirleme

Simgelerin blok içinde statik bir sırası vardır. Örneğin, yerleşik mutatör yorum simgelerinin önünde her zaman yorum simgelerinin önünde gösterilir. uyarı simgeleri.

Sıralama, getWeight tarafından döndürülen değerle kontrol edilir yöntemidir. Daha az pozitif ağırlıklara sahip simgeler, daha fazla pozitif ağırlıkta olan simgeler pozitif ağırlıklar da vardır.

getWeight() {
  return 10;
}

Tıklama davranışını uygulayın

Birçok simge etkileşimlidir ve tıklandığında bir şeyler yapar. Örneğin, yerleşik simgelerin tümü tıklandığında bir balon görünür. Şunları yapabilirsiniz: bunu uygulamak için onClick yöntemini kullanın.

onClick() {
  // Do something when clicked.
}

Engelleme değişikliklerine yanıt verme

Bazı simgeler bloktaki değişikliklere, özellikle de bloktaki değişikliklere özellikleri de değiştirebilirsiniz.

Düzenlenebilirlik

Engellemenin etkin olup olmadığına bağlı olarak simgeniz, düzenlenebilir veya düzenlenmez (örneğin, engelleme engellendiğinde tıklanabilir olmaması gerekir) düzenlenebilir) updateEditable yöntemini uygulayın. Bu yöntem bloğun düzenlenebilir durumu değiştiğinde otomatik olarak çağrılır.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

Daraltılmışlık

Bazı simgeler engelleme daraltıldığında gösterilir ancak varsayılan olarak değil. Simgenizin gösterilmesini istiyorsanız true değerini döndürmek için isShownWhenCollapsed yöntemi.

isShownWhenCollapsed() {
  return true;
}

Ardından, updateCollapsed yöntemini geçersiz kılın.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

Simgeyi ortadan kaldırın

Simgeler, etkin olduklarında tüm dom öğelerini veya harici referansları temizlemelidir bertaraftı. Varsayılan olarak, this.svgRoot öğesine eklenen her şey ancak diğer referansların manuel olarak temizlenmesi gerekir. Bu özellik, dispose yöntemi ile yapılır.

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}