Özel baloncuk oluşturma

Balon, çizgi romanlarda gördüğünüz konuşma balonuna benzeyen pop-up kullanıcı arayüzüdür. Bunlarda, bir bloğu işaret eden "kuyruk" ve rastgele svg öğeleri içeren bir "baş" bulunur.

Yerleşik baloncuklar kullanım alanınız için uygun değilse Bubble sınıfını alt sınıflandırarak özel bir balon oluşturabilirsiniz.

Görünümü oluşturma

Balonun görünümü, baloncuğun "başlığı" içinde bulunan tüm svg öğeleridir. Bu öğeler, balon oluşturucunun içinde oluşturulur ve simge kaldırıldığında otomatik olarak temizlenmeleri için this.contentContainer öğesinin alt öğeleri olmaları gerekir.

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

class MyBubble extends Blockly.bubbles.Bubble {
  // See the Blockly.bubbles.Bubble class for information about what these
  // parameters are.
  constructor(workspace, anchor, ownerRect) {
    super(workspace, anchor, ownerRect);

    this.text = Blockly.utils.dom.createSvgElement(
          Blockly.utils.Svg.TEXT,
          {'class': 'my-bubble-class'},
          this.contentContainer);
    const node = Blockly.utils.dom.createTextNode('some text');
    this.text.appendChild(node);
  }
}

Boyutu ayarlama

Dış sınırın, balonun içeriğini düzgün bir şekilde çevreleyebilmesi için balonun boyutunun setSize kullanılarak ayarlanması gerekir. Yapım sırasında ve kullanıcı arayüzü öğelerinin boyutu değiştiğinde ayarlanmalıdır.

constructor(workspace, anchor, ownerRect) {
  // Create the view elements... (see above)

  const bbox = this.text.getBBox();
  this.setSize(
    new Blockly.utils.Size(
      bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
      bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
    ),
    true
  );
}

Baloncuk temizleme

Balonlar, atıldıklarında tüm dom öğelerini veya harici referansları temizlemelidir. Varsayılan olarak, this.contentContainer öğ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() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}