Skip to content

KeypadDialog

Overview

KeypadDialog is a Dialog sub-type that handles the creation and management of a Keypad.

The KeypadDialog is shown when requested through the beginEdit() method, which occurs when the user presses on a BallValuesPanelNumberDisplay, to allow the user to manipulate a Ball Property. Edits must be within a specified range. There will be a 'Enter' button to allow the user to submit a edit, and edits are canceled if the user hides the Dialog.

KeypadDialog is created at the start of the sim and is never disposed, so no dispose method is necessary and internal links are left as-is.

@author Brandon Li

Class KeypadDialog

import { KeypadDialog } from 'scenerystack/sim';

Constructor

new KeypadDialog( providedOptions? : KeypadDialogOptions )

Instance Methods

beginEdit( editValue : ( value: number ) => void, valueRange : Range, patternStringProperty : TReadOnlyProperty<string>, editFinishedCallback : () => void )

Begins an edit by showing the KeypadDialog. Called when the user presses on a BallValuesPanelNumberDisplay to allow the user to manipulate a Ball.

@param editValue - the function called when a edit in-range successfully occurs. @param valueRange - the Range that the user can edit the valueProperty @param patternStringProperty - the template string that formats the text on the rangeText. @param editFinishedCallback - callback when edit is entered or canceled.

hide()

Hides the dialog. Overridden to also call the editFinishedCallback function when edits are canceled.

dispose()

Type KeypadDialogOptions

import type { KeypadDialogOptions } from 'scenerystack/sim';
  • font?: Font
    Font used for all Text instances within the Dialog.
  • valueBoxWidth?: number
    Width of the value field, height determined by valueFont.
  • valueYMargin?: number
    Vertical margin inside the value box.
  • contentSpacing?: number
    Vertical spacing between the content of the KeypadDialog.
  • useRichTextRange?: boolean
    If true, the range Text will be created as a RichText
  • keypadLayout?: KeypadLayout
  • keypadOptions?: StrictOmit<KeypadOptions, "tandem">
  • enterButtonOptions?: RectangularPushButtonOptions
  • keypadDefaultTextColor?: TColor
  • keypadErrorTextColor?: TColor
  • & StrictOmit<DialogOptions, "focusOnShowNode">

Source Code

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