Relative (relative)

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

relative.insert(area1)
relative.insert(area2)

area1.layoutParams.set("attachTo", {
  top: "parent",
  right: null,
  bottom: "parent",
  left: "parent",
})

area1.layoutParams.get("margin").left = 50

area2.layoutParams.set("attachTo", {
  top: "parent",
  bottom: "parent",
  left: { side: "right", child: "area-1" },
  right: "parent",
})

area2.layoutParams.get("bias").horizontal = 50

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 }
}

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
}

attachTo

It defines where the child is attached to. It is an object with these properties:

• top: It defines where the top side of the child is attached to.
• right: It defines where the right side of the child is attached to.
• bottom: It defines where the bottom side of the child is attached to.
• left: It defines where the left side of the child is attached to.

Each of these properties can be null to define that it is not attached to this side, "parent" to define that it is attached to the side of its parent and an object with the following properties to define that it is attached to the side of another child:

• side: The side of this other child that the child is attached to. It can be "top", "right", "bottom" and "left".
• child: The id of this other child that the child is attached to.

Its default value is:

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

bias

It is only used when the child is attached to both sides of the same direction. When that happens, you can use this property to define a percentage that specify how near is the child to what side.

It is an object that has these properties:

• horizontal: It is a percentage that represents how near is to the left and to the right.
• vertical: It is a percentage that represents how near is to the top and to the bottom.

Its default value is:

{
  horizontal: 50,
  vertical: 50
}

zIndex

It is used to define the order in which the children are drawn. The child with the highest value will be the last child to be drawn, and it will cover the other ones if they overlap. If two children have the same value, they will be drawn in the order in which they were inserted. Its default value is:

0

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
}