Yerleşik simgeleri geçersiz kıl

Blockly'de üç tür yerleşik simge bulunur: yorumlar, uyarılar ve dönüştürücüler.

Yorum simgeleri geçersiz kılınabilir. Bu, Blockly'ye örneklendirmesini söyleyebileceğiniz anlamına gelir. çağırmak için kullanabileceğiniz, myBlock.setCommentText() Örneğin, izin modunun pop-up baloncuğunu kullanın.

Uyarı ve mutatör simgeleri geçersiz kılınamaz.

Yorum simgesi

Yorum simgesini geçersiz kılmak için ICommentIcon arayüzünü kullanıp kaydedebilirsiniz.

Temel uygulama

Yoruma özgü mantık eklemeden önce Özel simgenizin temel uygulaması.

Tür

getType yöntemi, yorum simgesini IconType döndürmelidir.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

Metin

ICommentIcon arayüzü, yorumda metin bulunmasını gerektirir. getText yöntemi, yorum metnini döndürmelidir. setText yöntemi yorumun metnini ayarlamalı ve tüm görselleri güncellemelidir.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Baloncuk

Özel yorum simgeniz IHasBubble arayüzünü uygulamalıdır serileştirmeyi destekler. Simgenizde teknik olarak baloncuk bulunmasa bile sınıfınızda görünürlük bilgilerini saklamanız gerekir. Böylece, durumunun sürdürülmesini sağlar. Aksi takdirde Yorumun açık olup olmadığını içeren bir kayıt.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

Baloncuklar hakkında daha fazla bilgi için Pop-up baloncukları kullanma bölümüne bakın.

ICommentIcon arayüzü, aşağıdaki sonuçları döndüren bir getBubbleSize yöntemi de gerektirir: bir boyut ve onu belirleyen bir setBubbleSize. Önceki senaryodakiyle aynı mantık simgenizde teknik olarak bir baloncuk bulunmasa bile kaydetme durumu burada olur.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Kaydet ve yükle

Özel yorum simgeniz ISerializable öğesini uygulamalıdır kullanır. Eyalet, CommentState şartlarına uygun olmalıdır. kullanır.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

Simge serileştirme hakkında daha fazla bilgi için bkz. Simgeleri kaydedin ve yükleyin.

Kayıt

Son olarak, Blockly'nin örnek oluşturabilmesi için simgenizi kaydetmeniz gerekir. IconTypes.COMMENT türünü kullandığınızdan emin olun.

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);