Shorten arrows in HalfLifeInfoDialog and center HalfLifeInfoDialog's …

…contents. See #8.
phetsims · May 25, 2022 · aa1ffb5 · aa1ffb5
1 parent 8f2c26a
commit aa1ffb5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/js/decay/view/HalfLifeInfoDialog.ts b/js/decay/view/HalfLifeInfoDialog.ts
@@ -9,7 +9,7 @@
 
 import Dialog from '../../../../sun/js/Dialog.js';
 import buildANucleus from '../../buildANucleus.js';
-import { RichText, Text, HBox, VBox } from '../../../../scenery/js/imports.js';
+import { RichText, Text, HBox, VBox, Rectangle } from '../../../../scenery/js/imports.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import buildANucleusStrings from '../../buildANucleusStrings.js';
 import BANColors from '../../common/BANColors.js';
@@ -66,20 +66,26 @@ class HalfLifeInfoDialog extends Dialog {
       tickMarkExtent: 24,
       numberLineLabelFont: LEGEND_FONT,
       numberLineWidth: 750,
-      halfLifeArrowLength: 60,
+      halfLifeArrowLength: 40,
       halfLifeDisplayScale: 0.8,
       isHalfLifeLabelFixed: false,
       protonCountProperty: protonCountProperty,
       neutronCountProperty: neutronCountProperty,
       doesNuclideExistBooleanProperty: doesNuclideExistBooleanProperty
     } );
 
-    const contents = new VBox( {
+    const numberLineNodeAndLegend = new VBox( {
       children: [ legend, halfLifeNumberLineNode ],
       spacing: 30,
-      align: 'center'
+      align: 'center',
+      resize: false
     } );
 
+    // surround contents with rectangle for extra padding
+    const contents = new Rectangle( 0, 0, numberLineNodeAndLegend.width + 100, numberLineNodeAndLegend.height );
+    contents.addChild( numberLineNodeAndLegend );
+    numberLineNodeAndLegend.centerX = contents.centerX;
+
     // the half-life's of the strings, in respective order
     const halfLifeTime = [
       BANTimescalePoints.TIME_FOR_LIGHT_TO_CROSS_A_NUCLEUS.numberOfSeconds,
@@ -121,6 +127,7 @@ class HalfLifeInfoDialog extends Dialog {
     super( contents, {
       title: titleNode,
       ySpacing: 20,
+      xSpacing: 0,
       bottomMargin: 20,
       fill: BANColors.infoDialogBackgroundColorProperty
     } );

diff --git a/js/decay/view/HalfLifeNumberLineNode.ts b/js/decay/view/HalfLifeNumberLineNode.ts
@@ -150,7 +150,8 @@ class HalfLifeNumberLineNode extends Node {
     // create and add the half life display, which is a parent node used to contain the number readout, the infinity
     // symbol, and the 'Unknown' text.
     const halfLifeDisplayNode = new Node( {
-      scale: options.halfLifeDisplayScale
+      scale: options.halfLifeDisplayScale,
+      excludeInvisibleChildrenFromBounds: true
     } );
     this.addChild( halfLifeDisplayNode );
 
@@ -232,13 +233,12 @@ class HalfLifeNumberLineNode extends Node {
         if ( elementName.left < numberLineNode.left ) {
           elementName.left = numberLineNode.left;
         }
-        // if ( halfLifeDisplayNode.right > numberLineNode.right ) {
-        //
-        //   halfLifeDisplayNode.right = numberLineNode.right;
-        // }
-        // if ( elementName.right > numberLineNode.right ) {
-        //   elementName.right = numberLineNode.right;
-        // }
+        if ( halfLifeDisplayNode.right > numberLineNode.right ) {
+          halfLifeDisplayNode.right = numberLineNode.right;
+        }
+        if ( elementName.right > numberLineNode.right ) {
+          elementName.right = numberLineNode.right;
+        }
       } );
     }
 
@@ -400,7 +400,7 @@ class HalfLifeNumberLineNode extends Node {
    */
   public addArrowAndLabel( label: string, halfLife: number ): void {
     const xPosition = HalfLifeNumberLineNode.logScaleNumberToLinearScaleNumber( halfLife );
-    const arrow = new ArrowNode( this.modelViewTransform.modelToViewX( xPosition ), -30,
+    const arrow = new ArrowNode( this.modelViewTransform.modelToViewX( xPosition ), -17.5,
       this.modelViewTransform.modelToViewX( xPosition ), this.tickMarkSet.centerY, {
         fill: BANColors.legendArrowColorProperty,
         stroke: null,
@@ -409,7 +409,7 @@ class HalfLifeNumberLineNode extends Node {
       } );
     this.addChild( arrow );
     const numberText = new RichText( label, { font: this.labelFont } );
-    numberText.bottom = arrow.top;
+    numberText.bottom = arrow.top + 3;
     numberText.centerX = arrow.centerX;
     this.addChild( numberText );
   }