पसंद के मुताबिक बबल बनाना

बबल, एक पॉप-अप यूज़र इंटरफ़ेस (यूआई) होता है, जो कॉमिक बबल की तरह दिखता है. इनमें एक "टेल" होता है, जो ब्लॉक पर ले जाता है. साथ ही, "हेड" होता है, जिसमें आर्बिट्ररी svg एलिमेंट होते हैं.

अगर बिल्ट-इन बबल, इस्तेमाल के उदाहरण के लिए काम नहीं करता, तो Bubble क्लास को सब-क्लास करके कस्टम बबल बनाया जा सकता है.

व्यू बनाना

बबल का व्यू वे सभी svg एलिमेंट होते हैं जो बबल के "हेड" में रहते हैं. ये एलिमेंट, बबल के कंस्ट्रक्टर के अंदर बनाए जाते हैं और this.contentContainer एलिमेंट के चाइल्ड एलिमेंट होने चाहिए, ताकि आइकॉन खत्म होने पर वे अपने-आप साफ़ हो जाएं.

Blockly.utils.dom मॉड्यूल, एसवीजी को इंस्टैंशिएट करने के लिए एक आसान इंटरफ़ेस देता है.

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

साइज़ सेट करना

बबल का साइज़ setSize का इस्तेमाल करके सेट करना ज़रूरी है, ताकि बाहरी बॉर्डर बबल के कॉन्टेंट को ठीक से घेर सके. इसे कंस्ट्रक्शन के दौरान और यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साइज़ बदलने पर सेट किया जाना चाहिए.

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

बबल को हटाएं

बबल को हटाए जाने के बाद, डॉम एलिमेंट या बाहरी रेफ़रंस को साफ़ कर देना चाहिए. डिफ़ॉल्ट रूप से, this.contentContainer में जोड़ी गई कोई भी चीज़ मिटा दी जाती है, लेकिन दूसरे रेफ़रंस को मैन्युअल रूप से साफ़ करने की ज़रूरत होती है. यह काम dispose वाले तरीके से किया जाना चाहिए.

dispose() {
  super.dispose();

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