dynamic layout fixes, #319

phetsims · Nov 29, 2022 · 6d6a6a9 · 6d6a6a9
1 parent 4bcd6dc
commit 6d6a6a9
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 9 deletions.
diff --git a/js/common/view/EnvironmentalFactorsPanel.ts b/js/common/view/EnvironmentalFactorsPanel.ts
@@ -10,10 +10,9 @@
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
-import merge from '../../../../phet-core/js/merge.js';
-import optionize, { EmptySelfOptions, optionize4 } from '../../../../phet-core/js/optionize.js';
+import optionize, { combineOptions, EmptySelfOptions, optionize4 } from '../../../../phet-core/js/optionize.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
-import { AlignGroup, Text, TextOptions, VBox } from '../../../../scenery/js/imports.js';
+import { AlignGroup, Text, TextOptions, VBox, VBoxOptions } from '../../../../scenery/js/imports.js';
 import NumberIO from '../../../../tandem/js/types/NumberIO.js';
 import StringIO from '../../../../tandem/js/types/StringIO.js';
 import naturalSelection from '../../naturalSelection.js';
@@ -84,7 +83,7 @@ export default class EnvironmentalFactorsPanel extends NaturalSelectionPanel {
       tandem: options.tandem.createTandem( 'titleText' )
     } );
 
-    const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, {
+    const content = new VBox( combineOptions<VBoxOptions>( {}, NaturalSelectionConstants.VBOX_OPTIONS, {
       children: [ titleText, ...checkboxes ]
     } ) );
 

diff --git a/js/common/view/LimitedFoodCheckbox.ts b/js/common/view/LimitedFoodCheckbox.ts
@@ -33,7 +33,7 @@ export default class LimitedFoodCheckbox extends EnvironmentalFactorCheckbox {
 
     const labelText = new Text( NaturalSelectionStrings.limitedFoodStringProperty, {
       font: NaturalSelectionConstants.CHECKBOX_FONT,
-      maxWidth: 105, // determined empirically
+      maxWidth: 90, // determined empirically
       tandem: options.tandem.createTandem( 'labelText' )
     } );
 

diff --git a/js/common/view/ToughFoodCheckbox.ts b/js/common/view/ToughFoodCheckbox.ts
@@ -33,7 +33,7 @@ export default class ToughFoodCheckbox extends EnvironmentalFactorCheckbox {
 
     const labelText = new Text( NaturalSelectionStrings.toughFoodStringProperty, {
       font: NaturalSelectionConstants.CHECKBOX_FONT,
-      maxWidth: 105, // determined empirically
+      maxWidth: 90, // determined empirically
       tandem: options.tandem.createTandem( 'labelText' )
     } );
 

diff --git a/js/common/view/WolvesCheckbox.ts b/js/common/view/WolvesCheckbox.ts
@@ -34,7 +34,7 @@ export default class WolvesCheckbox extends EnvironmentalFactorCheckbox {
 
     const labelText = new Text( NaturalSelectionStrings.wolvesStringProperty, {
       font: NaturalSelectionConstants.CHECKBOX_FONT,
-      maxWidth: 105, // determined empirically
+      maxWidth: 90, // determined empirically
       tandem: options.tandem.createTandem( 'labelText' )
     } );
 

diff --git a/js/common/view/pedigree/PedigreeGraphNode.ts b/js/common/view/pedigree/PedigreeGraphNode.ts
@@ -58,11 +58,13 @@ export default class PedigreeGraphNode extends Node {
     // 'Select a Bunny' is displayed when there is no selected bunny.
     const selectABunnyText = new Text( NaturalSelectionStrings.selectABunnyStringProperty, {
       font: NaturalSelectionConstants.INSTRUCTIONS_FONT,
-      centerX: backgroundNode.centerX,
-      centerY: backgroundNode.top + ( backgroundNode.height / 6 ),
       maxWidth: 0.5 * backgroundNode.width,
       tandem: options.tandem.createTandem( 'selectABunnyText' )
     } );
+    selectABunnyText.boundsProperty.link( bounds => {
+      selectABunnyText.centerX = backgroundNode.centerX;
+      selectABunnyText.centerY = backgroundNode.top + ( backgroundNode.height / 6 );
+    } );
 
     options.children = [ backgroundNode, selectABunnyText ];
 

diff --git a/js/common/view/population/PopulationPanel.ts b/js/common/view/population/PopulationPanel.ts
@@ -140,6 +140,7 @@ export default class PopulationPanel extends NaturalSelectionPanel {
 
     const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, {
       preferredWidth: options.fixedWidth! - ( 2 * options.xMargin ),
+      widthSizable: false,
       children: [
         checkboxesVBox,
         separator,

diff --git a/js/common/view/proportions/ProportionsPanel.ts b/js/common/view/proportions/ProportionsPanel.ts
@@ -62,6 +62,7 @@ export default class ProportionsPanel extends NaturalSelectionPanel {
 
     const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, {
       preferredWidth: options.fixedWidth! - ( 2 * options.xMargin ),
+      widthSizable: false,
       children: [
         legendNode,
         separator,