persist and restore window state
This commit is contained in:
parent
400f534ab3
commit
490e16798b
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "Debug Main Process",
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"cwd": "${workspaceRoot}/build",
|
||||||
|
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
|
||||||
|
"windows": {
|
||||||
|
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
|
||||||
|
},
|
||||||
|
"args": [
|
||||||
|
"."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -22,7 +22,7 @@
|
||||||
"build:main": "webpack --config webpack.main.js",
|
"build:main": "webpack --config webpack.main.js",
|
||||||
"build:renderer": "webpack --config webpack.renderer.js",
|
"build:renderer": "webpack --config webpack.renderer.js",
|
||||||
"build:renderer:watch": "webpack --config webpack.renderer.js --watch",
|
"build:renderer:watch": "webpack --config webpack.renderer.js --watch",
|
||||||
"electron": "npm run build:main && (electron ./build --watch | npm run build:renderer:watch)",
|
"electron": "npm run build:main && (electron --inspect=5858 ./build --watch | npm run build:renderer:watch)",
|
||||||
"pack": "electron-builder --dir",
|
"pack": "electron-builder --dir",
|
||||||
"dist": "electron-builder"
|
"dist": "electron-builder"
|
||||||
},
|
},
|
||||||
|
|
|
@ -5,9 +5,17 @@ import * as url from 'url';
|
||||||
import { Main } from '../main';
|
import { Main } from '../main';
|
||||||
import { isDev } from '../scripts/utils';
|
import { isDev } from '../scripts/utils';
|
||||||
|
|
||||||
|
const WindowEventHandlingDelay = 100;
|
||||||
|
const Keys = {
|
||||||
|
mainWindowSize: 'mainWindowSize',
|
||||||
|
};
|
||||||
|
|
||||||
export class WindowMain {
|
export class WindowMain {
|
||||||
win: BrowserWindow;
|
win: BrowserWindow;
|
||||||
|
|
||||||
|
private windowStateChangeTimer: NodeJS.Timer;
|
||||||
|
private windowStates: { [key: string]: any; } = {};
|
||||||
|
|
||||||
constructor(private main: Main) { }
|
constructor(private main: Main) { }
|
||||||
|
|
||||||
init(): Promise<any> {
|
init(): Promise<any> {
|
||||||
|
@ -16,8 +24,8 @@ export class WindowMain {
|
||||||
// This method will be called when Electron has finished
|
// This method will be called when Electron has finished
|
||||||
// initialization and is ready to create browser windows.
|
// initialization and is ready to create browser windows.
|
||||||
// Some APIs can only be used after this event occurs.
|
// Some APIs can only be used after this event occurs.
|
||||||
app.on('ready', () => {
|
app.on('ready', async () => {
|
||||||
this.createWindow();
|
await this.createWindow();
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -30,11 +38,11 @@ export class WindowMain {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.on('activate', () => {
|
app.on('activate', async () => {
|
||||||
// On OS X it's common to re-create a window in the app when the
|
// On OS X it's common to re-create a window in the app when the
|
||||||
// dock icon is clicked and there are no other windows open.
|
// dock icon is clicked and there are no other windows open.
|
||||||
if (this.win === null) {
|
if (this.win === null) {
|
||||||
this.createWindow();
|
await this.createWindow();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -46,20 +54,30 @@ export class WindowMain {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private createWindow() {
|
private async createWindow() {
|
||||||
const primaryScreenSize = screen.getPrimaryDisplay().workAreaSize;
|
this.windowStates[Keys.mainWindowSize] = await this.getWindowState(Keys.mainWindowSize, 950, 600);
|
||||||
|
|
||||||
// Create the browser window.
|
// Create the browser window.
|
||||||
this.win = new BrowserWindow({
|
this.win = new BrowserWindow({
|
||||||
width: primaryScreenSize.width < 950 ? primaryScreenSize.width : 950,
|
width: this.windowStates[Keys.mainWindowSize].width,
|
||||||
height: primaryScreenSize.height < 600 ? primaryScreenSize.height : 600,
|
height: this.windowStates[Keys.mainWindowSize].height,
|
||||||
minWidth: 680,
|
minWidth: 680,
|
||||||
minHeight: 500,
|
minHeight: 500,
|
||||||
|
x: this.windowStates[Keys.mainWindowSize].x,
|
||||||
|
y: this.windowStates[Keys.mainWindowSize].y,
|
||||||
title: app.getName(),
|
title: app.getName(),
|
||||||
darkTheme: true,
|
darkTheme: true,
|
||||||
vibrancy: 'ultra-dark',
|
vibrancy: 'ultra-dark',
|
||||||
|
show: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (this.windowStates[Keys.mainWindowSize].isMaximized) {
|
||||||
|
this.win.maximize();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show it later since it might need to be maximized.
|
||||||
|
this.win.show();
|
||||||
|
|
||||||
// and load the index.html of the app.
|
// and load the index.html of the app.
|
||||||
this.win.loadURL(url.format({
|
this.win.loadURL(url.format({
|
||||||
protocol: 'file:',
|
protocol: 'file:',
|
||||||
|
@ -73,11 +91,110 @@ export class WindowMain {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Emitted when the window is closed.
|
// Emitted when the window is closed.
|
||||||
this.win.on('closed', () => {
|
this.win.on('closed', async () => {
|
||||||
|
await this.updateWindowState(Keys.mainWindowSize, this.win);
|
||||||
|
|
||||||
// Dereference the window object, usually you would store window
|
// Dereference the window object, usually you would store window
|
||||||
// in an array if your app supports multi windows, this is the time
|
// in an array if your app supports multi windows, this is the time
|
||||||
// when you should delete the corresponding element.
|
// when you should delete the corresponding element.
|
||||||
this.win = null;
|
this.win = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.win.on('close', async () => {
|
||||||
|
await this.updateWindowState(Keys.mainWindowSize, this.win);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.win.on('maximize', async () => {
|
||||||
|
await this.updateWindowState(Keys.mainWindowSize, this.win);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.win.on('unmaximize', async () => {
|
||||||
|
await this.updateWindowState(Keys.mainWindowSize, this.win);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.win.on('resize', () => {
|
||||||
|
this.windowStateChangeHandler(Keys.mainWindowSize, this.win);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.win.on('move', () => {
|
||||||
|
this.windowStateChangeHandler(Keys.mainWindowSize, this.win);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private windowStateChangeHandler(configKey: string, win: BrowserWindow) {
|
||||||
|
global.clearTimeout(this.windowStateChangeTimer);
|
||||||
|
this.windowStateChangeTimer = setTimeout(async () => {
|
||||||
|
await this.updateWindowState(configKey, win);
|
||||||
|
}, WindowEventHandlingDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async updateWindowState(configKey: string, win: BrowserWindow) {
|
||||||
|
if (win == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const bounds = win.getBounds();
|
||||||
|
|
||||||
|
if (this.windowStates[configKey] == null) {
|
||||||
|
this.windowStates[configKey] = await this.main.storageService.get<any>(configKey);
|
||||||
|
if (this.windowStates[configKey] == null) {
|
||||||
|
this.windowStates[configKey] = {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.windowStates[configKey].isMaximized = win.isMaximized();
|
||||||
|
this.windowStates[configKey].displayBounds = screen.getDisplayMatching(bounds).bounds;
|
||||||
|
|
||||||
|
if (!win.isMaximized() && !win.isMinimized() && !win.isFullScreen()) {
|
||||||
|
this.windowStates[configKey].x = bounds.x;
|
||||||
|
this.windowStates[configKey].y = bounds.y;
|
||||||
|
this.windowStates[configKey].width = bounds.width;
|
||||||
|
this.windowStates[configKey].height = bounds.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.main.storageService.save(configKey, this.windowStates[configKey]);
|
||||||
|
} catch (e) { }
|
||||||
|
}
|
||||||
|
|
||||||
|
private async getWindowState(configKey: string, defaultWidth: number, defaultHeight: number) {
|
||||||
|
let state = await this.main.storageService.get<any>(configKey);
|
||||||
|
|
||||||
|
const isValid = state != null && (this.stateHasBounds(state) || state.isMaximized);
|
||||||
|
let displayBounds: Electron.Rectangle = null;
|
||||||
|
if (!isValid) {
|
||||||
|
state = {
|
||||||
|
width: defaultWidth,
|
||||||
|
height: defaultHeight,
|
||||||
|
};
|
||||||
|
|
||||||
|
displayBounds = screen.getPrimaryDisplay().bounds;
|
||||||
|
} else if (this.stateHasBounds(state) && state.displayBounds) {
|
||||||
|
// Check if the display where the window was last open is still available
|
||||||
|
displayBounds = screen.getDisplayMatching(state.displayBounds).bounds;
|
||||||
|
|
||||||
|
if (displayBounds.width !== state.displayBounds.width ||
|
||||||
|
displayBounds.height !== state.displayBounds.height ||
|
||||||
|
displayBounds.x !== state.displayBounds.x ||
|
||||||
|
displayBounds.y !== state.displayBounds.y) {
|
||||||
|
state.x = undefined;
|
||||||
|
state.y = undefined;
|
||||||
|
displayBounds = screen.getPrimaryDisplay().bounds;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.width > displayBounds.width) {
|
||||||
|
state.width = displayBounds.width;
|
||||||
|
}
|
||||||
|
if (state.height > displayBounds.height) {
|
||||||
|
state.height = displayBounds.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
private stateHasBounds(state: any): boolean {
|
||||||
|
return state != null && Number.isInteger(state.x) && Number.isInteger(state.y) &&
|
||||||
|
Number.isInteger(state.width) && state.width > 0 && Number.isInteger(state.height) && state.height > 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue