कस्टम आइकॉन बनाएं

अपनी पसंद के मुताबिक आइकॉन बनाने के लिए, आपको IIcon इंटरफ़ेस लागू करना होगा. इससे Blockly को पता चलता है कि आपको अपना आइकॉन कैसे रेंडर करना है, उस पर क्लिक करने पर आपको क्या करना है वगैरह.

हमारा सुझाव है कि Icon ऐब्स्ट्रैक्ट क्लास को सबक्लास करें, क्योंकि इसमें IIcon इंटरफ़ेस में कई तरीकों के डिफ़ॉल्ट तौर पर लागू करने की सुविधा पहले से मौजूद है.

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

आइकॉन का टाइप तय करना

The getType तरीका, आइकॉन के टाइप को दिखाने वाली वैल्यू दिखाता है. इसका इस्तेमाल, आइकॉन को क्रम से लगाने के लिए रजिस्टर करने और आइकॉन को getIconसे वापस पाने के लिए किया जाता है.

JavaScript

getType() {
  return new Blockly.icons.IconType('my_icon');
}

TypeScript

getType(): Blockly.icons.IconType<MyIcon> {
  return new Blockly.icons.IconType<MyIcon>('my_icon');
}

आइकॉन का व्यू बनाना

आइकॉन के व्यू का मतलब, ब्लॉक पर मौजूद एसवीजी एलिमेंट से है.

व्यू को शुरू करना

initView तरीके से, ब्लॉक पर मौजूद आइकॉन के एसवीजी एलिमेंट बनाए जाते हैं. नए एलिमेंट, this.svgRoot एलिमेंट के चाइल्ड होने चाहिए, ताकि आइकॉन के बंद होने पर वे अपने-आप साफ़ हो जाएं.

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

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

साइज़ की जानकारी देना

The getSize तरीका, आइकॉन का साइज़ दिखाता है, ताकि रेंडरर ब्लॉक को आइकॉन के हिसाब से चौड़ा बना सके.

साइज़, "वर्कस्पेस यूनिट" में होता है. यह यूनिट, वर्कस्पेस के स्केल में बदलाव होने पर भी नहीं बदलती.

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

क्रम सेट करना

आइकॉन, ब्लॉक में एक तय क्रम में दिखते हैं. उदाहरण के लिए, बिल्ट-इन म्यूटेटर आइकॉन हमेशा टिप्पणी वाले आइकॉन के सामने दिखते हैं. वहीं, टिप्पणी वाले आइकॉन, चेतावनी वाले आइकॉन के सामने दिखते हैं.

क्रम को getWeight तरीके से दिखाई गई वैल्यू से कंट्रोल किया जाता है. ज़्यादा पॉज़िटिव वेट वाले आइकॉन, कम पॉज़िटिव वेट वाले आइकॉन के बाद रेंडर होते हैं.

getWeight() {
  return 10;
}

ध्यान दें: आइकॉन को ब्लॉक में जोड़ने पर ही वेट की जांच की जाती है. इसलिए, डाइनैमिक वेट की सुविधा उपलब्ध नहीं है.

ऑनक्लिक बिहेवियर लागू करना

कई आइकॉन इंटरैक्टिव होते हैं और उन पर क्लिक करने पर कुछ होता है. उदाहरण के लिए, बिल्ट-इन आइकॉन पर क्लिक करने पर, एक बबल दिखता है. इसे लागू करने के लिए, onClick तरीके का इस्तेमाल किया जा सकता है.

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

ब्लॉक में होने वाले बदलावों के हिसाब से काम करना

कुछ आइकॉन, ब्लॉक में होने वाले बदलावों के हिसाब से भी काम करते हैं. खास तौर पर, बदलाव करने की सुविधा और ब्लॉक को छोटा करने की सुविधा के हिसाब से.

बदलाव करने की सुविधा

अगर आपका आइकॉन, ब्लॉक में बदलाव करने की सुविधा के हिसाब से अलग-अलग तरीके से काम करता है, तो updateEditable तरीका लागू करें. उदाहरण के लिए, अगर ब्लॉक में बदलाव करने की सुविधा नहीं है, तो आइकॉन पर क्लिक नहीं किया जा सकता. ब्लॉक में बदलाव करने की सुविधा की स्थिति बदलने पर, यह तरीका अपने-आप कॉल हो जाता है.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

ब्लॉक को छोटा करने की सुविधा

कुछ आइकॉन, ब्लॉक को छोटा करने पर दिखते हैं. हालांकि, डिफ़ॉल्ट तौर पर ऐसा नहीं होता. अगर आपको अपना आइकॉन दिखाना है, तो isShownWhenCollapsed तरीके को ओवरराइड करके true दिखाएं.

isShownWhenCollapsed() {
  return true;
}

इसके बाद, updateCollapsed तरीके को ओवरराइड करें.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

आइकॉन को बंद करना

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

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

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