Yes, it’s that time of year again – the time for backporting layouts from Lancelot to Plasma.

NodeLayout is one of the most powerful layouts in general, in a sense of that it’s expressiveness for positioning static content is greater than any current layout in Plasma.

The idea behind it is to help developers avoid creating multiple different layout objects mixed and nested in each other when creating complex UIs. It’s a bit trickier to get the hang of it – the nodes definition, but once you get to know it, it will become your natural way of thinking. (yes, I know I’m sounding like a shampoo commercial)

Every item’s geometry is defined by two nodes – one for the top-left corner, and the other one for the bottom-right corner.

Each node is defined by a pair of relative (xr, yr) and a pair of absolute (xa, ya) coordinates. The calculated node coordinates depend
on the size and position of the NodeLayout object in the following manner (layout is the geometry of the NodeLayout):

• x = layout.left() + (xr * layout.width()) + xa
• y = layout.top() + (yr * layout.height()) + ya

Alternatively, the item’s position can be defined by using one node and one pair of relative coordinates (xr, yr). In that case, the item is sized following the sizeHint(). The relative coordinates (this time they are relative to the item’s geometry, not the layout’s) specify what point of the item will be bound to the defined node.

Note: The horizontal and vertical values are completely independent so you can, for example, have automatic (sizeHint defined) sizing for width, and fixed sizing for height.