I'm new to Electron, and have basic knowledge of JavaScript, how does one completely remove the menu bar from Electron apps?
When you want to make a BrowserWindow you could make it FrameLess by -> frame: false
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});
you could try this function: setMenuBarVisibility
refer to: https://www.electronjs.org/docs/latest/api/browser-window#winsetmenubarvisibilityvisible-windows-linux
I also looked for solutions to other problems, but they did not turn out as I wanted. How can I delete the top bar of the window, as I marked in the photo?
[photo]
native APIs directly supports frameless windows. You need to pass the frame option false while creating new window. Here is the example.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
You can read more at official docs
I am using electron version 8.2.5. The window height increases after minimize and restore and goes below my task bar.
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().workAreaSize;
win = new BrowserWindow({
x: (size.width / 2) - (550 / 2),
y: 0,
width: 550,
height: size.height,
frame: false,
resizable: false
});
I googled it and found this workaround to set size on restore event:
win.on('restore', () => {
win.setSize(550, size.height);
});
But when doing that the window flickers twice after minimize and restore. Is there any other way to rectify this?
Instead of using workAreaSize, try to use size.
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().size;
I'm using electron 8.2.4 but works for me and I don´t have to use the event on restore.
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.
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;
}
Here is complete solution:
stateKeeper.ts:
import {screen} from 'electron';
import settings from 'electron-settings';
export const windowStateKeeper = async (windowName) => {
let window, windowState;
const setBounds = async () => {
// Restore from appConfig
if (await settings.has(`windowState.${windowName}`)) {
windowState = await settings.get(`windowState.${windowName}`);
return;
}
const size = screen.getPrimaryDisplay().workAreaSize;
// Default
windowState = {
x: undefined,
y: undefined,
width: size.width / 2,
height: size.height / 2,
};
};
const saveState = async () => {
// bug: lots of save state events are called. they should be debounced
if (!windowState.isMaximized) {
windowState = window.getBounds();
}
windowState.isMaximized = window.isMaximized();
await settings.set(`windowState.${windowName}`, windowState);
};
const track = async (win) => {
window = win;
['resize', 'move', 'close'].forEach((event) => {
win.on(event, saveState);
});
};
await setBounds();
return {
x: windowState.x,
y: windowState.y,
width: windowState.width,
height: windowState.height,
isMaximized: windowState.isMaximized,
track,
};
};
main.ts
import {windowStateKeeper} from './utils/windowStateKeeper';
const mainWindowStateKeeper = await windowStateKeeper('main');
// Create the browser window.
mainWin = new BrowserWindow({
title: 'Desktop',
x: mainWindowStateKeeper.x,
y: mainWindowStateKeeper.y,
width: mainWindowStateKeeper.width,
height: mainWindowStateKeeper.height,
webPreferences: {
nodeIntegration: true,
allowRunningInsecureContent: serve ? true : false,
contextIsolation: false, // false if you want to run e2e test with Spectron
enableRemoteModule: true, // true if you want to run e2e test with Spectron or use remote module in renderer context (ie. Angular)
},
});
// Track window state
mainWindowStateKeeper.track(mainWin);
I implemented this after a lot of testing this is the most accurate and simple solution to remember window properties.
i used electron-store to store values, you can use any storage methods you like.
main.js
let windowConfig = {
width: 1280,
height: 680,
}
function createWindow() {
Object.assign(windowConfig, CONFIG.get("winBounds"))
mainWindow = new BrowserWindow(windowConfig)
if (windowConfig.isMaximized) {
mainWindow.maximize()
}
mainWindow.on("close", () => {
Object.assign(windowConfig, {
isMaximized: mainWindow.isMaximized()
}, mainWindow.getNormalBounds())
CONFIG.set("winBounds", windowConfig) // saves window's properties using electron-store
})
}
Using ElectronJS, how do you change an existing frameless window into a framed window?
Something like this:
const splashWindow = createWindow('splash', {
width: 500,
height: 300,
frame: false,
});
splashWindow.addFrame();
// Now splashWindow has a frame
You can only set frame when creating a BrowserWindow