रेंडर करने वाले

ब्लॉकली में रेंडरर, ब्लॉक के आकार को कंट्रोल करता है. इसमें ऊंचाई, पैडिंग, बॉर्डर की मोटाई, और कनेक्शन का आकार शामिल है.

पसंद के मुताबिक रेंडर करने वाले

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

पसंद के मुताबिक रेंडरर बनाने के लिए, आपको ये काम करने होंगे:

1. नया रेंडरर तय करें. आपको कहां से शुरू करना है, इस आधार पर बेस रेंडरर क्लास या मौजूदा रेंडरर में से किसी को सब-क्लास कर सकते हैं.
2. उन हिस्सों को बदलें जिन्हें बदलना है.
   1. उदाहरण के लिए, ब्लॉक में ज़्यादा पैडिंग (जगह) जोड़ने के लिए, ConstantProvider (फिर से, बेस या कोई मौजूदा रेंडरर) को सब-क्लास किया जा सकता है. साथ ही, सही कॉन्सटेंट को बदला जा सकता है. अन्य सभी वैल्यू, आपकी चुनी गई बेस क्लास जैसी ही रहेंगी.
   2. अपनी कस्टम Renderer सब-क्लास में, आपको नई ConstantProvider क्लास को जोड़ना होगा. बेस क्लास के बजाय, कस्टम ConstantProvider का नया इंस्टेंस दिखाने के लिए, makeConstants_ फ़ंक्शन को बदलें.
   3. PathObject या Drawer जैसी दूसरी क्लास को ओवरराइड करते समय भी यही तरीका अपनाएं.

3. रेंडर करने वाले को रजिस्टर करें:

   Blockly.blockRendering.register('custom_renderer', CustomRenderer);
   

4. अपने ऐप्लिकेशन में रेंडरर का इस्तेमाल करें:

   Blockly.inject('blocklyDiv', {
     renderer: 'custom_renderer'
   });
   

पहले से मौजूद रेंडरर

ब्लॉकली, पहले से बने कई रेंडरर उपलब्ध कराता है. इन्हें ऐसे ही इस्तेमाल किया जा सकता है या कस्टम रेंडरर के बेस के तौर पर इस्तेमाल किया जा सकता है.

• geras (डिफ़ॉल्ट)
• thrasos (जेरा को लेने का ज़्यादा मॉडर्न तरीका)
• zelo (स्क्रैच की तरह)
• minimalist (बेस रेंडरर क्लास)

इनमें से किसी एक रेंडरर का इस्तेमाल करने के लिए, नाम को इंजेक्शन के विकल्प में डालें:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

उन्हें सब-क्लास करने के लिए, सही क्लास को बढ़ाएं:

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}