Skip to content

HighlightOverlay

Overview

An overlay that implements highlights for a Display. This is responsible for drawing the highlights and observing Properties or Emitters that dictate when highlights should become active. A highlight surrounds a Node to indicate that it is in focus or relevant.

@author Jesse Greenberg (PhET Interactive Simulations) @author Jonathan Olson <jonathan.olson@colorado.edu>

Class HighlightOverlay

import { HighlightOverlay } from 'scenerystack/scenery';

Constructor

new HighlightOverlay( display : Display, focusRootNode : Node, providedOptions? : HighlightOverlayOptions )

Instance Methods

dispose()

Releases references

hasHighlight() : boolean

Returns whether or not this HighlightOverlay is displaying some highlight.

hasReadingBlockHighlight() : boolean

Returns true if there is an active highlight around a ReadingBlock while the voicingManager is speaking its Voicing content.

update()

Called by Display, updates this overlay in the Display.updateDisplay call.

Instance Properties

domElement : HTMLElement

(readonly)

HTML element of the display

Static Methods

setInnerHighlightColor( color : TPaint )

Set the inner color of all focus highlights.

getInnerHighlightColor() : TPaint

Get the inner color of all focus highlights.

setOuterHilightColor( color : TPaint )

Set the outer color of all focus highlights.

getOuterHighlightColor() : TPaint

Get the outer color of all focus highlights.

setInnerGroupHighlightColor( color : TPaint )

Set the inner color of all group focus highlights.

getInnerGroupHighlightColor() : TPaint

Get the inner color of all group focus highlights

setOuterGroupHighlightColor( color : TPaint )

Set the outer color of all group focus highlight.

getOuterGroupHighlightColor() : TPaint

Get the outer color of all group focus highlights.

Type Highlight

Highlights displayed by the overlay support these types. Highlight behavior works like the following: - If value is null, the highlight will use default stylings of HighlightPath and surround the Node with focus. - If value is a Shape the Shape is set to a HighlightPath with default stylings in the global coordinate frame. - If you provide a Node it is your responsibility to position it in the global coordinate frame. - If the value is 'invisible' no highlight will be displayed at all.

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

Node | Shape | null | "invisible"

Type HighlightOverlayOptions

import type { HighlightOverlayOptions } from 'scenerystack/scenery';
  • pdomFocusHighlightsVisibleProperty?: TProperty<boolean>
    Controls whether highlights related to DOM focus are visible
  • interactiveHighlightsVisibleProperty?: TProperty<boolean>
    Controls whether highlights related to Interactive Highlights are visible
  • readingBlockHighlightsVisibleProperty?: TProperty<boolean>
    Controls whether highlights associated with ReadingBlocks (of the Voicing feature set) are shown when pointerFocusProperty changes

Source Code

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