FlowBox¶

Overview¶

A vertical/horizontal flow-based layout container.

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

FlowBox-only options: - resize (see https://phetsims.github.io/scenery/doc/layout#FlowBox-resize) - orientation (see https://phetsims.github.io/scenery/doc/layout#FlowBox-orientation) - spacing (see https://phetsims.github.io/scenery/doc/layout#FlowBox-spacing) - lineSpacing (see https://phetsims.github.io/scenery/doc/layout#FlowBox-lineSpacing) - justify (see https://phetsims.github.io/scenery/doc/layout#FlowBox-justify) - justifyLines (see https://phetsims.github.io/scenery/doc/layout#FlowBox-justifyLines) - wrap (see https://phetsims.github.io/scenery/doc/layout#FlowBox-wrap) - layoutOrigin (see https://phetsims.github.io/scenery/doc/layout#layoutOrigin)

FlowBox and layoutOptions options (can be set either in the FlowBox itself, or within its child nodes' layoutOptions): - align (see https://phetsims.github.io/scenery/doc/layout#FlowBox-align) - stretch (see https://phetsims.github.io/scenery/doc/layout#FlowBox-stretch) - grow (see https://phetsims.github.io/scenery/doc/layout#FlowBox-grow) - cellAlign (see https://phetsims.github.io/scenery/doc/layout#FlowBox-cellAlign) - margin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - xMargin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - yMargin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - leftMargin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - rightMargin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - topMargin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - bottomMargin (see https://phetsims.github.io/scenery/doc/layout#FlowBox-margins) - minContentWidth (see https://phetsims.github.io/scenery/doc/layout#FlowBox-minContent) - minContentHeight (see https://phetsims.github.io/scenery/doc/layout#FlowBox-minContent) - maxContentWidth (see https://phetsims.github.io/scenery/doc/layout#FlowBox-maxContent) - maxContentHeight (see https://phetsims.github.io/scenery/doc/layout#FlowBox-maxContent)

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

Class FlowBox¶

import { FlowBox } from 'scenerystack/scenery';

Constructor¶

new FlowBox( providedOptions? : FlowBoxOptions )¶

Instance Methods¶

onFlowBoxChildInserted( node : Node, index : number )¶

(protected)

Called when a child is inserted.

getCell( node : Node ) : FlowCell¶

dispose()¶

Releases references

setOrientation( orientation : LayoutOrientation ) : this¶

LayoutBox Compatibility (see the ES5 setters/getters, or the options doc)

getOrientation() : LayoutOrientation¶

setSpacing( spacing : number ) : this¶

getSpacing() : number¶

setAlign( align : HorizontalLayoutAlign | VerticalLayoutAlign ) : this¶

getAlign() : HorizontalLayoutAlign | VerticalLayoutAlign¶

setResize( resize : boolean ) : this¶

isResize() : boolean¶

getHelperNode() : Node¶

mutate( options? : FlowBoxOptions ) : this¶

Static Properties¶

DEFAULT_FLOW_BOX_OPTIONS¶

(readonly)

Type FlowBoxOptions¶

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

• resize?: boolean
  Controls whether the FlowBox will re-trigger layout automatically after the "first" layout during construction. The FlowBox 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())
• & StrictOmit<FlowConstraintOptions, ExcludeFlowConstraintOptions> & LayoutNodeOptions

Source Code¶

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