Class LUIManager

 .____     ____ ___.___
 |    |   |    |   \   |
 |    |   |    |   /   |
 |    |___|    |  /|   |
 |_______ \______/ |___|
         /
 Layout User Interface

LUIManager

The core object for the entire LUI.

It's a tree structure but on the root element you can only create "named" layers. Those layers always consume the entire root space and appear in the order of creation.

** Example part 1: manager

const lui = new LUIManager();
lui.setRootSize(800, 600);
const l1 = lui.createLayer("l1");
const l2 = lui.createLayer("l2");

// Here l1 and l2 both consume the entire space of 800x600. // l1 is behind l2 and therefore l2 get events first (as one would expect).

** Example part 2: container layout

const child1 = new LUIElement();
const child2 = new LUIElement();
l1.setContainerLayout(new LUISpaceLayout());
l1.addChild(child1);
l1.addChild(child2);

// Here we add a child and define a layout for l1.
// l1 itself will consume the entire root-space. However, it's
// children won't. The parent layer (l1) need to set a container-layout
// so it can tell the children how to layout them self into the parent.

child1.setLayoutProperty("dir", "top");
child1.setLayoutProperty("size", 20);
LUISpaceLayout.setLayoutTop(child2, 40); // helper method

// Depending on the parents container-layout-object-type
// we can define properties to adjust the layout. For each container layouter
// there are different properties for the children available.

// NOTE: Setting the child's layout parameter only effects how the
// child is placed. If we put a child into child1 we have to set everything
// again but this time for child1 as the parent (as one would expect in a tree).

** Example part 3: rendering

// LUIElements won't render anything unless a LUIStyle object is attached.
// A LUIStyle is a group of render instructions that are processed in the
// order of attachment. Multiple LUIElement can share the same instance of
// LUIStyle so they can be reused. But that is not enforced and depends
// on real-world-needs.

// A LUIStyle is composed of LUIStyleElements. They do the actual drawing
// work and can more or less do what they want. Layout is already performed
// and a rendering object is provided to draw stuff to the screen.