Skip to content

Commit

Permalink
use a DerivedProperty for panel titles, #319
Browse files Browse the repository at this point in the history
  • Loading branch information
@pixelzoom
pixelzoom committed Aug 27, 2022
1 parent 4c49e7d commit f1cae59
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 54 deletions.
52 changes: 23 additions & 29 deletions js/common/view/AddMutationsPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {

Expand All @@ -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, {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
} );

Expand Down
44 changes: 19 additions & 25 deletions js/common/view/EnvironmentalFactorsPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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 );
}

/**
Expand Down

0 comments on commit f1cae59

Please sign in to comment.