handling long text and position of nodes

js/common/model/UnderPressureModel.js

@@ -74,7 +74,7 @@ define( function( require ) {
     this.barometers = [];
 
     for ( var i = 0; i < NUM_BAROMETERS; i++ ) {
-      this.barometers.push( new Sensor( new Vector2( 7.95, 2.5 ), 0 ) );
+      this.barometers.push( new Sensor( new Vector2( 7.965, 2.5 ), 0 ) );
     }
 
     // current scene's model

js/common/view/AtmosphereControlNode.js

@@ -76,12 +76,12 @@ define( function( require ) {
       }
     );
     this.addChild( this.background );
-    this.addChild( this.contentNode, { y: 50 } );
+    this.addChild( this.contentNode );
 
     this.updateWidth( this.contentNode.width + 2 * this.options.xMargin );
 
     var titleNode = new Text( atmosphereString, { font: new PhetFont( 12 ), x: 3, fontWeight: 'bold', maxWidth:100 } );
-    titleNode.y = -this.options.yMargin + titleNode.height / 2 - 4;
+    titleNode.y = titleNode.height / 2 - 10;
     var titleBackground = new Rectangle( 0, titleNode.y - titleNode.height, titleNode.width + 6, titleNode.height, {
       fill: this.options.fill
     } );

js/common/view/BarometerNode.js

@@ -83,7 +83,7 @@ define( function( require ) {
 
     //pressure text, y position empirically determined
     var READOUT_SIZE = new Dimension2( containerBounds.width * 0.65, 10 );
-    var text = new Text( '', { font: new PhetFont( 10 ), fontWeight: 'bold', maxWidth: READOUT_SIZE.width, maxHeight: READOUT_SIZE.height } );
+    var text = new Text( '', { font: new PhetFont( 10 ), fontWeight: 'bold', maxWidth: READOUT_SIZE.width *0.95 } );
     var readoutPanel = new Panel( text, {
       minWidth: READOUT_SIZE.width,
       minHeight: READOUT_SIZE.height,
@@ -161,8 +161,8 @@ define( function( require ) {
     barometerNode.touchArea = barometerNode.localBounds.dilatedXY( 0, 0 );
 
     barometer.on( 'update', function() {
-      barometer.value = getPressureAt( position.x,
-        position.y + modelViewTransform.viewToModelY( options.pressureReadOffset * options.scale ) );
+      barometer.value = getPressureAt( barometer.position.x,
+        barometer.position.y + modelViewTransform.viewToModelY( options.pressureReadOffset * options.scale ) );
     } );
   }
 

js/common/view/ControlPanel.js

@@ -34,12 +34,14 @@ define( function( require ) {
   function ControlPanel( underPressureModel, options ) {
 
     options = _.extend( {
-      xMargin: 10,
+      xMargin: 7,
       yMargin: 7,
       fill: '#f2fa6a',
       stroke: 'gray',
       lineWidth: 1,
-      resize: false
+      resize: false,
+      minWidth: 120,
+      maxWidth:120
     }, options );
 
     var textOptions = { font: new PhetFont( 12 ), maxWidth: 80 };

js/common/view/UnderPressureView.js

@@ -153,7 +153,7 @@ define( function( require ) {
       stroke: 'gray',
       lineWidth: 1,
       fill: '#f2fa6a',
-      right: controlPanel.left - 20,
+      right: controlPanel.left - 25,
       top: controlPanel.top
     } );
     this.addChild( sensorPanel );
@@ -210,7 +210,8 @@ define( function( require ) {
 
     // adding mystery pool view
     var mysteryPoolView = new MysteryPoolView( underPressureModel.sceneModels.mystery, modelViewTransform,
-      this.layoutBounds );
+      this.layoutBounds, unitsControlPanel.bottom, unitsControlPanel.left, fluidDensitySlider.top,
+      fluidDensitySlider.left, unitsControlPanel.width );
     mysteryPoolView.visible = false;
     scenes.mystery = mysteryPoolView;
     this.addChild( mysteryPoolView );
@@ -246,8 +247,8 @@ define( function( require ) {
     this.addChild( new SceneChoiceNode( underPressureModel, { x: 10, y: 260 } ) );
 
     //resize mystery control panel
-    mysteryPoolView.mysteryPoolControls.choicePanel.resizeWidth( controlPanel.width );
-    mysteryPoolView.mysteryPoolControls.choicePanel.right = gravitySlider.right;
+    //mysteryPoolView.mysteryPoolControls.choicePanel.resizeWidth( controlPanel.width );
+    //mysteryPoolView.mysteryPoolControls.choicePanel.right = gravitySlider.right;
 
     underPressureModel.currentSceneProperty.link( function( currentScene, previousScene ) {
       scenes[ currentScene ].visible = true;

js/mystery-pool/view/MysteryPoolView.js

@@ -12,20 +12,144 @@ define( function( require ) {
   'use strict';
 
   // modules
+  var AquaRadioButton = require( 'SUN/AquaRadioButton' );
+  var Bounds2 = require( 'DOT/Bounds2' );
+  var ComboBox = require( 'SUN/ComboBox' );
+  var DerivedProperty = require( 'AXON/DerivedProperty' );
+  var Panel = require( 'SUN/Panel' );
+  var PhetFont = require( 'SCENERY_PHET/PhetFont' );
   var inherit = require( 'PHET_CORE/inherit' );
   var SquarePoolView = require( 'UNDER_PRESSURE/square-pool/view/SquarePoolView' );
-  var MysteryPoolControls = require( 'UNDER_PRESSURE/mystery-pool/view/MysteryPoolControls' );
+  var Text = require( 'SCENERY/nodes/Text' );
+  var VBox = require( 'SCENERY/nodes/VBox' );
+
+  // strings
+  var mysteryFluidString = require( 'string!UNDER_PRESSURE/mysteryFluid' );
+  var mysteryPlanetString = require( 'string!UNDER_PRESSURE/mysteryPlanet' );
+  var planetAString = require( 'string!UNDER_PRESSURE/planetA' );
+  var planetBString = require( 'string!UNDER_PRESSURE/planetB' );
+  var planetCString = require( 'string!UNDER_PRESSURE/planetC' );
+  var fluidAString = require( 'string!UNDER_PRESSURE/fluidA' );
+  var fluidBString = require( 'string!UNDER_PRESSURE/fluidB' );
+  var fluidCString = require( 'string!UNDER_PRESSURE/fluidC' );
 
   /**
-   * @param {MysteryPoolModel} mysteryPoolModel of the simulation
-   * @param {ModelViewTransform2 } modelViewTransform to convert between model and view co-ordinates
+   * @param mysteryPoolModel
+   * @param modelViewTransform
+   * @param bounds
+   * @param bottom
+   * @param left
+   * @param fluidDensityTop
+   * @param fluidDensityLeft
+   * @param width
    * @constructor
    */
-  function MysteryPoolView( mysteryPoolModel, modelViewTransform ) {
+  function MysteryPoolView( mysteryPoolModel, modelViewTransform, bounds, bottom, left, fluidDensityTop, fluidDensityLeft, width ) {
 
     SquarePoolView.call( this, mysteryPoolModel, modelViewTransform );
-    this.mysteryPoolControls = new MysteryPoolControls( mysteryPoolModel );
-    this.addChild( this.mysteryPoolControls );
+    //this.mysteryPoolControls = new MysteryPoolControls( mysteryPoolModel, bottom );
+    //this.addChild( this.mysteryPoolControls );
+
+    var mysteryPoolControls = this;
+    //Node.call( this );
+    //choice for mystery scene
+    var textOptions = { font: new PhetFont( 12 ), maxWidth: 80 };
+
+    var mysteryFluidRadio = new AquaRadioButton( mysteryPoolModel.underPressureModel.mysteryChoiceProperty,
+      'fluidDensity', new Text( mysteryFluidString, textOptions ), { radius: 6 } );
+    var mysteryPlanetRadio = new AquaRadioButton( mysteryPoolModel.underPressureModel.mysteryChoiceProperty, 'gravity',
+      new Text( mysteryPlanetString, textOptions ), { radius: 6 } );
+    var touchAreaDilation = 4;
+    var maxRadioButtonWidth = _.max( [ mysteryFluidRadio, mysteryPlanetRadio ], function( item ) {
+        return item.width;
+      } ).width + 5;
+
+    //touch areas
+    mysteryFluidRadio.touchArea = new Bounds2(
+      mysteryFluidRadio.localBounds.minX - touchAreaDilation,
+      mysteryFluidRadio.localBounds.minY,
+      mysteryFluidRadio.localBounds.minX + maxRadioButtonWidth,
+      mysteryFluidRadio.localBounds.maxY
+    );
+
+    mysteryPlanetRadio.touchArea = new Bounds2(
+      mysteryPlanetRadio.localBounds.minX - touchAreaDilation,
+      mysteryPlanetRadio.localBounds.minY,
+      mysteryPlanetRadio.localBounds.minX + maxRadioButtonWidth,
+      mysteryPlanetRadio.localBounds.maxY
+    );
+
+    var content = new VBox( {
+      children: [ mysteryFluidRadio, mysteryPlanetRadio ],
+      spacing: 4,
+      align: 'left',
+      resize: false
+    } );
+
+    var choicePanel = new Panel( content, {
+      xMargin: 7,
+      yMargin: 6,
+      stroke: 'gray',
+      lineWidth: 1,
+      fill: '#f2fa6a',
+      resize: false,
+      align: 'left',
+      cornerRadius: 7,
+      minWidth: width,
+      maxWidth: width
+    } );
+    //var background = new Rectangle( 0, 0, 0, 1, { stroke: 'gray', lineWidth: 1, fill: '#f2fa6a', pickable: false } );
+    //this.choicePanel.addChild( background );
+    //this.choicePanel.addChild( content );
+    choicePanel.top = bottom + 5;
+    choicePanel.left = left;
+    this.addChild( choicePanel );
+
+    // items
+    this.fluidDensityComboBox = new ComboBox( [
+      ComboBox.createItem( new Text( fluidAString, textOptions ), 0 ),
+      ComboBox.createItem( new Text( fluidBString, textOptions ), 1 ),
+      ComboBox.createItem( new Text( fluidCString, textOptions ), 2 )
+    ], mysteryPoolModel.customFluidDensityProperty, mysteryPoolControls, {
+      itemHighlightFill: 'rgb(218,255,255)',
+      visible: false
+    } );
+
+    this.fluidDensityComboBox.touchArea = this.fluidDensityComboBox.localBounds.dilatedXY( 0, 0 );
+    this.fluidDensityComboBox.top = fluidDensityTop;
+    this.fluidDensityComboBox.right = fluidDensityLeft - 10;
+    this.addChild( this.fluidDensityComboBox );
+
+    this.gravityComboBox = new ComboBox( [
+      ComboBox.createItem( new Text( planetAString, textOptions ), 0 ),
+      ComboBox.createItem( new Text( planetBString, textOptions ), 1 ),
+      ComboBox.createItem( new Text( planetCString, textOptions ), 2 )
+    ], mysteryPoolModel.customGravityProperty, mysteryPoolControls, {
+      itemHighlightFill: 'rgb(218,255,255)',
+      visible: false
+    } );
+
+    this.gravityComboBox.touchArea = this.gravityComboBox.localBounds.dilatedXY( 0, 0 );
+    this.gravityComboBox.right = this.fluidDensityComboBox.right;
+    this.gravityComboBox.top = this.fluidDensityComboBox.top;
+    this.addChild( this.gravityComboBox );
+
+    //this.choicePanel.resizeWidth = function( width ) {
+    //  background.setRect( 0, 0, width, content.height + 6, 5, 5 );
+    //  content.centerX = background.centerX - 4;
+    //  content.centerY = background.centerY;
+    //};
+    //this.choicePanel.resizeWidth( content.width + 10 );
+
+    new DerivedProperty( [ mysteryPoolModel.underPressureModel.mysteryChoiceProperty ],
+      function( mysteryChoice ) {
+        return mysteryChoice === 'fluidDensity';
+      } ).linkAttribute( mysteryPoolControls.fluidDensityComboBox, 'visible' );
+
+    new DerivedProperty( [ mysteryPoolModel.underPressureModel.mysteryChoiceProperty ],
+      function( mysteryChoice ) {
+        return mysteryChoice === 'gravity';
+      } ).linkAttribute( mysteryPoolControls.gravityComboBox, 'visible' );
 
   }