electron#BrowserWindow TypeScript Examples

getBestWindowPosition = (win: BrowserWindow, tray: Tray) => {
  const winBounds = win.getBounds();
  const trayBounds = tray.getBounds();

  const trayScreen = screen.getDisplayNearestPoint({
    x: trayBounds.x,
    y: trayBounds.y
  });

  const workArea = trayScreen.workArea;
  const screenBounds = trayScreen.bounds;

  if (workArea.x > 0) {
    return {
      x: workArea.x,
      y: workArea.height - winBounds.height
    };
  }

  if (workArea.y > 0) {
    return {
      x: Math.round(trayBounds.x + trayBounds.width / 2 - winBounds.width / 2),
      y: workArea.y
    };
  }

  if (workArea.width < screenBounds.width) {
    return {
      x: workArea.width - winBounds.width,
      y: screenBounds.height - winBounds.height
    };
  }

  return {
    x: Math.round(trayBounds.x + trayBounds.width / 2 - winBounds.width / 2),
    y: workArea.height - winBounds.height
  };
}

Server = (win: BrowserWindow = null) => {
    // If we already have a server, update the window (if not null) and return
    // the same instance
    if (server) {
        if (win) server.window = win;
        return server;
    }

    server = new BlueBubblesServer(win);
    return server;
}

/* -------------- electron life cycle -------------- */

app.on("ready", async () => {
  let mainProfiler: any;

  electronApp.afterReady(app, (err, app) => { if (err) console.log(err); });
  electronApp.ready(app);
  isInspect && (mainProfiler = await startProfiler('main', 5222));
  ipcMainProcess = new IpcMainProcess(ipcMain);
  await setupAfterInstall(true);

  ipcMainWindow = new IpcMainWindow({
    width: 460,
    height: 540
  });

  ipcMainWindow.create().then((win: BrowserWindow) => {
    (global as any).win = win;
    if (isDev) {
      win.webContents.openDevTools({ mode: 'undocked' });
      ProcessManager.openWindow();
    }
    setMainWindow(win);
  });

  ipcMainWindow.createTray();

  !isDev && autoUpdater.checkForUpdatesAndNotify();
  isInspect && setTimeout(() => { mainProfiler?.stop(); }, 5e3);

  electronApp.registryHooksSync('beforeQuit', 'ipcMainWindowActions', () => {
    ipcMainWindow.beforeQuitting();
  });

});

// When the draggable area is double clicked, trigger a window maximize/minimize
ipcMain.on("double-click-drag-area", () => {
	const win = BrowserWindow.getFocusedWindow()!;
	switch (systemPreferences.getUserDefault("AppleActionOnDoubleClick", "string")) {
		case "Minimize":
			win.minimize();
			break;
		case "Maximize":
			win.isMaximized() ? win.unmaximize() : win.maximize();
			break;
	}
});

public static OpenWindow(mainWindow: any, screenWidth: number, screenHeight: number, minWindowWidth: number, minWindowHeight: number, icon: string) {
        log.info("Loading Patch Notes window...");
        this.patchnotesWindow = new BrowserWindow({
            parent: mainWindow,
            webPreferences: {
                preload: path.join(__dirname, "patchnotespage-preload.js"),
                nodeIntegration: false,
                contextIsolation: false
            },
            modal: true,
            show: false,
            center: true,
            darkTheme: true,
            maximizable: true,
            resizable: true,
            autoHideMenuBar: true,
            minWidth: minWindowWidth,
            minHeight: minWindowHeight,
            width: screenWidth-250,
            height: screenHeight-100,
            icon: icon
        });
        if (!isDev) {
            this.patchnotesWindow.removeMenu();
        }
        this.patchnotesWindow.loadFile(path.join(__dirname, "..", "..", "patchnotes-page", "patchnotes.html"));
        this.patchnotesWindow.once("ready-to-show", () => {
            this.patchnotesWindow.show();
        });
    }

showWindow() {
    app?.dock?.show();
    if (BrowserWindow.getAllWindows().length === 0) {
      this.mainWindow = this.createWindow();
      Ipc.win = this.mainWindow;
    } else {
      this.mainWindow?.show();
    }
  }

public static OpenWindow(mainWindow: any, screenWidth: number, screenHeight: number, minWindowWidth: number, minWindowHeight: number, providers: Array<number>, icon: string) {
        log.info("Loading Server List window...");
        this.serverlistWindow = new BrowserWindow({
            parent: mainWindow,
            webPreferences: {
                preload: path.join(__dirname, "serverlistpage-preload.js"),
                nodeIntegration: false,
                contextIsolation: false
            },
            modal: true,
            show: false,
            center: true,
            darkTheme: true,
            maximizable: true,
            resizable: true,
            autoHideMenuBar: true,
            minWidth: minWindowWidth,
            minHeight: minWindowHeight,
            width: screenWidth-250,
            height: screenHeight-100,
            icon: icon
        });
        if (!isDev) {
            this.serverlistWindow.removeMenu();
        }
        this.latestProviders = providers;
        this.serverlistWindow.loadFile(path.join(__dirname, "..", "..", "serverlist-page", "serverlist.html"));
        this.serverlistWindow.once("ready-to-show", () => {
            this.serverlistWindow.show();
        });
    }

createWindow(): BrowserWindow {
    const window = new BrowserWindow({
      width: 950,
      height: 700,
      titleBarStyle: 'hidden',
      frame: false,
      webPreferences: {
        preload: path.join(__dirname, './preload.js'),
        nodeIntegration: true,
        enableRemoteModule: true
      }
    });

    if (isDev) {
      window.loadURL(`http://localhost:${process.env.RENDERER_DEV_PORT}`);
    } else {
      window.loadFile(path.resolve(__dirname, '../renderer/index.html'));
    }

    return window;
  }

async createAppWindow(appName: string): Promise<void> {
        // Create the browser window.
        const windowOptions = await emitHookEvent(HOOK_EVENTS.ELECTRON_WINDOW_OPTIONS, {
            height: 600,
            width: 800,
        });
        const mainWindow = await emitHookEvent(HOOK_EVENTS.ELECTRON_WINDOW_CREATED, new BrowserWindow(windowOptions));
        const environment = await this.systemProvider.getEnvironment();
        const httpOrigin = this.getHttpOrigin(environment);
        const appRoot = await this.getAppRoot(httpOrigin);
        const appPath = await environment.extensions.getAppPath(appName, appRoot);
        const appUrl = await getAppLaunchUrl(environment, appPath, appName);

        // and load the index.html of the app.
        mainWindow.loadURL(appUrl);
    }

constructor(private readonly window: BrowserWindow, isDevelopement: boolean) {
    this.tunnels = [];
    this.isQuitting = false;

    const iconName = "icon_tray";
    const iconActiveName = "icon_tray_active";
    const isWin32 = process.platform === "win32";

    this.icon = nativeImage.createFromPath(getIconsPath(`${iconName}.${isWin32 ? "ico" : "png"}`, isDevelopement));
    this.iconActive = nativeImage.createFromPath(getIconsPath(`${iconActiveName}.${isWin32 ? "ico" : "png"}`, isDevelopement));

    this.tray = new Tray(this.icon);
    this.tray.setToolTip("Wire GUI");
    this.contextMenu = Menu.buildFromTemplate(this.mountTrayMenuItems());
    this.tray.setContextMenu(this.contextMenu);

    ipcMain.on("WgConfigStateChange", (event, args: TunnelInfo[]) => {
      this.tunnels = args;

      this.contextMenu = Menu.buildFromTemplate(this.mountTrayMenuItems());
      this.tray.setContextMenu(this.contextMenu);

      // When calling setContextMenu alongside setImage
      // For some reason electron reloads the tray image
      // With this hack this doesn't happen
      setTimeout(() => {
        this.tray.setImage(this.tunnels.some(tunnel => tunnel.active) ? this.iconActive : this.icon);
      }, 100);
    });

    window.on("close", (event) => {
      if (!this.isQuitting) {
        event.preventDefault();
        window.hide();
      }
      return false;
    });
  }

createApiWindow() {
    this.apiWindow = new BrowserWindow({
      // Showing this allows us to access the console
      // Or maybe find out how to use it with a node.js debugger?
      show: this.isDevMode,
      webPreferences: {
        devTools: true,
        // We can be a little bit reckless here because we don't load remote content in the backend.
        contextIsolation: false,
        nodeIntegration: true,
        preload: desktopBackendPreloadPath,
      },
    });
    this.apiWindow.on("close", (e) => {
      // We don't close
      this.apiWindow?.hide();
      if (!this.isQuitting) {
        e.preventDefault();
      } else {
        this.apiWindow = undefined;
      }
    });
    this.apiWindow.webContents.openDevTools();
  }

/**
   * Initializes an instance
   */
  constructor(showWindow: boolean) {
    // --- Setup the state keeper module
    if (!windowStateKeeper) {
      windowStateKeeper = require("electron-window-state");
    }

    // --- Restore the last window state
    const savedWindowState = windowStateKeeper({
      defaultWidth: this.minimumWidth,
      defaultHeight: this.minimumHeight,
      file: this.stateFile,
    });

    // --- Instantiate the window
    const window = (this._window = new BrowserWindow(
      this.getWindowOptions(savedWindowState, showWindow)
    ));

    // --- Allow the `electron-windows-state` package to follow and save the
    // --- app window's state
    savedWindowState.manage(this._window);

    // --- Set up event handlers
    window.on("focus", () => this.onFocus());
    window.on("blur", () => this.onBlur());
    window.on("enter-full-screen", () => this.onEnterFullScreen());
    window.on("leave-full-screen", () => this.onLeaveFullScreen());
    window.on("maximize", () => this.onMaximize());
    window.on("minimize", () => this.onMinimize());
    window.on("unmaximize", () => this.onUnmaximize());
    window.on("restore", () => this.onRestore());
    window.on("hide", () => this.onHide());
    window.on("show", () => this.onShow());
    window.on("closed", () => this.onClosed());
  }

function createWindow () {
  const bounds = store.app.get('bounds')
  mainWindow = new BrowserWindow({
    width: 550,
    height: 370,
    ...bounds,
    titleBarStyle: 'hidden',
    resizable: false,
    backgroundColor: '#212123',
    webPreferences: {
      preload: path.resolve(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: true
    }
  })

  if (isDev) {
    const rendererPort = process.argv[2]
    mainWindow.loadURL(`http://localhost:${rendererPort}`)
    mainWindow.webContents.openDevTools({ mode: 'detach' })
  } else {
    mainWindow.loadFile(path.resolve(app.getAppPath(), 'src/renderer/index.html'))
  }

  mainWindow.on('close', () => {
    store.app.set('bounds', mainWindow.getBounds())
  })

  return { mainWindow }
}

/**
   * Initializes the listener that processes responses
   */
  constructor(public readonly window: BrowserWindow) {
    super();
    ipcMain.on(
      this.responseChannel,
      (_ev: IpcMainEvent, response: ResponseMessage) =>
        this.processResponse(response)
    );
  }

function createWindow(): void {

  win = new BrowserWindow({
    width: 1280,
    height: 720,
    minWidth: 1280,
    minHeight: 720,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
    },
  });

  if (process.platform !== 'darwin') {
    Menu.setApplicationMenu(null);
  }

  if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`)
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }
}

app.whenReady().then(async () => {
  if (isDev) {
    const { default: installExtension, VUEJS3_DEVTOOLS } = await import(
      'electron-devtools-installer'
    )
    installExtension(VUEJS3_DEVTOOLS)
  }

  init()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) {
      init()
    }
    checkForUpdate(mainWindow)
  })
})

function createWindow(): BrowserWindow {
  win = new BrowserWindow({
    center: true,
    width: 800,
    height: 550,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: isDevelopment,
      contextIsolation: false,
      enableRemoteModule: false
    },
  });

  const winURL = isDevelopment
    ? 'http://localhost:4200'
    : `file://${path.join(__dirname, '/../renderer/index.html')}`;

  if (isDevelopment) {
    win.webContents.openDevTools();
  }

  win.loadURL(winURL).then(() => {
  });

  win.on('closed', () => {
    win = null;
  });

  return win;
}

ipcMain.on(MainIpcListenChannels.OpenSecureFormPaymentWindow, async (event: IpcMainEvent, secureForm: string) => {
    const securePaymentWindow = new BrowserWindow({
        frame: true,
        fullscreen: false,
        fullscreenable: false,
        resizable: true,
        width: 770,
        height: 820,
        x: (mainWindow?.getBounds().x ?? 0) + 40,
        y: mainWindow?.getBounds().y,
    })
    return await securePaymentWindow.loadURL("data:text/html;charset=UTF-8," + encodeURIComponent(secureForm))
})

function createWindow(): BrowserWindow {
  win = new BrowserWindow({
    center: true,
    width: 800,
    height: 550,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: isDevelopment,
      contextIsolation: false,
      enableRemoteModule: false,
      // Fix Access-Control-Allow-Origin
      webSecurity: false
    }
  });
  createMenu(app);
  createAbout(app);
  // Maximize window
  win.maximize();
  const winURL = isDevelopment
    ? 'http://localhost:4200'
    : `file://${path.join(__dirname, '/../renderer/index.html')}`;
  if (isDevelopment) {
    win.webContents.openDevTools();
  }
  win.loadURL(winURL).then(() => {
  });
  win.on('closed', (event) => {
    win = null;
    event.preventDefault();
  });
  if (isDevelopment) {
    app.dock.setIcon(path.join(__dirname, '../shared/assets/icons/favicon.png'));
  }
  handlerUpdater(win);
  return win;
}

createChatWindow = async (id: string): Promise<BrowserWindow> => {
    chatWindow = new BrowserWindow({
        frame: true,
        fullscreen: false,
        fullscreenable: false,
        maximizable: false,
        width: winSize.width,
        height: winSize.height,
        x: (mainWindow?.getBounds().x ?? 0) + 40,
        y: mainWindow?.getBounds().y,
    })
    chatWindow.removeMenu()
    chatWindow.on("close", (event) => {
        if (app.quitting) {
            chatWindow = null
        } else {
            event.preventDefault()
            chatWindow?.hide()
        }
    })
    chatWindow.on("closed", () => {
        chatWindow = null
    })

    const url = new URL(`file:///${path.join(__static, "support.html")}`)
    url.search = new URLSearchParams({
        app_id: packageJson.intercomAppId,
        node_identity: id,
        app_version: packageJson.version,
    }).toString()
    log.info(`Opening in browser window: ${url.toString()}`)
    await chatWindow.loadURL(url.toString())
    return chatWindow
}

/**
 * -1 Failed to check the update
 * 0 checking for updates
 * 1 A new version is detected and ready to download
 * 2 No new version is detected
 * 3 Downloading
 * 4 Download completed
 **/
function handlerMessage(mainWindow: BrowserWindow, type: Number, data?: String) {
  const updaterMessage = {
    state: type,
    message: data || ''
  }
  console.log(updaterMessage)
  mainWindow.webContents.send('updater', updaterMessage)
}

export async function checkForUpdate (context: BrowserWindow) {
  if (isDev) return

  const res = await axios.get(
    'https://github.com/antonreshetov/image-optimizer/releases/latest'
  )

  if (res) {
    const latest = res.request.socket._httpMessage.path
      .split('/')
      .pop()
      .substring(1)
    if (latest !== version) {
      context.webContents.send('update-available')
    }
  }
}

async function handleOpenObs() {
  // electron.ipcRenderer.on();
  // BrowserWindow is just the type import, remote.BrowserWindow is the value
  // const win: BrowserWindow = new remote.BrowserWindow({ .. })
  if (win === undefined) {
    win = new remote.BrowserWindow({
      // backgroundColor: 'blue',
      height: 600,
      width: 800,
      title: 'Oratio OBS Display',
      autoHideMenuBar: true,
      // focusable: false,
      // transparent: true,
      webPreferences: {
        nodeIntegration: true,
        // devTools: true,
        // Soffscreen: true,
      },
    });
    win.loadURL(`file://${__dirname}/index.html#/obs`);

    win.on('closed', () => {
      win = undefined;
    });
  }
}

createWindow = (): void => {
  const mainWindowState = windowStateKeeper({
    defaultWidth: 960,
    defaultHeight: 640,
  });

  // Create the browser window.
  const mainWindow = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    height: mainWindowState.height,
    width: mainWindowState.width,
    minHeight: 640,
    minWidth: 960,
    center: true,
    webPreferences: {
      nodeIntegration: false,
      sandbox: true,
    },
  });

  mainWindow.loadURL(config.webUrl);

  mainWindowState.manage(mainWindow);

  if (config.isDev) {
    // Open the DevTools.
    mainWindow.webContents.openDevTools();
  }
}

/**
 * Initialize a BrowserWindow object with initial parameters
 */
function createBrowserWindow(windowState: windowStateKeeper.State) {
  let options: Electron.BrowserWindowConstructorOptions = {
    x: windowState.x,
    y: windowState.y,
    width: windowState.width,
    height: windowState.height,
    frame: false,
    title: 'Bridge',
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (isDevBuild) ? true : false,
      textAreasAreResizable: false,
      enableRemoteModule: true,
      contextIsolation: false
    },
    simpleFullscreen: true,
    fullscreenable: false,
    backgroundColor: '#121212'
  }

  if (process.platform == 'linux' && !isDevBuild) {
    options = Object.assign(options, { icon: path.join(__dirname, '..', 'assets', 'images', 'system', 'icons', 'png', '48x48.png' ) })
  }

  return new BrowserWindow(options)
}

export function restoreWindow(window: BrowserWindow): void {
  window?.show();
  window?.setSkipTaskbar(false);

  if (platform.isMac) {
    app.dock.show().catch((e) => log.error(`Failed to show on Mac dock`, e));
  }

  window?.webContents?.send(IPC_WINDOW_RESUME);
}

function createWindow(): BrowserWindow {

  // Create the browser window.
  win = new BrowserWindow({
    width: 950,
    height: 650,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve),
      contextIsolation: false,  // false if you want to run 2e2 test with Spectron
      enableRemoteModule: true, // true if you want to run 2e2 test  with Spectron or use remote module in renderer context (ie. Angular)
      devTools: false
    },
    autoHideMenuBar: true,
    icon: path.join(__dirname, '/dist/assets/icon.ico')
  });

  win.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });

  return win;
}

initialize(): void {
    // Initialize App Menu
    Menu.setApplicationMenu(Menu.buildFromTemplate(this.appMenuTemplate))

    // Initialize Tray
    this.initializeTray()

    // Initialize Window
    this.initializeWindow()
    app.on('activate', (): void => {
      if (BrowserWindow.getAllWindows().length === 0) this.initializeWindow()
    })
  }

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false
  });

  // load the URL of the Angular Live Development Server 
  mainWindow.loadURL(appUrl);

  mainWindow.once('ready-to-show', () => mainWindow.show());
}