javascript - Electron 对话框不会阻止与页面的交互

Question

所以这可能是一个简单的修复，但我一直在研究但没有找到解决方案。我假设 Electron 默认这样做。在我的 Electron 应用程序中，我使用 remote api 从 renderer 进程调用对话框。一切正常，除了我的对话框不会阻止用户与 BrowserWindow 的其余部分进行交互。我的两个函数如下

// function for saving a gantt project projects are serialized into a JSON file
// the JSON is then stringified for human readiblity then thru the dialog api is saved to
// users computer
const saveGantt = () => {
  let content = gantt.serialize();
  content = JSON.stringify(content, null, '\t');
  dialog.showSaveDialog(
    {
      defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents\\`,
      filters: [
        {
          name: 'json',
          extensions: ['json'],
        },
      ],
    },
    (filename) => {
      if (filename === undefined) {
        return;
      }
      fs.writeFile(filename, content, (err) => {
        if (err) {
          dialog.showErrorBox(
            'Save Failed',
            `An error occured saving the file ${err.message}`,
          );
          return;
        }
        dialog.showMessageBox({
          type: 'none',
          title: 'Ganttron',
          message: 'The chart was successfully saved',
          buttons: ['OK'],
        });
      });
    },
  );
};

// function that loads a gantt project uses the dialog api to open a JSON file from
// the users computer then it is parsed to return a JSON object that is then parsed by
// the gantt api
const loadGantt = () => {
  dialog.showMessageBox(
    {
      type: 'none',
      title: 'Ganttron',
      message: 'This will clear the gantt chart and load new data',
      buttons: ['Cancel', 'OK'],
    },
    (response) => {
      if (response === 1) {
        gantt.clearAll();
        dialog.showOpenDialog(
          {
            defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents`,
            filters: [
              {
                name: 'json',
                extensions: ['json'],
              },
            ],
          },
          (fileName) => {
            if (fileName === undefined) {
              return;
            }
            fs.readFile(fileName[0], 'utf-8', (err, data) => {
              quickSaveFileName = fileName[0].toString();
              if (err) {
                dialog.showErrorBox(
                  'Load Failed',
                  `Cannot read file ${err.message}`,
                );
              }
              const loadedData = JSON.parse(data);
              gantt.parse(loadedData);
            });
          },
        );
      }
    },
  );
};

我正在通过我的两个函数传递回调。我知道如果你不传递回调它会阻止进程但不会阻止用户在对话框外进行交互。我是否遗漏了一些简单的东西，或者这是否必须被黑入 Electron ？

Answer 1

所以对于任何提出问题的人。我想到了。我使用了 remote api 函数 getCurrentWindow() 从主线程返回一个 BrowserWindow 实例。您可以使用它在初始化对话框时将其放在第一个参数中。如此

import electron, { remote } from 'electron';

const { dialog } = electron.remote;

const win = remote.getCurrentWindow();

// function for saving a gantt project projects are serialized into a JSON file
// the JSON is then stringified for human readiblity then thru the dialog api is saved to
// users computer
const saveGantt = () => {
  let content = gantt.serialize();
  content = JSON.stringify(content, null, '\t');
  dialog.showSaveDialog(
    win,      // added the browserwindow instance here as the first argument
    {
      defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents\\`,
      filters: [
        {
          name: 'json',
          extensions: ['json'],
        },
      ],
    },
    (filename) => {
      if (filename === undefined) {
        return;
      }
      fs.writeFile(filename, content, (err) => {
        if (err) {
          dialog.showErrorBox(
            win,
            'Save Failed',
            `An error occured saving the file ${err.message}`,
          );
          return;
        }
        dialog.showMessageBox(
          win,
          {
            type: 'none',
            title: 'Ganttron',
            message: 'The chart was successfully saved',
            buttons: ['OK'],
          },
        );
      });
    },
  );
};

// function that loads a gantt project uses the dialog api to open a JSON file from
// the users computer then it is parsed to return a JSON object that is then parsed by
// the gantt api
const loadGantt = () => {
  dialog.showMessageBox(
    win,         // added the browserwindow instance here as the first argument
    {
      type: 'info',
      title: 'Ganttron',
      message: 'This will clear the gantt chart and load new data',
      buttons: ['Cancel', 'OK'],
    },
    (response) => {
      if (response === 1) {
        gantt.clearAll();
        dialog.showOpenDialog(
          win,
          {
            defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents`,
            filters: [
              {
                name: 'json',
                extensions: ['json'],
              },
            ],
          },
          (fileName) => {
            if (fileName === undefined) {
              return;
            }
            fs.readFile(fileName[0], 'utf-8', (err, data) => {
              quickSaveFileName = fileName[0].toString();
              if (err) {
                dialog.showErrorBox(
                  win,
                  'Load Failed',
                  `Cannot read file ${err.message}`,
                );
              }
              const loadedData = JSON.parse(data);
              gantt.parse(loadedData);
            });
          },
        );
      }
    },
  );
};

它将阻止与当前窗口的交互，直到对话框关闭。