[Ags v1] Reactivity problems

[Aworldc]

Hi, I've been working on "refactoring" (i.e. completely rewriting) my bar built on ags v1. I have run into reactivity problems. I have some variables. I have a button updating those variables. Then i have css classes on the window depending on them:

config.js:

import { bar } from './bar.js'

let launcher_open = Variable(false)
let systray_open = Variable(false)

Utils.monitorFile(App.configDir, () => {
    App.resetCss()
    App.applyCss(`${App.configDir}/main.css`)
})

App.config({
    style: './main.css',
    windows: [bar(launcher_open, systray_open)]
})

bar.js

import { array_to_column, toggle_launcher } from './utils.js'

let hyprland = await Service.import('hyprland')
let audio = await Service.import('audio')
let network = await Service.import('network')

export function start_button(launcher_open, systray_open) {
    return Widget.Button({
        child: Widget.Icon('/home/allan/.config/ags/start.svg'),
        on_clicked: () => {
            toggle_launcher(launcher_open, systray_open)
        }
    })
}

export function workspace_buttons() {
    return array_to_column(
        [1, 2, 3, 4, 5].map(num => {
            return Widget.Button({
                child: Widget.Label(`${num}`),
                className: hyprland
                    .bind('active')
                    .as(act => (act.workspace.id == num ? 'active' : '')),
                onClicked: () => {
                    hyprland.messageAsync(`dispatch workspace ${num}`)
                }
            })
        }),
        0,
        true
    )
}

export function systray_button(launcher_open, systray_open) {
    return Widget.Button({
        child: array_to_column([
            Widget.Label({
                className: 'clock',
                justification: 'center'
            }).poll(
                2000,
                label => (label.label = Utils.exec('date +"%I%n%M"'))
            ),
            Widget.Icon({
                icon: network.wifi.bind('icon_name')
            }),
            Widget.Icon().hook(audio.speaker, self => {
                const vol = audio.speaker.volume * 100
                const icon = [
                    [101, 'overamplified'],
                    [67, 'high'],
                    [34, 'medium'],
                    [1, 'low'],
                    [0, 'muted']
                ].find(([threshold]) => threshold <= vol)?.[1]

                self.icon = `audio-volume-${icon}-symbolic`
                self.tooltip_text = `Volume ${Math.floor(vol)}%`
            }),
            Widget.Icon('system-shutdown')
        ])
    })
}

export function bar(launcher_open, systray_open) {
    return Widget.Window({
        name: 'bar',
        anchor: ['top', 'left', 'bottom'],
        margins: [5, 0, 5, 5],
        exclusivity: 'exclusive',
        class_names: Utils.merge(
            [launcher_open.bind(), systray_open.bind()],
            (launcher_open, systray_open) => {
                return [
                    'bar',
                    launcher_open || systray_open
                        ? 'panel-open'
                        : 'panel-closed'
                ]
            }
        ),
        child: Widget.CenterBox({
            class_name: 'bar-centerbox',
            spacing: 0,
            vertical: true,
            start_widget: array_to_column([
                start_button(launcher_open, systray_open),
                workspace_buttons()
            ]),
            center_widget: array_to_column([]),
            end_widget: array_to_column(
                [systray_button(launcher_open, systray_open)],
                10,
                true,
                'end'
            )
        })
    })
}

utils.js

export function array_to_column(
    array,
    spacing = 10,
    opaque = false,
    align = 'start'
) {
    return Widget.Box({
        spacing: spacing,
        vertical: true,
        children: array,
        className: opaque ? 'opaque' : '',
        vpack: align
    })
}

export function toggle_launcher(launcher_open, systray_open) {
    console.log('Got here')

    if (launcher_open.value == true) {
        launcher_open.value = false
    } else {
        if (systray_open.value == true) {
            systray_open.value = false
            launcher_open.value = true
        }
    }
}

export function toggle_systray(launcher_open, systray_open) {
    console.log('Got here')

    if (systray_open.value == true) {
        systray_open.value = false
    } else {
        if (launcher_open.value == true) {
            launcher_open.value = false
            systray_open.value = true
        }
    }
}

main.css

button,
.opaque {
    border-radius: 12px;
}

window {
    border-radius: 15px;
    background-color: #24273a;
    border: 1px solid #494d64;
}

window.panel-open {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.opaque {
    background-color: #34384c;
}

.bar-centerbox {
    padding: 6px;
}

button.active {
    background-color: #494d64;
}

Sorry for the big code dump, but when I click the start_button that calls toggle_laucher, the css class on the window should change from .panel-closed to .panel-open, but it isn't. I probably missed something obvious as it's 11pm at night but it would be great if someone could work out some way to make this work.

[Aiz0]

since both launcher_open and systray_open start as false there is no way to toggle the values
since they both require the other one to be true to be set to true.

heres a fixed version of the functions

export function toggle_launcher(launcher_open, systray_open) {
  launcher_open.value = !launcher_open.value; // toggle value
  systray_open.value = false;
}

export function toggle_systray(launcher_open, systray_open) {
  systray_open.value = !systray_open.value;
  launcher_open.value = false;
}

unless you need to do something more in these functions you could remove one of them and instead switch up the order you pass the variables

[Aworldc]

Oh I'm so silly

thank you.