Class GridLayout

This class represents a rectangular grid layout of cells that can be used to specify the position and size of canvasGUI controls.

The grid layout enables the user to

  • Define the overall size and position of the grid in pixels.
  • Define the number and relative width of the columns.
  • Define the number and relative height of the rows.
  • Position controls within the grid
  • Allow controls to span multiple columns and/or rows

The methds cols, rows and cells are used to set the number and/or the relative cell size within the grid area. Passing integers to these methods will create cells of equal widths and equal heights.

To have columns of different widths or rows with different heights then the parameter must be an array of numbers, the array length represents the number of cells and the array values represent their relative sizes.

An example will make this clearer, consider the following code

grid.cols([10, 24, 16]).rows(4);
grid.size([10, 24, 16], 4);

Both lines perform the same action by specifying a grid of 3 variable width columns and 4 equal height rows. The row height in pixels will be the 0.25 x the grid area height.

To caluclate the column widths divide each array element by the sum of all the array values. Calculating and dividing by the sum (50) creates. If we do that the array elements becomes [0.2, 0.48, 0.32] and to find the column pixel widths, simply multiply these values by grid area width.

Since

1.1.0

Hierarchy

  • GridLayout

Accessors

  • get extPxlCols(): number[]
  • External (display) pixel boundary values for the columns. (includes top-left position of the grid)

    Returns number[]

  • get extPxlRows(): number[]
  • External (display) pixel boundary values for the rows. (includes top-left position of the grid)

    Returns number[]

  • get h(): number
  • Get the grid's height in pixels

    Returns number

  • get intPxlCols(): number[]
  • Internal pixel boundary values for the columns. (relative to top-left position of the grid)

    Returns number[]

  • get intPxlRows(): number[]
  • Internal pixel boundary values for the rows. (relative to top-left position of the grid)

    Returns number[]

  • get nbrCols(): number
  • the number of columns in the grid

    Returns number

  • get nbrRows(): number
  • the number of rows in the grid

    Returns number

  • get normCols(): number[]
  • Normalised internal boundary values for the columns.

    Returns number[]

  • get normRows(): number[]
  • Normalised internal boundary values for the rows.

    Returns number[]

  • get w(): number
  • Get the grid's width in pixels

    Returns number

  • get x(): number
  • Get the left position of the grid

    Returns number

  • get y(): number
  • Get the top edge position of the grid

    Returns number

Methods

  • Get the position and size for the specified cells ignoring insets. This can be used to define rectangles that surround groups of controls.

    The top-left cell number is [0, 0]

    Returns

    the array [x, y, w, h]

    Parameters

    • px: number

      horizontal cell number

    • py: number

      vertical cell number

    • pw: number = 1

      number of hrizontal cells to span

    • ph: number = 1

      number of vertical cells to span

    Returns number[]

  • Get the position and size for the control that fits the specified cells taking into account the insets which provide a clear border between the control and the cell boundary.

    The top-left cell number is [0, 0]

    Returns

    the array [x, y, w, h]

    Parameters

    • px: number

      horizontal cell number

    • py: number

      vertical cell number

    • pw: number = 1

      number of horizontal cells to span

    • ph: number = 1

      number of vertical cells to span

    Returns number[]

  • Set the number and relative widths of the horizontal cells.

    Returns

    this grid

    Parameters

    • n: number | number[]

      number or an array containing relative widths

    Returns GridLayout

  • The gap (pixels) between the cell border and the control.

    Returns

    this grid

    Parameters

    • hinset: number = 2

      horizontal inset

    • vinset: number = 2

      vertical inset

    Returns GridLayout

  • Set the number and relative heights of the vertical cells.

    Returns

    this grid

    Parameters

    • n: number | number[]

      number or an array containing relative heights

    Returns GridLayout

  • Set the number and relative sizes of the cells in both horizontal and vertical dimensions.

    Returns

    this grid

    Parameters

    • nc: number | number[]

      number or an array containing relative widths

    • nr: number | number[]

      number or an array containing relative height

    Returns GridLayout

  • Resize the grid

    Returns

    this grid

    Parameters

    • w: number

      new grid width

    • h: number

      new grid height

    Returns GridLayout

  • Reposition the grid

    Returns

    this grid

    Parameters

    • x: number

      left edge position to use

    • y: number

      top edge position to use

    Returns GridLayout

Generated using TypeDoc