Skip to content

AlignGroup

Overview

A group of alignment boxes that follow the constraints: 1. Every box will have the same bounds, with an upper-left of (0,0) 2. The box sizes will be the smallest possible to fit every box's content (with respective padding). 3. Each box is responsible for positioning its content in its bounds (with customizable alignment and padding).

Align boxes can be dynamically created and disposed, and only active boxes will be considered for the bounds.

Since many sun components do not support resizing their contents dynamically, you may need to populate the AlignGroup in the order of largest to smallest so that a fixed size container is large enough to contain the largest item.

NOTE: Align box resizes may not happen immediately, and may be delayed until bounds of a align box's child occurs. layout updates can be forced with group.updateLayout(). If the align box's content that changed is connected to a Scenery display, its bounds will update when Display.updateDisplay() will called, so this will guarantee that the layout will be applied before it is displayed.

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

Class AlignGroup

import { AlignGroup } from 'scenerystack/scenery';

Constructor

new AlignGroup( providedOptions? : AlignGroupOptions )

Instance Methods

getMaxWidth() : number

Returns the current maximum width of the grouped content.

getMaxWidthProperty() : TProperty<number>

Returns the Property holding the current maximum width of the grouped content.

getMaxHeight() : number

Returns the current maximum height of the grouped content.

getMaxHeightProperty() : TProperty<number>

Returns the Property holding the current maximum height of the grouped content.

getMaxSizeProperty( orientation : Orientation ) : TProperty<number>

createBox( content : Node, options? : StrictOmit<AlignBoxOptions, 'group'> ) : AlignBox

Creates an alignment box with the given content and options.

setMatchHorizontal( matchHorizontal : boolean ) : this

Sets whether the widths of the align boxes should all match. If false, each box will use its preferred width (usually equal to the content width + horizontal margins).

getMatchHorizontal() : boolean

Returns whether boxes currently are horizontally matched. See setMatchHorizontal() for details.

setMatchVertical( matchVertical : boolean ) : this

Sets whether the heights of the align boxes should all match. If false, each box will use its preferred height (usually equal to the content height + vertical margins).

getMatchVertical() : boolean

Returns whether boxes currently are vertically matched. See setMatchVertical() for details.

updateLayout()

Updates the localBounds and alignment for each alignBox.

NOTE: Calling this will usually not be necessary outside of Scenery, but this WILL trigger bounds revalidation for every alignBox, which can force the layout code to run.

dispose()

Dispose all the boxes.

Type AlignGroupOptions

import type { AlignGroupOptions } from 'scenerystack/scenery';
  • matchHorizontal?: boolean
    Whether the boxes should have all matching widths (otherwise it fits to size)
  • matchVertical?: boolean
    Whether the boxes should have all matching heights (otherwise it fits to size)
  • & DisposableOptions

Source Code

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