Home screen and navbar improvements to layout/organization for #725

phetsims · Jul 10, 2021 · 33aab76 · 33aab76
1 parent d7b0d14
commit 33aab76
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/js/HomeScreenButton.js b/js/HomeScreenButton.js
@@ -42,7 +42,6 @@ class HomeScreenButton extends VBox {
 
     options = merge( {
       cursor: 'pointer',
-      resize: true,
       showUnselectedHomeScreenIconFrame: false, // put a frame around unselected home screen icons
 
       // pdom
@@ -107,7 +106,7 @@ class HomeScreenButton extends VBox {
       textPropertyOptions: { phetioReadOnly: true } // text is updated via screen.nameProperty
     } );
 
-    super( merge( { children: [ nodeContainer, new Node( { children: [ text ] } ) ] }, options ) );
+    super( merge( { children: [ nodeContainer, text ] }, options ) );
 
     // @public (read-only)
     this.screen = screen;
@@ -150,9 +149,6 @@ class HomeScreenButton extends VBox {
       text.maxWidth = nodeContainer.width;
       setOpacityAndFill();
       this.setSpacing( data.spacing );
-
-      // update the VBox layout after changing the size of its children
-      this.updateLayout();
     } );
 
     // update the appearance when the button is highlighted
@@ -164,7 +160,6 @@ class HomeScreenButton extends VBox {
     // update the text when the screen name changes
     screen.nameProperty.link( name => {
       text.text = name;
-      this.updateLayout();
     } );
 
     let buttonWasAlreadySelected = false;

diff --git a/js/NavigationBar.js b/js/NavigationBar.js
@@ -234,11 +234,12 @@ class NavigationBar extends Node {
 
       // Compute the distance between *centers* of each button
       const spaceBetweenButtons = maxScreenButtonWidth + SCREEN_BUTTON_SPACING;
-      for ( let i = 0; i < screenButtons.length; i++ ) {
-
+      screenButtons.forEach( ( screenButton, i ) => {
         // Equally space the centers of the buttons around the origin of their parent (screenButtonsContainer)
-        screenButtons[ i ].centerX = spaceBetweenButtons * ( i - ( screenButtons.length - 1 ) / 2 );
-      }
+        screenButton.localBoundsProperty.link( localBounds => {
+          screenButton.centerX = spaceBetweenButtons * ( i - ( screenButtons.length - 1 ) / 2 );
+        } );
+      } );
 
       // @private - Put all screen buttons under a parent, to simplify layout
       this.screenButtonsContainer = new Node( {

diff --git a/js/NavigationBarScreenButton.js b/js/NavigationBarScreenButton.js
@@ -111,11 +111,6 @@ class NavigationBarScreenButton extends Node {
       fill: 'black'
     } );
 
-    this.addChild( iconAndText );
-    this.addChild( overlay );
-    this.addChild( brightenHighlight );
-    this.addChild( darkenHighlight );
-
     // Is this button's screen selected?
     const selectedProperty = new DerivedProperty( [ screenProperty ], currentScreen => ( currentScreen === screen ) );
 
@@ -184,6 +179,20 @@ class NavigationBarScreenButton extends 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;
+    } );
+    iconAndText.boundsProperty.lazyLink( updateLayout );
+    text.boundsProperty.link( updateLayout );
+
+    this.children = [
+      iconAndText,
+      overlay,
+      brightenHighlight,
+      darkenHighlight
+    ];
+
     const needsIconMaxWidth = options.maxButtonWidth && ( this.width > options.maxButtonWidth );
 
     // Constrain text and icon width, if necessary
@@ -196,13 +205,6 @@ class NavigationBarScreenButton extends Node {
       text.maxWidth = this.width;
     }
 
-    // Update the button's text and layout when the screen name changes
-    screen.nameProperty.link( name => {
-      text.text = name;
-    } );
-
-    text.textProperty.link( updateLayout );
-
     needsIconMaxWidth && assert && assert( Utils.toFixed( this.width, 0 ) === Utils.toFixed( options.maxButtonWidth, 0 ),
       `this.width ${this.width} !== options.maxButtonWidth ${options.maxButtonWidth}` );