Merge remote-tracking branch 'origin/master'

js/FineCoarseSpinner.js

@@ -12,6 +12,7 @@ define( require => {
 
   // modules
   const ArrowButton = require( 'SUN/buttons/ArrowButton' );
+  const BooleanProperty = require( 'AXON/BooleanProperty' );
   const HBox = require( 'SCENERY/nodes/HBox' );
   const Node = require( 'SCENERY/nodes/Node' );
   const NumberDisplay = require( 'SCENERY_PHET/NumberDisplay' );
@@ -31,14 +32,19 @@ define( require => {
         arrowButtonOptions: null, // {*|null} options propagated to all ArrowButton subcomponents
         deltaFine: 1, // {number} amount to increment/decrement when the 'fine' tweakers are pressed
         deltaCoarse: 10, // {number} amount to increment/decrement when the 'coarse' tweakers are pressed
-        spacing: 10 // {number} horizontal space between subcomponents
+        spacing: 10, // {number} horizontal space between subcomponents
+        enabledProperty: null, // {BooleanProperty|null} is this control enabled?
+        disabledOpacity: 0.5 // {number} opacity used to make the control look disabled
       }, options );
 
       if ( !options.range ) {
         assert && assert( valueProperty.range, 'valueProperty.range or options.range must be provided' );
         options.range = valueProperty.range;
       }
 
+      // Provide a default if not specified
+      options.enabledProperty = options.enabledProperty || new BooleanProperty( true );
+
       assert && assert( options.deltaFine > 0, 'invalid deltaFine: ' + options.deltaFine );
       assert && assert( options.deltaCoarse > 0, 'invalid deltaCoarse: ' + options.deltaCoarse );
       assert && assert( !options.arrowButtonOptions || options.arrowButtonOptions.numberOfArrows === undefined,
@@ -48,7 +54,13 @@ define( require => {
       const fineButtonOptions = _.extend( {
         numberOfArrows: 1,
         arrowWidth: 12, // width of base
-        arrowHeight: 14 // from tip to base
+        arrowHeight: 14, // from tip to base
+
+        // pointer areas
+        touchAreaXDilation: 3,
+        touchAreaYDilation: 3,
+        mouseAreaXDilation: 0,
+        mouseAreaYDilation: 0
       }, options.arrowButtonOptions );
 
       // options for the 'coarse' arrow buttons, which show 2 arrows
@@ -94,6 +106,15 @@ define( require => {
 
       super( options );
 
+      // @public
+      this.enabledProperty = options.enabledProperty;
+      const enabledObserver = enabled => {
+        this.interruptSubtreeInput(); // interrupt interaction
+        this.pickable = enabled;
+        this.opacity = enabled ? 1.0 : options.disabledOpacity;
+      };
+      this.enabledProperty.link( enabledObserver );
+
       // Disable the buttons when the value is at min or max of the range
       const valuePropertyListener = value => {
 
@@ -108,6 +129,7 @@ define( require => {
       // @private
       this.disposeFineCoarseSpinner = () => {
         valueProperty.unlink( valuePropertyListener );
+        this.enabledProperty.unlink( enabledObserver );
       };
     }
 
@@ -116,6 +138,24 @@ define( require => {
       this.disposeFineCoarseSpinner();
       super.dispose();
     }
+
+    /**
+     * Sets whether this Node is enabled or disabled.
+     * @param {boolean} enabled
+     * @public
+     */
+    setEnabled( enabled ) { this.enabledProperty.set( enabled ); }
+
+    set enabled( value ) { this.setEnabled( value ); }
+
+    /**
+     * Gets whether this Node is enabled or disabled.
+     * @returns {boolean}
+     * @public
+     */
+    getEnabled() { return this.enabledProperty.get(); }
+
+    get enabled() { return this.getEnabled(); }
   }
 
   return sceneryPhet.register( 'FineCoarseSpinner', FineCoarseSpinner );

js/SceneryPhetA11yStrings.js

@@ -48,6 +48,9 @@ define( function( require ) {
     soundToggleLabelString: {
       value: 'Mute Sound'
     },
+    resetAllLabelString: {
+      value: 'Reset All'
+    },
 
     // SoundToggleButton alerts
     simSoundOnString: {

js/buttons/ResetAllButton.js

@@ -27,10 +27,8 @@ define( function( require ) {
   // constants
   var RESET_ALL_BUTTON_RADIUS = 24; // derived from the image files that were originally used for this button
 
-  // strings
-  var resetAllButtonNameString = require( 'string!SCENERY_PHET/ResetAllButton.name' );
-
   // a11y strings - not translatable
+  var resetAllButtonNameString = SceneryPhetA11yStrings.resetAllLabelString.value;
   var resetAllAlertString = SceneryPhetA11yStrings.resetAllAlertString.value;
 
   /**

js/demo/ComponentsScreenView.js

@@ -368,13 +368,25 @@ define( function( require ) {
   };
 
   // Creates a demo for FineCoarseSpinner
-  var demoFineCoarseSpinner = function( layoutBounds ) {
+  const demoFineCoarseSpinner = function( layoutBounds ) {
 
-    var numberProperty = new NumberProperty( 0, {
+    const numberProperty = new NumberProperty( 0, {
       range: new Range( 0, 100 )
     } );
 
-    return new FineCoarseSpinner( numberProperty, {
+    const enabledProperty = new BooleanProperty( true );
+
+    const spinner = new FineCoarseSpinner( numberProperty, {
+      enabledProperty: enabledProperty
+    } );
+
+    const checkbox = new Checkbox( new Text( 'enabled', {
+      font: new PhetFont( 20 )
+    } ), enabledProperty );
+
+    return new VBox( {
+      spacing: 60,
+      children: [ spinner, checkbox ],
       center: layoutBounds.center
     } );
   };

scenery-phet-strings_en.json

@@ -71,14 +71,6 @@
   "webglWarning.ie11StencilBody": {
     "value": "Update Internet Explorer by installing recommended Windows Update patches."
   },
-  "ResetAllButton.name": {
-    "value": "Reset All",
-    "visible": false
-  },
-  "SoundToggleButton.name": {
-    "value": "Toggle Sound",
-    "visible": false
-  },
   "keyboardHelpDialog.sliderControls": {
     "value": "Slider Controls"
   },