Linear (linear)

const linear = canvasUI.layout.new("linear-1", "linear")

linear.set("direction", "horizontal")
linear.set("alignContent", "middle")
linear.set("gap", 30)

linear.insert(area1)
linear.insert(area2)

size

It is the size of the layout. It is an object with these properties:

• width: Width of the layout.
• height: Height of the layout.

Each of these properties can be "auto" to make the size adapt to the size of its content, and it can also be an object with these properties:

• unit: It is the unit used to define the size, and it can be "px" and "%".
• value: It is the size in terms of the unit specified in the other property.

If the unit is "px" the value will be in px. If it is "%" the value will be the percentage of its maximum available size.

Its default value is:

{
  width: { unit: "%", value: 100 },
  height: { unit: "%", value: 100 }
}

direction

It is the direction of the placement of the children. It can be horizontal (from left to right), vertical (from top to bottom), "reverse-horizontal" (from right to left) and "reverse-vertical" (from bottom to top). Its default value is:

"horizontal"

alignContent

It is the alignment of its content (its children) in the direction of the direction property. It can be "start", "middle" and "end". Its default value is:

"middle"

alignItems

It is the alignment of its children in the opposite direction of the direction property. It can be "start", "middle" and "end". Its default value is:

"middle"

gap

It is the gap between the children. Its default value is:

0

background

It is the background color of the layout. Its default value is:

"rgba(0,0,0,0)"

border

It is the border of the layout. It is an object with these properties:

• size: It is the size of the border.
• color It is the color of the border.

Its default value is:

{
  size: 0,
  color: "#000"
}

corner

It defines how the corners are drawn. It is an object with these properties:

• type: It can be "cut" to define that the corners have to be cut, and it can also be "round" to define that the corners have to be rounded.
• size: It is a number that defines how much the corners will be cut or rounded.

Its default value is:

{
  type: "cut",
  size: 0
}

position

This property is used to define the order in which the children are placed. The first child will be the one with the lowest value, and the last child the one with the highest value. If two elements have the same value, they will be placed in the order in which they were inserted. Its default value is:

0

alignSelf

It defines the alignment of the child in the opposite direction of the direction property. If the value is "auto" it will use the value of alignItems. It can also be "start", "middle" and "end". Its default value is:

"auto"

margin

It defines the margin of the child with its surroundings. It is an object with these properties:

• top: Top margin.
• right: Right margin.
• bottom: Bottom margin.
• left: Left margin.

Its default value is:

{
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}