Positioning

Published: September 03, 2019
Edited: September 03, 2019

The following properties affect the position of an element.

NameTypeDefaultDescription
xFloat0x-position
yFloat0y-position
wFloat0Width
hFloat0Height
mountFloat0Texture mountpoint: 0 = top-left, 0.5 = center, 1 = bottom-right
mountXFloat0Texture mountpoint (horizontal axis)
mountYFloat0Texture mountpoint (vertical axis)

Coordinates

The position of an element can be defined by using the x and y properties. Elements are positioned relative to their parent (like position: absolute in CSS). Lightning also allows more advanced forms of layouting using Flexbox.

Dimensions

By using the w and h properties one can define the dimensions of an element. When a texture is attached to an element, and no w or h has been set, the element will inherit the dimensions from the active texture.

Mount

The mountX and mountY property can be used to specify the alignment of the element relative to the x and y properties. By default they are 0, which means that the top-left corner of the element is positioned at the xy coordinates. When set to 0.5, the xy coordinates will define the positioning of the center of the element. When they are set to 1, the bottom-right corner of the element will be placed on xy.

Dynamic calculations

You can use a numeric value (in pixels), but it is also possible to specify a function that returns the value based on the parent's width (x, w) or height (y, w). These functions will only be called again if the parent's dimensions (might) change.

class LiveDemo extends lng.Application {
    static _template() {
        return {
            Header: {
                rect: true, w: window.innerWidth, h: 50, color: 0xff005500,
                Title: {
                    x: (w => w - 50), mountX: 1, mountY: 0.5, y: 30,
                    text: { text: 'Header' },
                    OverlayGradient: {
                        w: (w => 0.25 * w),
                        rect: true,
                        colorLeft: 0xFF000000,
                        colorRight: 0x00000000
                    }
                }
            }
        }
    };
}

const app = new LiveDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());