Местоположение окна на экране

Задать местоположение окна на экране при создании окна позволяют следующие опции:

• center — если указано значение true (значение по умолчанию), то окно будет показано по центру экрана;
• x — горизонтальная координата относительно левого верхнего угла экрана;
• y — вертикальная координата относительно левого верхнего угла экрана;
• movable — если указано значение false, то окно нельзя будет перемещать с помощью мыши (значение по умолчанию: true).

Пример:

win = new BrowserWindow({
   width: 800,
   height: 600,
   center: false,
   x: 100,
   y: 100,
   movable: true
});

Управлять местоположением окна после его создания позволяют следующие методы:

• setPosition(<X>, <Y>[, <Анимация>]) — перемещает окно в указанную позицию;
• getPosition() — возвращает массив с координатами окна;
• center() — перемещает окно в центр экрана;
• setBounds(<Объект>[, <Анимация>]) — задает координаты и размеры окна. Значение в первом параметре указывается в виде объекта со свойствами x, y, width и height:

win.setBounds({x: 200, y: 200, width: 800, height: 600});

Если какое-либо свойство не указано, то оно будет иметь текущее значение. Укажем только высоту:

win.setBounds({height: 500});

• getBounds() — возвращает координаты и размеры окна в виде объекта со свойствами x, y, width и height:

console.log( win.getBounds() );
// { x: 200, y: 200, width: 800, height: 500 }

• setContentBounds(<Объект>[, <Анимация>]) — задает координаты и размеры клиентской области окна. Значение в первом параметре указывается в виде объекта со свойствами x, y, width и height:

win.setContentBounds({x: 200, y: 200, width: 800, height: 600});

• getNormalBounds() — возвращает координаты и размеры окна в нормальном (не развернутом или свернутом) состоянии в виде объекта со свойствами x, y, width и height:

console.log( win.getNormalBounds() );
// { x: 200, y: 200, width: 800, height: 600 }

• setMovable(true | false) — если указано значение false, то пользователь не сможет перемещать окно по экрану;
• isMovable() — возвращает значение true, если пользователь может перемещать окно, и false — в противном случае.

События:

• will-move — перед перемещением окна пользователем. Если вызвать метод preventDefault() через объект события, то положение окна изменено не будет:

win.on('will-move', (e, b) => {
   e.preventDefault();
   console.log(b); // { x: 760, y: 356, width: 500, height: 300 }
});

• moved — возникает один раз после изменения местоположения окна (в самом конце);
• move — генерируется после любого изменения местоположения окна (несколько раз в процессе изменения местоположения окна пользователем).

Получение информации о размере экрана

Для отображения окна у правой или нижней границы необходимо знать размеры экрана. Получить эту информацию позволяет объект screen из пакета electron:

const { screen } = require('electron');

Обратите внимание: если объект создается таким образом в процессе Renderer, то он не будет доступен, т. к. существует глобальный объект window.screen.

Объект screen содержит следующие основные методы (полный список см. в документации):

• getCursorScreenPoint() — возвращает местоположение курсора:

console.log(screen.getCursorScreenPoint());
// { x: 767, y: 549 }

• getAllDisplays() — возвращает массив со всеми доступными экранами;
• getPrimaryDisplay() — возвращает ссылку на основной экран:

console.log(screen.getPrimaryDisplay());

Примерный результат:

{
  id: 2528732444,
  bounds: { x: 0, y: 0, width: 1920, height: 1080 },
  workArea: { x: 0, y: 0, width: 1920, height: 1040 },
  accelerometerSupport: 'unknown',
  monochrome: false,
  colorDepth: 24,
  colorSpace: '{primaries_d50_referred: [[0.6599, 0.3287],
  [0.3300, 0.5948],  [0.1541, 0.0602]], transfer:IEC61966_2_1,
   matrix:RGB, range:FULL}',
  depthPerComponent: 8,
  size: { width: 1920, height: 1080 },
  displayFrequency: 60,
  workAreaSize: { width: 1920, height: 1040 },
  scaleFactor: 1,
  rotation: 0,
  internal: false,
  touchSupport: 'unknown'
}

Полные размеры основного экрана доступны через свойство bounds:

const display = screen.getPrimaryDisplay();
console.log(display.bounds);
// { x: 0, y: 0, width: 1920, height: 1080 }

Свойство workArea содержит размеры и координаты только доступной части экрана (без размера Панели задач):

console.log(display.workArea);
// { x: 0, y: 0, width: 1920, height: 1040 }