Adding massNodeIcon to massValueControlPanel. #250

phetsims · Apr 3, 2018 · 9affb3f · 9affb3f
1 parent 247993d
commit 9affb3f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 22 deletions.
diff --git 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.<number>} 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
@@ -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
@@ -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
@@ -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' )
     );