Электрон, изменяющий размер безрамочного окна

Я работаю над приложением с безрамочным окном и видеоэлементом html5, который отображает веб-камеру, заполняющую document.body на 100%.

У меня mainWindow установлен изменяемый размер mainWindow.isResizable(true), но я не могу изменить размер окна.

Когда я отлаживаю с помощью инструментов chrome dev, я могу только изменить размер окна, в котором включены боковые инструменты chrome dev. (не уверен, что это поможет, но я разрабатываю это на дистрибутиве Linux на основе Ubuntu 14.04 под названием Elementary OS Freya)

Может ли кто-нибудь объяснить, почему я не могу изменить размер окна с изменяемым размером, хотя у меня установлено значение для основного окна?

Кроме того, что я могу сделать, чтобы решить эту проблему?

var app = require("app");
var BrowserWindow = require("browser-window");

var mainWindow = null;

// Quit when all windows are closed.
app.on("window-all-closed", function() {
  app.quit();
});

app.on("ready", function() {
  mainWindow = new BrowserWindow({
    width: 640,
    height: 480,
    frame: false
  });
  mainWindow.loadUrl("file://" + __dirname + "/index.html");

  // Set Window Resizable
  mainWindow.isResizable(true);

  mainWindow.focus();
});

javascript electron window resizable
person Michael Schwartz    schedule 01.10.2015    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Мне удалось выяснить, в чем проблема, и я пришел к выводу, что это даже не проблема с javascript. Все, что мне нужно было сделать, это изменить мой CSS для того, что я хочу перетаскивать, а что нет.

Поскольку мой html и тело также настроены на перетаскивание, поэтому я не мог изменить размер. Вот мое решение...

Мне пришлось создать новый элемент (div.dialog) и заключить в него содержимое. Наряду со следующим CSS.

.dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  -webkit-app-region: no-drag;
}
.tips {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  -webkit-app-region: drag;
}

HTML:

<div class="dialog" data-action="toggle">
  <header class="tips" data-action="toggle">
    <div>
      <nav>
        [Space] for Snapshot<br>
        [Esc] to Close
        <p data-action="toggle-tips">[Tab] to Toggle Dialog</p>
      </nav>
    </div>
  </header>
</div>
person Michael Schwartz    schedule 01.10.2015
comment
Спасибо. Это в основном отвечает на мой вопрос: когда вы помечаете окно как frame: false, а затем включаете -webkit-app-region: drag, флаг перетаскивания отключает дескрипторы изменения размера окна. Я надеялся, что есть другое решение, поскольку я уже разработал пользовательский интерфейс, но это только подтверждает мои подозрения, что вам нужно сделать границу без перетаскивания, чтобы вернуть дескрипторы изменения размера окна. - person Abei Villafane; 11.11.2016

arrow_upward
6
arrow_downward

Ответ, упомянутый в https://stackoverflow.com/a/32897808/11167389, в порядке, но есть другой подход, который не влияет на любой другой стиль и может быть удален в любом безрамочном окне, которое у вас есть. VS Code, созданный с использованием электронного, использует аналогичный подход для изменения размера заголовка.

Таким образом, у вас в основном есть следующая структура с заголовком, имеющим -webkit-app-region: drag;:

.title-bar {
  display: flex;
  height: 30px;
  border: 1px solid gray;
  align-items: center;
  -webkit-app-region: drag;
}

.title {
  margin-left: 10px;
}

.title-bar-btns {
  margin-left: auto;
  -webkit-app-region: no-drag;
}
<div class="title-bar">
  <div class="title">Window Header</div>
  <div class="title-bar-btns">
    <button id="min-btn">-</button>
    <button id="max-btn">+</button>
    <button id="close-btn">x</button>
  </div>
</div>

Теперь вы можете добавить div с классом titlebar-drag-region в строку заголовка, установить position:relative; в строку заголовка и удалить из него -webkit-app-region: drag;.

Что делает .titlebar-drag-region, так это то, что он создает перетаскиваемую область, которая немного короче по размерам по сравнению с заголовком (строкой заголовка). Зазор в 6 пикселей, который мы оставили на границах, затем используется для изменения размера. Вот и все. У вас будет заголовок, который можно перетаскивать, а также изменять его размер со всех краев. введите описание изображения здесь

Итак, просто создайте .titlebar-drag-region один раз, а затем поместите <div class="titlebar-drag-region"> в заголовки всех окон.

.titlebar-drag-region {  /*added*/
  top: 6px;
  left: 6px;
  display: block;
  position: absolute;
  width: calc(100% - 12px);
  height: calc(100% - 6px);
  z-index: -1;
  -webkit-app-region: drag;
}

.title-bar {
  display: flex;
  height: 30px;
  border: 1px solid gray;
  align-items: center;
  position: relative;  /*added*/
  /*-webkit-app-region: drag;*/  /*removed*/
}

.title {
  margin-left: 10px;
}

.title-bar-btns {
  margin-left: auto;
  -webkit-app-region: no-drag;
}
<div class="title-bar">
  <div class="titlebar-drag-region"></div>  <! –– added ––>
  <div class="title">Window Header</div>
  <div class="title-bar-btns">
    <button id="min-btn">-</button>
    <button id="max-btn">+</button>
    <button id="close-btn">x</button>
  </div>
</div>

person Omkar Rajam    schedule 17.10.2019
comment
Это правильный ответ! - person kblst; 03.05.2021

arrow_upward
5
arrow_downward

Вы используете неправильный метод:

mainWindow.setResizable(false) Устанавливает, может ли пользователь вручную изменить размер окна.

mainWindow.isResizable() Возвращает логическое значение — может ли пользователь вручную изменить размер окна.

person Sergio    schedule 18.11.2016