Neutralinojs：如何在将 Neutralino 窗口拖离最大化状态时最大化它答案

【问题标题】：Neutralinojs : How to Maximize Neutralino Window when it is dragged off of a Maximized StateNeutralinojs：如何在将 Neutralino 窗口拖离最大化状态时最大化它
【发布时间】：2021-10-20 13:03:34
【问题描述】：

我已经为 Neutralino 窗口制作了一个自定义标题栏。
它有 3 个简单的按钮，分别是关闭、最大化、最小化。
我还做了它，以便在拖动标题栏时，它会拖动整个使用Neutralino.window.setDraggableRegion的窗口。但现在的问题是，当我在窗口最大化后拖动标题栏
时，它应该像其他Win32应用程序一样取消最大化。
但它没有，它只是移动窗口。
我确实尝试通过标题栏中的 ondrag="dragMinimize()" draggable="true" 修复此问题 div 并在 js 中运行：

async function dragMinimize() {
  let isMaximized = await Neutralino.window.isMaximized();
  if(isMaximized) {
    Neutralino.window.unmaximize();
  }
}

This introduces this problem where the title bar detaches 同时拖动未最大化和最大化的窗口
我该如何解决这个问题

【问题讨论】：

标签： javascript node.js user-interface titlebar neutralinojs

【解决方案1】：

简单来说，当鼠标移过标题栏时，您需要运行一个函数并检查是否按下了鼠标左键，然后您可以使用Neutralino.window.unmaximize()

查看此代码：

async function initCustomWindowBar() {
    const closeBtn = document.getElementById("close");
    const minimizeBtn = document.getElementById("minimize");
    const maximizeBtn = document.getElementById("maximize");
    const draggableRegion = document.getElementById("draggableRegion");

    closeBtn.addEventListener("click", async () => {
        await Neutralino.app.exit(0);
    })

    minimizeBtn.addEventListener("click", async () => {
        await Neutralino.window.minimize();
    })

    maximizeBtn.addEventListener("click", async () => {
        await Neutralino.window.maximize();
    })

    draggableRegion.addEventListener("mousemove", async (event) => {
        if (event.buttons == 1 && await Neutralino.window.isMaximized()) {
            await Neutralino.window.unmaximize();
        }
    })

    await Neutralino.window.setDraggableRegion('draggableRegion');
}

Neutralino.init();
Neutralino.events.on("ready", initCustomWindowBar);

所以这里我们在一切准备就绪后调用initCustomWindowBar 函数。

在 initCustomWindowBar 函数中，我们首先收集所有用于最小化、最大化、关闭和窗口可拖动区域的 HTML 元素。

然后我们将事件侦听器添加到我们的 3 个按钮，这些按钮将运行相应的函数来最小化、最大化和关闭我们的窗口。

最后我们在我们的可拖动区域添加一个事件监听器，事件监听器是mousemove这个事件监听器每次只有当鼠标移动到我们的可拖动区域时才会运行我们的函数。

这个事件监听器也会给我们event对象作为一个参数，我们可以用它来检查函数被调用时鼠标左键是否被按下。

现在，当用户将鼠标移到窗口的可拖动区域上时，将运行一个函数，该函数将检查是否按下了鼠标左键以及窗口是否最大化，如果这两个条件都为真，那么我们将运行await Neutralino.window.unmaximize();，这将导致我们的窗口未最大化。

这里是完整的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NeutralinoJs sample app</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="draggableRegion">
        <span class="title">My Window</span>
        <span class="windowButtons">
            <span id="minimize"></span>
            <span id="maximize"></span>
            <span id="close"></span>
        </span>
    </div>
    <div id="neutralinoapp">
        <h1>NeutralinoJs</h1>
        <div id="info"></div>
    </div>
    <script src="js/neutralino.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

#draggableRegion {
    display: block;
    text-align: center;
    user-select: none;
    background-color: #333;
    color: #fff;
    margin-bottom: 10px;
    padding: 20px;
    cursor: default;
}

#draggableRegion .windowButtons {
    user-select: none;
    float: right;
}

#draggableRegion .title {
    user-select: none;
}

.windowButtons span {
    display: inline-block;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    background-color: #E8E8E8;
    border-radius: 100%;
}

.windowButtons span#minimize {
    background-color: #eebc3c;
}

.windowButtons span#maximize {
    background-color: #7aca4f;
}

.windowButtons span#close {
    background-color: #df6158;
}

JavaScript

function onWindowClose() {
    Neutralino.app.exit();
}

async function initCustomWindowBar() {
    const closeBtn = document.getElementById("close");
    const minimizeBtn = document.getElementById("minimize");
    const maximizeBtn = document.getElementById("maximize");
    const draggableRegion = document.getElementById("draggableRegion");

    draggableRegion.addEventListener("mousemove", async (e) => {
        if (e.buttons == 1 && await Neutralino.window.isMaximized()) {
            await Neutralino.window.unmaximize();
        }
    })

    closeBtn.addEventListener("click", async () => {
        await Neutralino.app.exit(0);
    })

    minimizeBtn.addEventListener("click", async () => {
        await Neutralino.window.minimize();
    })

    maximizeBtn.addEventListener("click", async () => {
        await Neutralino.window.maximize();
    })

    await Neutralino.window.setDraggableRegion('draggableRegion');
}

Neutralino.init();
Neutralino.events.on("windowClose", onWindowClose);
Neutralino.events.on("ready", initCustomWindowBar);

结果：

抱歉，GIF 画质不好。

【讨论】：