GridBox¶

Overview¶

A grid-based layout container.

See https://phetsims.github.io/scenery/doc/layout#GridBox for details

layoutOptions-only options (can only be set within the child nodes' layoutOptions, NOT available on GridBox): - x (see https://phetsims.github.io/scenery/doc/layout#GridBox-layoutOptions-location) - y (see https://phetsims.github.io/scenery/doc/layout#GridBox-layoutOptions-location) - horizontalSpan (see https://phetsims.github.io/scenery/doc/layout#GridBox-layoutOptions-size) - verticalSpan (see https://phetsims.github.io/scenery/doc/layout#GridBox-layoutOptions-size)

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class GridBox¶

import { GridBox } from 'scenerystack/scenery';

Constructor¶

new GridBox( providedOptions? : GridBoxOptions )¶

Instance Methods¶

setLines( orientation : Orientation, lineArrays : LineArrays )¶

Sets the children of the GridBox and adjusts them to be positioned in certain cells. It takes a 2-dimensional array of Node|null (where null is a placeholder that does nothing).

For each cell, the first index into the array will be taken as the cell position in the provided orientation. The second index into the array will be taken as the cell position in the OPPOSITE orientation.

See GridBox.rows or GridBox.columns for usages and more documentation.

getLines( orientation : Orientation ) : LineArrays¶

Returns the children of the GridBox in a 2-dimensional array of Node|null (where null is a placeholder that does nothing).

For each cell, the first index into the array will be taken as the cell position in the provided orientation. The second index into the array will be taken as the cell position in the OPPOSITE orientation.

See GridBox.rows or GridBox.columns for usages

getNodeAt( row : number, column : number ) : Node | null¶

Returns the Node at a specific row/column intersection (or null if there are none)

getRowOfNode( node : Node ) : number¶

Returns the row index of a child Node (or if it spans multiple rows, the first row)

getColumnOfNode( node : Node ) : number¶

Returns the column index of a child Node (or if it spans multiple columns, the first row)

getNodesInRow( index : number ) : Node[]¶

Returns all the Nodes in a given row (by index)

getNodesInColumn( index : number ) : Node[]¶

Returns all the Nodes in a given column (by index)

addRow( row : LineArray ) : this¶

Adds an array of child Nodes (with null allowed as empty spacers) at the bottom of all existing rows.

addColumn( column : LineArray ) : this¶

Adds an array of child Nodes (with null allowed as empty spacers) at the right of all existing columns.

insertRow( index : number, row : LineArray ) : this¶

Inserts a row of child Nodes at a given row index (see addRow for more information)

insertColumn( index : number, column : LineArray ) : this¶

Inserts a column of child Nodes at a given column index (see addColumn for more information)

removeRow( index : number ) : this¶

Removes all child Nodes in a given row

removeColumn( index : number ) : this¶

Removes all child Nodes in a given column

setChildren( children : Node[] ) : this¶

mutate( options? : GridBoxOptions ) : this¶

setExcludeInvisibleChildrenFromBounds( excludeInvisibleChildrenFromBounds : boolean )¶

dispose()¶

getHelperNode() : Node¶

Type GridBoxOptions¶

import type { GridBoxOptions } from 'scenerystack/scenery';

resize?: boolean
Controls whether the GridBox will re-trigger layout automatically after the "first" layout during construction. The GridBox will layout once after processing the options object, but if resize:false, then after that manual layout calls will need to be done (with updateLayout())
rows?: LineArrays
Sets the children of the GridBox and positions them using a 2-dimensional array of Node|null (null is a placeholder and does nothing). The first index is treated as a row, and the second is treated as a column, so that:

rows[ row ][ column ] = Node rows[ y ][ x ] = Node

Thus the following will have 2 rows that have 3 columns each: rows: [ [ a, b, c ], [ d, e, f ] ]

NOTE: This will mutate the layoutOptions of the Nodes themselves, and will also wipe out any existing children. NOTE: Don't use this option with either children or columns also being set - columns?: LineArrays
Sets the children of the GridBox and positions them using a 2-dimensional array of Node|null (null is a placeholder and does nothing). The first index is treated as a column, and the second is treated as a row, so that:

columns[ column ][ row ] = Node
columns[ x ][ y ] = Node

Thus the following will have 2 columns that have 3 rows each: columns: [ [ a, b, c ], [ d, e, f ] ]

NOTE: This will mutate the layoutOptions of the Nodes themselves, and will also wipe out any existing children. NOTE: Don't use this option with either children or rows also being set - autoRows?: number | null
When non-null, the cells of this grid will be positioned/sized to be 1x1 cells, filling rows until a column has autoRows number of rows, then it will go to the next column. This should generally be used with children or adding/removing children in normal ways. NOTE: This should be used with the children option and/or adding children manually (addChild, etc.) NOTE: This should NOT be used with autoColumns or rows/columns, as those also specify coordinate information NOTE: This will only lay out children with valid bounds, and if excludeInvisibleChildrenFromBounds is true then it will ALSO be constrained to only visible children. It won't leave gaps for children that don't meet these constraints. - autoColumns?: number | null
When non-null, the cells of this grid will be positioned/sized to be 1x1 cells, filling columns until a row has autoColumns number of columns, then it will go to the next row. This should generally be used with children or adding/removing children in normal ways. NOTE: This should be used with the children option and/or adding children manually (addChild, etc.) NOTE: This should NOT be used with autoRows or rows/columns, as those also specify coordinate information NOTE: This will only lay out children with valid bounds, and if excludeInvisibleChildrenFromBounds is true then it will ALSO be constrained to only visible children. It won't leave gaps for children that don't meet these constraints. - & StrictOmit<GridConstraintOptions, GridConstraintExcludedOptions> & LayoutNodeOptions

Source Code¶

See the source for GridBox.ts in the scenery repository.