🔨 Refactor(background): convergence of BrowserWindow creation to windowManager

src/main/apis/window/constants.ts

@@ -0,0 +1,27 @@
+export enum IWindowList {
+  SETTING_WINDOW = 'SETTING_WINDOW',
+  TRAY_WINDOW = 'TRAY_WINDOW',
+  MINI_WINDOW = 'MINI_WINDOW',
+  RENAME_WINDOW = 'RENAME_WINDOW'
+}
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+export const TRAY_WINDOW_URL = isDevelopment
+  ? (process.env.WEBPACK_DEV_SERVER_URL as string)
+  : `picgo://./index.html`
+
+export const SETTING_WINDOW_URL = isDevelopment
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#setting/upload`
+  : `picgo://./index.html#setting/upload`
+
+export const MINI_WINDOW_URL = isDevelopment
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#mini-page`
+  : `picgo://./index.html#mini-page`
+
+export const RENAME_WINDOW_URL = process.env.NODE_ENV === 'development'
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#rename-page`
+  : `picgo://./index.html#rename-page`
+
+export const DELETE_WINDOW_EVENT = 'DELETE_WINDOW_EVENT'
+export const CREATE_WINDOW_EVENT = 'CREATE_WINDOW_EVENT'

src/main/apis/window/windowList.ts

@@ -0,0 +1,181 @@
+import {
+  IWindowList,
+  DELETE_WINDOW_EVENT,
+  CREATE_WINDOW_EVENT,
+  SETTING_WINDOW_URL,
+  TRAY_WINDOW_URL,
+  MINI_WINDOW_URL,
+  RENAME_WINDOW_URL
+} from './constants'
+import { IWindowListItem } from '#/types/electron'
+import bus from '~/main/utils/eventBus'
+import db from '#/datastore'
+import { getWindowId } from '~/main/utils/busApi'
+import { BrowserWindow, app } from 'electron'
+import { CREATE_APP_MENU } from '~/main/utils/busApi/constants'
+
+const windowList = new Map<IWindowList, IWindowListItem>()
+
+windowList.set(IWindowList.TRAY_WINDOW, {
+  isValid: process.platform !== 'linux',
+  multiple: false,
+  options () {
+    return {
+      height: 350,
+      width: 196, // 196
+      show: false,
+      frame: false,
+      fullscreenable: false,
+      resizable: false,
+      transparent: true,
+      vibrancy: 'ultra-dark',
+      webPreferences: {
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true,
+        backgroundThrottling: false
+      }
+    }
+  },
+  callback (window) {
+    const id = window!.id
+    window!.loadURL(TRAY_WINDOW_URL)
+    window!.on('closed', () => {
+      bus.emit(DELETE_WINDOW_EVENT, id)
+    })
+
+    window!.on('blur', () => {
+      window!.hide()
+    })
+  }
+})
+
+windowList.set(IWindowList.SETTING_WINDOW, {
+  isValid: true,
+  multiple: false,
+  options () {
+    const options: IBrowserWindowOptions = {
+      height: 450,
+      width: 800,
+      show: false,
+      frame: true,
+      center: true,
+      fullscreenable: false,
+      resizable: false,
+      title: 'PicGo',
+      vibrancy: 'ultra-dark',
+      transparent: true,
+      titleBarStyle: 'hidden',
+      webPreferences: {
+        backgroundThrottling: false,
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true,
+        webSecurity: false
+      }
+    }
+    if (process.platform !== 'darwin') {
+      options.show = false
+      options.frame = false
+      options.backgroundColor = '#3f3c37'
+      options.transparent = false
+      options.icon = `${__static}/logo.png`
+    }
+    return options
+  },
+  callback (window) {
+    const id = window!.id
+    window!.loadURL(SETTING_WINDOW_URL)
+    window!.on('closed', () => {
+      bus.emit('toggleShortKeyModifiedMode', false)
+      bus.emit(DELETE_WINDOW_EVENT, id)
+      if (process.platform === 'linux') {
+        process.nextTick(() => {
+          app.quit()
+        })
+      }
+    })
+    bus.emit(CREATE_APP_MENU)
+    bus.emit(CREATE_WINDOW_EVENT, IWindowList.MINI_WINDOW)
+  }
+})
+
+windowList.set(IWindowList.MINI_WINDOW, {
+  isValid: process.platform !== 'darwin',
+  multiple: false,
+  options () {
+    let obj: IBrowserWindowOptions = {
+      height: 64,
+      width: 64,
+      show: process.platform === 'linux',
+      frame: false,
+      fullscreenable: false,
+      skipTaskbar: true,
+      resizable: false,
+      transparent: process.platform !== 'linux',
+      icon: `${__static}/logo.png`,
+      webPreferences: {
+        backgroundThrottling: false,
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true
+      }
+    }
+
+    if (db.get('settings.miniWindowOntop')) {
+      obj.alwaysOnTop = true
+    }
+    return obj
+  },
+  callback (window) {
+    const id = window!.id
+    window!.loadURL(MINI_WINDOW_URL)
+    window!.on('closed', () => {
+      bus.emit(DELETE_WINDOW_EVENT, id)
+    })
+  }
+})
+
+windowList.set(IWindowList.RENAME_WINDOW, {
+  isValid: true,
+  multiple: true,
+  options () {
+    let options: IBrowserWindowOptions = {
+      height: 175,
+      width: 300,
+      show: true,
+      fullscreenable: false,
+      resizable: false,
+      vibrancy: 'ultra-dark',
+      webPreferences: {
+        nodeIntegration: true,
+        nodeIntegrationInWorker: true,
+        backgroundThrottling: false
+      }
+    }
+    if (process.platform !== 'darwin') {
+      options.show = true
+      options.backgroundColor = '#3f3c37'
+      options.autoHideMenuBar = true
+      options.transparent = false
+    }
+    return options
+  },
+  async callback (window) {
+    window!.loadURL(RENAME_WINDOW_URL)
+    const currentWindowId = await getWindowId()
+    const currentWindow = BrowserWindow.fromId(currentWindowId)
+    if (currentWindow && currentWindow.isVisible()) {
+    // bounds: { x: 821, y: 75, width: 800, height: 450 }
+      const bounds = currentWindow.getBounds()
+      const positionX = bounds.x + bounds.width / 2 - 150
+      let positionY
+      // if is the settingWindow
+      if (bounds.height > 400) {
+        positionY = bounds.y + bounds.height / 2 - 88
+      } else { // if is the miniWindow
+        positionY = bounds.y + bounds.height / 2
+      }
+      window!.setPosition(positionX, positionY, false)
+    }
+  }
+})
+
+export default windowList

src/main/apis/window/windowManager.ts

@@ -0,0 +1,77 @@
+import {
+  BrowserWindow
+} from 'electron'
+import { IWindowManager, IWindowListItem } from '#/types/electron'
+import windowList from './windowList'
+import {
+  IWindowList,
+  DELETE_WINDOW_EVENT,
+  CREATE_WINDOW_EVENT
+} from './constants'
+import bus from '~/main/utils/eventBus'
+
+class WindowManager implements IWindowManager {
+  private windowMap: Map<IWindowList | string, BrowserWindow> = new Map()
+  private windowIdMap: Map<number, IWindowList | string> = new Map()
+  constructor () {
+    bus.on(DELETE_WINDOW_EVENT, this.deleteById)
+    bus.on(CREATE_WINDOW_EVENT, this.create)
+  }
+  create = (name: IWindowList) => {
+    const windowConfig: IWindowListItem = windowList.get(name)!
+    if (windowConfig.isValid) {
+      if (!windowConfig.multiple) {
+        if (this.windowMap.has(name)) return this.windowMap.get(name)!
+      }
+      const window = new BrowserWindow(windowConfig.options())
+      if (windowConfig.multiple) {
+        this.windowMap.set(`${name}_${window.id}`, window)
+        this.windowIdMap.set(window.id, `${name}_${window.id}`)
+      } else {
+        this.windowMap.set(name, window)
+        this.windowIdMap.set(window.id, name)
+      }
+      windowConfig.callback(window)
+      return window
+    } else {
+      return null
+    }
+  }
+  get (name: IWindowList) {
+    if (this.windowMap.has(name)) {
+      return this.windowMap.get(name)!
+    } else {
+      const window = this.create(name)
+      return window
+    }
+  }
+  has (name: IWindowList) {
+    return this.windowMap.has(name)
+  }
+  delete = (name: IWindowList) => {
+    const window = this.windowMap.get(name)
+    if (window) {
+      this.windowIdMap.delete(window.id)
+      this.windowMap.delete(name)
+    }
+  }
+  deleteById = (id: number) => {
+    const name = this.windowIdMap.get(id)
+    if (name) {
+      this.windowMap.delete(name)
+      this.windowIdMap.delete(id)
+    }
+  }
+  getAvailableWindow () {
+    const miniWindow = this.windowMap.get(IWindowList.MINI_WINDOW)
+    if (miniWindow && miniWindow.isVisible()) {
+      return miniWindow
+    } else {
+      const settingWindow = this.windowMap.get(IWindowList.SETTING_WINDOW)
+      const trayWindow = this.windowMap.get(IWindowList.TRAY_WINDOW)
+      return settingWindow || trayWindow || this.create(IWindowList.SETTING_WINDOW)!
+    }
+  }
+}
+
+export default new WindowManager()