Add enable/disable to FineCoarseSpinner

[jessegreenberg]

In phetsims/forces-and-motion-basics#274 I replaced the custom ArrowButtons and value readout with new UI component FineCoarseSpinner. But in forces-and-motion-basics, the component needs to be full disabled in some circumstances. When disabled, all ArrowButtons should look disabled, and the NumberDisplay text should have a different fill (probably a greyish color by default).

@pixelzoom would you like me to do this as part of phetsims/forces-and-motion-basics#274 or would you like to do this from #450?

[pixelzoom]

I would handle this ala NumberControl, using opacity. I.e.:

options:

   options = _.extend( {
      enabledProperty: new BooleanProperty( true ), // is this control enabled?
      disabledOpacity: 0.5, // {number} opacity used to make the control look disabled
      ...
    } );

field in constructor:

    this.enabledProperty = options.enabledProperty; // @public
    const enabledObserver = enabled => {
      this.interruptSubtreeInput(); // interrupt interaction
      this.pickable = enabled;
      this.opacity = enabled ? 1.0 : options.disabledOpacity;
    }; 
    this.enabledProperty.link( enabledObserver );

in disposeFineCoarseSpinner:

    this.enabledProperty.unlink( enabledObserver );

setters and getters:

    // @public
    setEnabled: function( enabled ) { this.enabledProperty.set( enabled ); },
    set enabled( value ) { this.setEnabled( value ); },

    // @public
    getEnabled: function() { return this.enabledProperty.get(); },
    get enabled() { return this.getEnabled(); }

[pixelzoom]

Ready for review.

[pixelzoom]

See also the "enabled" checkbox that I added to the demo of FineCoarseSpinner in scenery-phet.

[jessegreenberg]

Thanks @pixelzoom, this looks great and is working well in FAMB. Closing,

[pixelzoom]

Reopening. I just noticed that disposeFineCoarseSpinner is unlinking without checking hasListener. If valueProperty or enabledProperty is disposed by the client before FineCoarseSpinner is disposed, unlink will fail:

      this.disposeFineCoarseSpinner = () => {
        valueProperty.unlink( valuePropertyListener );
        if ( ownsEnabledProperty ) {
          this.enabledProperty.dispose();
        }
        else {
          this.enabledProperty.unlink( enabledObserver );
        }
...

[pixelzoom]

Fixed in the above commit. @jessegreenberg feel free to take a peek. But I'm going to (re)close since this change was so trivial.