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

पसंद का आइकॉन बनाने के लिए, आपको 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);
  }
}

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

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 तरीके का इस्तेमाल करके, अपने आइकॉन जो ब्लॉक पर लाइव है. नए एलिमेंट, this.svgRoot एलिमेंट, ताकि आइकॉन पर क्लिक करते ही वे अपने-आप हट जाएं को खत्म कर दिया जाता है.

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

साइज़ दिखाना

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