Vertically center value readouts, improve value readouts and only sho…

…w when corresponding checkboxes are on, see #6
phetsims · Feb 23, 2022 · 47afb89 · 47afb89
1 parent c017868
commit 47afb89
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/js/common/view/CASAccordionBox.ts b/js/common/view/CASAccordionBox.ts
@@ -78,6 +78,8 @@ class CASAccordionBox extends AccordionBox {
     // Values come from the height of the expand/collapse button plus the y margin above and below it.
     const fullHeightBackgroundBounds = backgroundNodeBounds.withOffsets( 0, CONTENT_MARGIN * 2 + BUTTON_SIDE_LENGTH, 0, 0 );
 
+    // TODO: we are mutating the position of things being passed in
+
     checkboxPanel.right = backgroundNode.right;
     checkboxPanel.centerY = fullHeightBackgroundBounds.centerY;
     backgroundNode.addChild( checkboxPanel );
@@ -87,6 +89,7 @@ class CASAccordionBox extends AccordionBox {
     backgroundNode.addChild( contentNode );
 
     if ( options.valueReadoutsNode ) {
+      options.valueReadoutsNode.centerY = fullHeightBackgroundBounds.centerY;
       backgroundNode.addChild( options.valueReadoutsNode );
     }
 

diff --git a/js/common/view/ValueReadoutsNode.ts b/js/common/view/ValueReadoutsNode.ts
@@ -14,6 +14,9 @@ import CASModel from '../model/CASModel.js';
 import centerAndSpreadStrings from '../../centerAndSpreadStrings.js';
 import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import Utils from '../../../../dot/js/Utils.js';
+import CASColors from '../CASColors.js';
+import IReadOnlyProperty from '../../../../axon/js/IReadOnlyProperty.js';
+import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 
 type ValueReadoutsNodeSelfOptions = {};
 export type ValueReadoutNodeOptions = ValueReadoutsNodeSelfOptions & VBoxOptions;
@@ -22,20 +25,41 @@ class ValueReadoutsNode extends VBox {
 
   constructor( model: CASModel, providedOptions?: ValueReadoutNodeOptions ) {
 
-    const meanText = new Text( '' );
-    model.meanValueProperty.link( meanValue => {
-      meanText.text = StringUtils.fillIn( centerAndSpreadStrings.meanEqualsValue, {
-        value: meanValue === null ? '?' : Utils.toFixed( meanValue, 1 )
+    const createReadoutText = ( valueProperty: IReadOnlyProperty<number | null>, visibleProperty: IReadOnlyProperty<boolean>,
+                                stringTemplate: string, fill: ColorDef ) => {
+      const text = new Text( '', {
+        fill: fill,
+        font: new PhetFont( 14 )
       } );
-    } );
+      valueProperty.link( value => {
+        text.text = StringUtils.fillIn( stringTemplate, {
 
-    const options = optionize<ValueReadoutNodeOptions, ValueReadoutsNodeSelfOptions, VBoxOptions, 'children'>( {
+          // TODO-DESIGN: Should we keep this '?'? If so, i18n it.
+          value: value === null ? '?' : Utils.toFixed( value, 1 )
+        } );
+      } );
+
+      visibleProperty.link( visible => { text.visible = visible; } );
+
+      return text;
+    };
+
+    const meanText = createReadoutText( model.meanValueProperty, model.isShowingTopMeanProperty,
+      centerAndSpreadStrings.meanEqualsValue, CASColors.meanColorProperty );
+
+    const medianText = createReadoutText( model.medianValueProperty, model.isShowingTopMedianProperty,
+      centerAndSpreadStrings.medianEqualsValue, CASColors.medianColorProperty );
+
+    const options = optionize<ValueReadoutNodeOptions, ValueReadoutsNodeSelfOptions, VBoxOptions>( {
+      align: 'left',
+      spacing: 4,
+      excludeInvisibleChildrenFromBounds: false,
       children: [
-        meanText
+        meanText,
+        medianText
       ]
     }, providedOptions );
 
-
     super( options );
   }
 }