ফোকাস সিস্টেম

ফোকাস সিস্টেম ব্লকলি এডিটরে ব্যবহারকারীর অবস্থান (ফোকাস) ট্র্যাক রাখে। এটি Blockly দ্বারা এবং কাস্টম কোড দ্বারা ব্যবহার করা হয় কোন উপাদানে (ব্লক, ক্ষেত্র, টুলবক্স বিভাগ, ইত্যাদি) বর্তমানে ফোকাস রয়েছে এবং সেই ফোকাসটিকে অন্য উপাদানে স্থানান্তর করতে।

ফোকাস সিস্টেমটি বোঝা গুরুত্বপূর্ণ যাতে আপনি নিশ্চিত করতে পারেন যে আপনার কাস্টম কোড এটির সাথে সঠিকভাবে কাজ করে।

স্থাপত্য

ফোকাস সিস্টেমের তিনটি অংশ রয়েছে:

• FocusManager হল একটি সিঙ্গলটন যা সমস্ত ব্লকলি জুড়ে ফোকাস সমন্বয় করে। এটি ব্লকলি দ্বারা এবং কাস্টম কোড দ্বারা ব্যবহৃত হয় কোন উপাদানটিতে ব্লকলি ফোকাস রয়েছে তা খুঁজে বের করতে, সেইসাথে ব্লকলি ফোকাসকে একটি ভিন্ন উপাদানে সরাতে। এটি DOM ফোকাস ইভেন্টগুলির জন্যও শোনে, ব্লকলি ফোকাস এবং DOM ফোকাস সিঙ্ক্রোনাইজ করে এবং CSS ক্লাসগুলি পরিচালনা করে যা নির্দেশ করে যে কোন উপাদানটিতে ফোকাস রয়েছে।

  ফোকাস ম্যানেজার প্রাথমিকভাবে ব্লকলি ব্যবহার করে। এটি কখনও কখনও কাস্টম কোড দ্বারা ফোকাস সিস্টেমের সাথে যোগাযোগ করতে ব্যবহৃত হয়।

• একটি IFocusableTree হল একটি ব্লকলি সম্পাদকের একটি স্বাধীন এলাকা, যেমন একটি ওয়ার্কস্পেস বা টুলবক্স। এটি ফোকাসযোগ্য নোডের সমন্বয়ে গঠিত, যেমন ব্লক এবং ক্ষেত্র। গাছের সাবট্রিও থাকতে পারে। উদাহরণস্বরূপ, প্রধান ওয়ার্কস্পেসের একটি ব্লকে একটি মিউটেটর ওয়ার্কস্পেস হল মূল ওয়ার্কস্পেসের একটি সাবট্রি।

  IFocusableTree প্রাথমিকভাবে ফোকাস ম্যানেজার দ্বারা ব্যবহৃত হয়। আপনি একটি কাস্টম টুলবক্স না লিখলে, আপনার সম্ভবত এটি বাস্তবায়নের প্রয়োজন হবে না।

• একটি IFocusableNode হল একটি ব্লকলি উপাদান যার ফোকাস থাকতে পারে, যেমন একটি ব্লক, ফিল্ড বা টুলবক্স বিভাগ। ফোকাসযোগ্য নোডগুলিতে একটি DOM উপাদান থাকে যা নোড প্রদর্শন করে এবং যেটিতে DOM ফোকাস থাকে যখন নোডে ব্লকলি ফোকাস থাকে। নোট করুন যে গাছগুলিও ফোকাসযোগ্য নোড। উদাহরণস্বরূপ, আপনি সামগ্রিকভাবে কর্মক্ষেত্রে ফোকাস করতে পারেন।

  IFocusableNode এর পদ্ধতিগুলি প্রাথমিকভাবে ফোকাস ম্যানেজার দ্বারা বলা হয়।

  IFocusableNode নিজেই ফোকাস আছে যে উপাদান প্রতিনিধিত্ব করতে ব্যবহৃত হয়. উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী একটি ব্লকের প্রসঙ্গ মেনুতে একটি আইটেম নির্বাচন করেন, তখন ব্লকটি আইটেমের কলব্যাক ফাংশনে IFocusableNode হিসাবে প্রেরণ করা হয়।

  আপনি যদি কাস্টম উপাদান লেখেন, তাহলে আপনাকে IFocusableNode বাস্তবায়ন করতে হতে পারে।

ফোকাসের প্রকারভেদ

ফোকাস সিস্টেম বিভিন্ন ধরনের ফোকাস সংজ্ঞায়িত করে।

ব্লকলি ফোকাস এবং DOM ফোকাস

ফোকাসের দুটি প্রধান প্রকার হল ব্লকলি ফোকাস এবং DOM ফোকাস।

• ব্লকলি ফোকাস নির্দিষ্ট করে যে কোন ব্লকলি কম্পোনেন্টে (ব্লক, ফিল্ড, টুলবক্স ক্যাটাগরি, ইত্যাদি) ফোকাস আছে। ব্লকলি উপাদানগুলির স্তরে কাজ করার জন্য এটি প্রয়োজনীয়। উদাহরণস্বরূপ, কীবোর্ড নেভিগেশন প্লাগইন ব্যবহারকারীদের কম্পোনেন্ট থেকে কম্পোনেন্টে যাওয়ার জন্য তীর কী ব্যবহার করতে দেয়, যেমন ব্লক থেকে ফিল্ডে। একইভাবে, প্রসঙ্গ মেনু সিস্টেম একটি মেনু তৈরি করে যা বর্তমান উপাদানের জন্য উপযুক্ত -- অর্থাৎ, এটি ওয়ার্কস্পেস, ব্লক এবং ওয়ার্কস্পেস মন্তব্যের জন্য বিভিন্ন মেনু তৈরি করে।

• DOM ফোকাস কোন DOM উপাদানের ফোকাস আছে তা নির্দিষ্ট করে। DOM উপাদানের স্তরে কাজ করার জন্য এটি প্রয়োজনীয়। উদাহরণ স্বরূপ, স্ক্রীন রিডাররা বর্তমানে DOM ফোকাস এবং ট্যাবগুলি DOM এলিমেন্ট থেকে DOM এলিমেন্টে সরানো (ফোকাস পরিবর্তন) সম্বন্ধে তথ্য উপস্থাপন করে।

ফোকাস ম্যানেজার ব্লকলি ফোকাস এবং DOM ফোকাসকে সিঙ্কে রাখে, তাই যখন একটি নোড (ব্লকলি উপাদান) ব্লকলি ফোকাস থাকে, তখন এর অন্তর্নিহিত DOM উপাদানে DOM ফোকাস থাকে এবং এর বিপরীতে।

সক্রিয় এবং প্যাসিভ ফোকাস

ব্লকলি ফোকাস আবার সক্রিয় ফোকাস এবং প্যাসিভ ফোকাসে বিভক্ত। সক্রিয় ফোকাস মানে একটি নোড ব্যবহারকারীর ইনপুট গ্রহণ করবে, যেমন একটি কী প্রেস। প্যাসিভ ফোকাসের অর্থ হল একটি নোডের আগে সক্রিয় ফোকাস ছিল, কিন্তু ব্যবহারকারী যখন অন্য গাছের একটি নোডে চলে যায় (উদাহরণস্বরূপ, তারা ওয়ার্কস্পেস থেকে টুলবক্সে চলে যায়) বা ব্লকলি এডিটর থেকে সম্পূর্ণভাবে দূরে চলে যায় তখন সেটি হারিয়ে যায়। ট্রি ফোকাস ফিরে পেলে, নিষ্ক্রিয়ভাবে ফোকাস করা নোড সক্রিয় ফোকাস ফিরে পাবে।

প্রতিটি গাছের আলাদা ফোকাস প্রসঙ্গ রয়েছে। অর্থাৎ, গাছের সর্বাধিক একটি নোডে ফোকাস থাকতে পারে। সেই ফোকাসটি সক্রিয় বা প্যাসিভ কিনা তা নির্ভর করে গাছের ফোকাস আছে কিনা তার উপর। পুরো পৃষ্ঠায় সক্রিয় ফোকাস সহ সর্বাধিক একটি নোড থাকতে পারে।

ফোকাস ম্যানেজার সক্রিয়ভাবে এবং প্যাসিভভাবে ফোকাস করা নোডগুলির জন্য বিভিন্ন হাইলাইট (সিএসএস ক্লাস) ব্যবহার করে। এটি ব্যবহারকারীদের বুঝতে দেয় যে তারা কোথায় আছে এবং তারা কোথায় ফিরে আসবে।

ক্ষণস্থায়ী ফোকাস

ক্ষণস্থায়ী ফোকাস নামে আরেকটি ফোকাস আছে। আলাদা ওয়ার্কফ্লো, যেমন ডায়ালগ বা ফিল্ড এডিটর, ফোকাস ম্যানেজার থেকে ক্ষণস্থায়ী ফোকাসের অনুরোধ করে। যখন ফোকাস ম্যানেজার ক্ষণস্থায়ী ফোকাস প্রদান করে, তখন এটি ফোকাস সিস্টেমকে স্থগিত করে। একটি ব্যবহারিক দৃষ্টিকোণ থেকে, এর মানে হল যে এই ধরনের ওয়ার্কফ্লোগুলি DOM ফোকাস ইভেন্টগুলিকে ক্যাপচার করতে এবং কাজ করতে পারে এই চিন্তা না করেই যে ফোকাস সিস্টেম তাদের উপরও কাজ করতে পারে।

যখন ফোকাস ম্যানেজার ক্ষণস্থায়ী ফোকাস দেয়, তখন এটি সক্রিয়ভাবে ফোকাস করা নোডকে প্যাসিভ ফোকাসে পরিবর্তন করে। ক্ষণস্থায়ী ফোকাস ফেরত দিলে এটি সক্রিয় ফোকাস পুনরুদ্ধার করে।

উদাহরণ

নিম্নলিখিত উদাহরণগুলি ব্যাখ্যা করে কিভাবে ব্লকলি ফোকাস সিস্টেম ব্যবহার করে। আপনার কোড কীভাবে ফোকাস সিস্টেমে ফিট করে এবং কীভাবে আপনার কোড ফোকাস সিস্টেম ব্যবহার করতে পারে তা বুঝতে তাদের সাহায্য করা উচিত।

কীবোর্ড দিয়ে ফোকাস সরান

ধরুন দুটি ক্ষেত্র সহ একটি ব্লকে Blockly ফোকাস রয়েছে, যেমনটি ব্লকের DOM এলিমেন্টে একটি হাইলাইট (CSS ক্লাস) দ্বারা নির্দেশিত। এখন ধরুন ব্যবহারকারী ডান তীর টিপুন:

1. কীবোর্ড নেভিগেশন প্লাগইন :
   • একটি কী প্রেস ইভেন্ট গ্রহণ.
   • নেভিগেশন সিস্টেমকে (কোর ব্লকলির একটি অংশ) "পরবর্তী" কম্পোনেন্টে ফোকাস নিয়ে যেতে বলে।
2. নেভিগেশন সিস্টেম:
   • ফোকাস ম্যানেজারকে জিজ্ঞাসা করুন কোন উপাদানে ব্লকলি ফোকাস আছে। ফোকাস ম্যানেজার ব্লকটিকে IFocusableNode হিসাবে ফেরত দেয়।
   • নির্ধারণ করে যে IFocusableNode হল একটি BlockSvg এবং ব্লক নেভিগেট করার জন্য এর নিয়মগুলি দেখে, যা বলে যে এটি ব্লকলি ফোকাসকে সম্পূর্ণরূপে ব্লক থেকে ব্লকের প্রথম ক্ষেত্রে নিয়ে যাওয়া উচিত।
   • ফোকাস ম্যানেজারকে ব্লকলি ফোকাসকে প্রথম ফিল্ডে নিয়ে যেতে বলে।
3. ফোকাস ম্যানেজার:
   • প্রথম ফিল্ডে ব্লকলি ফোকাস সেট করতে এর অবস্থা আপডেট করে।
   • ক্ষেত্রের DOM উপাদানের উপর DOM ফোকাস সেট করে।
   • হাইলাইট ক্লাসকে ব্লকের উপাদান থেকে ক্ষেত্রের উপাদানে নিয়ে যায়।

মাউস দিয়ে ফোকাস সরান

এখন ধরুন যে ব্যবহারকারী ব্লকের দ্বিতীয় ক্ষেত্রে ক্লিক করে। ফোকাস ম্যানেজার:

1. প্রথম ক্ষেত্রের DOM উপাদানে একটি DOM focusout ইভেন্ট এবং দ্বিতীয় ক্ষেত্রের DOM উপাদানে একটি focusin ইভেন্ট গ্রহণ করে৷
2. নির্ধারণ করে যে DOM উপাদানটি যে ফোকাস পেয়েছে তা দ্বিতীয় ক্ষেত্রের সাথে মিলে যায়৷
3. দ্বিতীয় ক্ষেত্রে ব্লকলি ফোকাস সেট করতে এর অবস্থা আপডেট করে। (ফোকাস ম্যানেজারকে DOM ফোকাস সেট করার দরকার নেই কারণ ব্রাউজারটি ইতিমধ্যে এটি করেছে।)
4. হাইলাইট ক্লাসকে প্রথম ক্ষেত্রের উপাদান থেকে দ্বিতীয় ক্ষেত্রের উপাদানে নিয়ে যায়।

অন্যান্য উদাহরণ

এখানে কিছু অন্যান্য উদাহরণ আছে:

• যখন একজন ব্যবহারকারী টুলবক্স থেকে ওয়ার্কস্পেসে একটি ব্লক টেনে আনে, তখন মাউস ইভেন্ট হ্যান্ডলার একটি নতুন ব্লক তৈরি করে এবং সেই ব্লকে ব্লকলি ফোকাস সেট করতে ফোকাস ম্যানেজারকে কল করে।

• যখন একটি ব্লক মুছে ফেলা হয়, তার dispose পদ্ধতি ফোকাস ম্যানেজারকে ব্লকের অভিভাবকের দিকে ফোকাস সরানোর জন্য কল করে।

• কীবোর্ড শর্টকাট IFocusableNode ব্যবহার করে ব্লকলি কম্পোনেন্ট শনাক্ত করতে যা শর্টকাট প্রযোজ্য।

• কনটেক্সট মেনু IFocusableNode ব্যবহার করে ব্লকলি কম্পোনেন্ট শনাক্ত করতে যার উপর মেনুটি চালু করা হয়েছে।

কাস্টমাইজেশন এবং ফোকাস সিস্টেম

আপনি যখন ব্লকলি কাস্টমাইজ করবেন, তখন আপনাকে নিশ্চিত করতে হবে যে আপনার কোড ফোকাস সিস্টেমের সাথে সঠিকভাবে কাজ করে। আপনি বর্তমানে ফোকাস করা নোড সনাক্ত করতে এবং সেট করতে ফোকাস সিস্টেম ব্যবহার করতে পারেন।

কাস্টম ব্লক এবং টুলবক্স বিষয়বস্তু

Blockly কাস্টমাইজ করার সবচেয়ে সাধারণ উপায় হল কাস্টম ব্লক সংজ্ঞায়িত করা এবং টুলবক্সের বিষয়বস্তু কাস্টমাইজ করা। এই ক্রিয়াগুলির কোনওটিই ফোকাস সিস্টেমে কোনও প্রভাব ফেলে না।

কাস্টম ক্লাস

কাস্টম ক্লাসের জন্য এক বা উভয় ফোকাস ইন্টারফেস ( IFocusableTree এবং IFocusableNode ) প্রয়োগ করতে হতে পারে। এটা সবসময় স্পষ্ট হয় না যখন এই ক্ষেত্রে.

কিছু ক্লাস স্পষ্টভাবে ফোকাস ইন্টারফেস বাস্তবায়ন প্রয়োজন. এর মধ্যে রয়েছে:

• একটি শ্রেণী যা একটি কাস্টম টুলবক্স প্রয়োগ করে। এই ক্লাসটিকে IFocusableTree এবং IFocusableNode বাস্তবায়ন করতে হবে।

• যে ক্লাসগুলি একটি দৃশ্যমান উপাদান তৈরি করে (যেমন একটি ক্ষেত্র বা আইকন) যা ব্যবহারকারীরা নেভিগেট করতে পারে৷ এই ক্লাসগুলিকে IFocusableNode বাস্তবায়ন করতে হবে।

কিছু ক্লাসকে IFocusableNode প্রয়োগ করতে হবে যদিও তারা একটি দৃশ্যমান উপাদান তৈরি করে না বা তারা একটি দৃশ্যমান উপাদান তৈরি করে যা ব্যবহারকারীরা নেভিগেট করতে পারে না। এর মধ্যে রয়েছে:

• ক্লাস যা IFocusableNode প্রসারিত একটি ইন্টারফেস বাস্তবায়ন করে।

  উদাহরণ স্বরূপ, কীবোর্ড নেভিগেশন প্লাগইনের মুভ আইকনটি একটি চার-মুখী তীর প্রদর্শন করে যা নির্দেশ করে যে ব্লকটিকে তীর কী দিয়ে সরানো যেতে পারে। আইকনটি নিজেই দৃশ্যমান নয় (চার-মুখী তীরটি একটি বুদবুদ) এবং ব্যবহারকারীরা এটিতে নেভিগেট করতে পারবেন না। যাইহোক, আইকনটিকে অবশ্যই IFocusableNode প্রয়োগ করতে হবে কারণ আইকনগুলি IIcon বাস্তবায়ন করে এবং IIcon IFocusableNode প্রসারিত করে।

• একটি API এ ব্যবহৃত ক্লাস যার জন্য একটি IFocusableNode প্রয়োজন।

  উদাহরণস্বরূপ, FlyoutSeparator ক্লাস একটি ফ্লাইআউটে দুটি আইটেমের মধ্যে একটি ফাঁক তৈরি করে। এটি কোনও DOM উপাদান তৈরি করে না, তাই এটিতে একটি দৃশ্যমান উপাদান নেই এবং ব্যবহারকারীরা এটিতে নেভিগেট করতে পারে না। যাইহোক, এটি অবশ্যই IFocusableNode প্রয়োগ করতে হবে কারণ এটি একটি FlyoutItem এ সংরক্ষণ করা হয় এবং FlyoutItem কন্সট্রাক্টরের একটি IFocusableNode প্রয়োজন।

• ক্লাস যেগুলি একটি ক্লাস প্রসারিত করে যা IFocusableNode প্রয়োগ করে।

  উদাহরণস্বরূপ, ToolboxSeparator ToolboxItem প্রসারিত করে, যা IFocusableNode প্রয়োগ করে। যদিও টুলবক্স বিভাজকগুলির একটি দৃশ্যমান উপাদান রয়েছে, ব্যবহারকারীরা সেগুলিতে নেভিগেট করতে পারে না কারণ তাদের উপর কাজ করা যায় না এবং কোনও দরকারী সামগ্রী নেই৷

অন্যান্য ক্লাস দৃশ্যমান উপাদান তৈরি করে যা ব্যবহারকারী নেভিগেট করতে পারে, কিন্তু IFocusableNode বাস্তবায়নের প্রয়োজন নেই। এর মধ্যে রয়েছে:

• ক্লাস যা একটি দৃশ্যমান উপাদান তৈরি করে যা তার নিজস্ব ফোকাস পরিচালনা করে, যেমন একটি ক্ষেত্র সম্পাদক বা একটি ডায়ালগ। (উল্লেখ্য যে এই ধরনের ক্লাসগুলি যখন শুরু হয় তখন ক্ষণস্থায়ী ফোকাস নিতে হয় এবং শেষ হলে তা ফেরত দেয়। WidgetDiv বা DropDownDiv ব্যবহার করা আপনার জন্য এটি পরিচালনা করবে।)

অবশেষে, কিছু ক্লাস ফোকাস সিস্টেমের সাথে ইন্টারঅ্যাক্ট করে না এবং IFocusableTree বা IFocusableNode প্রয়োগ করার প্রয়োজন নেই। এর মধ্যে রয়েছে:

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

• ক্লাসগুলি সম্পূর্ণরূপে ফোকাস সিস্টেমের সাথে সম্পর্কহীন, যেমন ক্লাস যেগুলি IMetricsManager বা IVariableMap প্রয়োগ করে।

আপনার ক্লাস ফোকাস সিস্টেমের সাথে ইন্টারঅ্যাক্ট করবে কিনা তা যদি আপনি অনিশ্চিত হন তবে কীবোর্ড নেভিগেশন প্লাগইন দিয়ে এটি পরীক্ষা করুন। এটি ব্যর্থ হলে, আপনাকে IFocusableTree বা IFocusableNode বাস্তবায়ন করতে হতে পারে। যদি এটি সফল হয় কিন্তু আপনি এখনও অনিশ্চিত হন, তাহলে ইন্টারফেসের প্রয়োজন আছে কিনা বা অন্য কোন মিথস্ক্রিয়া আছে কিনা তা দেখতে আপনার ক্লাস ব্যবহার করে এমন কোডটি পড়ুন।

ফোকাস ইন্টারফেস বাস্তবায়ন

IFocusableTree বা IFocusableNode বাস্তবায়নের সবচেয়ে সহজ উপায় হল এই ইন্টারফেসগুলিকে প্রয়োগ করে এমন একটি ক্লাস প্রসারিত করা। উদাহরণস্বরূপ, আপনি যদি একটি কাস্টম টুলবক্স তৈরি করেন, Toolbox প্রসারিত করুন, যা IFocusableTree এবং IFocusableNode প্রয়োগ করে। আপনি যদি একটি কাস্টম ক্ষেত্র তৈরি করেন, তাহলে Field প্রসারিত করুন, যা IFocusableNode প্রয়োগ করে। আপনার কোডটি বেস ক্লাসে ফোকাস ইন্টারফেস কোডে হস্তক্ষেপ করে না তা পরীক্ষা করে দেখুন।

আপনি যদি একটি ক্লাস প্রসারিত করেন যা একটি ফোকাস ইন্টারফেস প্রয়োগ করে, তাহলে আপনাকে সাধারণত কোনো পদ্ধতি ওভাররাইড করতে হবে না। সবচেয়ে সাধারণ ব্যতিক্রম হল IFocusableNode.canBeFocused , যা আপনি যদি ব্যবহারকারীদের আপনার উপাদানে নেভিগেট করতে না চান তাহলে আপনাকে ওভাররাইড করতে হবে।

কম সাধারণ হল ফোকাস কলব্যাক পদ্ধতিগুলিকে ওভাররাইড করার প্রয়োজন ( IFocusableTree এ onTreeFocus এবং onTreeBlur এবং IFocusableNode এ onNodeFocus এবং onNodeBlur )৷ মনে রাখবেন যে এই পদ্ধতিগুলি থেকে ফোকাস পরিবর্তন করার চেষ্টা (কল করুন FocusManager.focusNode বা FocusManager.focusTree ) একটি ব্যতিক্রমের ফলাফল।

আপনি যদি স্ক্র্যাচ থেকে একটি কাস্টম উপাদান লেখেন, তাহলে আপনাকে ফোকাস ইন্টারফেসগুলি নিজেই প্রয়োগ করতে হবে। IFocusableTree এবং IFocusableNode আরও তথ্যের জন্য রেফারেন্স ডকুমেন্টেশন দেখুন।

আপনি আপনার ক্লাস বাস্তবায়ন করার পরে, আপনি আপনার উপাদানে নেভিগেট করতে পারেন (বা পারবেন না) তা যাচাই করতে কীবোর্ড নেভিগেশন প্লাগইনের বিরুদ্ধে এটি পরীক্ষা করুন।

ফোকাস ম্যানেজার ব্যবহার করুন

কিছু কাস্টম ক্লাস ফোকাস ম্যানেজার ব্যবহার করে। এটি করার সবচেয়ে সাধারণ কারণ হল বর্তমানে ফোকাস করা নোড পাওয়া এবং একটি ভিন্ন নোডে ফোকাস করা। ফোকাস ম্যানেজার পেতে, Blockly.getFocusManager কল করুন:

const focusManager = Blockly.getFocusManager();

বর্তমানে ফোকাস করা নোড পেতে, getFocusedNode কল করুন:

const focusedNode = focusManager.getFocusedNode();
// Do something with the focused node.

একটি ভিন্ন নোডে ফোকাস সরাতে, focusNode কল করুন:

// Move focus to a different block.
focusManager.focusNode(myOtherBlock);

একটি গাছে ফোকাস সরাতে, focusTree কল করুন। এটি গাছের রুট নোডে নোড ফোকাসও সেট করে।

// Move focus to the main workspace.
focusManager.focusTree(myMainWorkspace);

ফোকাস ম্যানেজার ব্যবহার করার অন্য সাধারণ কারণ হল ক্ষণস্থায়ী ফোকাস নেওয়া এবং ফিরিয়ে দেওয়া। takeEphemeralFocus ফাংশন একটি ল্যাম্বডা প্রদান করে যা আপনাকে ক্ষণস্থায়ী ফোকাস ফেরাতে কল করতে হবে।

const returnEphemeralFocus = focusManager.takeEphemeralFocus();
// Do something.
returnEphemeralFocus();

আপনি WidgetDiv বা DropDownDiv ব্যবহার করলে, তারা আপনার জন্য ক্ষণস্থায়ী ফোকাস পরিচালনা করবে।

ট্যাব স্টপ

ফোকাস সিস্টেম একটি ট্যাব স্টপ ( 0 এর tabindex ) সমস্ত গাছের মূল উপাদানে (প্রধান ওয়ার্কস্পেস, টুলবক্স এবং ফ্লাইআউট ওয়ার্কস্পেস) সেট করে। এটি ব্যবহারকারীদের একটি ব্লকলি এডিটরের প্রধান অঞ্চলগুলিতে নেভিগেট করতে ট্যাব কী ব্যবহার করতে দেয় এবং তারপরে (কীবোর্ড নেভিগেশন প্লাগইন ব্যবহার করে) সেই অঞ্চলগুলির মধ্যে নেভিগেট করার জন্য তীর কীগুলি ব্যবহার করে৷ এই ট্যাব স্টপগুলি পরিবর্তন করবেন না, কারণ এটি তাদের পরিচালনা করার জন্য ফোকাস ম্যানেজারের ক্ষমতাতে হস্তক্ষেপ করবে।

আপনার সাধারণত ব্লকলি দ্বারা ব্যবহৃত অন্যান্য DOM উপাদানগুলিতে ট্যাব স্টপ সেট করা এড়ানো উচিত, কারণ এটি এই অঞ্চলগুলির মধ্যে সম্পাদক এবং তীর কীগুলির মধ্যে নেভিগেট করার জন্য ট্যাব কী ব্যবহার করার জন্য ব্লকলির মডেলে হস্তক্ষেপ করে৷ উপরন্তু, এই ধরনের ট্যাব স্টপগুলি উদ্দেশ্য অনুযায়ী কাজ নাও করতে পারে। এটি কারণ প্রতিটি ফোকাসযোগ্য নোড একটি DOM উপাদানকে তার ফোকাসযোগ্য উপাদান হিসাবে ঘোষণা করে। আপনি যদি ফোকাসযোগ্য উপাদানের একটি বংশধরের উপর একটি ট্যাব স্টপ সেট করেন এবং সেই উপাদানটিতে ব্যবহারকারীর ট্যাবগুলি সেট করেন, তাহলে ফোকাস ম্যানেজার DOM ফোকাসকে ঘোষিত ফোকাসযোগ্য উপাদানে নিয়ে যাবে।

ব্লকলি এডিটরের বাইরে আপনার অ্যাপ্লিকেশনের উপাদানগুলিতে ট্যাব স্টপ সেট করা নিরাপদ। যখন ব্যবহারকারী ট্যাব এডিটর থেকে এই ধরনের একটি উপাদানে, ফোকাস ম্যানেজার ব্লকলি ফোকাসকে সক্রিয় থেকে প্যাসিভ এ পরিবর্তন করে। অ্যাক্সেসযোগ্যতার জন্য, আপনাকে tabindex বৈশিষ্ট্য 0 বা -1 তে সেট করা উচিত, যেমনটি tabindex বৈশিষ্ট্যের MDN-এর বিবরণে সতর্কতা দ্বারা সুপারিশ করা হয়েছে।

DOM ফোকাস

অ্যাক্সেসযোগ্যতার কারণে, অ্যাপ্লিকেশনগুলিকে DOM উপাদানগুলিতে focus পদ্ধতিতে কল করা এড়াতে হবে। এটি স্ক্রিন রিডারদের ব্যবহারকারীদের জন্য বিভ্রান্তিকর, কারণ তারা হঠাৎ করে অ্যাপ্লিকেশনটিতে একটি অজানা স্থানে সরানো হয়েছে।

একটি অতিরিক্ত সমস্যা হল যে ফোকাস ম্যানেজার ফোকাস ইভেন্টগুলিতে DOM ফোকাস সেট করে ফোকাস করা উপাদানের নিকটতম পূর্বপুরুষ-অথবা-স্বয়ং-এর উপর প্রতিক্রিয়া দেখায় যা একটি ঘোষিত ফোকাসযোগ্য উপাদান। এটি যে উপাদানটির উপর focus বলা হয়েছিল তার থেকে আলাদা হতে পারে। (যদি কোন নিকটতম ফোকাসযোগ্য পূর্বপুরুষ-বা-সেলফ না থাকে, যেমন যখন ব্লকলি এডিটরের বাইরে কোনো উপাদানের উপর focus বলা হয়, তখন ফোকাস ম্যানেজার সক্রিয়ভাবে ফোকাস করা নোডটিকে প্যাসিভ ফোকাসে পরিবর্তন করে।)

পজিশনেবল

পজিশনেবল হল এমন উপাদান যা কর্মক্ষেত্রের উপরে অবস্থান করে এবং IPositionable প্রয়োগ করে। উদাহরণ হল ব্যাকপ্যাক প্লাগইনে ট্র্যাশক্যান এবং ব্যাকপ্যাক। পজিশনেবল এখনও ফোকাস সিস্টেমে একত্রিত করা হয় নি।