Positioning and moving windows around

[arzcbnh]

I had an idea for a widget that opens at the tip of my cursor, so I was looking for ways to implement it. Right now, I only know how to position windows with the anchor property.

Looking at the GJS docs, there's a method Gtk.Window.move that apparently places the window in the respective x and y coordinates of the screen. It doesn't work, though, and the docs say "window managers are free to ignore this". There's also a method called Gtk.Window.get_position that always returns (0, 0) on Wayland, because it "does not
support a global coordinate system".

In light of that, I've thought of a couple possibilities why it doesn't work. First of all, I might be doing something wrong, of course. From my understanding, windows on Wayland have to be positioned through the compositor, but at least on Hyprland I'm unable to grab the window and move it around. Or resize it, even though Gtk.Window.get_resizable returns true. I'm almost sure that has to do with the distinction between clients and layers in Wayland. All these concepts are very confusing to me. Hyprland doesn't expose any way to move or resize layers, and I'm not sure if Wayland even supports that. Regardless of the cause, at this moment I don't have enough experience with JavaScript, GTK, and Wayland to find the way around by myself, or to contribute to the project.

const win = Widget.Window({
	name: "win",
	child: Widget.Label("hi"),
});

setTimeout(() => {
	win.move(0, 400);
	console.log(win.get_resizable()); // Logs "true"
}, 3000);

export default {
	windows: [ win ],
};

[arzcbnh]

I've been doing some reading and decided to give an update in case someone with the same question comes across this post. I may have got a bunch of information wrong here, but this is what I understand as of now.

While Wayland has stable interfaces for rendering windows with a desktop-like UI, wl_shell_surface and xdg-shell, they're not enough to provide a rich desktop experience. In light of that, wlroots pushed for their own protocol extension, wlr_layer_shell. Since Hyprland uses wlroots, it implements this interface, which is used by ags and other widget systems such as eww. That is evidenced in that gtk-layer-shell is a dependency of them. However, the wlroots protocol extension does not implement moving and resizing window requests, unlike the Wayland shell interfaces do. I don't know if they plan to support that in the future.

I didn't give up, so I came up with a spaghetti monstrosity to prove my point. It's a work in progress and I'm sure there's better ways to do it, but it's a beginning nonetheless. I'll include the code and a gif demonstrating the behavior below.

const Hyprland = await Service.import("hyprland");

const container = Widget.Overlay({
    sensitive: false,
    child: Widget.Box({
        css: "background: transparent;",
        hexpand: true,
        vexpand: true,
    }),
    overlays: [],
});

const event = Widget.EventBox({
    on_primary_click: () => {
        const ret = Hyprland.sendMessage("cursorpos");
        ret.then(str => {
            const [ x, y ] = str.split(", ").map(n => parseInt(n));
            console.log(x, y);
            const box = Widget.Box({
                css: `margin: ${y}px ${1266 - x}px ${668 - y}px ${x}px; background: red;`,
            });
            container.add_overlay(box);
            container.show_all();
        });
    },
    child: container,
});

const win = Widget.Window({
    name: "win",
    css: "background: transparent;",
    anchor: ["top", "right", "bottom", "left"],
    child: event,
});

export default {
    windows: [ win ],
};

[Aylur]

yeah your only option here, is to make a fullscreen eventbox to catch click events.
I can recommend using a Gtk.Fixed instead of an Overlay, its available as Widget.Fixed, but it doesn't have any extra functionality on top of the base Gtk.FIxed class. It lets you put widgets at x,y and move them to x,y

const container = Widget.Fixed({ expand: true })

const event = Widget.EventBox({
    child: container,
    on_primary_click: async () => {
        const pos = await Hyprland.messageAsync("j/cursorpos");
        const { x, y } = JSON.parse(pos);
        const widget = Widget.Box();
        container.put(box, x, y);
        container.show_all();
    },
});