From 41cb376a02d12f85eb1e4893425af15614c2e187 Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Sun, 9 Jun 2024 22:25:40 +0200
Subject: support deeply nested layout structures

js, jsx, lua now allows deeply nested layouts that contains Bindings
Variable.derive will be automatically constructed where needed
and Bindings in layouts will be bound automatically
it breaks compatibility with ags even more, but jsx should be preferred
imo anyway
---
 gjs/src/astalify.ts | 100 +++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 32 deletions(-)

(limited to 'gjs/src/astalify.ts')

diff --git a/gjs/src/astalify.ts b/gjs/src/astalify.ts
index f986716..ecd52d4 100644
--- a/gjs/src/astalify.ts
+++ b/gjs/src/astalify.ts
@@ -1,12 +1,61 @@
 import Binding, { kebabify, snakeify, type Connectable, type Subscribable } from "./binding.js"
 import { Astal, Gtk } from "./imports.js"
 import { execAsync } from "./process.js"
+import Variable from "./variable.js"
 
 Object.defineProperty(Astal.Box.prototype, "children", {
     get() { return this.get_children() },
     set(v) { this.set_children(v) },
 })
 
+function setChildren(parent: Gtk.Widget, children: Gtk.Widget[]) {
+    children = children.flat(Infinity).map(ch => ch instanceof Gtk.Widget
+        ? ch
+        : new Gtk.Label({ visible: true, label: String(ch) }))
+
+    // remove
+    if (parent instanceof Gtk.Bin) {
+        const ch = parent.get_child()
+        if (ch)
+            parent.remove(ch)
+    }
+
+    // FIXME: add rest of the edge cases like Stack
+    if (parent instanceof Astal.Box) {
+        parent.set_children(children)
+    }
+
+    else if (parent instanceof Astal.CenterBox) {
+        parent.startWidget = children[0]
+        parent.centerWidget = children[1]
+        parent.endWidget = children[2]
+    }
+
+    else if (parent instanceof Astal.Overlay) {
+        const [child, ...overlays] = children
+        parent.set_child(child)
+        parent.set_overlays(overlays)
+    }
+
+    else if (parent instanceof Gtk.Container) {
+        for (const ch of children)
+            parent.add(ch)
+    }
+}
+
+function mergeBindings(array: any[]) {
+    const getValues = () => array.map(i => i instanceof Binding ? i.get() : i)
+    const bindings = array.filter(i => i instanceof Binding)
+
+    if (bindings.length === 0)
+        return array
+
+    if (bindings.length === 1)
+        return bindings[0].as(getValues)
+
+    return Variable.derive(bindings, getValues)()
+}
+
 export type Widget<C extends { new(...args: any): Gtk.Widget }> = InstanceType<C> & {
     className: string
     css: string
@@ -47,7 +96,7 @@ function hook(
     return self
 }
 
-function ctor(self: any, config: any = {}, ...children: Gtk.Widget[]) {
+function ctor(self: any, config: any = {}, children: any[] = []) {
     const { setup, ...props } = config
     props.visible ??= true
 
@@ -71,9 +120,6 @@ function ctor(self: any, config: any = {}, ...children: Gtk.Widget[]) {
         return acc
     }, [])
 
-    const pchildren = props.children
-    delete props.children
-
     Object.assign(self, props)
     Object.assign(self, {
         hook(obj: any, sig: any, callback: any) {
@@ -91,23 +137,28 @@ function ctor(self: any, config: any = {}, ...children: Gtk.Widget[]) {
         }
     }
 
-    if (self instanceof Gtk.Container) {
-        if (children) {
-            for (const child of children)
-                self.add(child)
-        }
-        if (pchildren && Array.isArray(pchildren)) {
-            for (const child of pchildren)
-                self.add(child)
-        }
-    }
-
     for (const [prop, bind] of bindings) {
+        if (prop === "child" || prop === "children") {
+            self.connect("destroy", bind.subscribe((v: any) => {
+                setChildren(self, v)
+            }))
+        }
         self.connect("destroy", bind.subscribe((v: any) => {
             self[`set_${snakeify(prop)}`](v)
         }))
     }
 
+    children = mergeBindings(children.flat(Infinity))
+    if (children instanceof Binding) {
+        setChildren(self, children.get())
+        self.connect("destroy", children.subscribe(v => {
+            setChildren(self, v)
+        }))
+    }
+    else {
+        setChildren(self, children)
+    }
+
     setup?.(self)
     return self
 }
@@ -130,29 +181,14 @@ function proxify<
         set(v) { Astal.widget_set_cursor(this, v) },
     })
 
-    klass.prototype.set_child = function(widget: Gtk.Widget) {
-        if (this instanceof Gtk.Bin) {
-            const rm = this.get_child()
-            if (rm)
-                this.remove(rm)
-        }
-        if (this instanceof Gtk.Container)
-            this.add(widget)
-    }
-
-    Object.defineProperty(klass.prototype, "child", {
-        get() { return this.get_child?.() },
-        set(v) { this.set_child(v) },
-    })
-
     const proxy = new Proxy(klass, {
         construct(_, [conf, ...children]) {
             const self = new klass
-            return ctor(self, conf, ...children)
+            return ctor(self, conf, children)
         },
         apply(_t, _a, [conf, ...children]) {
             const self = new klass
-            return ctor(self, conf, ...children)
+            return ctor(self, conf, children)
         },
     })
 
-- 
cgit v1.2.3