Yeni simge türü oluşturma

Özel bir simge oluşturmak için IIcon arayüzünü uygulamanız gerekir. Bu, Blockly'ye simgenizin nasıl oluşturulmasını istediğinizi, tıklandığında ne yapmasını istediğinizi bildirir.

Icon soyut sınıfını zaten IIcon arayüzünde birçok yöntemin varsayılan uygulamalarını sunduğundan alt sınıflandırmanızı öneririz.

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ü belirtme

getType yöntemi, simgenin türünü temsil eden bir değer döndürür. Serileştirme için simgeyi kaydetmek ve getIcon üzerinden simgeyi almak için kullanılır.

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şturma

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

Görünümü başlat

initView yöntemi, blokta bulunan simgenizin SVG öğelerini oluşturduğunuz yerdir. Yeni öğeler, simge kaldırıldığında otomatik olarak temizlenmeleri için this.svgRoot öğesinin alt öğeleri olmalıdır.

Blockly.utils.dom modülü, SVG'lerin örneklenmesi için temiz bir arayüz sağlar.

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, oluşturucunun bloğu bunun için yeterince geniş hale getirebilmesi için simgenin boyutunu döndürür.

Boyut, rastgele "çalışma alanı birimleri" şeklindedir (çalışma alanı ölçek değiştikçe değişmez).

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

Sırayı belirleme

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

Sıra, getWeight yöntemi tarafından döndürülen değerle kontrol edilir. Daha pozitif ağırlıklara sahip simgeler, ağırlıkları daha az pozitif olan simgelerden sonra oluşturulur.

getWeight() {
  return 10;
}

Tıklama davranışını uygulama

Birçok simge etkileşimlidir ve tıklandıklarında bir işlem gerçekleştirirler. Örneğin, yerleşik simgelerin tümü tıklandığında bir balon gösterir. Bunu uygulamak için onClick yöntemini kullanabilirsiniz.

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

Engelleme değişikliklerine yanıt verme

Bazı simgeler, bloktaki değişikliklere, özellikle de düzenlenebilirlik ve daraltılmışlık değişikliklerine yanıt vermek ister.

Düzenlenebilirlik

Simgenizin, engellemenin düzenlenebilir olup olmamasına bağlı olarak farklı davranması gerekiyorsa (örneğin, blok düzenlenebilirken tıklanabilir olmadığında) updateEditable yöntemini uygulayın. Bu yöntem, engellemenin 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ış olma

Bazı simgeler, blok daraltıldığında gösterilir ancak varsayılan olarak daraltılmaz. Simgenizin gösterilmesini istiyorsanız true değerini döndürmek için isShownWhenCollapsed yöntemini geçersiz kılın.

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 silme

Simgeler, atıldıklarında dom öğelerini veya harici referansları temizlemelidir. Varsayılan olarak, this.svgRoot öğesine eklenen her şey kaldırılır ancak diğer referansların manuel olarak temizlenmesi gerekir. Bu işlem dispose yöntemi ile yapılmalıdır.

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

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