fix: window position

Author: egor-xyz

package-lock.json

@@ -29,7 +29,6 @@
     "clsx": "^2.1.0",
     "electron-log": "5.1.1",
     "electron-store": "^8.1.0",
-    "electron-window-state": "^5.0.3",
     "get-installed-apps": "^1.1.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

package.json

@@ -2,11 +2,11 @@ import { app, BrowserWindow, nativeTheme, shell } from 'electron';
 import path from 'path';
 
 import log from 'electron-log';
-import electronWindowState from 'electron-window-state';
 import { updateElectronApp } from 'update-electron-app';
 
 import './ipcs';
 import { updateEditorsAndShells } from './libs/integrations/integrations';
+import { loadWindowState, saveBounds } from './libs/window';
 
 log.initialize({ preload: true, spyRendererConsole: false });
 
@@ -24,30 +24,19 @@ if (isDev) {
 }
 
 const createWindow = (): void => {
-  const mainWindowState = electronWindowState({
-    defaultHeight: 600,
-    defaultWidth: isDev ? 1426 : 800
-  });
-
   const mainWindow = new BrowserWindow({
     backgroundColor: nativeTheme.shouldUseDarkColors ? '#141414' : '#ffffff',
-
-    height: mainWindowState.height,
     minHeight: 600,
     minWidth: 800,
-    show: isDev ? false : true,
+    show: false,
     titleBarStyle: 'hidden',
     trafficLightPosition: { x: 15, y: 17 },
     webPreferences: {
       preload: path.join(__dirname, 'preload.js')
     },
-    width: mainWindowState.width,
-    x: mainWindowState.x,
-    y: mainWindowState.y
+    ...loadWindowState()
   });
 
-  mainWindowState.manage(mainWindow);
-
   // all external links should open in default browser
   mainWindow.webContents.setWindowOpenHandler(({ url }) => {
     shell.openExternal(url);
@@ -63,12 +52,22 @@ const createWindow = (): void => {
 
   updateEditorsAndShells(mainWindow);
 
-  if (isDev) {
+  mainWindow.on('close', () => {
+    if (!isDev && mainWindow.webContents.isDevToolsOpened()) return;
+    saveBounds(mainWindow);
+  });
+
+  mainWindow.once('ready-to-show', () => {
+    if (!isDev) {
+      mainWindow.show();
+      return;
+    }
+
     setTimeout(() => {
       mainWindow.showInactive();
       mainWindow.webContents.openDevTools();
     }, 500);
-  }
+  });
 
   // CSP interceptor
   // mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
@@ -102,7 +101,7 @@ app.on('activate', () => {
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-  // if (process.platform !== 'darwin') {
-  app.quit();
-  // }
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
 });

src/main/app.ts

@@ -0,0 +1,42 @@
+import { screen, type Rectangle, type BrowserWindow } from 'electron';
+
+import { settings } from '../../main/settings';
+
+const getArea = (bounds: Rectangle) => {
+  return screen.getDisplayMatching(bounds).workArea;
+};
+
+const isSizeValid = (bounds: Rectangle) => {
+  const area = getArea(bounds);
+  return bounds.width <= area.width && bounds.height <= area.height;
+};
+
+const isPositionValid = (bounds: Rectangle) => {
+  const area = getArea(bounds);
+
+  return (
+    bounds.x >= area.x &&
+    bounds.y >= area.y &&
+    bounds.x + bounds.width <= area.x + area.width &&
+    bounds.y + bounds.height <= area.y + area.height
+  );
+};
+
+export const loadWindowState = () => {
+  const bounds = settings.get('windowBounds');
+
+  const positionValid = isPositionValid(bounds);
+  const sizeValid = isSizeValid(bounds);
+
+  if (!positionValid || !sizeValid) {
+    const area = getArea(bounds);
+    bounds.x = area.x + (area.width - bounds.width) / 2;
+    bounds.y = area.y + (area.height - bounds.height) / 2;
+  }
+
+  return bounds;
+};
+
+export const saveBounds = (mainWindow: BrowserWindow) => {
+  settings.set('windowBounds', mainWindow.getBounds());
+};

src/main/libs/window.ts

@@ -28,7 +28,13 @@ export const settings = new Store<Settings>({
     groupAliases: [],
     projects: [],
     selectedGroups: [],
-    themeSource: 'system'
+    themeSource: 'system',
+    windowBounds: {
+      height: 600,
+      width: isDev ? 1426 : 800,
+      x: 0,
+      y: 0
+    }
   },
   migrations: {},
   name: 'devkitty.settings'

src/main/settings.ts

@@ -1,4 +1,4 @@
-import { nativeTheme } from 'electron';
+import { Rectangle, nativeTheme } from 'electron';
 
 import { Group, Groups } from 'types';
 
@@ -12,4 +12,5 @@ export type Settings = {
   projects: Projects;
   selectedGroups: Group['id'][];
   themeSource: typeof nativeTheme.themeSource;
+  windowBounds: Rectangle;
 };