PackedLayout

Overview

The PackedLayout class lays out elements in a packed pattern by minimizing visual element overlap.

Layout Modes

There are 3 layout modes: random, radial, and weighted.

The default value of "random" will randomly place elements anywhere within the component's bounds. A value of "radial" will position the elements radially around the center with some weighting for element size but primarily designed to have the best appearance. All other modes involve a distribution function for layout.

All of the modes have overlap minimized.

How it Works

Elements are positioned according to a Rectangle that stores the x/y position as a percentage of the total width and height. This way, the relative position of the elements will hold as the component's size changes.

If the layout mode is weighted, each element's weight on the distribution function is determined from the dimensions of the visual element.

To edit an element's layout without refreshing all layout, retrieve its layout Rectangle via the "layoutRects" property. The index of the Rectangle in the "layoutRects" vector for a particular element is the same as the element's index in the display list.

Since layout is controlled by the "layoutRects" vector, elements should not be positioned or sized directly. Instead, refreshPositions() and then change individual layout by retrieving the respective Rectangle in the "layoutRect" property, edit the Rectangle, and then update the display list.

Relevant Properties

Minimization of overlap is accomplished by passes, the number of which is set via the "resolution" property. Increase the number of passes to reduce overlapping at the cost of performance. However, passes are extremely fast so performance is not highly impacted by a large resolution.

For weighted layout modes, the distribution function can be adjusted by the "peak" and "noiseFactor" properties. See the demo for an illustration of the effect these properties have on the distribution function.

To completely refresh layout and give all of the elements new layout positions, call "refreshPositions()".

Virtualization

Not supported.

Accessibility and Keyboard Support

Methods used to interact with lists are implemented and selection via the arrow keys is supported.

Example

See the PackedLayout demo application for example code.

Back To Top