Layouts
Layouts allow you to arrange your nodes using
Flexbox
. Any nodeextending the
Layout
node can become a part ofthe layout. This includes, but is not limited to:
Rect
,
Circle
, and
Img
.
Layout root
Layouts are an opt-in feature, meaning that they need to be enabled. It's doneby setting the
layout
property on the Nodethat we want to become the root of our layout:
// ↓ layout root
<
Rect
layout
>
{
/* ↓ layout child */
}
<
Circle
width
=
{
320
}
height
=
{
320
}
/>
Rect
>
In the example above, we marked the
Just setting the
layout
property doesn't always turn the node into a layoutroot. If the node is already a part of the layout, it will be treated like therest of the descendants:
// ↓ layout root
<
Rect
layout
>
{
/* ↓ layout child, NOT a layout root */
}
<
Rect
layout
>
{
/* ↓ layout child */
}
<
Circle
width
=
{
320
}
height
=
{
320
}
/>
Rect
>
Rect
>
Size and offset
Aside from the position, rotation, and scale, any node extending the
Layout
class has additional
size
and
offset
properties:
Layout.size
readonly
public
size
:
Vector2LengthSignal
Layout
Represents the size of this node.
A size is a two-dimensional vector, where
x
represents the
width
, and
y
represents the
height
.
The value of both x and y is of type
Length
which iseither:
-
number- the desired length in pixels -
${number}%- a string with the desired length in percents, for example'50%' -
null- an automatic length
When retrieving the size, all units are converted to pixels, using thecurrent state of the layout. For example, retrieving the width set to
'50%'
, while the parent has a width of
200px
will result in the number
100
being returned.
When the node is not part of the layout, setting its size using percentsrefers to the size of the entire scene.
Examples
Layout.offset
readonly
public
offset
:
Vector2Signal
Layout
Represents the offset of this node's origin.
By default, the origin of a node is located at its center. The originserves as the pivot point when rotating and scaling a node, but it doesn'taffect the placement of its children.
The value is relative to the size of this node. A value of
1
means as farto the right/bottom as possible. Here are a few examples of offsets:
-
[-1, -1]- top left corner -
[1, -1]- top right corner -
[0, 1]- bottom edge -
[-1, 1]- bottom left corner
Flexbox configuration
Most flexbox attributes available in CSS are available as
Layout
properties
. You can check outthis
Flexbox guide
to better understand how they work. The mostuseful properties are listed below:
Layout.padding
readonly
public
padding
:
SpacingSignal
Layout
Layout.margin
readonly
public
margin
:
SpacingSignal
Layout
Layout.gap
readonly
public
gap
:
Vector2LengthSignal
Layout
Layout.direction
readonly
public
direction
:
SimpleSignal
FlexDirection
Layout
Layout.alignItems
readonly
public
alignItems
:
SimpleSignal
FlexItems
Layout
Layout.justifyContent
readonly
public
justifyContent
:
SimpleSignal
FlexContent
Layout
Groups
Nodes that don't extend the
Layout
class, such as the
Node
itself, areunaffected by the layout and are treated as if they were never there. This letsyou apply filters and transformations to layout nodes without affecting thehierarchy.
From the layout's perspective, all
<
Layout
direction
=
{
'column'
}
width
=
{
960
}
gap
=
{
40
}
layout
>
<
Node
opacity
=
{
0.1
}
>
<
Rect
height
=
{
240
}
fill
=
{
'#ff6470'
}
/>
<
Rect
height
=
{
240
}
fill
=
{
'#ff6470'
}
/>
Node
>
<
Rect
height
=
{
240
}
fill
=
{
'#ff6470'
}
/>
Layout
>