Skip to content

FlowBox

Under Construction

This documentation is auto-generated, and is a work in progress. Please see the source code at https://github.com/phetsims/scenery/blob/main/js/layout/nodes/FlowBox.ts for the most up-to-date information.

Overview

A vertical/horizontal flow-based layout container.

See https://scenerystack.org/learn/scenery-layout/#FlowBox for details

FlowBox-only options: - resize (see https://scenerystack.org/learn/scenery-layout/#FlowBox-resize) - orientation (see https://scenerystack.org/learn/scenery-layout/#FlowBox-orientation) - spacing (see https://scenerystack.org/learn/scenery-layout/#FlowBox-spacing) - lineSpacing (see https://scenerystack.org/learn/scenery-layout/#FlowBox-lineSpacing) - justify (see https://scenerystack.org/learn/scenery-layout/#FlowBox-justify) - justifyLines (see https://scenerystack.org/learn/scenery-layout/#FlowBox-justifyLines) - wrap (see https://scenerystack.org/learn/scenery-layout/#FlowBox-wrap) - layoutOrigin (see https://scenerystack.org/learn/scenery-layout/#layoutOrigin) - forward (see https://scenerystack.org/learn/scenery-layout/#FlowBox-forward)

FlowBox and layoutOptions options (can be set either in the FlowBox itself, or within its child nodes' layoutOptions): - align (see https://scenerystack.org/learn/scenery-layout/#FlowBox-align) - stretch (see https://scenerystack.org/learn/scenery-layout/#FlowBox-stretch) - grow (see https://scenerystack.org/learn/scenery-layout/#FlowBox-grow) - cellAlign (see https://scenerystack.org/learn/scenery-layout/#FlowBox-cellAlign) - margin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - xMargin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - yMargin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - leftMargin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - rightMargin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - topMargin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - bottomMargin (see https://scenerystack.org/learn/scenery-layout/#FlowBox-margins) - minContentWidth (see https://scenerystack.org/learn/scenery-layout/#FlowBox-minContent) - minContentHeight (see https://scenerystack.org/learn/scenery-layout/#FlowBox-minContent) - maxContentWidth (see https://scenerystack.org/learn/scenery-layout/#FlowBox-maxContent) - maxContentHeight (see https://scenerystack.org/learn/scenery-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

setForwardProperty( newTarget : TReadOnlyProperty<boolean> | null ) : this

Sets what Property our forwardProperty is backed by

getForwardProperty() : TProperty<boolean>

Get this Node's forwardProperty. Note! This is not the reciprocal of setForwardProperty. Node.prototype._forwardProperty is a TinyForwardingProperty, and is set up to listen to changes from the forwardProperty provided by setForwardProperty(), but the underlying reference does not change. This means the following: * const myNode = new Node(); const forwardProperty = new Property( false ); myNode.setForwardProperty( forwardProperty ) => myNode.getForwardProperty() !== forwardProperty (!!!!!!)

Please use this with caution. See setForwardProperty() for more information.

setForward( forward : boolean ) : this

Sets whether the nodes in this FlowBox are ordered in a forward order. If false, the nodes will appear reversed in the layout.

isForward() : boolean

Returns whether this Node is forward.

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())
  • forward?: boolean
    If true, the nodes in this FlowBox will be ordered in a forward order. If false, the nodes will appear reversed in order.
  • forwardProperty?: TReadOnlyProperty<boolean> | null
    Like forward, but allows specifying a boolean Property to forward the order Notably, for HBoxes this is useful to pass in localeProperty.
  • & StrictOmit<FlowConstraintOptions, ExcludeFlowConstraintOptions> & LayoutNodeOptions

Source Code

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