factor out NUMBER_DISPLAY_OPTIONS, #98

Signed-off-by: Chris Malley <[email protected]>
phetsims · Nov 2, 2018 · 7bbda21 · 7bbda21
1 parent 91454e8
commit 7bbda21
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 54 deletions.
diff --git a/js/common/GQConstants.js b/js/common/GQConstants.js
@@ -29,7 +29,7 @@ define( require => {
     X_AXIS_RANGE: new Range( -10, 10 ),
     Y_AXIS_RANGE: new Range( -10, 10 ),
 
-    // options applied to all AccordionBoxes
+    // options for all AccordionBox instances
     ACCORDION_BOX_OPTIONS: {
       resize: false,
       fill: GQColors.CONTROL_PANEL_BACKGROUND,
@@ -42,21 +42,31 @@ define( require => {
       contentYMargin: 15
     },
 
-    // options applied to all Panels
+    // options for all Panel instances
     PANEL_OPTIONS: {
       fill: GQColors.CONTROL_PANEL_BACKGROUND,
       cornerRadius: PANEL_CORNER_RADIUS,
       xMargin: 20,
       yMargin: 15
     },
 
-    // options applied to all NumberPickers
+    // options for all NumberPicker instances
     NUMBER_PICKER_OPTIONS: {
       font: new PhetFont( 26 ),
       xMargin: 5,
       touchAreaXDilation: 30
     },
 
+    // options for all NumberDisplay instances
+    NUMBER_DISPLAY_OPTIONS: {
+      font: new PhetFont( { size: 26, weight: 'bold' } ),
+      backgroundFill: null,
+      backgroundStroke: null,
+      backgroundLineWidth: 0,
+      xMargin: 0,
+      yMargin: 0
+    },
+
     // vertical space between checkboxes
     CHECKBOXES_Y_SPACING: 15,
 

diff --git a/js/explore/view/ExploreInteractiveEquationNode.js b/js/explore/view/ExploreInteractiveEquationNode.js
@@ -105,20 +105,9 @@ define( require => {
       assert && assert( bProperty.range, 'missing bProperty.range' );
       assert && assert( cProperty.range, 'missing cProperty.range' );
 
-      // common options for NumberDisplay instances
-      const numberDisplayOptions = {
-        font: new PhetFont( { size: GQConstants.INTERACTIVE_EQUATION_FONT_SIZE, weight: 'bold' } ),
-        backgroundFill: null,
-        backgroundStroke: null,
-        backgroundLineWidth: 0,
-        xMargin: 0,
-        yMargin: 0
-      };
-
-      // options for other parts of the equation
+      // options for parts of the equation
       const equationOptions = {
-        font: new PhetFont( GQConstants.INTERACTIVE_EQUATION_FONT_SIZE ),
-        fill: 'black'
+        font: new PhetFont( GQConstants.INTERACTIVE_EQUATION_FONT_SIZE )
       };
       const xyOptions = _.extend( {}, equationOptions, {
         maxWidth: 20 // determined empirically
@@ -131,10 +120,11 @@ define( require => {
       const equalsNode = new RichText( MathSymbols.EQUAL_TO, equationOptions );
 
       // a value
-      const aNode = new NumberDisplay( aProperty, aProperty.range, _.extend( {}, numberDisplayOptions, {
-        numberFill: GQColors.EXPLORE_A,
-        decimalPlaces: GQConstants.EXPLORE_DECIMALS_A
-      } ) );
+      const aNode = new NumberDisplay( aProperty, aProperty.range,
+        _.extend( {}, GQConstants.NUMBER_DISPLAY_OPTIONS, {
+          numberFill: GQColors.EXPLORE_A,
+          decimalPlaces: GQConstants.EXPLORE_DECIMALS_A
+        } ) );
 
       // x^2
       const xSquaredNode = new RichText( GQSymbols.xSquared, xyOptions );
@@ -143,22 +133,24 @@ define( require => {
       const plusNode = new RichText( MathSymbols.PLUS, equationOptions );
 
       // b value
-      const bNode = new NumberDisplay( bProperty, bProperty.range, _.extend( {}, numberDisplayOptions, {
-        numberFill: GQColors.EXPLORE_B,
-        decimalPlaces: GQConstants.EXPLORE_DECIMALS_B
-      } ) );
+      const bNode = new NumberDisplay( bProperty, bProperty.range,
+        _.extend( {}, GQConstants.NUMBER_DISPLAY_OPTIONS, {
+          numberFill: GQColors.EXPLORE_B,
+          decimalPlaces: GQConstants.EXPLORE_DECIMALS_B
+        } ) );
 
       // x
       const xNode = new RichText( GQSymbols.x, xyOptions );
-      
+
       // +
       const anotherPlusNode = new RichText( MathSymbols.PLUS, equationOptions );
 
       // c value
-      const cNode = new NumberDisplay( cProperty, bProperty.range, _.extend( {}, numberDisplayOptions, {
-        numberFill: GQColors.EXPLORE_C,
-        decimalPlaces: GQConstants.EXPLORE_DECIMALS_C
-      } ) );
+      const cNode = new NumberDisplay( cProperty, bProperty.range,
+        _.extend( {}, GQConstants.NUMBER_DISPLAY_OPTIONS, {
+          numberFill: GQColors.EXPLORE_C,
+          decimalPlaces: GQConstants.EXPLORE_DECIMALS_C
+        } ) );
 
       // y = ax^2 + bx + c
       assert && assert( !options.children, 'EquationNode sets children' );

diff --git a/js/focusanddirectrix/view/FocusAndDirectrixInteractiveEquationNode.js b/js/focusanddirectrix/view/FocusAndDirectrixInteractiveEquationNode.js
@@ -109,20 +109,9 @@ define( require => {
       assert && assert( hProperty.range, 'missing hProperty.range' );
       assert && assert( kProperty.range, 'missing kProperty.range' );
 
-      // common options for NumberDisplay instances
-      const numberDisplayOptions = {
-        font: new PhetFont( { size: GQConstants.INTERACTIVE_EQUATION_FONT_SIZE, weight: 'bold' } ),
-        backgroundFill: null,
-        backgroundStroke: null,
-        backgroundLineWidth: 0,
-        xMargin: 0,
-        yMargin: 0
-      };
-
-      // options for other parts of the equation
+      // options for parts of the equation
       const equationOptions = {
-        font: new PhetFont( GQConstants.INTERACTIVE_EQUATION_FONT_SIZE ),
-        fill: 'black'
+        font: new PhetFont( GQConstants.INTERACTIVE_EQUATION_FONT_SIZE )
       };
       const xyOptions = _.extend( {}, equationOptions, {
         maxWidth: 20 // determined empirically
@@ -141,10 +130,11 @@ define( require => {
       const fourParenNode = new RichText( '4(', equationOptions );
 
       // p value
-      const pNode = new NumberDisplay( pProperty, pProperty.range, _.extend( {}, numberDisplayOptions, {
-        numberFill: GQColors.FOCUS_AND_DIRECTRIX_P,
-        decimalPlaces: GQConstants.FOCUS_AND_DIRECTRIX_DECIMALS_P
-      } ) );
+      const pNode = new NumberDisplay( pProperty, pProperty.range,
+        _.extend( {}, GQConstants.NUMBER_DISPLAY_OPTIONS, {
+          numberFill: GQColors.FOCUS_AND_DIRECTRIX_P,
+          decimalPlaces: GQConstants.FOCUS_AND_DIRECTRIX_DECIMALS_P
+        } ) );
 
       // )
       const parenNode = new RichText( ')', equationOptions );
@@ -180,10 +170,11 @@ define( require => {
       const minusNode = new RichText( MathSymbols.MINUS, equationOptions );
 
       // h value
-      const hNode = new NumberDisplay( hProperty, hProperty.range, _.extend( {}, numberDisplayOptions, {
-        numberFill: GQColors.FOCUS_AND_DIRECTRIX_H,
-        decimalPlaces: GQConstants.FOCUS_AND_DIRECTRIX_DECIMALS_H
-      } ) );
+      const hNode = new NumberDisplay( hProperty, hProperty.range,
+        _.extend( {}, GQConstants.NUMBER_DISPLAY_OPTIONS, {
+          numberFill: GQColors.FOCUS_AND_DIRECTRIX_H,
+          decimalPlaces: GQConstants.FOCUS_AND_DIRECTRIX_DECIMALS_H
+        } ) );
 
       // )^2
       const parenSquaredNode = new RichText( ')<sup>2</sup>', equationOptions );
@@ -192,10 +183,11 @@ define( require => {
       const plusNode = new RichText( MathSymbols.PLUS, equationOptions );
 
       // k value
-      const kNode = new NumberDisplay( kProperty, kProperty.range, _.extend( {}, numberDisplayOptions, {
-        numberFill: GQColors.FOCUS_AND_DIRECTRIX_K,
-        decimalPlaces: GQConstants.FOCUS_AND_DIRECTRIX_DECIMALS_K
-      } ) );
+      const kNode = new NumberDisplay( kProperty, kProperty.range,
+        _.extend( {}, GQConstants.NUMBER_DISPLAY_OPTIONS, {
+          numberFill: GQColors.FOCUS_AND_DIRECTRIX_K,
+          decimalPlaces: GQConstants.FOCUS_AND_DIRECTRIX_DECIMALS_K
+        } ) );
 
       // layout
       equalsNode.left = yNode.right + GQConstants.EQUATION_OPERATOR_SPACING;