A text input element for displaying and editing the numeric value of a target object.

Because this is an Observer, you can connect it to a Subject; when the Subject broadcasts events, the observe method ensures that this control reflects the current target value.

Number Formatting

The number is formatted without any thousands separators and with the number of fractional decimal places depending on the "mode".

  • Fixed decimal places mode shows the number of decimal places given by getDecimalPlaces. Ignores significant digits setting. Fixed decimal places mode is active when getDecimalPlaces() returns 0 or greater.

  • Variable decimal places mode ensures that the requested number of significant digits are visible. Adjusts decimal places shown based on the magnitude of the value. See setSignifDigits. Variable decimal places mode is active when getDecimalPlaces() returns –1.

The default setting is variable decimal places mode with 3 significant digits.

The displayed value is rounded to a certain number of digits, and therefore the displayed value can differ from the target value. NumericControlBase allows for this difference by only making changes to the target value when the the user modifies the displayed value, or when setValue is called.

Preventing Forbidden Values

To prevent the user from entering forbidden values (such as enforcing upper or lower limits) the setter function can throw an Error. An alert is displayed to the user with the text of the Error. After dismissing the alert, the displayed value will be restored to match the current target value, as returned by the getter. (Note that the user's input is discarded).

To Do List

There is a problem with the current variable mode which is when you have a very tiny number, say 1.234567e-12, then it will format it like: 0.000000000001234567 when setting the significant digits to 7 and decimals to be variable. This is usually far bigger than we want. It should instead either switch to exponential, or have a maximum limit on the number of decimals shown. Or a limit on total number of digits shown, switching to exponential when needed.

Hierarchy (view full)

Implements

Constructors

  • Parameters

    • label: string

      the text shown in a label next to the number input field

    • getter: (() => number)

      function that returns the current target value

        • (): number
        • Returns number

    • setter: ((value) => void)

      function to change the target value

        • (value): void
        • Parameters

          • value: number

          Returns void

    • Optional textField: HTMLInputElement

      the text field to use; if not provided, then a text field is created.

    Returns NumericControlBase

Properties

columns_: number = ...

The number of columns (characters) shown in the text field.

decimalPlaces_: number = -1

Fixed number of fractional decimal places to show, or –1 if variable.

firstClick_: boolean = false

True when first click in field after gaining focus.

getter_: (() => number)

function that returns the current target value

Type declaration

    • (): number
    • function that returns the current target value

      Returns number

label_: string

the name shown in a label next to the textField

lastValue_: string = ''

The last value that the text field was set to, used to detect when user has intentionally changed the value; note that the target value will be different than this because of rounding.

setter_: ((value) => void)

function to change the target value

Type declaration

    • (value): void
    • function to change the target value

      Parameters

      • value: number

      Returns void

signifDigits_: number = 3

The number of significant digits to display.

textField_: HTMLInputElement

the text field showing the double value

value_: number

The exact value of the target as last seen by this control; note that the displayed value may be different due to rounding.

Methods

  • Returns the number of columns needed to show the number with the given number of significant digits.

    Parameters

    • x: number

      the number to display

    • sigDigits: number

      the number of significant digits to show

    Returns number

    the number of columns needed

  • Returns the number of fractional decimal places needed to show the number with the given number of significant digits.

    Parameters

    • x: number

      the number to display

    • sigDigits: number

      the number of significant digits to show

    Returns number

    the number of fractional decimal places needed

  • Returns the fixed number of fractional decimal places to show when formatting the number, or –1 when in variable decimal places mode.

    Returns number

    the fixed number of fractional decimal places to show when formatting the number, or –1 when in variable decimal places mode.

  • Returns the top level Element of this control. For example, this might be a label Element that encloses an input Element.

    Returns HTMLElement

    the top level Element of this control

  • Returns the number of significant digits to show when formatting the number. Only has an effect in variable decimal places mode, see getDecimalPlaces.

    Returns number

    the number of significant digits to show when formatting the number

  • Returns the value of this control (which should match the target value if observe is being called). The displayed value may be different due to rounding.

    Returns number

    the value of this control

  • Notifies this Observer that a change has occurred in the Subject.

    Parameters

    • _event: SubjectEvent

      contains information about what has changed in the Subject: typically either a one-time GenericEvent, or a change to the value of a Parameter

    Returns void

  • Sets the fixed number of fractional decimal places to show when formatting the number, or a value of –1 puts this into variable decimal places mode where the number of decimal places depends on the desired number of significant digits. See setSignifDigits.

    Parameters

    • decimalPlaces: number

      the fixed number of fractional decimal places to show when formatting the number, or –1 to have variable number of fractional decimal places.

    Returns NumericControlBase

    this object for chaining setters

  • Changes the value shown by this control, and sets the target to this value.

    Parameters

    • value: number

      the new value

    Returns void

  • Returns a minimal string representation of this object, usually giving just identity information like the class name and name of the object.

    For an object whose main purpose is to represent another Printable object, it is recommended to include the result of calling toStringShort on that other object. For example, calling toStringShort() on a DisplayShape might return something like this:

    DisplayShape{polygon:Polygon{'chain3'}}
    

    Returns string

    a minimal string representation of this object.

  • Checks that an entered number is a valid number, updates the target value if valid; if an exception occurs then shows an alert and restores the old value.

    Parameters

    • _event: Event

      the event that caused this callback to fire

    Returns void

Generated using TypeDoc