প্রসঙ্গ মেনু

একটি প্রসঙ্গ মেনুতে কর্মক্ষেত্রের কিছু উপাদানের সাথে সম্পর্কিত ক্রিয়াগুলির একটি তালিকা রয়েছে। একটি প্রসঙ্গ মেনু ডান ক্লিক এবং দীর্ঘ প্রেসে দেখানো হয়।

আপনি একটি কাস্টম প্রসঙ্গ মেনু বিকল্প তৈরি করতে চাইতে পারেন যদি আপনি একটি নতুন ধরনের কর্ম যোগ করতে চান যা ব্যবহারকারী সম্পাদন করতে পারে। উদাহরণস্বরূপ, কর্মক্ষেত্রে সমস্ত ব্লক সংগঠিত করা বা ব্লকগুলির একটি চিত্র ডাউনলোড করা। আপনি যদি মনে করেন যে অ্যাকশনটি কদাচিৎ ব্যবহার করা হবে, তবে প্রসঙ্গ মেনু এটি রাখার জন্য একটি দুর্দান্ত জায়গা। অন্যথায়, আপনি অ্যাকশন অ্যাক্সেস করার জন্য আরও আবিষ্কারযোগ্য উপায় তৈরি করতে চাইতে পারেন।

দ্রষ্টব্য: প্রসঙ্গ মেনু বিকল্পগুলি যোগ করার কাজের উদাহরণগুলির জন্য প্রসঙ্গ মেনু কোডল্যাবটি দেখুন।

একটি নতুন বিকল্প বাস্তবায়ন

একটি নতুন প্রসঙ্গ মেনু বিকল্প বাস্তবায়ন করতে, আপনাকে 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 হল মেনু বিকল্পের অংশ হিসাবে ব্যবহারকারীকে যা দেখানো উচিত। ডিসপ্লে টেক্সট একটি স্ট্রিং, বা এইচটিএমএল, বা একটি ফাংশন হতে পারে যা একটি স্ট্রিং বা HTML প্রদান করে।

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;
}

অন্তর্নির্মিত প্রসঙ্গ মেনু বিকল্পগুলির ওজন 1 থেকে শুরু করে 1 দ্বারা বৃদ্ধির ক্রমানুসারে যায়৷

পূর্বশর্ত

scopeType ছাড়াও, একটি প্রসঙ্গ মেনু বিকল্প কখন এবং কিভাবে প্রদর্শিত হবে তা সীমাবদ্ধ করতে আপনি preconditionFn ব্যবহার করতে পারেন।

এটি স্ট্রিংগুলির একটি সেটের একটি ফেরত দেবে: 'enabled' , 'disabled' , বা 'hidden' ।

মান	বর্ণনা	ছবি
সক্রিয়	দেখায় যে বিকল্পটি সক্রিয়।
অক্ষম	দেখায় যে বিকল্পটি সক্রিয় নয়।
লুকানো	বিকল্পটি লুকিয়ে রাখে।

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';