stringProperties experimentation

js/common/model/Body.ts

@@ -35,11 +35,6 @@ import IProperty from '../../../../axon/js/IProperty.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import IEmitter from '../../../../axon/js/IEmitter.js';
 
-const moonString = gravityAndOrbitsStrings.moon;
-const planetString = gravityAndOrbitsStrings.planet;
-const satelliteString = gravityAndOrbitsStrings.satellite;
-const starString = gravityAndOrbitsStrings.star;
-
 // reduce Vector2 allocation by reusing this Vector2 in collidesWith computation
 const tempVector = new Vector2( 0, 0 );
 
@@ -68,7 +63,7 @@ export default class Body extends PhetioObject {
   public readonly touchDilation: number;
   private readonly previousPosition: Vector2;
   public readonly type: BodyTypeEnum;
-  public readonly labelString: string | null;
+  public readonly labelStringProperty: IProperty<string> | null;
   public readonly massProperty: RewindableProperty<number>;
   public readonly velocityProperty: RewindableProperty<Vector2>;
   public readonly diameterProperty: NumberProperty;
@@ -203,12 +198,12 @@ export default class Body extends PhetioObject {
     this.rotationPeriod = options.rotationPeriod;
 
     // (read-only) - passed to visual labels, must be translatable
-    this.labelString = this.type === 'planet' ? planetString :
-                       this.type === 'satellite' ? satelliteString :
-                       this.type === 'star' ? starString :
-                       this.type === 'moon' ? moonString :
+    this.labelStringProperty = this.type === 'planet' ? gravityAndOrbitsStrings.planetProperty :
+                       this.type === 'satellite' ? gravityAndOrbitsStrings.satelliteProperty :
+                       this.type === 'star' ? gravityAndOrbitsStrings.starProperty :
+                       this.type === 'moon' ? gravityAndOrbitsStrings.moonProperty :
                        null;
-    assert && assert( this.labelString, `no label found for body with identifier ${this.type}` );
+    assert && assert( this.labelStringProperty, `no label found for body with identifier ${this.type}` );
 
     assert && assert( renderer !== null );
 

js/common/view/BodyNode.ts

@@ -165,25 +165,30 @@ class BodyNode extends Node {
     node.addChild( new Line( tail.x, tail.y, tip.x, tip.y, {
       stroke: GravityAndOrbitsColors.bodyLabelIndicatorProperty
     } ) );
-    const labelNode = new Text( body.labelString!, {
+    const labelNode = new Text( body.labelStringProperty!.value, {
       font: new PhetFont( 18 ),
       fill: GravityAndOrbitsColors.foregroundProperty,
       maxWidth: 65,
-      tandem: labelNodeTandem
+      tandem: labelNodeTandem,
+      textProperty: body.labelStringProperty!
     } );
 
     // Eliminate artifacts seen on Windows chrome by adding an invisible rectangle underlay, see
     // https://github.com/phetsims/QA/issues/519
     // 1px is too small for ?stringTest=long because the underlay rectangle is reduced in size as well
-    const antiArtifactRectangle = new Rectangle( labelNode.bounds.dilated( 10 ), {
-
+    const antiArtifactRectangle = new Rectangle( {
       // A rectangle with no fill doesn't paint, so we paint with low or no opacity to make sure that region is painted
       fill: 'transparent'
     } );
+    labelNode.boundsProperty.link( bounds => {
+      antiArtifactRectangle.rectBounds = bounds.dilated( 10 );
+    } );
     const labelWithAntiArtifactRectangle = new Node( {
-      children: [ antiArtifactRectangle, labelNode ],
-      centerX: tail.x,
-      y: tail.y - this.height - 10
+      children: [ antiArtifactRectangle, labelNode ]
+    } );
+    labelWithAntiArtifactRectangle.localBoundsProperty.link( () => {
+      labelWithAntiArtifactRectangle.centerX = tail.x;
+      labelWithAntiArtifactRectangle.y = tail.y - this.bodyRenderer.height - 10;
     } );
     node.addChild( labelWithAntiArtifactRectangle );
 

js/common/view/CheckboxPanel.ts

@@ -29,13 +29,6 @@ import GravityAndOrbitsGridNode from './GravityAndOrbitsGridNode.js';
 import GravityAndOrbitsModel from '../model/GravityAndOrbitsModel.js';
 import optionize, { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 
-const gravityForceString = gravityAndOrbitsStrings.gravityForce;
-const gridString = gravityAndOrbitsStrings.grid;
-const massString = gravityAndOrbitsStrings.mass;
-const measuringTapeString = gravityAndOrbitsStrings.measuringTape;
-const pathString = gravityAndOrbitsStrings.path;
-const velocityString = gravityAndOrbitsStrings.velocity;
-
 // constants
 const FONT = new PhetFont( 18 );
 const ARROW_Y_COORDINATE = -10;
@@ -71,12 +64,12 @@ class CheckboxPanel extends VBox {
     const children = [];
     const options = combineOptions<CheckboxPanelOptions>( { tandem: Tandem.OPTIONAL }, providedOptions );
 
-    const gravityForceTextNode = new Text( gravityForceString, TEXT_OPTIONS );
-    const velocityTextNode = new Text( velocityString, TEXT_OPTIONS );
-    const massTextNode = new Text( massString, TEXT_OPTIONS );
-    const pathTextNode = new Text( pathString, TEXT_OPTIONS );
-    const gridTextNode = new Text( gridString, TEXT_OPTIONS );
-    const measuringTapeTextNode = new Text( measuringTapeString, TEXT_OPTIONS );
+    const gravityForceTextNode = new Text( gravityAndOrbitsStrings.gravityForce, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.gravityForceProperty } );
+    const velocityTextNode = new Text( gravityAndOrbitsStrings.velocity, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.velocityProperty } );
+    const massTextNode = new Text( gravityAndOrbitsStrings.mass, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.massProperty } );
+    const pathTextNode = new Text( gravityAndOrbitsStrings.path, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.pathProperty } );
+    const gridTextNode = new Text( gravityAndOrbitsStrings.grid, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.gridProperty } );
+    const measuringTapeTextNode = new Text( gravityAndOrbitsStrings.measuringTape, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.measuringTapeProperty } );
     const optionsWithTandem = ( tandemName: string ) => merge( { tandem: options.tandem!.createTandem( tandemName ) }, CHECKBOX_OPTIONS );
 
     // gravity force checkbox

js/common/view/GravityControl.ts

@@ -19,8 +19,6 @@ import { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 
 const gravityString = gravityAndOrbitsStrings.gravity;
-const offString = gravityAndOrbitsStrings.off;
-const onString = gravityAndOrbitsStrings.on;
 
 // constants
 const FONT = new PhetFont( 14 );
@@ -43,8 +41,8 @@ class GravityControl extends Node {
     }, providedOptions );
 
     const gravityTextNode = new Text( gravityString, TEXT_OPTIONS );
-    const onTextNode = new Text( onString, TEXT_OPTIONS );
-    const offTextNode = new Text( offString, TEXT_OPTIONS );
+    const onTextNode = new Text( gravityAndOrbitsStrings.on, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.onProperty } );
+    const offTextNode = new Text( gravityAndOrbitsStrings.off, { ...TEXT_OPTIONS, textProperty: gravityAndOrbitsStrings.offProperty } );
 
     this.addLinkedElement( gravityEnabledProperty, {
       tandem: options.tandem.createTandem( 'gravityEnabledProperty' )

js/common/view/MassControlPanel.ts

@@ -19,18 +19,13 @@ import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import { EmptySelfOptions, optionize3, OptionizeDefaults } from '../../../../phet-core/js/optionize.js';
 import merge from '../../../../phet-core/js/merge.js';
 
-const moonMassString = gravityAndOrbitsStrings.moonMass;
-const planetMassString = gravityAndOrbitsStrings.planetMass;
-const satelliteMassString = gravityAndOrbitsStrings.satelliteMass;
-const starMassString = gravityAndOrbitsStrings.starMass;
-
 // constants
 const CONTROL_FONT = new PhetFont( 14 );
 const LABEL_MAP = {
-  planet: planetMassString,
-  satellite: satelliteMassString,
-  star: starMassString,
-  moon: moonMassString
+  planet: gravityAndOrbitsStrings.planetMassProperty,
+  satellite: gravityAndOrbitsStrings.satelliteMassProperty,
+  star: gravityAndOrbitsStrings.starMassProperty,
+  moon: gravityAndOrbitsStrings.moonMassProperty
 };
 
 type MassControlPanelOptions = VBoxOptions & PickRequired<VBoxOptions, 'tandem'>;
@@ -55,12 +50,13 @@ class MassControlPanel extends VBox {
       const massSettableBodyTandem = options.tandem.createTandem( `${massSettableBody.tandemName}ControlNode` );
       const sliderNode = new Node( { tandem: massSettableBodyTandem } );
 
-      const label = new Text( LABEL_MAP[ massSettableBody.type ], {
+      const label = new Text( LABEL_MAP[ massSettableBody.type ].value, {
         font: CONTROL_FONT,
         fontWeight: 'bold',
         fill: GravityAndOrbitsColors.foregroundProperty,
         maxWidth: 175,
-        tandem: massSettableBodyTandem.createTandem( 'massLabel' )
+        tandem: massSettableBodyTandem.createTandem( 'massLabel' ),
+        textProperty: LABEL_MAP[ massSettableBody.type ]
       } );
 
       const icon = new Node( {

js/common/view/TimeCounter.ts

@@ -19,8 +19,6 @@ import gravityAndOrbitsStrings from '../../gravityAndOrbitsStrings.js';
 import GravityAndOrbitsColors from '../GravityAndOrbitsColors.js';
 import GravityAndOrbitsClock from '../model/GravityAndOrbitsClock.js';
 
-const clearString = gravityAndOrbitsStrings.clear;
-
 // constants
 const FONT_SIZE = 22;
 
@@ -46,11 +44,12 @@ class TimeCounter extends Node {
       maxWidth: 200
     } );
 
-    const clearButton = new TextPushButton( clearString, {
+    const clearButton = new TextPushButton( gravityAndOrbitsStrings.clearProperty, {
       font: new PhetFont( FONT_SIZE ),
       listener: () => clock.setSimulationTime( 0 ),
       maxWidth: 200,
-      tandem: tandem.createTandem( 'clearButton' )
+      tandem: tandem.createTandem( 'clearButton' ),
+      widthSizable: true
     } );
 
     // update text representation of day

js/gravity-and-orbits-main.ts

@@ -17,9 +17,6 @@ import gravityAndOrbitsStrings from './gravityAndOrbitsStrings.js';
 import ModelScreen from './model/ModelScreen.js';
 import ToScaleScreen from './toScale/ToScaleScreen.js';
 
-// @ts-ignore
-const gravityAndOrbitsTitleString = gravityAndOrbitsStrings[ 'gravity-and-orbits' ].title;
-
 simLauncher.launch( () => {
 
   const credits: CreditsData = {
@@ -53,5 +50,5 @@ simLauncher.launch( () => {
     backgroundColorProperty: backgroundColorProperty,
     tandem: Tandem.ROOT.createTandem( 'toScaleScreen' )
   } );
-  new Sim( gravityAndOrbitsTitleString, [ modelScreen, toScaleScreen ], simOptions ).start();
+  new Sim( gravityAndOrbitsStrings[ 'gravity-and-orbits' ].titleProperty, [ modelScreen, toScaleScreen ], simOptions ).start();
 } );

js/gravityAndOrbitsStrings.ts

@@ -5,53 +5,92 @@
  */
 /* eslint-disable */
 import getStringModule from '../../chipper/js/getStringModule.js';
+import Property from '../../axon/js/Property.js';
 import gravityAndOrbits from './gravityAndOrbits.js';
 
 type StringsType = {
   'gravity-and-orbits': {
     'title': string;
+    'titleProperty': Property<string>;
   };
   'earth': string;
+  'earthProperty': Property<string>;
   'earthMasses': string;
+  'earthMassesProperty': Property<string>;
   'ourSun': string;
+  'ourSunProperty': Property<string>;
   'earthDay': string;
+  'earthDayProperty': Property<string>;
   'planet': string;
+  'planetProperty': Property<string>;
   'planetMass': string;
+  'planetMassProperty': Property<string>;
   'velocity': string;
+  'velocityProperty': Property<string>;
   'earthDays': string;
+  'earthDaysProperty': Property<string>;
   'measuringTape': string;
+  'measuringTapeProperty': Property<string>;
   'billionBillionSpaceStationMasses': string;
+  'billionBillionSpaceStationMassesProperty': Property<string>;
   'spaceStationMass': string;
+  'spaceStationMassProperty': Property<string>;
   'gravityForce': string;
+  'gravityForceProperty': Property<string>;
   'model': string;
+  'modelProperty': Property<string>;
   'moon': string;
+  'moonProperty': Property<string>;
   'moonMass': string;
+  'moonMassProperty': Property<string>;
   'thousandEarthMasses': string;
+  'thousandEarthMassesProperty': Property<string>;
   'on': string;
+  'onProperty': Property<string>;
   'kilometers': string;
+  'kilometersProperty': Property<string>;
   'pattern': {
     '0value': {
       '1units': string;
+      '1unitsProperty': Property<string>;
     }
   };
   'clear': string;
+  'clearProperty': Property<string>;
   'spaceStation': string;
+  'spaceStationProperty': Property<string>;
   'satellite': string;
+  'satelliteProperty': Property<string>;
   'satelliteMass': string;
+  'satelliteMassProperty': Property<string>;
   'earthMinutes': string;
+  'earthMinutesProperty': Property<string>;
   'gravity': string;
+  'gravityProperty': Property<string>;
   'grid': string;
+  'gridProperty': Property<string>;
   'mass': string;
+  'massProperty': Property<string>;
   'off': string;
+  'offProperty': Property<string>;
   'path': string;
+  'pathProperty': Property<string>;
   'ourMoon': string;
+  'ourMoonProperty': Property<string>;
   'earthMinute': string;
+  'earthMinuteProperty': Property<string>;
   'returnObjects': string;
+  'returnObjectsProperty': Property<string>;
   'star': string;
+  'starProperty': Property<string>;
   'starMass': string;
+  'starMassProperty': Property<string>;
   'earthMass': string;
+  'earthMassProperty': Property<string>;
   'toScale': string;
+  'toScaleProperty': Property<string>;
   'v': string;
+  'vProperty': Property<string>;
 };
 
 const gravityAndOrbitsStrings = getStringModule( 'GRAVITY_AND_ORBITS' ) as StringsType;

js/model/ModelScreen.ts

@@ -16,13 +16,11 @@ import gravityAndOrbitsStrings from '../gravityAndOrbitsStrings.js';
 import ModelModel from './ModelModel.js';
 import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js';
 
-const modelString = gravityAndOrbitsStrings.model;
-
 class ModelScreen extends Screen<ModelModel, GravityAndOrbitsScreenView> {
   public constructor( providedOptions?: ScreenOptions ) {
 
     const options = optionize<ScreenOptions, EmptySelfOptions, ScreenOptions>()( {
-      name: modelString,
+      name: gravityAndOrbitsStrings.modelProperty,
 
       homeScreenIcon: new ScreenIcon( new Image( modelIcon_png ), {
         maxIconWidthProportion: 1,

js/toScale/ToScaleScreen.ts

@@ -16,12 +16,10 @@ import gravityAndOrbitsStrings from '../gravityAndOrbitsStrings.js';
 import ToScaleModel from './ToScaleModel.js';
 import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js';
 
-const toScaleString = gravityAndOrbitsStrings.toScale;
-
 class ToScaleScreen extends Screen<ToScaleModel, GravityAndOrbitsScreenView> {
   public constructor( providedOptions?: ScreenOptions ) {
     const options = optionize<ScreenOptions, EmptySelfOptions, ScreenOptions>()( {
-      name: toScaleString,
+      name: gravityAndOrbitsStrings.toScaleProperty,
 
       homeScreenIcon: new ScreenIcon( new Image( toScaleIcon_png ), {
         maxIconWidthProportion: 1,