How to restore default window size in an electron app?

When developing desktop applications with Electron, managing window size is a common requirement. For example, users may resize the window, and the application may need to provide an option to reset it to its default dimensions. To achieve this functionality, follow these steps:

1. Define Default Size

First, determine and set a default window size when creating the window. Typically, this is configured during the instantiation of a BrowserWindow:

javascript
const { BrowserWindow } = require('electron');

// Define default window dimensions
const defaultWidth = 800;
const defaultHeight = 600;

// Create window using default size
let win = new BrowserWindow({
  width: defaultWidth,
  height: defaultHeight
});

2. Implement Default Size Restoration

To enable users to restore the window to its default size, provide an option such as a menu item or button. Upon user interaction, this triggers the window size adjustment using the setSize method of the window instance:

javascript
// Function to reset window size to default values
function resetWindowSize() {
  if (win) {
    win.setSize(defaultWidth, defaultHeight);
  }
}

// Example menu item configuration
const menuTemplate = [
  {
    label: 'View',
    submenu: [
      {
        label: 'Reset Window Size',
        click: () => {
          resetWindowSize();
        }
      }
    ]
  }
];

3. Recenter the Window

After resetting the window size, it is often necessary to reposition it centrally. Electron's BrowserWindow offers the center method for this purpose:

javascript
function resetWindowSize() {
  if (win) {
    win.setSize(defaultWidth, defaultHeight);
    win.center();  // Recenter the window
  }
}

Example Use Case

Suppose you are developing a document editor where users may resize the window for better document viewing. If users wish to quickly return to the application's standard layout, they can select the 'Reset Window Size' option. This action restores the window to its initial 800x600 dimensions and repositions it centrally, allowing users to begin work from a consistent view.

By implementing these steps, you can effectively manage window size in Electron applications, delivering a more intuitive and adaptable user experience.