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

Question

I have made a custom title bar for a Neutralino Window.我为 Neutralino 窗口制作了一个自定义标题栏。
It has 3 simple buttons for Close, Maximize, Minimize.它有 3 个简单的按钮，分别是关闭、最大化、最小化。
I Also made it so that when the title bar is dragged, it drags the whole window using Neutralino.window.setDraggableRegion<\/code> .But now the problem is that when I drag the title bar我还这样做了，当拖动标题栏时，它使用Neutralino.window.setDraggableRegion<\/code>拖动整个窗口。但现在的问题是，当我拖动标题栏时 after the window has been maximized, it should be unmaximizing just like other Win32 Apps.窗口最大化后，它应该像其他 Win32 应用程序一样取消最大化。 But It doesn't ,it just moves the window.但它没有，它只是移动窗口。 I did try to fix this by ondrag="dragMinimize()" draggable="true"<\/code> in the titlbar div<\/code> and function in js:我确实尝试通过ondrag="dragMinimize()" draggable="true"<\/code>栏div<\/code>中的 ondrag ondrag="dragMinimize()" draggable="true"<\/code>和 js 中的函数来解决这个问题：

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

Answer 1

In Simple words you'll need to run a function when mouse goes over the title bar and check if left mouse button was pressed or not and then you can use Neutralino.window.unmaximize()简单来说，当鼠标移到标题栏上时，您需要运行一个函数并检查是否按下了鼠标左键，然后您可以使用Neutralino.window.unmaximize()

Checkout this code:签出此代码：

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);

So here we are calling initCustomWindowBar function when everything is ready.所以在这里我们在一切准备就绪后调用initCustomWindowBar函数。

Inside our initCustomWindowBar function first we gather all the HTML Elements for minimizing, maximizing, closing and the window's draggable region.在我们的initCustomWindowBar函数中，我们首先收集所有用于最小化、最大化、关闭和窗口可拖动区域的 HTML 元素。

Then we add event listeners to our 3 buttons which will run the respective function to minimize, maximize and close our window.然后我们将事件侦听器添加到我们的 3 个按钮，这些按钮将运行相应的函数来最小化、最大化和关闭我们的窗口。

And finally we add a event listener on our draggable area, the event listener is mousemove this event listener will run our function everytime only if the mouse moved on our draggable area.最后我们在我们的可拖动区域添加一个事件监听器，事件监听器是mousemove ，只有当鼠标在我们的可拖动区域移动时，这个事件监听器才会每次运行我们的函数。

This event listener will also give us event object as a parameter which we can use to check if the left mouse button was pressed when the function was called.这个事件监听器还将给我们event对象作为参数，我们可以用它来检查函数被调用时是否按下了鼠标左键。

Now When user moves his mouse over our window's draggable region a function will run, and this function will check if the left mouse button was pressed or not and if the window is maximized or not, if both of these conditions are true then we will run await Neutralino.window.unmaximize();现在，当用户将鼠标移到我们窗口的可拖动区域上时，将运行一个函数，该函数将检查鼠标左键是否被按下以及窗口是否最大化，如果这两个条件都为真，那么我们将运行await Neutralino.window.unmaximize(); which will cause our window to unmaximize.这将导致我们的窗口未最大化。

Here is the full code:这是完整的代码：

HTML 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>

CSS CSS

#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 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);

Result:结果：

Sorry for the bad quality, GIF doesn't do a good job.很抱歉质量不好，GIF 做得不好。

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

问题描述

1 个解决方案

解决方案1
0 2022-01-23 22:13:07

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

问题描述

1 个解决方案

解决方案1 0 2022-01-23 22:13:07

解决方案1
0 2022-01-23 22:13:07