From 6f57d97dfcfbb32d8652be88076cbb3cb8570f9d Mon Sep 17 00:00:00 2001 From: Aadish Gupta Date: Mon, 21 Mar 2016 10:11:42 -0600 Subject: [PATCH] handling long text and position of nodes --- js/common/model/UnderPressureModel.js | 2 +- js/common/view/AtmosphereControlNode.js | 4 +- js/common/view/BarometerNode.js | 6 +- js/common/view/ControlPanel.js | 6 +- js/common/view/UnderPressureView.js | 9 +- js/mystery-pool/view/MysteryPoolControls.js | 129 ------------------- js/mystery-pool/view/MysteryPoolView.js | 136 +++++++++++++++++++- 7 files changed, 145 insertions(+), 147 deletions(-) delete mode 100644 js/mystery-pool/view/MysteryPoolControls.js diff --git a/js/common/model/UnderPressureModel.js b/js/common/model/UnderPressureModel.js index 066863b..df5fbe1 100644 --- a/js/common/model/UnderPressureModel.js +++ b/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 diff --git a/js/common/view/AtmosphereControlNode.js b/js/common/view/AtmosphereControlNode.js index c9ee629..a4c65fc 100644 --- a/js/common/view/AtmosphereControlNode.js +++ b/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 } ); diff --git a/js/common/view/BarometerNode.js b/js/common/view/BarometerNode.js index a17e06c..d57dc00 100644 --- a/js/common/view/BarometerNode.js +++ b/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 ) ); } ); } diff --git a/js/common/view/ControlPanel.js b/js/common/view/ControlPanel.js index 3b46db8..e173ffc 100644 --- a/js/common/view/ControlPanel.js +++ b/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 }; diff --git a/js/common/view/UnderPressureView.js b/js/common/view/UnderPressureView.js index 94b4eda..21a533a 100644 --- a/js/common/view/UnderPressureView.js +++ b/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; diff --git a/js/mystery-pool/view/MysteryPoolControls.js b/js/mystery-pool/view/MysteryPoolControls.js deleted file mode 100644 index 7e41536..0000000 --- a/js/mystery-pool/view/MysteryPoolControls.js +++ /dev/null @@ -1,129 +0,0 @@ -// Copyright 2013-2015, University of Colorado Boulder - -/** - * View for the mystery pool controls including a radio selection for mystery planet/fluid and a drop down for selecting - * one of three planets/fluids. - * @author Vasily Shakhov (Mlearner) - * @author Siddhartha Chinthapally (Actual Concepts) - */ -define( function( require ) { - 'use strict'; - - // modules - var inherit = require( 'PHET_CORE/inherit' ); - var Node = require( 'SCENERY/nodes/Node' ); - var ComboBox = require( 'SUN/ComboBox' ); - var Text = require( 'SCENERY/nodes/Text' ); - var PhetFont = require( 'SCENERY_PHET/PhetFont' ); - var Rectangle = require( 'SCENERY/nodes/Rectangle' ); - var VBox = require( 'SCENERY/nodes/VBox' ); - var AquaRadioButton = require( 'SUN/AquaRadioButton' ); - var Bounds2 = require( 'DOT/Bounds2' ); - var DerivedProperty = require( 'AXON/DerivedProperty' ); - - // 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 - * @constructor - */ - function MysteryPoolControls( mysteryPoolModel ) { - - var mysteryPoolControls = this; - Node.call( this ); - //choice for mystery scene - var textOptions = { font: new PhetFont( 12 ), maxWidth: 70 }; - this.choicePanel = new Node( { x: 625, y: 197 } ); - var background = new Rectangle( 0, 0, 0, 1, { stroke: 'gray', lineWidth: 1, fill: '#f2fa6a', pickable: false } ); - - 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 - } ); - this.choicePanel.addChild( background ); - this.choicePanel.addChild( content ); - this.addChild( this.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)', - y: 253, - x: 457, - visible: false - } ); - - this.fluidDensityComboBox.touchArea = this.fluidDensityComboBox.localBounds.dilatedXY( 0, 0 ); - 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)', - y: this.fluidDensityComboBox.y, - x: this.fluidDensityComboBox.x, - visible: false - } ); - - this.gravityComboBox.touchArea = this.gravityComboBox.localBounds.dilatedXY( 0, 0 ); - 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' ); - } - - return inherit( Node, MysteryPoolControls ); -} ); \ No newline at end of file diff --git a/js/mystery-pool/view/MysteryPoolView.js b/js/mystery-pool/view/MysteryPoolView.js index 1c9ef2a..391bd4e 100644 --- a/js/mystery-pool/view/MysteryPoolView.js +++ b/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' ); }