kivy + colosseum demo of a flexbox layout

flexbox-demo.py

"""DON't forget to pip install colosseum"""
from kivy.app import App
from kivy.uix.button import Button

from colosseum import CSSNode
from colosseum import COLUMN
from colosseum import ROW


from kivy.uix.layout import Layout


class FlexBox(Layout):

    def __init__(self, **kwargs):
        super(FlexBox, self).__init__(**kwargs)
        self.flexbox = CSSNode()
        self.bind(
            children=self._trigger_layout,
            parent=self._trigger_layout,
            size=self._trigger_layout,
            pos=self._trigger_layout
        )

    def do_layout(self, *args):
        # update flexbox bounding box
        self.flexbox.width = self.width
        self.flexbox.height = self.height
        self.flexbox.layout.reset()
        print('flexbox', dict(map(
            lambda x: (x, getattr(self, x)),
            ('height', 'width', 'x', 'y')
        )))

        for child in self.children:
            child.height = child.flexbox.layout.height
            child.width = child.flexbox.layout.width
            child.x = child.flexbox.layout.left
            child.top = self.height - child.flexbox.layout.top
            print(child.text, dict(map(
                lambda x: (x, getattr(child, x)),
                ('height', 'width', 'x', 'y')
            )))

    def add_widget(self, widget):
        super(FlexBox, self).add_widget(widget)
        self.flexbox.children.append(widget.flexbox)

    def remove_widget(self, widget):
        super(FlexBox, self).remove_widget(widget)
        self.flexbox.children.remove(widget.flexbox)


class FlexButton(Button):

    def __init__(self, **kwargs):
        super(FlexButton, self).__init__(**kwargs)
        self.flexbox = CSSNode()


class FlexBoxApp(App):

    def build(self):
        layout = FlexBox()
        # initial value
        # FIXME: maybe it's better to fetch size from config.
        # If delay do *not* set width & height. Since it's set
        # later and triggers a Flexbox.do_layout
        layout.flexbox.width = 800
        layout.flexbox.height = 600
        layout.flexbox.flex_wrap = 'wrap'
        layout.flexbox.flex_direction = 'row'
        layout.flexbox.padding = 10
        # layout = BoxLayout(orientation='horizontal')
        one = FlexButton(text='one')
        one.flexbox.height = 100
        one.flexbox.width = 300
        one.flexbox.margin = 10
        layout.add_widget(one)
        two = FlexButton(text='two')
        two.flexbox.height = 100
        two.flexbox.width = 100
        two.flexbox.margin = 10
        layout.add_widget(two)
        notice = FlexButton(text='resize the window')
        notice.flexbox.height = 300
        notice.flexbox.width = 300
        notice.flexbox.margin = 10
        layout.add_widget(notice)
        three = FlexButton(text='three')
        three.flexbox.height = 50
        three.flexbox.width = 150
        three.flexbox.margin = 10
        layout.add_widget(three)
        return layout

    def on_size(self, *args, **kwargs):
        print(args, kwargs)


FlexBoxApp().run()  # xor the thing below

# python main.py

# i = InteractiveLauncher(Blueprint())

# start with ipython -i main.py
# then type i.run() in ipython to display the window
# then start kiving