From 9affb3fbe42eea3ed49c27658aec52402e3d035b Mon Sep 17 00:00:00 2001 From: denz1994 Date: Tue, 3 Apr 2018 13:33:42 -0400 Subject: [PATCH] Adding massNodeIcon to massValueControlPanel. #250 --- js/common/model/Mass.js | 4 ++- js/common/view/MassNode.js | 40 ++++++++++++++----------- js/common/view/MassValueControlPanel.js | 18 ++++++++--- js/common/view/OneSpringScreenView.js | 10 +++++++ 4 files changed, 50 insertions(+), 22 deletions(-) diff --git a/js/common/model/Mass.js b/js/common/model/Mass.js index 7be92df9..898d0935 100644 --- a/js/common/model/Mass.js +++ b/js/common/model/Mass.js @@ -51,6 +51,7 @@ define( function( require ) { options = _.extend( { adjustable: false, mysteryLabel: false, + icon: false, // Determines whether this mass will be displayed as an icon. density: 80, // Constant used to keep all of our masses consistent in the model (kg/m^2). color: new Color( color ), zeroReferencePoint: 0 // Height of the mass when it is resting on the shelf (m). @@ -59,8 +60,9 @@ define( function( require ) { // @public Non-Property attributes this.adjustable = options.adjustable; this.mysteryLabel = options.mysteryLabel; + this.icon = options.icon; this.color = color; - this.zeroReferencePoint= options.zeroReferencePoint; + this.zeroReferencePoint = options.zeroReferencePoint; // @public (read-only) {Property.} mass of mass object in kg this.massProperty = new NumberProperty( massValue ); diff --git a/js/common/view/MassNode.js b/js/common/view/MassNode.js index 73239372..0a44a250 100644 --- a/js/common/view/MassNode.js +++ b/js/common/view/MassNode.js @@ -56,6 +56,9 @@ define( function( require ) { this.mass = mass; var hookHeight = modelViewTransform2.modelToViewDeltaY( -MassesAndSpringsConstants.HOOK_HEIGHT ); + if ( mass.icon ) { + hookHeight = modelViewTransform2.modelToViewDeltaY( -MassesAndSpringsConstants.HOOK_HEIGHT * .4 ); + } var rect = new Rectangle( { stroke: 'black', @@ -113,27 +116,30 @@ define( function( require ) { } ); this.addChild( hookNode ); - var labelString = mass.mysteryLabel ? questionMarkString : StringUtils.fillIn( massValueString, { mass: mass.mass * 1000 } ); - var label = new Text( labelString, { - font: new PhetFont( { size: 12, weight: 'bold' } ), - centerY: rect.centerY, - centerX: 0, - pickable: false, - maxWidth: 50, - tandem: tandem.createTandem( 'label' ) - } ); + if ( !mass.icon ) { + var labelString = mass.mysteryLabel ? questionMarkString : StringUtils.fillIn( massValueString, { mass: mass.mass * 1000 } ); + var label = new Text( labelString, { + font: new PhetFont( { size: 12, weight: 'bold' } ), + centerY: rect.centerY, + centerX: 0, + pickable: false, + maxWidth: 50, + tandem: tandem.createTandem( 'label' ) + } ); - this.addChild( label ); - mass.massProperty.link( function() { - label.center = rect.center; - } ); + this.addChild( label ); - // Adjust the mass label for adjustable masses. - if ( this.mass.adjustable ) { - this.mass.massProperty.link( function( massValue ) { - label.setText( StringUtils.fillIn( massValueString, { mass: Util.roundSymmetric( massValue * 1000 ) } ) ); + mass.massProperty.link( function() { label.center = rect.center; } ); + + // Adjust the mass label for adjustable masses. + if ( this.mass.adjustable ) { + this.mass.massProperty.link( function( massValue ) { + label.setText( StringUtils.fillIn( massValueString, { mass: Util.roundSymmetric( massValue * 1000 ) } ) ); + label.center = rect.center; + } ); + } } // @public {MovableDragHandler} (read-write) diff --git a/js/common/view/MassValueControlPanel.js b/js/common/view/MassValueControlPanel.js index 7d384972..12306286 100644 --- a/js/common/view/MassValueControlPanel.js +++ b/js/common/view/MassValueControlPanel.js @@ -14,6 +14,7 @@ define( function( require ) { var inherit = require( 'PHET_CORE/inherit' ); var massesAndSprings = require( 'MASSES_AND_SPRINGS/massesAndSprings' ); var MassesAndSpringsConstants = require( 'MASSES_AND_SPRINGS/common/MassesAndSpringsConstants' ); + var Node = require( 'SCENERY/nodes/Node' ); var NumberControl = require( 'SCENERY_PHET/NumberControl' ); var Panel = require( 'SUN/Panel' ); var PhetFont = require( 'SCENERY_PHET/PhetFont' ); @@ -28,9 +29,10 @@ define( function( require ) { /** * @param {Mass} mass + * @param {Node} massNodeIcon: icon that represents the mass to be adjusted * @constructor */ - function MassValueControlPanel( mass ) { + function MassValueControlPanel( mass, massNodeIcon ) { assert && assert( mass.adjustable === true, 'MassValueControlPanel should only adjust a mass that is adjustable.' ); @@ -48,6 +50,7 @@ define( function( require ) { } ); var numberControl = new NumberControl( massString, massInGramsProperty, range, { + titleMaxWidth:35 , valuePattern: StringUtils.fillIn( massValueString, { mass: '{0}' } ), @@ -71,7 +74,7 @@ define( function( require ) { } ], layoutFunction: NumberControl.createLayoutFunction1( { - titleXSpacing: 65, + titleXSpacing: 60, ySpacing: 4, arrowButtonsXSpacing: 5 } ), @@ -81,14 +84,21 @@ define( function( require ) { delta: 1 } ); - Panel.call( this, numberControl, { + var contentNode = new Node( { children: [ numberControl, massNodeIcon ] } ); + + Panel.call( this, contentNode, { minWidth: MassesAndSpringsConstants.PANEL_MIN_WIDTH, maxWidth: MassesAndSpringsConstants.PANEL_MAX_WIDTH - 20, cornerRadius: MassesAndSpringsConstants.PANEL_CORNER_RADIUS, fill: 'white', stroke: 'gray', - yMargin: 8 + yMargin: 4, + xMargin: 6 } ); + + massNodeIcon.left= this.bounds.left; + massNodeIcon.top = numberControl.top-7; + massNodeIcon.pickable = false; } massesAndSprings.register( 'MassValueControlPanel', MassValueControlPanel ); diff --git a/js/common/view/OneSpringScreenView.js b/js/common/view/OneSpringScreenView.js index 7f7cb735..587c999c 100644 --- a/js/common/view/OneSpringScreenView.js +++ b/js/common/view/OneSpringScreenView.js @@ -18,9 +18,11 @@ define( function( require ) { var inherit = require( 'PHET_CORE/inherit' ); var HBox = require( 'SCENERY/nodes/HBox' ); var HStrut = require( 'SCENERY/nodes/HStrut' ); + var Mass = require( 'MASSES_AND_SPRINGS/common/model/Mass' ); var massesAndSprings = require( 'MASSES_AND_SPRINGS/massesAndSprings' ); var MassesAndSpringsConstants = require( 'MASSES_AND_SPRINGS/common/MassesAndSpringsConstants' ); var MassesAndSpringsModel = require( 'MASSES_AND_SPRINGS/common/model/MassesAndSpringsModel' ); + var MassNode = require( 'MASSES_AND_SPRINGS/common/view/MassNode' ); var MassValueControlPanel = require( 'MASSES_AND_SPRINGS/common/view/MassValueControlPanel' ); var MovableLineNode = require( 'MASSES_AND_SPRINGS/common/view/MovableLineNode' ); var Node = require( 'SCENERY/nodes/Node' ); @@ -101,8 +103,16 @@ define( function( require ) { this.energyGraphNode = new EnergyGraphNode( model, tandem ); this.energyGraphNode.leftTop = this.visibleBoundsProperty.value.leftTop.plus( new Vector2( this.spacing, this.spacing ) ); + var massNodeIcon = new MassNode( + new Mass( 0.005, 0, model.masses[ 0 ].color, model.gravityProperty, tandem, { icon: true } ), + this.modelViewTransform, + this.visibleBoundsProperty, + model, + tandem.createTandem( 'massIcon' ) ); + var massValueControlPanel = new MassValueControlPanel( model.masses[ 0 ], + massNodeIcon, tandem.createTandem( 'massValueControlPanel' ) );