What is BoundsPadding

Note: By default, VRender does not have a layout similar to the DOM. For example, in the DOM, you can have two div elements, and the second div will be placed below the first div. However, in VRender, if you have two rectangles, the second rectangle will overlay the first one. This is because all positioning in VRender is relative positioning, it relies on the x, y parameters you configure for positioning, with the coordinate system having the origin at the top left corner, the positive direction of the x-axis to the right, and the positive direction of the y-axis downwards. This difference in layout between VRender and the DOM is due to this positioning system.

However, we also provide the ability to use flex layout in VRender. By enabling this feature, we can achieve similar layout capabilities to the DOM Flex layout in VRender.

Usage

The layout capabilities in VRender are achieved through plugins. To enable the layout plugin, you need to set it in the stage parameters:

const stage = VRender.createStage({
  container: CONTAINER_ID,
  autoRender: true,
  enableLayout: true, // Enable layout capabilities
});

Once enabled, the layout of the scene tree still defaults to relative positioning, based on the configured x and y values as well as the relative position of the parent element to determine the position of the current element. However, you can enable flex layout by setting the flex property on elements. When enabled, the child elements will be laid out according to the rules of flex layout.

The configurable properties interface is as follows, following the same rules as the Flex layout rules in browsers:

display?: 'relative' | 'inner-block' | 'flex';
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
flexWrap?: 'nowrap' | 'wrap';
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
alignItems?: 'flex-start' | 'flex-end' | 'center';
alignContent?: 'flex-start' | 'center' | 'space-between' | 'space-around';

The layout will be based on the size of the AABBBounds of the child elements. You can dynamically adjust the AABBBounds of elements using BoundsPadding to achieve the desired layout effect. For more information, you can refer to BoundsPadding.

Here is an example demonstration: