phetsims / sun

User-interface components for PhET simulations, built on top of Scenery.
MIT License
4 stars 12 forks source link

NumberDisplay does not fully support dynamic text #789

Closed pixelzoom closed 2 years ago

pixelzoom commented 2 years ago

NumberDisplay does not fully support dynamic text. @jonathanolson added support to the valuePattern option, but did not address the numberFormatter option. And I can see why, because it's not straightforward, or even obvious what can/should be done.

This is blocking beers-law-lab https://github.com/phetsims/beers-law-lab/issues/288.

@kathy-phet do you want me to address this?

jonathanolson commented 2 years ago

Does NumberDisplay.setNumberFormatter not work for your case? Were you wanting a numberFormatterProperty option?

pixelzoom commented 2 years ago

Pretty hideous API (see below), but I'll roll with it. Closing.

    const numberDisplay = new NumberDisplay( light.wavelengthProperty, light.wavelengthProperty.range!, {
      xMargin: 7,
      yMargin: 3,
      tandem: options.tandem.createTandem( 'numberDisplay' )
    } );

    // Whenever one of the strings used to format the NumberDisplay changes, call setNumberFormatter with a
    // new formatting function.
    Multilink.multilink(
      [ BeersLawLabStrings.pattern[ '0value' ][ '1unitsStringProperty' ], BeersLawLabStrings.units.nmStringProperty ],
      ( pattern, nmString ) => numberDisplay.setNumberFormatter( wavelength => StringUtils.format( pattern, Utils.toFixed( wavelength, 0 ), nmString ) )
    );