रेंडर करना

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

कब ध्यान रखें

आपको इस सिस्टम के साथ इंटरैक्ट करना होगा, अगर:

• Blockly में ऐसे तरीके जोड़ना जो ब्लॉक के आकार में बदलाव करते हैं.
• Blockly में ऐसे तरीके जोड़ना जो किसी ब्लॉक के अपडेट किए गए साइज़ या पोज़िशन की जानकारी पर निर्भर करते हैं.

यह कैसे काम करता है

1. अपने-आप सूची में जुड़ने की सुविधा चालू करें. जब भी किसी ब्लॉक में बदलाव किया जाता है, तो Blockly उस ब्लॉक के लिए रेंडर को "लाइन में" लगा देता है. रेंडर करने के लिए सूची में जोड़े जाने वाले बदलावों के कुछ उदाहरण:

   • फ़ील्ड की वैल्यू सेट करना
   • इनपुट जोड़ना या हटाना
   • चाइल्ड ब्लॉक को कनेक्ट या डिसकनेक्ट करना

2. सेट बनाएं. जब कोई ब्लॉक सूची में शामिल होता है, तो रेंडर मैनेजमेंट सिस्टम उसे और उसके सभी पैरंट ब्लॉक को उन ब्लॉक के सेट में जोड़ देता है जिन्हें फिर से रेंडर करना ज़रूरी है.

3. कॉलबैक का अनुरोध करें. इसके बाद, रेंडर मैनेजमेंट सिस्टम, requestAnimationFrame का इस्तेमाल करके कॉलबैक का अनुरोध करता है. मौजूदा फ़्रेम बनने से पहले, ब्राउज़र इस कॉलबैक को कॉल करता है.

4. सेट को (ट्री के तौर पर) फिर से रेंडर करें. जब requestAnimationFrame कॉलबैक को कॉल किया जाता है, तो रेंडर मैनेजमेंट सिस्टम, सेट में मौजूद हर ब्लॉक को रेंडर करता है. यह रेंडरिंग, लीफ़ ब्लॉक से लेकर रूट ब्लॉक तक की जाती है. इससे यह पक्का होता है कि पैरंट ब्लॉक रेंडर होने से पहले, चाइल्ड ब्लॉक के साइज़ की सटीक जानकारी हो, ताकि पैरंट ब्लॉक अपने चाइल्ड ब्लॉक के हिसाब से स्ट्रेच हो सकें.

ध्यान दें: ऐसे बदलाव जिनसे सिर्फ़ ब्लॉक के रंग पर असर पड़ता है, न कि उसके आकार पर (उदाहरण के लिए, ब्लॉक को बंद करना), रेंडर करने के लिए लाइन में नहीं जोड़े जाते. रंग अपडेट कर दिए गए हैं अलग से BlockSvg.prototype.applyColour का इस्तेमाल किया जा रहा है.

यह कैसे काम करता है

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

उदाहरण के लिए, दो अन्य सूचियों के बीच एक ब्लॉक डालने से 11 रेंडर होते हैं, लेकिन सिर्फ़ 3 असल में होते हैं (हर ब्लॉक के लिए एक). इसका मतलब है कि परफ़ॉर्मेंस में 3.6 गुना बढ़ोतरी हुई.

इसका इस्तेमाल कैसे करें

आम तौर पर आपको रेंडर मैनेजमेंट सिस्टम पर ध्यान देने की ज़रूरत नहीं होती, क्योंकि जब आप किसी ब्लॉक में बदलाव करते हैं तो वह अपने आप काम करता है. हालांकि, कुछ मामलों में आपको सीधे तौर पर उससे इंटरैक्ट करना पड़ता है.

रेंडर की सूची

अगर Blockly में कोई नया तरीका जोड़ा जा रहा है, तो रोकने के लिए, आपको BlockSvg.prototype.queueRender को कॉल करना होगा, ताकि ब्लॉक.

रेंडर होने का इंतज़ार करें

अगर Blockly में कोई ऐसा तरीका जोड़ा जा रहा है जिसका साइज़ अपडेट करना ज़रूरी है या तो आपको उसका इंतज़ार करना होगा renderManagement.finishQueuedRenders() प्रॉमिस. यह वादा, सूची में मौजूद सभी रेंडर पूरा होने के बाद पूरा होता है. अगर सूची में कोई रेंडर नहीं है, तो यह वादा तुरंत पूरा हो जाता है.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

सूची में मौजूद रेंडर को तुरंत ट्रिगर करना

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

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

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

ऐसे में, कुछ ऐसी जगहें भी होती हैं जहां यह पुराने सिस्टम के साथ काम करने की सुविधा की वजह से. इन्हें वर्शन 11 में हटाने की योजना है.