ScreenView¶

Overview¶

The view portion of a Screen, specifies the layout strategy for the visual view.

For the PDOM view, this type creates the three organizing elements associated with each screen: - The ScreenSummaryNode is introductory description that outlines the screen and sets the scene for the user. - The PlayAreaNode holds content that is considered the main interaction and pedagogy to be learned from the screen. - The ControlAreaNode houses controls and other content that is secondary to the main interaction. Ideally the user would encounter this after exploring the PlayAreaNode. The screenSummaryNode instance is not available on the ScreenView, instead content can be added to it via a constructor option or ScreenView.setScreenSummaryContent. This is because some accessible descriptions in the screen summary are the same throughout all simulations. The pdomPlayAreaNode and pdomControlAreaNode instances are protected, read-only Nodes that are meant to have their pdomOrder and children set to achieve the proper PDOM structure. Do not set pdomOrder directly on the ScreenView, as ScreenView set's its own pdomOrder

@author Sam Reid (PhET Interactive Simulations)

Class ScreenView¶

import { ScreenView } from 'scenerystack/sim';

Constructor¶

new ScreenView( providedOptions? : ScreenViewOptions )¶

Instance Methods¶

setPDOMOrder( pdomOrder : Array<Node | null> | null )¶

This method should not be called because ScreenView defines child Nodes that organize the PDOM structure of a screen. See this.pdomScreenSummaryNode, this.pdomPlayAreaNode, and this.pdomControlAreaNode and set their accessible order accordingly when adding accessible content to the PDOM for this screen.

This makes sure that content will be under those Nodes, which are in the same order for all simulations. This creates a consistent experience for screen reader accessibility.

setChildren( children : Node[] ) : this¶

Override to make sure that setting children doesn't blow away Nodes set by ScreenView.

setScreenSummaryContent( node : ScreenSummaryContent | null )¶

Set the screen summary Node for the PDOM of this Screen View. Prefer passing in a screen summary Node via constructor options, but this method can be used directly when necessary.

getVoicingOverviewContent() : SpeakableResolvedResponse¶

Create the alert content for this ScreenView when the Voicing feature is enabled and the "Overview" button is pressed. The default uses content from the ScreenSummaryContent. You can override this function if you require different behavior.

getVoicingDetailsContent() : SpeakableResolvedResponse¶

Create the alert content for this ScreenView when the Voicing feature is enabled and the "Details" button is pressed. The default uses content from the ScreenSummaryContent. You can override this function if you require different behavior.

getVoicingHintContent() : SpeakableResolvedResponse¶

Create the alert content for this ScreenView when the Voicing feature is enabled and the "Hint" button is pressed. The default uses content from the ScreenSummaryContent. You can override this function if you require different behavior.

interruptSubtreeInput() : this¶

Interrupts all input listeners that are attached to either this node, or a descendant node.

Overridden here so we can interrupt all of the listeners in the Display, see https://github.com/phetsims/scenery/issues/1582.

step( dt : number )¶

Noops for consistent API

Instance Properties¶

layoutBounds : Bounds2¶

(readonly)

visibleBoundsProperty : Property<Bounds2>¶

(readonly)

The visible bounds of the ScreenView in ScreenView coordinates. This includes top/bottom or left/right margins depending on the aspect ratio of the screen. Clients should not set this value

pdomPlayAreaNode : PlayAreaNode¶

(protected, readonly)

pdomControlAreaNode : ControlAreaNode¶

(protected, readonly)

Static Methods¶

getLayoutScale( layoutBounds : Bounds2, viewBounds : Bounds2 ) : number¶

Get the scale to use for laying out the sim components and the navigation bar, so its size will track with the sim size

getLayoutMatrix( layoutBounds : Bounds2, viewBounds : Bounds2, providedOptions? : GetLayoutMatrixOptions ) : Matrix3¶

Static Properties¶

DEFAULT_LAYOUT_BOUNDS¶

(readonly)

Type ScreenViewOptions¶

import type { ScreenViewOptions } from 'scenerystack/sim';

• layoutBounds?: Bounds2
• screenSummaryContent?: ScreenSummaryContent | null
• includePDOMNodes?: boolean
• & NodeOptions

Source Code¶

See the source for ScreenView.ts in the joist repository.