Electron: -webkit-app-region: перетаскивание работает, но оно не позволяет мне нажимать кнопки в моей пользовательской строке заголовка

Question

Я работаю с Electron и пытаюсь создать собственную строку заголовка - я до сих пор добился успеха. Но самая важная функция строки заголовка пропала - перетаскивание приложения по экрану.

Я прочитал в inte rnet свойство -webkit-app-region: drag;, и оно работает! Проблема в том ... Я не могу нажать ни одну из кнопок в строке заголовка сейчас! Есть ли способ исправить это?

HTML:

<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
    <h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
    <button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">x</button>
    <button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">-</button>
</div>

JavaScript:

        ...
        const remote = require('electron').remote;
        document.getElementById("minApp").addEventListener("click", function (e) {
            document.getElementById('minApp').style.opacity = '0.55';
            var window = remote.getCurrentWindow();
            window.minimize(); 
        });
        document.getElementById("closeApp").addEventListener("click", function (e) {
            document.getElementById('closeApp').style.opacity = '0.55';
            var window = remote.getCurrentWindow();
            window.close();
        });
        document.getElementById('minApp').onmouseover = function() {
            document.getElementById('minApp').style.opacity = '1';
        }
        document.getElementById('minApp').onmouseout = function() {
            document.getElementById('minApp').style.opacity = '0.55';
        }
        document.getElementById('closeApp').onmouseover = function() {
            document.getElementById('closeApp').style.opacity = '1';
        }
        document.getElementById('closeApp').onmouseout = function() {
            document.getElementById('closeApp').style.opacity = '0.55';
        }
        ...

Любые советы очень ценятся! Хорошего дня!

Answer 1

Это снова я! Мне удалось решить проблему, изменив HTML следующим образом:

<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
    <div class="dragzone" style="-webkit-app-region: drag; overflow: hidden; position: absolute; left: 0; width: 990px; height: 29px;"></div>
    <h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
    <button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">x</button>
    <button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">-</button>
</div>

Теперь появился новый элемент, который покрывает часть всей строки заголовка, кроме кнопок, и устанавливается со свойством -webkit-app-region: drag; это позволяет перетаскивать окно.

Хорошего дня!