pass in Properties to (Rich)Text instead of their string values, #844

js/Helper.ts

@@ -15,7 +15,7 @@ import Utils from '../../dot/js/Utils.js';
 import Vector2 from '../../dot/js/Vector2.js';
 import MeasuringTapeNode from '../../scenery-phet/js/MeasuringTapeNode.js';
 import PhetFont from '../../scenery-phet/js/PhetFont.js';
-import { CanvasNode, Circle, Color, Display, DOM, DragListener, FireListener, FlowBox, Font, GradientStop, GridBox, HBox, TColor, Image, TPaint, LayoutNode, Line, LinearGradient, mixesHeightSizable, mixesWidthSizable, Node, NodeOptions, NodePattern, Paint, Path, Pattern, PDOMInstance, PressListener, RadialGradient, Rectangle, RichText, RichTextOptions, SceneryEvent, Spacer, Text, TextOptions, Trail, VBox, VDivider, WebGLNode } from '../../scenery/js/imports.js';
+import { CanvasNode, Circle, Color, Display, DOM, DragListener, FireListener, FlowBox, Font, GradientStop, GridBox, HBox, Image, LayoutNode, Line, LinearGradient, mixesHeightSizable, mixesWidthSizable, Node, NodeOptions, NodePattern, Paint, Path, Pattern, PDOMInstance, PressListener, RadialGradient, Rectangle, RichText, RichTextOptions, SceneryEvent, Spacer, TColor, Text, TextOptions, TPaint, Trail, VBox, VDivider, WebGLNode } from '../../scenery/js/imports.js';
 import Panel from '../../sun/js/Panel.js';
 import AquaRadioButtonGroup from '../../sun/js/AquaRadioButtonGroup.js';
 import Tandem from '../../tandem/js/Tandem.js';
@@ -309,9 +309,8 @@ export default class Helper {
         }
       }
     } );
-    const positionText = new RichText( positionTextProperty.value, {
-      font: new PhetFont( 12 ),
-      textProperty: positionTextProperty
+    const positionText = new RichText( positionTextProperty, {
+      font: new PhetFont( 12 )
     } );
 
     const colorTextMap = ( color: Color ) => {
@@ -322,9 +321,8 @@ export default class Helper {
       bidirectional: true,
       map: colorTextMap
     } );
-    const colorText = new RichText( colorTextMap( this.colorProperty.value ), {
-      font: new PhetFont( 12 ),
-      textProperty: colorTextProperty
+    const colorText = new RichText( colorTextProperty, {
+      font: new PhetFont( 12 )
     } );
     this.colorProperty.link( color => {
       colorText.fill = Color.getLuminance( color ) > 128 ? Color.BLACK : Color.WHITE;

js/HomeScreenButton.ts

@@ -104,10 +104,8 @@ class HomeScreenButton extends Voicing( VBox ) {
       pdomVisible: false
     } );
 
-    assert && assert( screen.nameProperty.value, 'name is required for screen.' );
-
     // text for the button
-    const text = new Text( screen.nameProperty.value, {
+    const text = new Text( screen.nameProperty, {
       tandem: options.tandem.createTandem( 'text' ),
       textPropertyOptions: { phetioReadOnly: true } // text is updated via screen.nameProperty
     } );
@@ -162,13 +160,6 @@ class HomeScreenButton extends Voicing( VBox ) {
       setOpacityAndFill();
     } );
 
-    // update the text when the screen name changes
-    screen.nameProperty.link( name => {
-      assert && assert( name, 'name cannot be null.' );
-      text.text = name!;
-    } );
-
-
     // Create a new Utterance that isn't registered through Voicing so that it isn't silenced when the
     // home screen is hidden upon selection. (invisible nodes have their voicing silenced).
     const buttonSelectionUtterance = new Utterance();

js/HomeScreenView.ts

@@ -75,7 +75,7 @@ class HomeScreenView extends ScreenView {
 
     this.selectedScreenProperty = model.selectedScreenProperty;
 
-    const titleText = new Text( simNameProperty.value, {
+    const titleText = new Text( simNameProperty, {
       font: new PhetFont( {
         size: 52,
         family: HomeScreenView.TITLE_FONT_FAMILY
@@ -135,9 +135,6 @@ class HomeScreenView extends ScreenView {
 
     simNameProperty.link( simTitle => {
 
-      // update the titleText when the sim name changes
-      titleText.setText( simTitle );
-
       this.homeScreenScreenSummaryIntro = StringUtils.fillIn( homeScreenDescriptionPatternString, {
         name: simNameProperty.value,
         screens: model.simScreens.length

js/NavigationBar.ts

@@ -100,7 +100,7 @@ class NavigationBar extends Node {
     this.barContents = new Node();
     this.addChild( this.barContents );
 
-    const titleText = new Text( sim.displayedSimNameProperty.value, {
+    const titleText = new Text( sim.displayedSimNameProperty, {
       font: new PhetFont( 16 ),
       fill: sim.lookAndFeel.navigationBarTextFillProperty,
       tandem: tandem.createTandem( 'titleText' ),
@@ -117,10 +117,6 @@ class NavigationBar extends Node {
     } );
     this.barContents.addChild( titleContainerNode );
 
-    sim.displayedSimNameProperty.link( title => {
-      titleText.setText( title );
-    } );
-
     // PhET button, fill determined by state of navigationBarFillProperty
     const phetButton = new PhetButton(
       sim,

js/NavigationBarScreenButton.ts

@@ -101,8 +101,7 @@ class NavigationBarScreenButton extends Voicing( Node ) {
       children: [ icon, iconFrame ]
     } );
 
-    assert && assert( screen.nameProperty.value, 'screen name should be defined' );
-    const text = new Text( screen.nameProperty.value, {
+    const text = new Text( screen.nameProperty, {
       font: new PhetFont( 10 ),
       tandem: options.tandem.createTandem( 'text' ),
       textPropertyOptions: { phetioReadOnly: true } // text is updated via screen.nameProperty
@@ -218,10 +217,7 @@ class NavigationBarScreenButton extends Voicing( Node ) {
       brightenHighlight.center = darkenHighlight.center = iconAndText.center;
     };
 
-    // Update the button's text and layout when the screen name changes
-    screen.nameProperty.link( name => {
-      text.text = name;
-    } );
+    // Update the button's layout when the screen name changes
     iconAndText.boundsProperty.lazyLink( updateLayout );
     text.boundsProperty.link( updateLayout );