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, myBlock.setCommentText() gibi yöntemleri çağırırken Blockly'ye kendi yorum simgesi sınıfınızı örneklendirmesini söyleyebileceğiniz anlamına gelir. Örneğin, yorumun pop-up balonunun farklı görünmesini istiyorsanız bunu yapabilirsiniz.

Uyarı ve değişiklik simgeleri geçersiz kılınamaz.

Yorum simgesi

Yorum simgesini geçersiz kılmak için, ICommentIcon arayüzünü uygulayan özel bir simge oluşturmanız ve ardından kaydetmeniz gerekir.

Temel uygulama

Yoruma özel mantık eklemeden önce özel simgenizin temel uygulamasını tamamlayın.

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ü, yorumun metin içermesini 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

Serileştirmeyi desteklemek için özel yorum simgeniz IHasBubble arayüzünü uygulamalıdır. Simgenizde teknik olarak bir baloncuk olmasa bile, kayıtlı durumun korunması için görünürlük bilgilerini sınıfınızda depolamanız gerekir. Aksi takdirde, yorumun açık olup olmadığını belirten bir kayıt yüklerseniz kullanıcının bilgilerini kaybedersiniz.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Baloncuklar hakkında daha fazla bilgi için Pop-up baloncuklarını kullanma başlıklı makaleye bakın.

ICommentIcon arayüzü, boyut döndüren bir getBubbleSize yöntemi ve bunu ayarlayan bir setBubbleSize yöntemi de gerektirir. Simgenizde teknik olarak bir baloncuk olmasa bile, daha önceki kaydetme durumundaki mantık burada da geçerlidir.

getBubbleSize() {
  return this.bubbleSize;
}

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

Kaydet ve yükle

Özel yorum simgeniz ISerializable arayüzünü uygulamalıdır. Durum, CommentState arayüzüne uygun olmalıdı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));
}

Simgeleri serileştirme hakkında daha fazla bilgi için Simgeleri kaydetme ve yükleme bölümüne bakın.

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