diff --git a/js/decay/view/HalfLifeInfoDialog.ts b/js/decay/view/HalfLifeInfoDialog.ts index 51b9169..6f4b7e7 100644 --- 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,7 +66,7 @@ class HalfLifeInfoDialog extends Dialog { tickMarkExtent: 24, numberLineLabelFont: LEGEND_FONT, numberLineWidth: 750, - halfLifeArrowLength: 60, + halfLifeArrowLength: 40, halfLifeDisplayScale: 0.8, isHalfLifeLabelFixed: false, protonCountProperty: protonCountProperty, @@ -74,12 +74,18 @@ class HalfLifeInfoDialog extends Dialog { 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 index 90fc7ff..916181c 100644 --- 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 ); }