diff --git a/js/common/view/AddMutationsPanel.js b/js/common/view/AddMutationsPanel.js index a394c6df..5d75f05d 100644 --- a/js/common/view/AddMutationsPanel.js +++ b/js/common/view/AddMutationsPanel.js @@ -8,7 +8,7 @@ * @author Chris Malley (PixelZoom, Inc.) */ -import Multilink from '../../../../axon/js/Multilink.js'; +import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import merge from '../../../../phet-core/js/merge.js'; import { AlignBox, AlignGroup, HBox, Image, Node, Rectangle, Text, VBox } from '../../../../scenery/js/imports.js'; import RectangularPushButton from '../../../../sun/js/buttons/RectangularPushButton.js'; @@ -29,7 +29,7 @@ const LABEL_COLUMN_X_ALIGN = 'left'; const BUTTON_COLUMNS_X_ALIGN = 'center'; const BUTTON_CORNER_RADIUS = 4; const NORMAL_ALLELE_LINE_DASH = []; -const MUTATANT_ALLELE_LINE_DASH = [ 3, 3 ]; +const MUTANT_ALLELE_LINE_DASH = [ 3, 3 ]; class AddMutationsPanel extends NaturalSelectionPanel { @@ -56,15 +56,6 @@ class AddMutationsPanel extends NaturalSelectionPanel { // All elements in the button columns (including column headings) have the same effective width. const buttonColumnsAlignGroup = new AlignGroup(); - // title - We cannot pass naturalSelectionStrings.addMutationsProperty to new Text here, because the title - // is derived from the number of visible rows, which have not been created yet. See Multilink below. - //TODO https://github.com/phetsims/natural-selection/issues/319 use Property.value, which is not currently supported - const titleNode = new Text( naturalSelectionStrings.addMutations, { - font: NaturalSelectionConstants.TITLE_FONT, - maxWidth: 180, // determined empirically - tandem: options.tandem.createTandem( 'titleNode' ) - } ); - // Individual column headings const mutationIconNode = new MutationIconNode(); const dominantColumnLabel = new Text( naturalSelectionStrings.dominantProperty, { @@ -97,29 +88,32 @@ class AddMutationsPanel extends NaturalSelectionPanel { children: rows } ) ); - const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, { - spacing: 2, - children: [ titleNode, columnHeadingsNode, vBox ] - } ) ); - - super( content, options ); - // Set the panel's title to singular or plural, depending on how many rows are visible. // unmultilink is not necessary. - Multilink.multilink( [ - ..._.map( rows, row => row.visibleProperty ), + const titleDerivedStringProperty = new DerivedProperty( [ naturalSelectionStrings.addMutationProperty, - naturalSelectionStrings.addMutationsProperty + naturalSelectionStrings.addMutationsProperty, + ..._.map( rows, row => row.visibleProperty ) ], - () => { + ( addMutationString, addMutationsString ) => { const numberOfVisibleRows = _.filter( rows, row => row.visible ).length; - titleNode.text = ( numberOfVisibleRows === 1 ) ? - //TODO https://github.com/phetsims/natural-selection/issues/319 use Property.value, which is not currently supported - naturalSelectionStrings.addMutation : - //TODO https://github.com/phetsims/natural-selection/issues/319 use Property.value, which is not currently supported - naturalSelectionStrings.addMutations; + return ( numberOfVisibleRows === 1 ) ? addMutationString : addMutationsString; } ); + // title + const titleNode = new Text( titleDerivedStringProperty, { + font: NaturalSelectionConstants.TITLE_FONT, + maxWidth: 180, // determined empirically + tandem: options.tandem.createTandem( 'titleNode' ) + } ); + + const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, { + spacing: 2, + children: [ titleNode, columnHeadingsNode, vBox ] + } ) ); + + super( content, options ); + // @private {Row[]} this.rows = rows; } @@ -273,11 +267,11 @@ class Row extends HBox { // Adjust the dominant icon dominantAlleleIcon.image = mutationIsDominant ? gene.mutantAllele.image : gene.normalAllele.image; - dominantAlleleIcon.lineDash = mutationIsDominant ? MUTATANT_ALLELE_LINE_DASH : NORMAL_ALLELE_LINE_DASH; + dominantAlleleIcon.lineDash = mutationIsDominant ? MUTANT_ALLELE_LINE_DASH : NORMAL_ALLELE_LINE_DASH; // Adjust the recessive icon recessiveAlleleIcon.image = mutationIsDominant ? gene.normalAllele.image : gene.mutantAllele.image; - recessiveAlleleIcon.lineDash = mutationIsDominant ? NORMAL_ALLELE_LINE_DASH : MUTATANT_ALLELE_LINE_DASH; + recessiveAlleleIcon.lineDash = mutationIsDominant ? NORMAL_ALLELE_LINE_DASH : MUTANT_ALLELE_LINE_DASH; } } ); diff --git a/js/common/view/EnvironmentalFactorsPanel.js b/js/common/view/EnvironmentalFactorsPanel.js index 27a37ea8..a5563ca2 100644 --- a/js/common/view/EnvironmentalFactorsPanel.js +++ b/js/common/view/EnvironmentalFactorsPanel.js @@ -7,7 +7,7 @@ * @author Chris Malley (PixelZoom, Inc.) */ -import Multilink from '../../../../axon/js/Multilink.js'; +import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import merge from '../../../../phet-core/js/merge.js'; import AssertUtils from '../../../../phetcommon/js/AssertUtils.js'; import { AlignGroup, Text, VBox } from '../../../../scenery/js/imports.js'; @@ -41,15 +41,6 @@ class EnvironmentalFactorsPanel extends NaturalSelectionPanel { tandem: Tandem.REQUIRED }, NaturalSelectionConstants.PANEL_OPTIONS, options ); - // title - We cannot pass naturalSelectionStrings.environmentalFactorsProperty to Text here, because the title - // is derived from the number of visible rows, which have not been created yet. See Multilink below. - //TODO https://github.com/phetsims/natural-selection/issues/319 use Property.value, which is not currently supported - const titleNode = new Text( naturalSelectionStrings.environmentalFactors, { - font: NaturalSelectionConstants.TITLE_FONT, - maxWidth: 175, // determined empirically, - tandem: options.tandem.createTandem( 'titleNode' ) - } ); - // To make all checkbox labels have the same effective size const checkboxLabelAlignGroup = new AlignGroup(); @@ -77,26 +68,29 @@ class EnvironmentalFactorsPanel extends NaturalSelectionPanel { checkbox.mouseArea = checkbox.localBounds.dilatedXY( xDilation, yDilation ); } ); - const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, { - children: [ titleNode, ...checkboxes ] - } ) ); - - super( content, options ); - // Set the panel's title to singular or plural, depending on how many checkboxes are visible. // unlink is not necessary. - Multilink.multilink( [ - ..._.map( checkboxes, checkbox => checkbox.visibleProperty ), + const titleDerivedStringProperty = new DerivedProperty( [ naturalSelectionStrings.environmentalFactorProperty, - naturalSelectionStrings.environmentalFactorsProperty - ], () => { + naturalSelectionStrings.environmentalFactorsProperty, + ..._.map( checkboxes, checkbox => checkbox.visibleProperty ) + ], ( environmentalFactor, environmentalFactors ) => { const numberOfVisibleCheckboxes = _.filter( checkboxes, checkbox => checkbox.visible ).length; - titleNode.text = ( numberOfVisibleCheckboxes === 1 ) ? - //TODO https://github.com/phetsims/natural-selection/issues/319 use Property.value, which is not currently supported - naturalSelectionStrings.environmentalFactor : - //TODO https://github.com/phetsims/natural-selection/issues/319 use Property.value, which is not currently supported - naturalSelectionStrings.environmentalFactors; + return ( numberOfVisibleCheckboxes === 1 ) ? environmentalFactor : environmentalFactors; } ); + + // title + const titleNode = new Text( titleDerivedStringProperty, { + font: NaturalSelectionConstants.TITLE_FONT, + maxWidth: 175, // determined empirically, + tandem: options.tandem.createTandem( 'titleNode' ) + } ); + + const content = new VBox( merge( {}, NaturalSelectionConstants.VBOX_OPTIONS, { + children: [ titleNode, ...checkboxes ] + } ) ); + + super( content, options ); } /**