Skip to content

GroupSelectView

Overview

This doc assumes you have read the doc in GroupSelectModel. Read that first as it explains the "group select interaction" more generally.

The view of the "Group Sort Interaction." This type handles adding the controller for selecting and grabbing in the interaction for (keyboard). It also handles the individual and group focus highlights.

This class can be used per scene, but the model is best used per screen.

@author Michael Kauzmann (PhET Interactive Simulations) @author Marla Schulz (PhET Interactive Simulations)

Class GroupSelectView

import { GroupSelectView } from 'scenerystack/scenery-phet';

Constructor

new GroupSelectView( model : GroupSelectModel<ItemModel>, primaryFocusedNode : Node, providedOptions : GroupSelectViewOptions<ItemModel, ItemNode> )

Instance Methods

onGroupItemChange( newGroupItem : ItemModel )

(protected)

By "change" we mean sort or selection.

dispose()

Instance Properties

groupSortGroupFocusHighlightPath : Path

(readonly)

Update group highlight dynamically by setting the shape of this path.

grabReleaseCueNode : Node

(readonly)

The cue node for grab/release.

positionSortCueNodeEmitter : Emitter

(readonly)

Emitted when the sorting cue should be repositioned. Most likely because the selection has changed.

Static Methods

createSortCueNode( visibleProperty : TReadOnlyProperty<boolean>, scale ) : SortCueArrowNode

Use SortCueArrowNode to create a Node for the keyboard sorting cue. Can also be used as the mouse/touch cue Node if desired.

create( model : GroupSelectModel<ItemModel>, primaryFocusedNode : Node, providedOptions : GroupSelectViewOptions<ItemModel, ItemNode> ) : GroupSelectView<ItemModel, ItemNode>

Creator factory, similar to PhetioObject.create(). This is most useful if you don't need to keep the instance of your GroupSortInteractionView.

Type GroupSelectViewOptions

import type { GroupSelectViewOptions } from 'scenerystack/scenery-phet';
  • getGroupItemToSelect: ( () => ItemModel | null )
    If GroupSortInteraction doesn't know what the selection should be, this function is called to set the default or best guess selection. Return null to not supply a selection (no focus).
  • isGroupItemEnabled?: ( groupItem: ItemModel ) => boolean
    Return the enabled state of a group item. If a group item is not enabled it can be selected, but not sorted.
  • getNodeFromModelItem: ( model: ItemModel ) => ItemNode | null
    Given a model item, return the corresponding node. Support 'null' as a way to support multiple scenes. If you return null, it means that the provided itemModel is not associated with this view, and shouldn't be handled.
  • getHighlightNodeFromModelItem?: ( model: ItemModel ) => Node | null
    Given a model item, return the corresponding focus highlight node. Defaults to the implementation of getNodeFromModelItem. Return null if no highlight should be shown for the selection (not recommended).
  • onGrab?: ( groupItem: ItemModel ) => void
    When the selected group item has been grabbed (into "sorting" state).
  • onRelease?: ( groupItem: ItemModel ) => void
    When the selected group item is released (back into "selecting" state).
  • grabReleaseCueOptions?: Partial<StrictOmit<GrabReleaseCueNodeOptions, "visibleProperty">>
    To be passed to the grab/release cue node (which is added to the group focus highlight). The visibleProperty is always GroupSelectModel.grabReleaseCueVisibleProperty
  • primaryFocusedNodeOptions?: ParallelDOMOptions
    Accessible content provided to the node. This doesn't change from selecting/sorting states. Client is responsible for setting accessibleName according to grabbed state, see https://github.com/phetsims/scenery-phet/issues/860
  • & DisposableOptions

Source Code

See the source for GroupSelectView.ts in the scenery-phet repository.