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


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());

// 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.


  • LUIManager



_activeElement: LUIElement = null
_dirty: number = 0
_downElement: LUIElement = null
_layer: LUILayer[] = []
_listener: any = {}
_messageTemplate: {
    eventData: any;
    message: string;
    source: LUIElement;
} = ...

Type declaration

  • eventData: any
  • message: string
  • source: LUIElement
_pixelSize: number = 1
_rootSpace: LUIRect = ...
_time: number = 0
lastElapsed: number = 0


Generated using TypeDoc