टिप्पणी बदलने का आइकॉन

आपके पास, पहले से मौजूद टिप्पणी आइकॉन को बदलने का विकल्प है. उदाहरण के लिए, हो सकता है कि आपको टिप्पणी के पॉप-अप बबल को अलग तरह से दिखाना हो.

टिप्पणी वाले आइकॉन को हाइलाइट किया गया ब्लॉक

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

Extend CommentIcon

CommentIcon को बढ़ाकर शुरू करें.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

ICommentIcon और Icon में, ओवरराइड करने के तरीके

अपने आइकॉन को पसंद के मुताबिक बनाने के लिए, ICommentIcon (इसके बारे में अगले सेक्शन में बताया गया है) और Blockly.icons.Icon (इसके बारे में कस्टम आइकॉन बनाएं में बताया गया है) में दिए गए तरीकों को बदला जा सकता है. getType को बदलें नहीं, जो 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();
}

ICommentIcon के लिए getBubbleLocation और setBubbleLocation तरीकों की भी ज़रूरत होती है. इनसे Workspace में बबल की जगह का पता चलता है और उसे सेट किया जाता है.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

सेव और लोड करना

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

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

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

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

अपना आइकॉन रजिस्टर करना

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

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

आइकॉन रजिस्टर करने के बाद, Blockly उसे पहले से मौजूद टिप्पणी आइकॉन के बजाय इस्तेमाल करेगा. जैसे, जब कोई उपयोगकर्ता संदर्भ मेन्यू में "टिप्पणी जोड़ें" पर क्लिक करता है या आप myBlock.setCommentText() को कॉल करते हैं.