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

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

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

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

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

टिप्पणी वाले आइकॉन को बदलने के लिए, आपको ऐसा कस्टम आइकॉन बनाना होगा जो लागू होता हो 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);