Electron.jsでバーを移動できない問題の解決方法

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const mainWindow = new BrowserWindow({
    frame: false, // ウィンドウフレームを非表示にする
    // その他のオプション...
  });
  // ウィンドウのコンテンツをロードする処理など...
  mainWindow.show();
}
app.whenReady().then(createWindow);

タイトルバーを完全に非表示にする代わりに、カスタムタイトルバーを作成する方法もあります。この場合、ウィンドウのドラッグ操作を監視し、ウィンドウを移動するコードを追加する必要があります。以下は、その例です。

const { app, BrowserWindow, ipcMain } = require('electron');
function createWindow() {
  const mainWindow = new BrowserWindow({
    frame: false, // ウィンドウフレームを非表示にする
    // その他のオプション...
  });
  // ウィンドウのコンテンツをロードする処理など...
  mainWindow.show();
  let isDragging = false;
  let offsetX = 0;
  let offsetY = 0;
  ipcMain.on('titlebar:dragstart', (event, { x, y }) => {
    isDragging = true;
    const { x: windowX, y: windowY } = mainWindow.getPosition();
    offsetX = windowX - x;
    offsetY = windowY - y;
  });
  ipcMain.on('titlebar:drag', (event, { x, y }) => {
    if (isDragging) {
      const newX = x + offsetX;
      const newY = y + offsetY;
      mainWindow.setPosition(newX, newY);
    }
  });
  ipcMain.on('titlebar:dragend', () => {
    isDragging = false;
  });
}
app.whenReady().then(createWindow);