कोई नया आइकॉन टाइप बनाना

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

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

आइकॉन का टाइप बताएं

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

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

आइकॉन का व्यू, ब्लॉक पर रहने वाले SVG एलिमेंट को दिखाता है.

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

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

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

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

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

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

छोटा-बड़ा होना

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

isShownWhenCollapsed() {
  return true;
}

इसके बाद, updateCollapsed तरीके को बदलें.

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

आइकॉन को नष्ट करें

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

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

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