Positioning the borderless window in neutralino.js

Question

Is there any way we can position the borderless window in the file neutralino.config.json?

like : "borderless": { ...args }

or any other ways? Now it just starts at somewhere random and cannot be moved

Answer 1

I am having the same problem. My naive instinct is telling me that probably could be a way to create a custom element bar and use a function upon click& drag to move the window around.

Answer 2

You can call Neutralino.window.move(x,y) in your javascript. (0,0) is the (leftmost,top) of the screen. You can find other window functions at https://neutralino.js.org/docs/api/window.

As an extension of your question, and like Klauss A's instinct suggests, you can call Neutralino.window.setDraggableRegion('id-of-element') where id-of-element is, as the name suggests, an id of an element in your html. Then, when you click and drag that element, Neutralino will automatically call Neutralino.window.move(x,y). setDraggableRegion() is not in the docs, but you can see it in the tutorial they made on YouTube, and it is still in the code.

The thing is, how Neutralino does this is by posting a message to the server, which adds quite a bit of delay, causing the drag to stutter. Here is the relevant code snippet in a prettified version of the neutralino.js file:

...
t.move = function(e, t) {
    return r.request({
        url: "window.move",
        type: r.RequestType.POST,
        isNativeMethod: !0,
        data: {
            x: e,
            y: t
        }
    })
}, t.setDraggableRegion = function(e) {
    return new Promise(((t, i) => {
        let r = document.getElementById(e),
            o = 0,
            u = 0;

        function s(e) {
            return n(this, void 0, void 0, (function*() {
                yield Neutralino.window.move(e.screenX - o, e.screenY - u)
            }))
        }
        r || i(`Unable to find dom element: #${e}`), r.addEventListener("mousedown", (e => {
            o = e.clientX, u = e.clientY, r.addEventListener("mousemove", s)
        })), r.addEventListener("mouseup", (() => {
            r.removeEventListener("mousemove", s)
        })), t()
    }))
}
...

I suspected this formulation of adding to the lag, since function* is a generator, and thus is inherently untrustworthy (citation needed). I re-wrote it in plain javascript, and reduced some of the lag. It still stutters, just not as much.

var dragging = false, posX, posY;
var draggableElement = document.getElementById('id-of-element');

draggableElement.onmousedown = function (e) {
    posX = e.pageX, posY = e.pageY;
    dragging = true;
}

draggableElement.onmouseup = function (e) {
    dragging = false;
}

document.onmousemove = function (e) {
    if (dragging) Neutralino.window.move(e.screenX - posX, e.screenY - posY);
}

I hope this helps. I was digging around in all this because the caption bar (aka, title bar) of the window is different from my system's color theme. I thought, "maybe I'll create my own title bar in HTML, with CSS styling to match my app." But due to the stuttering issues, I find it is better to have a natively-draggable title bar that doesn't match anything. I'm still digging around in the Neutralino C++ code to see if I could modify it and add a non-client rendering message handler (on Windows), to color the title bar the same as my app and still have nice smooth dragging. That way it would look "borderless" but still be movable.

Answer 3

Moving Windows in Neutralino is Quite Simple.

You can use the Neutralino.window API to move the windows.

Example:

Neutralino.window.move(x, y);

here x and y are the Coordinates on which our window will move to.

Note the this moves the window from the Top Left Corner of the window.

I have made this Neutralino Template - NeutralinoJS App With Custom Titlebar which might be useful if you are making a custom titlebar for your application.