GUI and Yoga-Layout for Flexbox layout example in playground

Questions
1

Hi, I wanted a better way to layout my screens so I started looking into using Yoga for layout and made a very me implementation. What I mean is it works for me, and composes together Yoga-Nodes and GUI-Containers instead of subclassing or extending the GUI module, but it gives me flexbox layout for GUI controls.

I wanted to share it to see if anyone wanted to take it further but I’m having a hard time getting a playground to import the yoga module. I think it would be easier in pure JS but I built these helper components in Typescript.

You need to handle measurements on the leaf nodes, there is an example of that in the playground with the textblocks. I haven’t built anything very large with it but wanted to try and work on it in a playground to be able to share it.

Here’s the playground with the example, its the example layout thats on the main landing page of www.yogalayout.dev

Thanks!

2

cc @RaananW our Gui expert

3

The playground is using mainly UMD, so ESM doesn’t quite work there. However, the way you are doing it might actually work!

There are many typescript issues you have (especially missing types), and the way you are using createscene seems to be a bit off. I would recommend you to try in js instead of typescript because you will skip the compilation issues and will be able to use global namespaces without tyepscritp complaining