Grid (grid)

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

grid.set("dimensions", {
  columns: [{ count: 2, unit: "px", value: 100 }],
  rows: [{ count: 2, unit: "px", value: 100 }],
})
grid.set("gap", {
  size: { horizontal: 20, vertical: 20 },
  color: "rgba(0,0,0,0)",
})

grid.insert(area1)
grid.insert(area2)
grid.insert(area3)

area1.layoutParams.set("position", { row: 0, column: 0 })
area2.layoutParams.set("position", { row: 1, column: 0 })
area3.layoutParams.set("position", { row: 0, column: 1 })
area3.layoutParams.set("span", { rows: 2, columns: 1 })

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

dimensions

It defines the number of rows and columns as well as their sizes. It is an object that has these properties:

• columns: To define the columns.
• rows: To define the rows.

Each of these properties contains an array in which every element is an object with these properties:

• count: It is the number of rows or columns.
• unit: It is the unit used to define the sizes of the rows or columns and it can be "px" and "fr".
• value: It is the sizes of the rows or columns and it is defined in terms of the unit specified.

If the unit is "px" the sizes will be in px. If the unit is "fr" (fractional unit) the sizes will take all the available space they can and each size will be proportional to the other sizes that are also in "fr".

Its default value is:

{
  columns: [{ count: 1, unit: "fr", value: 1 }],
  rows: [{ count: 1, unit: "fr", value: 1 }]
}

gap

It defines the gap between the rows and columns. It is an object with these properties:

• size: It is the size of the gaps, and it is an object with these properties:
  • horizontal: It is the horizontal gap.
  • vertical: It is the vertical gap.
• color: It is the color of the gaps.

Its default value is:

{
  size: { horizontal: 0,vertical: 0 },
  color: "rgba(0,0,0,0)"
}

alignContent

In case that the size of the content (the rows and columns) is less than the size of the layout, you can use this property to define how the content is aligned in the layout. It is an object with these properties:

• horizontal: It is the horizontal alignment, and it can be "left", "middle" and "right".
• vertical: It is the vertical alignment, and it can be "top", "middle" and "bottom".

Its default value is:

{
  horizontal: "middle",
  vertical: "middle"
}

alignItems

It defines how the children are aligned inside the cells. It is an object with these properties:

• horizontal: It is the horizontal alignment of the children, and it can be "left", "middle" and "right".
• vertical: It is the vertical alignment of the children, and it can be "top", "middle" and "bottom".

Its default value is:

{
  horizontal: "middle",
  vertical: "middle"
}

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

It is the row and column in which the child is placed. It is an object with these properties:

• column: Column in which the child is placed.
• row: Row in which the child is placed.

Its default value is:

{
  column: 0,
  row: 0
}

span

It defines how many rows and columns the element spans. It is an object with these properties:

• rows: The number of rows the element spans.
• columns: The number of columns the element spans.

Its default value is:

{
  columns: 1,
  rows: 1
}

alignSelf

It defines how the element is aligned inside the cell. It is an object with these properties:

• horizontal: It is the horizontal alignment. If the value is "auto" it will take the horizontal alignment defined in alignItems. The other values it can take are "left", "middle" and "right".
• vertical: It is the vertical alignment. If the value is "auto" it will take the vertical alignment defined in alignItems. The other values it can take are "top", "middle" and "bottom".

Its default value is:

{
  horizontal: "auto",
  vertical: "auto"
}

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
}