कॉन्टेक्स्ट मेन्यू

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

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

ध्यान दें: संदर्भ मेन्यू के विकल्पों को जोड़ने के कई उदाहरण देखने के लिए, कॉन्टेक्स्ट मेन्यू कोडलैब वाला पेज देखें.

नया विकल्प लागू करना

संदर्भ मेन्यू के नए विकल्प को लागू करने के लिए, आपको RegistryItem इंटरफ़ेस को पूरा करना होगा.

आईडी

id प्रॉपर्टी एक यूनीक स्ट्रिंग होनी चाहिए, ताकि यह पता चल सके कि आपके संदर्भ मेन्यू विकल्प से क्या होता है.

const deleteOption = {
  id: 'deleteElement',
};

स्कोप

scopeType प्रॉपर्टी से Blockly को यह पता चलता है कि मेन्यू का विकल्प किस संदर्भ में दिखाया जा सकता है. साथ ही, इसकी मदद से यह भी पता चलता है कि displayText, preconditionFn, और callback को कौनसी जानकारी दी जानी चाहिए. संदर्भ मेन्यू का दायरा, ब्लॉक करना, फ़ाइल फ़ोल्डर की टिप्पणियां करना, और फ़ाइल फ़ोल्डर करना हो सकता है.

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

अगर आपको संदर्भ मेन्यू कई स्कोप में काम करना है, तो संदर्भ मेन्यू के विकल्प को डुप्लीकेट करें. साथ ही, हर स्कोप के लिए स्कोप पैरामीटर को फिर से तय करें.

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

डिसप्ले टेक्स्ट

displayText वही है जो उपयोगकर्ता को मेन्यू के विकल्प में दिखाया जाना चाहिए. डिसप्ले टेक्स्ट कोई स्ट्रिंग या एचटीएमएल या कोई ऐसा फ़ंक्शन हो सकता है जो स्ट्रिंग या एचटीएमएल दिखाता हो.

const deleteOption = {
  displayText: 'Delete block',
};

अगर आपको Blockly.Msg से लिया गया अनुवाद दिखाना है, तो आपको किसी फ़ंक्शन का इस्तेमाल करना होगा. अगर वैल्यू को सीधे तौर पर असाइन करने की कोशिश की जाती है, तो हो सकता है कि मैसेज लोड न हों और आपको इसके बजाय undefined की वैल्यू मिले.

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

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

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

वज़न

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

const deleteOption = {
  weight: 10;
}

पहले से मौजूद संदर्भ मेन्यू के विकल्पों का वेट एक से बढ़ते क्रम में होता है. शुरुआती क्रम एक से शुरू होता है और एक से बढ़ जाता है.

पहले से तय की गई शर्त

scopeType के अलावा, preconditionFn का इस्तेमाल करके यह तय किया जा सकता है कि संदर्भ मेन्यू का विकल्प कब और कैसे दिखाना चाहिए.

इसे स्ट्रिंग के सेट में से कोई एक दिखाना चाहिए: 'enabled', 'disabled' या 'hidden'.

वैल्यू	कंपनी का ब्यौरा	Image
चालू किया गया	इससे पता चलता है कि यह विकल्प चालू है.
बंद है	इससे पता चलता है कि विकल्प चालू नहीं है.
छिपा हुआ है	इस विकल्प को छिपा देता है.

preconditionFn को एक Scope भी पास किया गया है. इसका इस्तेमाल करके, अपने विकल्प की स्थिति तय की जा सकती है.

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

कॉलबैक

callback प्रॉपर्टी, आपके संदर्भ मेन्यू आइटम पर काम करती है. इसे Scope और PointerEvent पास किया गया है. PointerEvent ओरिजनल इवेंट है, जिससे संदर्भ मेन्यू खोलना ट्रिगर हुआ, न कि वह मूल इवेंट जिसने विकल्प चुना था. इवेंट का इस्तेमाल करके पता लगाया जा सकता है कि क्लिक कहां हुआ था. उदाहरण के लिए, इससे आपको क्लिक की जगह पर एक नया ब्लॉक बनाने में मदद मिलती है.

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

रजिस्ट्रेशन

संदर्भ मेन्यू के विकल्प का इस्तेमाल करने के लिए, आपको उसे रजिस्टर करना होगा. आपको पेज लोड होने पर, एक बार ऐसा करना चाहिए. ऐसा आपके फ़ाइल फ़ोल्डर को इंजेक्ट करने से पहले या बाद में हो सकता है.

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

हर ब्लॉक टाइप के विकल्प में बदलाव करें

ब्लॉक में, संदर्भ मेन्यू में बदलाव करने का एक और तरीका होता है. इसका इस्तेमाल करके, अपनी customContextMenu प्रॉपर्टी को ओवरराइट किया जा सकता है. इस तरीके में कई ContextMenuOption ऑब्जेक्ट होते हैं (जिन्हें रजिस्टर किए गए मेन्यू आइटम से इकट्ठा किया जाता है). इसके बाद, दिखाए गए विकल्पों का आखिरी सेट तय करने के लिए, ऐरे में बदलाव किया जाता है.

ज़्यादा जानकारी के लिए, ब्लॉक, कस्टम संदर्भ मेन्यू तय करना देखें.

फ़ाइल फ़ोल्डर में भी configureContextMenu तरीका है, जो इसी तरह काम करता है.

विकल्प हटाएं

संदर्भ मेन्यू से किसी विकल्प को हटाने के लिए, उसका रजिस्ट्रेशन आईडी से रद्द करें.

Blockly.ContextMenuRegistry.registry.unregister('someID');

डिफ़ॉल्ट विकल्पों के आईडी contextmenu_items.ts में दिए गए हैं.

विकल्प में बदलाव करना

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

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';