Merge pull request #40 from skellock/window-state-tracking

Tracks window coordinates & saves to disk.

Author: skellock

docs/stack.md

@@ -118,6 +118,10 @@ A few quality-of-life utilities for working in Electron.
 
 Persist JSON to the file system.
 
+> **electron-window-state-manager**
+
+Persist window coordinates & dimensions to disk to survive restarts.
+
 
 ## Bundler
 

package-lock.json

@@ -41,6 +41,7 @@
     "electron-log": "2.2.7",
     "electron-store": "1.2.0",
     "electron-updater": "2.8.2",
+    "electron-window-state-manager": "0.3.2",
     "glamor": "2.20.39",
     "mobx": "3.2.2",
     "mobx-react": "4.2.2",

package.json

@@ -1,6 +1,7 @@
 import { app, BrowserWindow } from 'electron'
 import { join } from 'path'
 import { format } from 'url'
+import WindowStateManager = require('electron-window-state-manager')
 
 // default dimensions
 const DIMENSIONS = { width: 600, height: 500, minWidth: 450, minHeight: 450 }
@@ -12,8 +13,20 @@ const DIMENSIONS = { width: 600, height: 500, minWidth: 450, minHeight: 450 }
  * @return The main BrowserWindow.
  */
 export function createMainWindow(appPath: string) {
+  // persistent window state manager
+  const windowState = new WindowStateManager('main', {
+    defaultWidth: DIMENSIONS.width,
+    defaultHeight: DIMENSIONS.height,
+  })
+
+  // create our main window
   const window = new BrowserWindow({
-    ...DIMENSIONS,
+    minWidth: DIMENSIONS.minWidth,
+    minHeight: DIMENSIONS.minHeight,
+    width: windowState.width,
+    height: windowState.height,
+    x: windowState.x,
+    y: windowState.y,
     show: false,
     useContentSize: true,
     titleBarStyle: 'hidden',
@@ -22,6 +35,16 @@ export function createMainWindow(appPath: string) {
     title: app.getName(),
   })
 
+  // maximize if we did before
+  if (windowState.maximized) {
+    window.maximize()
+  }
+
+  // trap movement events
+  window.on('close', () => windowState.saveState(window))
+  window.on('move', () => windowState.saveState(window))
+  window.on('resize', () => windowState.saveState(window))
+
   // load entry html page in the renderer.
   window.loadURL(
     format({
@@ -33,8 +56,10 @@ export function createMainWindow(appPath: string) {
 
   // only appear once we've loaded
   window.webContents.on('did-finish-load', () => {
-    window.show()
-    window.focus()
+    setTimeout(() => {
+      window.show()
+      window.focus()
+    }, 100)
   })
 
   return window

src/main/main-window/main-window.ts

@@ -0,0 +1,35 @@
+declare module 'electron-window-state-manager' {
+  interface ElectronStateManagerOptions {
+    /** The default width for this window. */
+    defaultWidth?: number
+    /** The default height for this window. */
+    defaultHeight?: number
+  }
+
+  /**
+   * Manages an Electron.BrowserWindow's dimensions and stores it to disk.
+   */
+  class ElectronStateManager {
+    /**
+     * Creates a manager that loads/saves a window's coordinates & dimensions.
+     *
+     * @param name The name of the window.
+     * @param options Some default options.
+     */
+    constructor(name: string, options?: ElectronStateManagerOptions)
+    /** Save this window's dimensions */
+    saveState(browserWindow: Electron.BrowserWindow): void
+    /** The window width. */
+    width: number
+    /** The window height. */
+    height: number
+    /** the window left position. */
+    x: number
+    /** The window right position. */
+    y: number
+    /** Is this maximized? */
+    maximized: boolean
+  }
+
+  export = ElectronStateManager
+}