Electron fires a number of events around window actions. You can use these events to tell if a
window is minimized, maximized, and its position on screen. This is handy when you need to tell if
a window needs to be restored, or minimized for a specific application event.
Here are the basics, API can be found here.
With electron installed. Create a basic package.json
1 2 3 4 5 | { "name":"window_events", "main":"./main.js", "version":"0.0.1" } |
index.html
Electron window events
1 |
Electron window events
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow var mainWindow = null; app.on('ready', function(){ mainWindow = new BrowserWindow({ width:800, height:600 }); mainWindow.loadURL('file://' + __dirname + '/index.html'); console.log("Ready"); mainWindow.on('move',(e) =>{ console.log('electron move'); }); mainWindow.on('minimize',(e) =>{ console.log('electron minimize'); }); mainWindow.on('maximize',(e) =>{ console.log('electron maximize'); }); mainWindow.on('restore',(e) =>{ console.log('electron restore'); }); }); |
Running the above application
C:\yourfolder\electron .
you see the following output when you:
1. Minimize the window:
electron move electron move electron minimize
2. Restore the window
electron move electron move electron restore
3. Maximize the window
electron move electron move electron maximize
The confusing thing about these events is that move is called when the window has not moved. Also the minimize / restore / and maximize states are the last events called.
So if we where listening to the move event we would have to check to see if the window really did move.
Windows work around.
hookWindowsMessage allows electron to directly listen to window events.
The WM_SYSCOMMAND (0x0112) message is sent for some windows events.
Add the following listener
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | mainWindow.hookWindowMessage(Number.parseInt('0x0112'),(wParam,lParam)=>{// Hook WM_SYSCOMMAND let eventName = null; if (wParam.readUInt32LE(0) == 0xF060) { //SC_CLOSE eventName = 'close'; } else if (wParam.readUInt32LE(0) == 0xF030) { //SC_MAXIMIZE eventName = 'maximize' }else if (wParam.readUInt32LE(0) == 0xF020) { //SC_MINIMIZE eventName = 'minimize' }else if (wParam.readUInt32LE(0) == 0xF120) { //SC_RESTORE eventName = 'restored' } if(eventName != null) { console.log("WINDOWS " + (eventName)); } }); |
For the moving and resizing of the window we only want to know when the move or resize is done.
1 2 3 4 | // WM_EXITSIZEMOVE 0x0232 mainWindow.hookWindowMessage(Number.parseInt('0x0232'),(wParam,lParam)=>{ console.log("Winodws move or resize complete"); }); |
The windows event fired first. In this last example we only see move(resize) / maximize / minimize and restore events when they are actually fired.
Final main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow var mainWindow = null; app.on('ready', function(){ mainWindow = new BrowserWindow({ width:800, height:600 }); mainWindow.loadURL('file://' + __dirname + '/index.html'); console.log("Ready"); // Hook WM_SYSCOMMAND mainWindow.hookWindowMessage(Number.parseInt('0x0112'),(wParam,lParam)=>{ let eventName = null; if (wParam.readUInt32LE(0) == 0xF060) { //SC_CLOSE eventName = 'close'; } else if (wParam.readUInt32LE(0) == 0xF030) { //SC_MAXIMIZE eventName = 'maximize' }else if (wParam.readUInt32LE(0) == 0xF020) { //SC_MINIMIZE eventName = 'minimize' }else if (wParam.readUInt32LE(0) == 0xF120) { //SC_RESTORE eventName = 'restored' } if(eventName != null) { console.log("WINDOWS " + (eventName)); } }); // WM_EXITSIZEMOVE mainWindow.hookWindowMessage(Number.parseInt('0x0232'),(wParam,lParam)=>{ console.log("Winodws move or resize complete"); }); }); |