रेंडर करना

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

देखभाल कब करें

आपको इस सिस्टम से इंटरैक्ट करने की ज़रूरत तब होती है, जब:

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

यह सुविधा कैसे काम करती है

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

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

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

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

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

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

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

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

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

सूची से रेंडर होने में लगने वाला समय

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

इमेज बनाने की प्रोसेस पूरी होने का इंतज़ार करें

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

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

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

सूची में शामिल रेंडर को तुरंत ट्रिगर करें

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

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

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

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

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