Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to restore default window size in an electron app?

Tags:

electron

Is there a way to restore main window in an electron app to a certain size? To explain what I am trying to accomplish, let me give you an example:

When I open Windows Explorer, it opens with a certain size and at a certain position. Then I maximize that window and close the explorer. Next time when I restart the explorer, it opens in the same state as when I closed it i.e. in maximized state. However when I click on the restore button, explorer restores to the width/height and position before it was maximized.

I would like to accomplish the same in my electron application as well. However that is not happening.

What I am doing is when my application closes, I capture the dimensions (width, height) and position (x, y coordinates) of the application window using (win.getBounds())and save those in a config file using electron-config. This is what my code looks like:

  const Config = require('electron-config')
  const config = new Config();

  mainWindow.on('close', () => {
    config.set('winBounds', mainWindow.getBounds())
  });

Now when I start the application, I read the settings from the config file (actually electron-config does that for me) and use that to set the initial dimensions/position of the window. I am using code like below:

  let opts = {
    show: false,
    icon: path.join(__dirname, 'app-window-icon.png')
  };
  Object.assign(opts, config.get('winBounds'));
  mainWindow = new BrowserWindow(opts);

This is also working great. However the only option I get now is maximize the window. I'm not able to find any option to restore the window to a size before it was maximized.

For example, let's say the user launches the application with 1024x768 px dimensions. User then maximizes the application window and then closes it. When the user relaunches the application, it opens with the size it was closed and the only option I see is to maximize the window. What I am looking for is an option to restore the window size to 1024x768px.

I looked up the documentation here: https://github.com/electron/electron/blob/master/docs/api/browser-window.md but unfortunately couldn't find anything there.

like image 999
Gaurav Mantri Avatar asked Jul 13 '18 15:07

Gaurav Mantri


People also ask

How do I make the electron app full screen?

To make an Electron app run in full-screen mode when it's started, pass the following configuration option when creating the BrowserWindow instance: mainWindow = new BrowserWindow({fullscreen: true});

How do electrons maximize a window?

Call mainWindow. maximize() to maximize the window after you create it. Save this answer.

What is Kiosk mode electron?

Kiosk mode is a common way to lock down a Windows device when that device is used for a specific task or used in a public setting. So in electron kiosk mode, we'd have the ability to lock down our application to a point that users are restricted to the actions that we want them to perform.


1 Answers

I used the solution here which involves persisting your windows size and position in electron-settings and it works perfectly.

Include the windowStateKeeper function in your code and then adapt your createMainWindow function as follows:

function createMainWindow() {
    const mainWindowStateKeeper = windowStateKeeper('main');
    const win = new electron.BrowserWindow({
        title: 'main',
        x: mainWindowStateKeeper.x,
        y: mainWindowStateKeeper.y,
        width: mainWindowStateKeeper.width,
        height: mainWindowStateKeeper.height
    });
    mainWindowStateKeeper.track(win);

    win.loadURL(`file://${__dirname}/index.html`);
    win.on('closed', onClosed);

    return win;
}
like image 121
Marc Avatar answered Sep 28 '22 00:09

Marc