change GQSymbols to string Properties, #178

js/common/GQSymbols.ts

@@ -9,19 +9,20 @@
 import MathSymbolFont from '../../../scenery-phet/js/MathSymbolFont.js';
 import graphingQuadratics from '../graphingQuadratics.js';
 import GraphingQuadraticsStrings from '../GraphingQuadraticsStrings.js';
+import DerivedProperty from '../../../axon/js/DerivedProperty.js';
 
-const x = MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.x );
+const xMarkupStringProperty = MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.xStringProperty );
 
 const GQSymbols = {
-  a: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.a ),
-  b: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.b ),
-  c: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.c ),
-  h: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.h ),
-  k: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.k ),
-  p: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.p ),
-  x: x,
-  xSquared: `${x}<sup>2</sup>`,
-  y: MathSymbolFont.getRichTextMarkup( GraphingQuadraticsStrings.y )
+  aMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.aStringProperty ),
+  bMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.bStringProperty ),
+  cMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.cStringProperty ),
+  hMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.hStringProperty ),
+  kMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.kStringProperty ),
+  pMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.pStringProperty ),
+  xMarkupStringProperty: xMarkupStringProperty,
+  xSquaredMarkupStringProperty: new DerivedProperty( [ xMarkupStringProperty ], x => `${x}<sup>2</sup>` ),
+  yMarkupStringProperty: MathSymbolFont.createDerivedProperty( GraphingQuadraticsStrings.yStringProperty )
 };
 
 graphingQuadratics.register( 'GQSymbols', GQSymbols );

js/common/view/GQCheckbox.ts

@@ -24,6 +24,7 @@ import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js';
 import Manipulator from '../../../../graphing-lines/js/common/view/manipulator/Manipulator.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 
 type SelfOptions = {
   string: TReadOnlyProperty<string> | string; // required string for text
@@ -70,7 +71,11 @@ export default class GQCheckbox extends Checkbox {
    */
   public static createQuadraticTermCheckbox( property: Property<boolean>, tandem: Tandem ): GQCheckbox {
     return new GQCheckbox( property, {
-      string: `${GQSymbols.y} ${MathSymbols.EQUAL_TO} ${GQSymbols.a}${GQSymbols.xSquared}`, // y = ax^2
+
+      // y = ax^2
+      string: new DerivedProperty(
+        [ GQSymbols.yMarkupStringProperty, GQSymbols.aMarkupStringProperty, GQSymbols.xSquaredMarkupStringProperty ],
+        ( y, a, x2 ) => `${y} ${MathSymbols.EQUAL_TO} ${a}${x2}` ),
       textFill: GQColors.QUADRATIC_TERM,
       tandem: tandem,
       phetioDocumentation: 'checkbox that makes the quadratic term (y = ax^2) visible on the graph'
@@ -82,7 +87,11 @@ export default class GQCheckbox extends Checkbox {
    */
   public static createLinearTermCheckbox( property: Property<boolean>, tandem: Tandem ): GQCheckbox {
     return new GQCheckbox( property, {
-      string: `${GQSymbols.y} ${MathSymbols.EQUAL_TO} ${GQSymbols.b}${GQSymbols.x}`, // y = bx
+
+      // y = bx
+      string: new DerivedProperty(
+        [ GQSymbols.yMarkupStringProperty, GQSymbols.bMarkupStringProperty, GQSymbols.xMarkupStringProperty ],
+        ( y, b, x ) => `${y} ${MathSymbols.EQUAL_TO} ${b}${x}` ),
       textFill: GQColors.LINEAR_TERM,
       tandem: tandem,
       phetioDocumentation: 'checkbox that makes the linear term (y = bx) visible on the graph'
@@ -94,7 +103,11 @@ export default class GQCheckbox extends Checkbox {
    */
   public static createConstantTermCheckbox( property: Property<boolean>, tandem: Tandem ): GQCheckbox {
     return new GQCheckbox( property, {
-      string: `${GQSymbols.y} ${MathSymbols.EQUAL_TO} ${GQSymbols.c}`, // y = c
+
+      // y = c
+      string: new DerivedProperty(
+        [ GQSymbols.yMarkupStringProperty, GQSymbols.cMarkupStringProperty ],
+        ( y, c ) => `${y} ${MathSymbols.EQUAL_TO} ${c}` ),
       textFill: GQColors.CONSTANT_TERM,
       tandem: tandem,
       phetioDocumentation: 'checkbox that makes the constant term (y = c) visible on the graph'

js/common/view/GQEquationFactory.ts

@@ -17,7 +17,7 @@ import GQSymbols from '../GQSymbols.js';
 import Quadratic from '../model/Quadratic.js';
 
 // constants
-const Y_EQUALS_STRING = `${GQSymbols.y} ${MathSymbols.EQUAL_TO}`; // 'y ='
+const Y_EQUALS_STRING = `${GQSymbols.yMarkupStringProperty.value} ${MathSymbols.EQUAL_TO}`; // 'y ='
 
 const GQEquationFactory = {
 
@@ -51,7 +51,7 @@ const GQEquationFactory = {
           equationString += a; // ax^2
         }
 
-        equationString += GQSymbols.xSquared;
+        equationString += GQSymbols.xSquaredMarkupStringProperty.value;
 
         if ( b !== 0 || c !== 0 ) {
           equationString += ' ';
@@ -68,15 +68,15 @@ const GQEquationFactory = {
           else if ( b !== 1 ) {
             equationString += b; // bx
           }
-          equationString += GQSymbols.x;
+          equationString += GQSymbols.xMarkupStringProperty.value;
         }
         else {
           equationString += ( b > 0 ) ? MathSymbols.PLUS : MathSymbols.MINUS;
           equationString += ' ';
           if ( Math.abs( b ) !== 1 ) {
             equationString += Math.abs( b );
           }
-          equationString += GQSymbols.x;
+          equationString += GQSymbols.xMarkupStringProperty.value;
         }
 
         if ( c !== 0 ) {
@@ -133,10 +133,10 @@ const GQEquationFactory = {
       }
 
       if ( h === 0 ) {
-        equationString += GQSymbols.xSquared;
+        equationString += GQSymbols.xSquaredMarkupStringProperty.value;
       }
       else {
-        equationString += `(${GQSymbols.x} `;
+        equationString += `(${GQSymbols.xMarkupStringProperty.value} `;
         equationString += ( h > 0 ) ? MathSymbols.MINUS : MathSymbols.PLUS;
         equationString += ` ${Math.abs( h )}`;
         equationString += ')<sup>2</sup>';
@@ -172,7 +172,7 @@ const GQEquationFactory = {
    * Creates the RichText string for the axis of symmetry equation.
    */
   createAxisOfSymmetry( axisOfSymmetry: number ): string {
-    return `${GQSymbols.x} ${MathSymbols.EQUAL_TO} ${Utils.toFixedNumber( axisOfSymmetry, GQConstants.AXIS_OF_SYMMETRY_DECIMALS )}`;
+    return `${GQSymbols.xMarkupStringProperty.value} ${MathSymbols.EQUAL_TO} ${Utils.toFixedNumber( axisOfSymmetry, GQConstants.AXIS_OF_SYMMETRY_DECIMALS )}`;
   }
 };
 

js/common/view/GQGraphNode.ts

@@ -51,7 +51,7 @@ export default class GQGraphNode extends Node {
     super( options );
 
     // Cartesian coordinates graph
-    const graphNode = new GraphNode( model.graph, model.modelViewTransform, GQSymbols.x, GQSymbols.y );
+    const graphNode = new GraphNode( model.graph, model.modelViewTransform, GQSymbols.xMarkupStringProperty, GQSymbols.yMarkupStringProperty );
 
     // Interactive quadratic curve
     const interactiveQuadraticNode = new QuadraticNode(

js/common/view/GQSlider.ts

@@ -26,6 +26,7 @@ import { RichText, TColor, Text } from '../../../../scenery/js/imports.js';
 import VSlider, { VSliderOptions } from '../../../../sun/js/VSlider.js';
 import graphingQuadratics from '../../graphingQuadratics.js';
 import GQConstants from '../GQConstants.js';
+import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 
 type TransformFunction = ( value: number ) => number;
 
@@ -69,11 +70,11 @@ export type GQSliderOptions = SelfOptions &
 export default class GQSlider extends VSlider {
 
   /**
-   * @param symbol - the coefficient's symbol
+   * @param symbolStringProperty - the coefficient's symbol
    * @param coefficientProperty - the coefficient's value
    * @param [providedOptions]
    */
-  public constructor( symbol: string, coefficientProperty: NumberProperty, providedOptions: GQSliderOptions ) {
+  public constructor( symbolStringProperty: TReadOnlyProperty<string>, coefficientProperty: NumberProperty, providedOptions: GQSliderOptions ) {
 
     const options = optionize<GQSliderOptions, StrictOmit<SelfOptions, 'snapToZeroEpsilon'>, VSliderOptions>()( {
 
@@ -173,7 +174,7 @@ export default class GQSlider extends VSlider {
     }
 
     // Label that appears above the slider.
-    const label = new RichText( symbol, {
+    const label = new RichText( symbolStringProperty, {
       font: GQConstants.SLIDER_LABEL_FONT,
       fill: options.labelColor,
       centerX: this.x,

js/common/view/LinearSlider.ts

@@ -12,6 +12,7 @@ import { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
 import graphingQuadratics from '../../graphingQuadratics.js';
 import GQSlider, { GQSliderOptions } from './GQSlider.js';
+import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 
 type SelfOptions = EmptySelfOptions;
 
@@ -20,12 +21,12 @@ type LinearSliderOptions = SelfOptions & StrictOmit<GQSliderOptions, 'map' | 'in
 export default class LinearSlider extends GQSlider {
 
   /**
-   * @param symbol - the coefficient's symbol
+   * @param symbolStringProperty - the coefficient's symbol
    * @param coefficientProperty - the coefficient's value
    * @param [provideOptions]
    */
-  public constructor( symbol: string, coefficientProperty: NumberProperty, provideOptions: LinearSliderOptions ) {
-    super( symbol, coefficientProperty, provideOptions );
+  public constructor( symbolStringProperty: TReadOnlyProperty<string>, coefficientProperty: NumberProperty, provideOptions: LinearSliderOptions ) {
+    super( symbolStringProperty, coefficientProperty, provideOptions );
   }
 }
 

js/common/view/QuadraticSlider.ts

@@ -12,6 +12,7 @@ import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
 import graphingQuadratics from '../../graphingQuadratics.js';
 import GQSlider, { GQSliderOptions } from './GQSlider.js';
+import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 
 type SelfOptions = EmptySelfOptions;
 
@@ -20,11 +21,11 @@ type QuadraticSliderOptions = SelfOptions & StrictOmit<GQSliderOptions, 'map' |
 export default class QuadraticSlider extends GQSlider {
 
   /**
-   * @param symbol - the coefficient's symbol
+   * @param symbolStringProperty - the coefficient's symbol
    * @param coefficientProperty - the coefficient's value
    * @param [providedOptions]
    */
-  public constructor( symbol: string, coefficientProperty: NumberProperty, providedOptions: QuadraticSliderOptions ) {
+  public constructor( symbolStringProperty: TReadOnlyProperty<string>, coefficientProperty: NumberProperty, providedOptions: QuadraticSliderOptions ) {
 
     assert && assert( Math.abs( coefficientProperty.range.min ) === coefficientProperty.range.max,
       `symmetrical range is required: ${coefficientProperty.range}` );
@@ -41,7 +42,7 @@ export default class QuadraticSlider extends GQSlider {
       inverseMap: value => ( Math.sign( value ) * a * value * value )
     }, providedOptions );
 
-    super( symbol, coefficientProperty, options );
+    super( symbolStringProperty, coefficientProperty, options );
   }
 }
 

js/explore/view/ExploreInteractiveEquationNode.ts

@@ -49,20 +49,20 @@ export default class ExploreInteractiveEquationNode extends Node {
     const equationNode = new EquationNode( aProperty, bProperty, cProperty, options.tandem.createTandem( 'equationNode' ) );
 
     // coefficient controls (labeled sliders)
-    const aSlider = new QuadraticSlider( GQSymbols.a, aProperty, {
+    const aSlider = new QuadraticSlider( GQSymbols.aMarkupStringProperty, aProperty, {
       interval: GQConstants.EXPLORE_INTERVAL_A,
       snapToZeroEpsilon: GQConstants.EXPLORE_SNAP_TO_ZERO_EPSILON_A,
       labelColor: GQColors.EXPLORE_A,
       tandem: options.tandem.createTandem( 'aSlider' ),
       phetioDocumentation: StringUtils.fillIn( GQConstants.SLIDER_DOC, { symbol: 'a' } )
     } );
-    const bSlider = new LinearSlider( GQSymbols.b, bProperty, {
+    const bSlider = new LinearSlider( GQSymbols.bMarkupStringProperty, bProperty, {
       interval: GQConstants.EXPLORE_INTERVAL_B,
       labelColor: GQColors.EXPLORE_B,
       tandem: options.tandem.createTandem( 'bSlider' ),
       phetioDocumentation: StringUtils.fillIn( GQConstants.SLIDER_DOC, { symbol: 'b' } )
     } );
-    const cSlider = new LinearSlider( GQSymbols.c, cProperty, {
+    const cSlider = new LinearSlider( GQSymbols.cMarkupStringProperty, cProperty, {
       interval: GQConstants.EXPLORE_INTERVAL_C,
       labelColor: GQColors.EXPLORE_C,
       tandem: options.tandem.createTandem( 'cSlider' ),
@@ -112,7 +112,7 @@ class EquationNode extends Node {
     } );
 
     // y
-    const yNode = new RichText( GQSymbols.y, xyOptions );
+    const yNode = new RichText( GQSymbols.yMarkupStringProperty, xyOptions );
 
     // =
     const equalsNode = new RichText( MathSymbols.EQUAL_TO, equationOptions );
@@ -127,7 +127,7 @@ class EquationNode extends Node {
       } ) );
 
     // x^2
-    const xSquaredNode = new RichText( GQSymbols.xSquared, xyOptions );
+    const xSquaredNode = new RichText( GQSymbols.xSquaredMarkupStringProperty, xyOptions );
 
     // + 
     const plusNode = new RichText( MathSymbols.PLUS, equationOptions );
@@ -142,7 +142,7 @@ class EquationNode extends Node {
       } ) );
 
     // x
-    const xNode = new RichText( GQSymbols.x, xyOptions );
+    const xNode = new RichText( GQSymbols.xMarkupStringProperty, xyOptions );
 
     // +
     const anotherPlusNode = new RichText( MathSymbols.PLUS, equationOptions );

js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts

@@ -14,6 +14,7 @@ import Tandem from '../../../../tandem/js/Tandem.js';
 import GQConstants from '../../common/GQConstants.js';
 import GQSymbols from '../../common/GQSymbols.js';
 import graphingQuadratics from '../../graphingQuadratics.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 
 const FONT = GQConstants.INTERACTIVE_EQUATION_FONT;
 const FRACTION_FONT = GQConstants.INTERACTIVE_EQUATION_FRACTION_FONT;
@@ -31,8 +32,9 @@ export default class FocusAndDirectrixEquationNode extends Node {
     };
 
     // y =
-    const yEqualsString = `${GQSymbols.y} ${MathSymbols.EQUAL_TO}`;
-    const yEqualsNode = new RichText( yEqualsString, {
+    const yEqualsStringProperty = new DerivedProperty( [ GQSymbols.yMarkupStringProperty ],
+      y => `${y} ${MathSymbols.EQUAL_TO}` );
+    const yEqualsNode = new RichText( yEqualsStringProperty, {
       font: FONT,
       fill: COLOR
     } );
@@ -44,8 +46,9 @@ export default class FocusAndDirectrixEquationNode extends Node {
     } );
 
     // 4p
-    const denominatorString = `4${GQSymbols.p}`;
-    const denominatorNode = new RichText( denominatorString, {
+    const denominatorStringProperty = new DerivedProperty( [ GQSymbols.pMarkupStringProperty ],
+      p => `4${p}` );
+    const denominatorNode = new RichText( denominatorStringProperty, {
       font: FRACTION_FONT,
       fill: COLOR
     } );
@@ -65,14 +68,19 @@ export default class FocusAndDirectrixEquationNode extends Node {
     } );
 
     // (x - h)^2 + k
-    const rightString = StringUtils.fillIn( '({{x}} {{minus}} {{h}})<sup>2</sup> {{plus}} {{k}}', {
-      x: GQSymbols.x,
-      h: GQSymbols.h,
-      k: GQSymbols.k,
-      plus: MathSymbols.PLUS,
-      minus: MathSymbols.MINUS
-    } );
-    const rightNode = new RichText( rightString, {
+    const rightStringProperty = new DerivedProperty( [
+      GQSymbols.xMarkupStringProperty,
+      GQSymbols.hMarkupStringProperty,
+      GQSymbols.kMarkupStringProperty
+    ], ( x, h, k ) =>
+      StringUtils.fillIn( '({{x}} {{minus}} {{h}})<sup>2</sup> {{plus}} {{k}}', {
+        x: x,
+        h: h,
+        k: k,
+        plus: MathSymbols.PLUS,
+        minus: MathSymbols.MINUS
+      } ) );
+    const rightNode = new RichText( rightStringProperty, {
       font: FONT,
       fill: COLOR
     } );

js/focusanddirectrix/view/FocusAndDirectrixInteractiveEquationNode.ts

@@ -40,7 +40,7 @@ export default class FocusAndDirectrixInteractiveEquationNode extends Node {
     const equationNode = new EquationNode( pProperty, hProperty, kProperty, tandem.createTandem( 'equationNode' ) );
 
     // value sliders
-    const pSlider = new LinearSlider( GQSymbols.p, pProperty, {
+    const pSlider = new LinearSlider( GQSymbols.pMarkupStringProperty, pProperty, {
 
       // p=0 is not supported by this sim because it results in division by zero for 1/(4p).
       // see https://github.com/phetsims/graphing-quadratics/issues/31
@@ -50,13 +50,13 @@ export default class FocusAndDirectrixInteractiveEquationNode extends Node {
       tandem: tandem.createTandem( 'pSlider' ),
       phetioDocumentation: StringUtils.fillIn( GQConstants.SLIDER_DOC, { symbol: 'p' } )
     } );
-    const hSlider = new LinearSlider( GQSymbols.h, hProperty, {
+    const hSlider = new LinearSlider( GQSymbols.hMarkupStringProperty, hProperty, {
       interval: GQConstants.FOCUS_AND_DIRECTRIX_INTERVAL_H,
       labelColor: GQColors.FOCUS_AND_DIRECTRIX_H,
       tandem: tandem.createTandem( 'hSlider' ),
       phetioDocumentation: StringUtils.fillIn( GQConstants.SLIDER_DOC, { symbol: 'h' } )
     } );
-    const kSlider = new LinearSlider( GQSymbols.k, kProperty, {
+    const kSlider = new LinearSlider( GQSymbols.kMarkupStringProperty, kProperty, {
       interval: GQConstants.FOCUS_AND_DIRECTRIX_INTERVAL_K,
       labelColor: GQColors.FOCUS_AND_DIRECTRIX_K,
       tandem: tandem.createTandem( 'kSlider' ),
@@ -106,7 +106,7 @@ class EquationNode extends Node {
     } );
 
     // y
-    const yNode = new RichText( GQSymbols.y, xyOptions );
+    const yNode = new RichText( GQSymbols.yMarkupStringProperty, xyOptions );
 
     // =
     const equalsNode = new RichText( MathSymbols.EQUAL_TO, equationOptions );
@@ -154,7 +154,7 @@ class EquationNode extends Node {
     const anotherParenNode = new RichText( '(', equationOptions );
 
     // x
-    const xNode = new RichText( GQSymbols.x, xyOptions );
+    const xNode = new RichText( GQSymbols.xMarkupStringProperty, xyOptions );
 
     // -
     const minusNode = new RichText( MathSymbols.MINUS, equationOptions );