Context Menu তৈরি এবং কনফিগার করা

Context Menu হলো একটি ইন্টারঅ্যাকটিভ মেনু যা সাধারণত একটি রাইট-ক্লিক (right-click) ইভেন্টে প্রদর্শিত হয় এবং এটি ব্যবহারকারীদের বিভিন্ন বিকল্প সরবরাহ করে। Electron-এ Context Menu তৈরি এবং কনফিগার করা অত্যন্ত সহজ, যেহেতু Electron এর মধ্যে Menu এবং MenuItem ক্লাস সরাসরি ব্যবহার করা যায়।

এই গাইডে, আমরা দেখব কিভাবে Electron অ্যাপ্লিকেশনে Context Menu তৈরি এবং কনফিগার করা যায়।

১. Context Menu তৈরি করা

Electron এ Menu এবং MenuItem ব্যবহার করে Context Menu তৈরি করা হয়। আপনি রাইট-ক্লিকের মাধ্যমে Context Menu শো করতে পারেন এবং কাস্টম অপশনগুলো অন্তর্ভুক্ত করতে পারেন।

উদাহরণ: Context Menu তৈরি এবং কনফিগার করা

Main Process (main.js):

const { app, BrowserWindow, Menu, ipcMain } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // Context Menu তৈরি করা
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'কপি',
      click: () => {
        console.log('কপি ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'কাট',
      click: () => {
        console.log('কাট ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'পেস্ট',
      click: () => {
        console.log('পেস্ট ক্লিক করা হয়েছে');
      },
    },
    {
      type: 'separator',  // সেপারেটর যুক্ত করা
    },
    {
      label: 'নতুন উইন্ডো',
      click: () => {
        createNewWindow();
      },
    },
  ]);

  // রাইট-ক্লিক করলে Context Menu প্রদর্শন
  mainWindow.webContents.on('context-menu', (event, params) => {
    contextMenu.popup({ window: mainWindow });
  });
});

// নতুন উইন্ডো তৈরি করার ফাংশন
function createNewWindow() {
  let newWindow = new BrowserWindow({
    width: 400,
    height: 300,
  });

  newWindow.loadURL('https://www.electronjs.org');
}

এখানে, আমরা একটি কাস্টম Context Menu তৈরি করেছি, যার মধ্যে কয়েকটি অপশন যেমন কপি, কাট, পেস্ট, এবং একটি separator (ভাগ করার জন্য) রাখা হয়েছে। এছাড়া, "নতুন উইন্ডো" অপশনটি নতুন একটি উইন্ডো খুলবে, যখন ব্যবহারকারী ক্লিক করবেন।

২. Context Menu কাস্টমাইজ করা

Electron-এ Context Menu আরও কাস্টমাইজ করা যেতে পারে যেমন:

• প্রতিটি MenuItem এর জন্য শর্টকাট (Keyboard shortcut) যোগ করা।
• উইন্ডোর মধ্যে বিশেষ রাইট-ক্লিকের জন্য Context Menu তৈরি করা।
• ব্যবহারকারীর রাইট-ক্লিকের উপর নির্ভরশীল কনটেক্সট মেনু পরিবর্তন করা।

উদাহরণ: Context Menu তে শর্টকাট যোগ করা

const contextMenu = Menu.buildFromTemplate([
  {
    label: 'কপি',
    accelerator: 'CmdOrCtrl+C',  // শর্টকাট কিপ্যাড
    click: () => {
      console.log('কপি ক্লিক করা হয়েছে');
    },
  },
  {
    label: 'কাট',
    accelerator: 'CmdOrCtrl+X',
    click: () => {
      console.log('কাট ক্লিক করা হয়েছে');
    },
  },
  {
    label: 'পেস্ট',
    accelerator: 'CmdOrCtrl+V',
    click: () => {
      console.log('পেস্ট ক্লিক করা হয়েছে');
    },
  },
]);

এখানে, accelerator প্রোপার্টি ব্যবহার করে কপি, কাট এবং পেস্ট অপশনের জন্য শর্টকাট যোগ করা হয়েছে।

৩. Context Menu ব্যবহারকারীর রাইট-ক্লিকের উপর ভিত্তি করে পরিবর্তন

কখনও কখনও, আপনি চাইবেন যে কনটেক্সট মেনু ব্যবহারকারীর রাইট-ক্লিকের উপর ভিত্তি করে পরিবর্তিত হোক। উদাহরণস্বরূপ, আপনি যদি কোনও নির্দিষ্ট উপাদান বা টেক্সট বাছাই করতে চান, তবে কনটেক্সট মেনুতে সেগুলি পরিবর্তিত করতে পারেন।

উদাহরণ: Context Menu ডাইনামিক পরিবর্তন

mainWindow.webContents.on('context-menu', (event, params) => {
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'কপি',
      enabled: params.selectionText.length > 0, // যদি কিছু নির্বাচিত থাকে তবে কপি অপশন সক্রিয় হবে
      click: () => {
        console.log('কপি ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'কাট',
      enabled: params.selectionText.length > 0, // যদি কিছু নির্বাচিত থাকে তবে কাট অপশন সক্রিয় হবে
      click: () => {
        console.log('কাট ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'পেস্ট',
      click: () => {
        console.log('পেস্ট ক্লিক করা হয়েছে');
      },
    },
  ]);
  
  contextMenu.popup({ window: mainWindow });
});

এখানে, আমরা params.selectionText.length > 0 চেক করে নিশ্চিত করেছি যে, কেবলমাত্র যখন কিছু টেক্সট নির্বাচন করা হবে, তখন কপি এবং কাট অপশন সক্রিয় হবে।

৪. ডিফল্ট Context Menu বন্ধ করা

যদি আপনি ডিফল্ট ব্রাউজারের কনটেক্সট মেনু বন্ধ করতে চান, তাহলে আপনি webContents এর context-menu ইভেন্টে preventDefault() ব্যবহার করতে পারেন।

উদাহরণ: ডিফল্ট Context Menu বন্ধ করা

mainWindow.webContents.on('context-menu', (event) => {
  event.preventDefault();  // ডিফল্ট Context Menu বন্ধ করা
  contextMenu.popup({ window: mainWindow });
});

এখানে event.preventDefault() ব্যবহার করে ডিফল্ট রাইট-ক্লিক মেনু বন্ধ করা হয়েছে এবং আমাদের কাস্টম মেনু contextMenu.popup() প্রদর্শিত হবে।

সারাংশ

• Context Menu তৈরি এবং কনফিগার করার জন্য Menu এবং MenuItem মডিউল ব্যবহৃত হয়।
• Menu.buildFromTemplate() ব্যবহার করে কাস্টম মেনু তৈরি করা হয়, যেখানে বিভিন্ন MenuItem যোগ করা হয়।
• accelerator ব্যবহার করে শর্টকাট কিপ্যাড সেট করা যায় এবং enabled প্রোপার্টি ব্যবহার করে কনটেক্সট মেনুর অপশনগুলি ডাইনামিকভাবে পরিবর্তিত করা সম্ভব।
• preventDefault() ব্যবহার করে ডিফল্ট কনটেক্সট মেনু বন্ধ করা যায়।

এভাবে আপনি Electron-এ আপনার অ্যাপের জন্য কাস্টম Context Menu তৈরি এবং কনফিগার করতে পারবেন, যা ব্যবহারকারীদের একটি ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করবে।