पहले से मौजूद आइकॉन बदलें

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

टिप्पणी के आइकॉन को बदला जा सकता है. इसका मतलब है कि myBlock.setCommentText() जैसे तरीकों को कॉल करते समय, Blockly को टिप्पणी आइकॉन की अपनी क्लास इंस्टैंशिएट करने की सुविधा दी जा सकती है. उदाहरण के लिए, अगर आपको टिप्पणी का पॉप-अप बबल अलग से दिखाना हो, तो ऐसा किया जा सकता है.

चेतावनी और म्यूटेटर आइकॉन को बदला नहीं जा सकता.

टिप्पणी करने का आइकॉन

टिप्पणी के आइकॉन को बदलने के लिए, आपको पसंद के मुताबिक ऐसा आइकॉन बनाना होगा जो ICommentIcon इंटरफ़ेस को लागू करे. इसके बाद, आपको उसे रजिस्टर करना होगा.

बुनियादी तौर पर लागू करना

किसी खास टिप्पणी के लिए लॉजिक जोड़ने से पहले, अपने कस्टम आइकॉन को बुनियादी तौर पर लागू करें.

टाइप

getType तरीके से टिप्पणी का आइकॉन IconType दिखना चाहिए.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

टेक्स्ट

ICommentIcon इंटरफ़ेस के लिए, टिप्पणी में टेक्स्ट होना ज़रूरी है. getText वाले तरीके से टिप्पणी का टेक्स्ट दिखना चाहिए. setText वाले तरीके को, टिप्पणी का टेक्स्ट सेट करना होगा और विज़ुअल को अपडेट करना होगा.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

बबल

आपके पसंद के मुताबिक बनाई गई टिप्पणी के आइकॉन में IHasBubble इंटरफ़ेस लागू होना चाहिए, ताकि क्रम तय करने में मदद मिल सके. अगर आपके आइकॉन में तकनीकी रूप से बबल नहीं है, तब भी आपको क्लास में उसके दिखने की जानकारी सेव करनी चाहिए. इससे, सेव की गई स्थिति बनी रहेगी. ऐसा नहीं करने पर, सेव किया गया पेज लोड होने पर उपयोगकर्ता से मिली जानकारी हट जाएगी. इसमें यह जानकारी भी शामिल होती है कि टिप्पणी खुली हुई थी या नहीं.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

बबल्स के बारे में ज़्यादा जानकारी के लिए, पॉप-अप बबल का इस्तेमाल करना लेख पढ़ें.

ICommentIcon इंटरफ़ेस के लिए, getBubbleSize वाले ऐसे तरीके की भी ज़रूरत होती है जो साइज़ और setBubbleSize को सेट करता हो. सेव करने की स्थिति के पहले बने होने के पीछे यही तर्क यहां भी लागू होता है, भले ही आपके आइकॉन में तकनीकी रूप से बबल न हो.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

सेव करें और लोड करें

आपके कस्टम टिप्पणी आइकॉन में ISerializable इंटरफ़ेस लागू करना ज़रूरी है. स्टेटस CommentState इंटरफ़ेस के मुताबिक होना चाहिए.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

आइकॉन को क्रम से लगाने के बारे में ज़्यादा जानकारी के लिए, आइकॉन सेव करना और लोड करना देखें.

रजिस्ट्रेशन

आखिर में, आपको अपना आइकॉन रजिस्टर करना होगा, ताकि Blockly उसे इंस्टैंशिएट कर सके. IconTypes.COMMENT टाइप का ही इस्तेमाल करें.

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);