Skip to content

NumberDisplay

Overview

Displays a Property of type {number} in a background rectangle.

@author Chris Malley (PixelZoom, Inc.)

Class NumberDisplay

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

Constructor

new NumberDisplay( numberProperty : TReadOnlyProperty<number | null>, displayRange : Range, providedOptions? : NumberDisplayOptions )

Instance Methods

dispose()

setNumberFont( font : Font )

Sets the number text font.

setNumberFill( fill : TPaint )

Sets the number text fill.

setBackgroundFill( fill : TPaint )

Sets the background fill.

getBackgroundFill() : TPaint

Gets the background fill.

setBackgroundStroke( stroke : TPaint )

Sets the background stroke.

getBackgroundWidth() : number

Get the width of the background.

setBackgroundWidth( width : number )

Set the width of the background node.

Instance Properties

valueStringProperty : TReadOnlyProperty<string>

(readonly)

Static Properties

NumberDisplayIO : IOType

(readonly)

Type NumberDisplayOptions

import type { NumberDisplayOptions } from 'scenerystack/scenery-phet';
  • align?: NumberDisplayAlign
  • valuePattern?: string | TReadOnlyProperty<string>
    Pattern used to format the value. Must contain SunConstants.VALUE_NAMED_PLACEHOLDER or SunConstants.VALUE_NUMBERED_PLACEHOLDER.
  • decimalPlaces?: number | null
    The number of decimal places to show. If null, the full value is displayed. We attempted to change the default to null, but there were too many usages that relied on the 0 default. See https://github.com/phetsims/scenery-phet/issues/511
  • numberFormatter?: ( ( n: number ) => string ) | null
    Takes a {number} and returns a {string} for full control. Mutually exclusive with valuePattern and decimalPlaces. Named "numberFormatter" instead of "formatter" to help clarify that it is separate from the noValueString/Align/Pattern defined below. Please see also numberFormatterDependencies
  • numberFormatterDependencies?: TReadOnlyProperty<unknown>[]
    If your numberFormatter depends on other Properties, you must specify them so that the text will update when those dependencies change.
  • useRichText?: boolean
  • useFullHeight?: boolean
    If set to true, the smaller text height (from applying the maxWidth) will NOT be used, and instead the height of the text (as if there was no maxWidth) will be used for layout and the background. See https://github.com/phetsims/density/issues/34.
  • textOptions?: TextOptions | RichTextOptions
    // options passed to Text or RichText (depending on the value of options.useRichText) that displays the value
  • xMargin?: number
  • yMargin?: number
  • cornerRadius?: number
  • backgroundFill?: TPaint
  • backgroundStroke?: TPaint
  • backgroundLineWidth?: number
  • backgroundLineDash?: number[]
  • minBackgroundWidth?: number
  • noValueString?: string
    options related to display when numberProperty.value === null
  • noValueAlign?: NumberDisplayAlign | null
  • noValuePattern?: string | TReadOnlyProperty<string> | null
  • & StrictOmit<NodeOptions, "children">

Source Code

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