electron#screen JavaScript Examples

isAppOffScreen = windowBounds => {
  const displays = screen.getAllDisplays();
  let isNotOffScreen = false;

  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < displays.length; i++) {
    const display = displays[i];
    const { workArea } = display;

    if (
      windowBounds.x >= workArea.x &&
      windowBounds.y >= workArea.y &&
      windowBounds.x <= workArea.width &&
      windowBounds.y <= workArea.height
    ) {
      isNotOffScreen = true;
    }
  }

  return !isNotOffScreen;
}

getPrimaryScreenCenterBounds = windowBounds => {
  const primaryDisplay = screen.getPrimaryDisplay();
  const { width, height } = primaryDisplay.workAreaSize;

  const halfWindowWidth = windowBounds.width / 2;
  const halfWindowHeight = windowBounds.height / 2;

  return {
    x: width / 2 - halfWindowWidth,
    y: height / 2 - halfWindowHeight,
    width: windowBounds.width,
    height: windowBounds.height
  };
}

getWindowOptions = (options) => {
  if (isLinux) {
    options.icon = pathUtil.join(staticDir, 'icon.png');
  }
  options.useContentSize = true;
  options.minWidth = 200;
  options.minHeight = 200;
  options.webPreferences ||= {};
  if (typeof options.webPreferences.preload === 'undefined') {
    // only undefined should be replaced as null is interpreted as "no preload script"
    options.webPreferences.preload = pathUtil.resolve(__dirname, 'preload.js')
  }

  const activeScreen = screen.getDisplayNearestPoint(screen.getCursorScreenPoint());
  const bounds = activeScreen.workArea;

  options.width = Math.min(bounds.width, options.width);
  options.height = Math.min(bounds.height, options.height);

  options.x = bounds.x + ((bounds.width - options.width) / 2);
  options.y = bounds.y + ((bounds.height - options.height) / 2);

  return options;
}

function createWindow() {
  const size = screen.getPrimaryDisplay().workAreaSize;

  // Create the browser window.
  mainWindow = new BrowserWindow({
    x: 200,
    y: 200,
    width: /*320*/ /*800*/ 640,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: serve,
      contextIsolation: false,
      enableRemoteModule : true,
      devTools: true
    },
  });

  mainWindow.setAlwaysOnTop(true, 'floating');
  mainWindow.setVisibleOnAllWorkspaces(true);
  mainWindow.setFullScreenable(false);

  if (serve) {
    //mainWindow.webContents.openDevTools();
    mainWindow.loadFile(path.join(__dirname, "./../src/index.html"));

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

  /**
   * Need to deal with Electron bug when window not closing wit open developer tools
   * And frame mode set to false. False frame mode needed wor default window tilebar
   */
  mainWindow.on('close', () => {
    ioHook.stop();

    if (mainWindow.webContents.isDevToolsOpened()) {
      mainWindow.webContents.closeDevTools()
    }
  });

  // Emitted when the window is closed.
  mainWindow.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.
    mainWindow = null;
  });

  return mainWindow;
}

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    backgroundColor: '#fff',
    icon: isDev
      ? path.join(__dirname, '../../_icons/iconColor.png')
      : `${__dirname}/_icons/iconColor.png`,
    autoHideMenuBar: true,
    // useContentSize: true,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: false,
      webSecurity: false,
      backgroundThrottling: false,
      enableRemoteModule: true
    },
    show: false
  })

  mainWindow.setBounds({
    width: 1200,
    height: 800
  })

  settingsDb.findOne({
    _id: 'bounds'
  }, function (err, doc) {
    if (doc === null || err) {
      return
    }

    if (typeof doc !== 'object' || typeof doc.value !== 'object') {
      return
    }

    const { maximized, ...bounds } = doc.value
    const allDisplaysSummaryWidth = screen
      .getAllDisplays()
      .reduce((accumulator, { size: { width } }) => accumulator + width, 0)

    if (allDisplaysSummaryWidth >= bounds.x) {
      mainWindow.setBounds({
        x: bounds.x,
        y: bounds.y,
        width: bounds.width,
        height: bounds.height
      })
    }
    if (maximized) {
      mainWindow.maximize()
    }
  })

  // eslint-disable-next-line
  setMenu()

  // load root file/url
  if (isDev) {
    mainWindow.loadURL('http://localhost:9080')
  } else {
    mainWindow.loadFile(`${__dirname}/index.html`)

    global.__static = path
      .join(__dirname, '/static')
      .replace(/\\/g, '\\\\')
  }

  // Show when loaded
  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
    mainWindow.focus()
  })

  mainWindow.on('closed', () => {
    console.log('closed')
  })

  ipcMain.on('setBounds', (_e, data) => {
    const value = {
      ...mainWindow.getBounds(),
      maximized: mainWindow.isMaximized()
    }

    settingsDb.findOne({
      _id: 'bounds'
    }, function (err, doc) {
      if (err) {
        return
      }
      if (doc !== null) {
        settingsDb.update({
          _id: 'bounds'
        }, {
          $set: {
            value
          }
        }, {})
      } else {
        settingsDb.insert({
          _id: 'bounds',
          value
        })
      }
    })
  })
}

createWindow = async () => {
  const { width } = screen.getPrimaryDisplay().workAreaSize;
  const displays = screen.getAllDisplays();
  const externalDisplay = displays.find(display => {
    return display.bounds.x !== 0 || display.bounds.y !== 0;
  });

  const winOptions = {
    show: false,
    width: 1000,
    height: 550,
    backgroundColor: 'white',
    minWidth: 400,
    minHeight: 500,
    useContentSize: true,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      preload: isDev
        ? path.resolve(__dirname, '..', 'dist', 'preload.js')
        : path.resolve(__dirname, 'preload.js')
    }
  };

  if (isDev && externalDisplay) {
    winOptions.width = 3000;
    winOptions.x = externalDisplay.bounds.x + 250;
    winOptions.y = externalDisplay.bounds.y + 50;
  }

  mainWindow = new BrowserWindow(winOptions);

  juggernaut = new JuggernautController(mainWindow);
  juggernaut.init({});

  const updater = new JuggernautUpdater();

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();

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

  app.on('before-quit', event => {
    mainLog.trace('app.before-quit');
    if (mainWindow && !mainWindow.forceClose) {
      event.preventDefault();
      mainWindow.forceClose = true;
      juggernaut.terminate();
    }
  });

  app.on('will-quit', () => {
    mainLog.trace('app.will-quit');
  });

  app.on('quit', () => {
    mainLog.trace('app.quit');
  });

  app.on('window-all-closed', () => {
    mainLog.trace('app.window-all-closed');
    if (os.platform() !== 'darwin' || mainWindow.forceClose) {
      app.quit();
    }
  });

  app.on('activate', () => {
    mainLog.trace('app.activate');
    if (mainWindow) {
      mainWindow.show();
    }
  });

  app.on('second-instance', (event, cli) => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) {
        mainWindow.restore();
      }
      mainWindow.focus();
    }
  });

  mainWindow.on('close', event => {
    mainLog.trace('mainWindow.close');
    if (os.platform() === 'darwin') {
      if (!mainWindow.forceClose) {
        event.preventDefault();
        if (mainWindow.isFullScreen()) {
          mainWindow.once('leave-full-screen', () => {
            mainWindow.hide();
          });
          mainWindow.setFullScreen(false);
        } else {
          mainWindow.hide();
        }
      }
    } else if (!mainWindow.forceClose) {
      event.preventDefault();
      mainWindow.hide();
      app.quit();
    }
  });

  mainLog.info(process.env.NODE_ENV);

  if (process.env.NODE_ENV === 'production') {
    const sourceMapSupport = require('source-map-support'); // eslint-disable-line global-require
    sourceMapSupport.install();
  }

  if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD) {
    if (process.env.REINSTALL_DEVTOOLS) {
      BrowserWindow.removeDevToolsExtension(REACT_DEVELOPER_TOOLS);
      BrowserWindow.removeDevToolsExtension(REDUX_DEVTOOLS);
    }

    installExtension(REACT_DEVELOPER_TOOLS)
      .then(name => mainLog.debug(`Added Extension: ${name}`))
      .catch(err =>
        mainLog.warn(
          `An error occurred when installing REACT_DEVELOPER_TOOLS: ${err}`
        )
      );

    installExtension(REDUX_DEVTOOLS)
      .then(name => mainLog.debug(`Added Extension: ${name}`))
      .catch(err =>
        mainLog.warn(`An error occurred when installing REDUX_DEVTOOLS: ${err}`)
      );
  }

  mainWindow.webContents.once('dom-ready', () => {
    mainLog.trace('webContents.dom-ready');
    if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD) {
      mainWindow.openDevTools();
    }
  });
}