Moved titles into AmplitudeControl and FrequencyControl and factor ou…

…t getSliderTitleSpacing, see #283

js/common/WaveInterferenceUtils.js

@@ -116,6 +116,23 @@ define( require => {
       // at the left edge of the cell.  See also WaveInterferenceUtils.getWaterSideShape.
       return transform.modelToViewX( WaveInterferenceConstants.POINT_SOURCE_HORIZONTAL_COORDINATE + 0.5 );
     }
+
+    /**
+     * At the default size, the text should "nestle" into the slider.  But when the text is too small, it must be spaced
+     * further away.  See https://github.com/phetsims/wave-interference/issues/194
+     * @param {Node} titleNode
+     * @returns {number}
+     */
+    static getSliderTitleSpacing( titleNode ) {
+
+      const tallTextHeight = 17;
+      const shortTextHeight = 4;
+
+      const tallTextSpacing = -2;
+      const shortTextSpacing = 5;
+
+      return Util.linear( tallTextHeight, shortTextHeight, tallTextSpacing, shortTextSpacing, titleNode.height );
+    }
   }
 
   return waveInterference.register( 'WaveInterferenceUtils', WaveInterferenceUtils );

js/common/view/AmplitudeControl.js

@@ -13,21 +13,34 @@ define( require => {
   const SceneToggleNode = require( 'WAVE_INTERFERENCE/common/view/SceneToggleNode' );
   const waveInterference = require( 'WAVE_INTERFERENCE/waveInterference' );
   const WaveInterferenceSlider = require( 'WAVE_INTERFERENCE/common/view/WaveInterferenceSlider' );
+  const WaveInterferenceText = require( 'WAVE_INTERFERENCE/common/view/WaveInterferenceText' );
+  const WaveInterferenceUtils = require( 'WAVE_INTERFERENCE/common/WaveInterferenceUtils' );
+
+  // strings
+  const amplitudeString = require( 'string!WAVE_INTERFERENCE/amplitude' );
 
   class AmplitudeControl extends Node {
 
     /**
      * @param {WavesModel} model
      */
     constructor( model ) {
-      super();
 
-      this.addChild( new SceneToggleNode( model, scene => {
+      const amplitudeTitle = new WaveInterferenceText( amplitudeString );
+
+      const sliderContainer = new SceneToggleNode( model, scene => {
 
         // For water scene, control the desiredAmplitude (which determines the size of the water drops)
         // For other scenes, control the amplitude directly.
         return new WaveInterferenceSlider( scene.desiredAmplitudeProperty || scene.amplitudeProperty );
-      } ) );
+      } );
+
+      sliderContainer.centerX = amplitudeTitle.centerX;
+      sliderContainer.top = amplitudeTitle.bottom + WaveInterferenceUtils.getSliderTitleSpacing( amplitudeTitle );
+
+      super( {
+        children: [ amplitudeTitle, sliderContainer ]
+      } );
     }
   }
 

js/common/view/FrequencyControl.js

@@ -15,8 +15,12 @@ define( require => {
   const Property = require( 'AXON/Property' );
   const waveInterference = require( 'WAVE_INTERFERENCE/waveInterference' );
   const WaveInterferenceSlider = require( 'WAVE_INTERFERENCE/common/view/WaveInterferenceSlider' );
+  const WaveInterferenceText = require( 'WAVE_INTERFERENCE/common/view/WaveInterferenceText' );
   const WaveInterferenceUtils = require( 'WAVE_INTERFERENCE/common/WaveInterferenceUtils' );
 
+  // strings
+  const frequencyString = require( 'string!WAVE_INTERFERENCE/frequency' );
+
   // constants
   const fromFemto = WaveInterferenceUtils.fromFemto;
 
@@ -27,6 +31,8 @@ define( require => {
      */
     constructor( model ) {
 
+      const frequencyTitle = new WaveInterferenceText( frequencyString );
+
       // Controls are in the physical coordinate frame
       const waterFrequencySlider = new WaveInterferenceSlider( model.getWaterFrequencySliderProperty() );
       const soundFrequencySlider = new WaveInterferenceSlider( model.soundScene.frequencyProperty );
@@ -58,11 +64,20 @@ define( require => {
         lightFrequencySlider.visible = scene === model.lightScene;
       } );
 
-      super( {
+      const sliderContainer = new Node( {
         children: [
           waterFrequencySlider,
           soundFrequencySlider,
-          lightFrequencySlider
+          lightFrequencySlider ]
+      } );
+
+      sliderContainer.top = frequencyTitle.bottom + WaveInterferenceUtils.getSliderTitleSpacing( frequencyTitle );
+      sliderContainer.centerX = frequencyTitle.centerX;
+
+      super( {
+        children: [
+          frequencyTitle,
+          sliderContainer
         ]
       } );
     }

js/common/view/WaveInterferenceControlPanel.js

@@ -16,15 +16,12 @@ define( require => {
   const Node = require( 'SCENERY/nodes/Node' );
   const SceneRadioButtonGroup = require( 'WAVE_INTERFERENCE/common/view/SceneRadioButtonGroup' );
   const SoundViewTypeRadioButtonGroup = require( 'WAVE_INTERFERENCE/common/view/SoundViewTypeRadioButtonGroup' );
-  const Util = require( 'DOT/Util' );
   const waveInterference = require( 'WAVE_INTERFERENCE/waveInterference' );
   const WaveInterferenceConstants = require( 'WAVE_INTERFERENCE/common/WaveInterferenceConstants' );
   const WaveInterferencePanel = require( 'WAVE_INTERFERENCE/common/view/WaveInterferencePanel' );
   const WaveInterferenceText = require( 'WAVE_INTERFERENCE/common/view/WaveInterferenceText' );
 
   // strings
-  const amplitudeString = require( 'string!WAVE_INTERFERENCE/amplitude' );
-  const frequencyString = require( 'string!WAVE_INTERFERENCE/frequency' );
   const graphString = require( 'string!WAVE_INTERFERENCE/graph' );
   const intensityString = require( 'string!WAVE_INTERFERENCE/intensity' );
   const screenString = require( 'string!WAVE_INTERFERENCE/screen' );
@@ -100,22 +97,16 @@ define( require => {
         model.sceneProperty
       );
 
-      const frequencyTitle = new WaveInterferenceText( frequencyString );
-      const amplitudeTitle = new WaveInterferenceText( amplitudeString );
-
       // Horizontal layout
-      const centerX = frequencyTitle.centerX;
+      const centerX = frequencyControl.centerX;
       frequencyControl.centerX = centerX;
-      amplitudeTitle.centerX = centerX;
       amplitudeControl.centerX = centerX;
       if ( options.additionalControl ) {options.additionalControl.centerX = centerX;}
       sceneRadioButtonGroup.centerX = centerX;
       separator.centerX = centerX;
       const minX = _.min( [
         frequencyControl.left,
         amplitudeControl.left,
-        frequencyTitle.left,
-        amplitudeTitle.left,
         sceneRadioButtonGroup.left
       ] );
 
@@ -128,20 +119,7 @@ define( require => {
       intensityCheckbox.left = minX + 20;
 
       // Vertical layout
-      const TALL_TEXT_SPACING = -2;
-      const SHORT_TEXT_SPACING = 5;
-
-      // At the default size, the text should "nestle" into the slider.  But when the text is too small,
-      // it must be spaced further away.  See https://github.com/phetsims/wave-interference/issues/194
-      const frequencyTitleSpacing = Util.linear( 17, 4, TALL_TEXT_SPACING, SHORT_TEXT_SPACING, frequencyTitle.height );
-      frequencyControl.top = frequencyTitle.bottom + frequencyTitleSpacing;
-      amplitudeTitle.top = frequencyControl.bottom + 7;
-
-      // At the default size, the text should "nestle" into the slider.  But when the text is too small,
-      // it must be spaced further away.  See https://github.com/phetsims/wave-interference/issues/194
-      const amplitudeTitleSpacing = Util.linear( 17, 4, TALL_TEXT_SPACING, SHORT_TEXT_SPACING, amplitudeTitle.height );
-      amplitudeControl.top = amplitudeTitle.bottom + amplitudeTitleSpacing;
-
+      amplitudeControl.top = frequencyControl.bottom + 7;
       const y = amplitudeControl.bottom + 5;
 
       // The Separation NumberControl is an additionalControl
@@ -168,10 +146,7 @@ define( require => {
         // z-ordering
         container.children = [
 
-          frequencyTitle,
           frequencyControl,
-
-          amplitudeTitle,
           amplitudeControl,
 
           ...( options.additionalControl ? [ options.additionalControl ] : [] ),

js/common/view/WaveInterferenceSlider.js

@@ -1,8 +1,8 @@
 // Copyright 2018, University of Colorado Boulder
 
 /**
- * Slider abstraction for the frequency and amplitude sliders.  All instances exist for the lifetime of the sim
- * and do not require disposal.
+ * Slider abstraction for the frequency and amplitude sliders--but note that light frequency slider uses FrequencySlider
+ * instead.  All instances exist for the lifetime of the sim and do not require disposal.
  *
  * @author Sam Reid (PhET Interactive Simulations)
  */