Skip to content

Commit

Permalink
support for dynamic locale, #140
Browse files Browse the repository at this point in the history
  • Loading branch information
@pixelzoom
pixelzoom committed Aug 30, 2022
1 parent 0c42561 commit 1128a2d
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 43 deletions.
60 changes: 34 additions & 26 deletions js/common/view/SurfaceColorKey.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import merge from '../../../../phet-core/js/merge.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
import { LinearGradient, Node, Rectangle, Text } from '../../../../scenery/js/imports.js';
import Tandem from '../../../../tandem/js/Tandem.js';
import ReadOnlyProperty from '../../../../axon/js/ReadOnlyProperty.js';
import moleculePolarity from '../../moleculePolarity.js';
import moleculePolarityStrings from '../../moleculePolarityStrings.js';
import MPColors from '../MPColors.js';
Expand All @@ -21,16 +22,16 @@ class SurfaceColorKey extends Node {

/**
* @param {ColorDef[]} colors colors used for the gradient, in left-to-right order
* @param {string} title
* @param {string} leftLabel
* @param {string} rightLabel
* @param {TReadOnlyProperty<string>} titleStringProperty
* @param {TReadOnlyProperty<string>} leftLabelStringProperty
* @param {TReadOnlyProperty<string>} rightLabelStringProperty
* @param {Object} [options]
*/
constructor( colors, title, leftLabel, rightLabel, options ) {
constructor( colors, titleStringProperty, leftLabelStringProperty, rightLabelStringProperty, options ) {
assert && assert( Array.isArray( colors ), 'invalid colors' );
assert && assert( typeof title === 'string', 'invalid title' );
assert && assert( typeof leftLabel === 'string', 'invalid leftLabel' );
assert && assert( typeof rightLabel === 'string', 'rightLabel title' );
assert && assert( titleStringProperty instanceof ReadOnlyProperty );
assert && assert( leftLabelStringProperty instanceof ReadOnlyProperty );
assert && assert( rightLabelStringProperty instanceof ReadOnlyProperty );

options = merge( {
size: new Dimension2( 420, 20 ),
Expand All @@ -39,7 +40,8 @@ class SurfaceColorKey extends Node {
rangeFont: new PhetFont( 16 ),
xMargin: 0,
ySpacing: 2,
tandem: Tandem.OPTIONAL
tandem: Tandem.REQUIRED,
phetioVisiblePropertyInstrumented: false
}, options );

super();
Expand All @@ -59,34 +61,40 @@ class SurfaceColorKey extends Node {
} );

// title
const titleNode = new Text( title, {
const titleText = new Text( titleStringProperty, {
fill: 'black',
font: options.titleFont,
maxWidth: 0.5 * options.size.width // i18n, determined empirically
maxWidth: 0.5 * options.size.width, // i18n, determined empirically
tandem: options.tandem.createTandem( 'titleText' )
} );

// range labels
const labelOptions = {
fill: 'black',
font: options.rangeFont,
maxWidth: 0.2 * options.size.width // i18n, determined empirically
maxWidth: 0.2 * options.size.width, // i18n, determined empirically
phetioVisiblePropertyInstrumented: false
};
const leftLabelNode = new Text( leftLabel, labelOptions );
const rightLabelNode = new Text( rightLabel, labelOptions );
const leftLabelText = new Text( leftLabelStringProperty, merge( {
tandem: options.tandem.createTandem( 'leftLabelText' )
}, labelOptions ) );
const rightLabelText = new Text( rightLabelStringProperty, merge( {
tandem: options.tandem.createTandem( 'rightLabelText' )
}, labelOptions ) );

// rendering order
this.addChild( spectrumNode );
this.addChild( leftLabelNode );
this.addChild( rightLabelNode );
this.addChild( leftLabelText );
this.addChild( rightLabelText );
if ( options.titleVisible ) {
this.addChild( titleNode );
this.addChild( titleText );
}

// layout
titleNode.centerX = spectrumNode.centerX;
leftLabelNode.left = spectrumNode.left + options.xMargin;
rightLabelNode.right = spectrumNode.right - options.xMargin;
titleNode.top = leftLabelNode.top = rightLabelNode.top = spectrumNode.bottom + options.ySpacing;
titleText.centerX = spectrumNode.centerX;
leftLabelText.left = spectrumNode.left + options.xMargin;
rightLabelText.right = spectrumNode.right - options.xMargin;
titleText.top = leftLabelText.top = rightLabelText.top = spectrumNode.bottom + options.ySpacing;

this.mutate( options );
}
Expand All @@ -99,8 +107,8 @@ class SurfaceColorKey extends Node {
* @static
*/
static createElectronDensityColorKey( options ) {
return new SurfaceColorKey( MPColors.BW_GRADIENT, moleculePolarityStrings.electronDensity,
moleculePolarityStrings.less, moleculePolarityStrings.more, options );
return new SurfaceColorKey( MPColors.BW_GRADIENT, moleculePolarityStrings.electronDensityStringProperty,
moleculePolarityStrings.lessStringProperty, moleculePolarityStrings.moreStringProperty, options );
}

/**
Expand All @@ -111,8 +119,8 @@ class SurfaceColorKey extends Node {
* @static
*/
static createElectrostaticPotentialRWBColorKey( options ) {
return new SurfaceColorKey( MPColors.RWB_GRADIENT, moleculePolarityStrings.electrostaticPotential,
moleculePolarityStrings.positive, moleculePolarityStrings.negative, options );
return new SurfaceColorKey( MPColors.RWB_GRADIENT, moleculePolarityStrings.electrostaticPotentialStringProperty,
moleculePolarityStrings.positiveStringProperty, moleculePolarityStrings.negativeStringProperty, options );
}

/**
Expand All @@ -123,8 +131,8 @@ class SurfaceColorKey extends Node {
* @static
*/
static createElectrostaticPotentialROYGBColorKey( options ) {
return new SurfaceColorKey( MPColors.ROYGB_GRADIENT, moleculePolarityStrings.electrostaticPotential,
moleculePolarityStrings.positive, moleculePolarityStrings.negative, options );
return new SurfaceColorKey( MPColors.ROYGB_GRADIENT, moleculePolarityStrings.electrostaticPotentialStringProperty,
moleculePolarityStrings.positiveStringProperty, moleculePolarityStrings.negativeStringProperty, options );
}
}

Expand Down
3 changes: 2 additions & 1 deletion js/common/view/SurfaceColorRadioButtonGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const COLOR_KEY_OPTIONS = {
titleVisible: false,
rangeFont: new PhetFont( 8 ),
xMargin: 0,
ySpacing: 2
ySpacing: 2,
tandem: Tandem.OPT_OUT
};

class SurfaceColorRadioButtonGroup extends AquaRadioButtonGroup {
Expand Down
29 changes: 18 additions & 11 deletions js/realmolecules/view/RealMoleculesScreenView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,20 @@ class RealMoleculesScreenView extends ScreenView {
tandem: options.tandem.createTandem( 'moleculesComboBox' )
} );

const electrostaticPotentialRWBColorKey = SurfaceColorKey.createElectrostaticPotentialRWBColorKey();
const electrostaticPotentialROYGBColorKey = SurfaceColorKey.createElectrostaticPotentialROYGBColorKey();
const electrostaticPotentialColorKeyParent = new Node( {
// Group color keys under a common parent, so that PhET-iO can hide the color key.
const colorKeysTandem = options.tandem.createTandem( 'colorKeys' );

const electrostaticPotentialRWBColorKey = SurfaceColorKey.createElectrostaticPotentialRWBColorKey( {
tandem: colorKeysTandem.createTandem( 'electrostaticPotentialRWBColorKey' )
} );
const electrostaticPotentialROYGBColorKey = SurfaceColorKey.createElectrostaticPotentialROYGBColorKey( {
tandem: colorKeysTandem.createTandem( 'electrostaticPotentialROYGBColorKey' )
} );
const colorKeyNode = new Node( {
children: [
electrostaticPotentialRWBColorKey,
electrostaticPotentialROYGBColorKey
],
tandem: options.tandem.createTandem( 'electrostaticPotentialColorKey' )
]
} );

// unlink not needed
Expand All @@ -82,7 +88,8 @@ class RealMoleculesScreenView extends ScreenView {
} );

const electronDensityColorKey = SurfaceColorKey.createElectronDensityColorKey( {
tandem: options.tandem.createTandem( 'electronDensityColorKey' )
tandem: colorKeysTandem.createTandem( 'electronDensityColorKey' ),
visiblePropertyOptions: { readOnly: true }
} );

const controlPanel = new RealMoleculesControlPanel( viewProperties, {
Expand All @@ -106,7 +113,7 @@ class RealMoleculesScreenView extends ScreenView {
electronegativityTableNode,
moleculesComboBox,
controlPanel,
electrostaticPotentialColorKeyParent,
colorKeyNode,
electronDensityColorKey,
resetAllButton,
comboBoxListParent // last, so that combo box list is on top
Expand All @@ -123,11 +130,11 @@ class RealMoleculesScreenView extends ScreenView {
electronegativityTableNode.top = this.layoutBounds.top + 25;

// centered below electronegativity table
electrostaticPotentialColorKeyParent.centerX = electronDensityColorKey.centerX = electronegativityTableNode.centerX;
electrostaticPotentialColorKeyParent.top = electronDensityColorKey.top = electronegativityTableNode.bottom + 15;
colorKeyNode.centerX = electronDensityColorKey.centerX = electronegativityTableNode.centerX;
colorKeyNode.top = electronDensityColorKey.top = electronegativityTableNode.bottom + 15;

// below color keys
this.moleculeViewer.top = electrostaticPotentialColorKeyParent.bottom + 15;
this.moleculeViewer.top = colorKeyNode.bottom + 15;

// centered below viewer
moleculesComboBox.centerX = this.moleculeViewer.centerX;
Expand All @@ -145,7 +152,7 @@ class RealMoleculesScreenView extends ScreenView {

// unlink not needed
viewProperties.surfaceTypeProperty.link( surfaceType => {
electrostaticPotentialColorKeyParent.visible = ( surfaceType === SurfaceType.ELECTROSTATIC_POTENTIAL );
colorKeyNode.visible = ( surfaceType === SurfaceType.ELECTROSTATIC_POTENTIAL );
electronDensityColorKey.visible = ( surfaceType === SurfaceType.ELECTRON_DENSITY );
} );

Expand Down
17 changes: 12 additions & 5 deletions js/twoatoms/view/TwoAtomsScreenView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,20 @@ class TwoAtomsScreenView extends ScreenView {
tandem: options.tandem.createTandem( 'bondCharacterPanel' )
} );

const electrostaticPotentialColorKey = SurfaceColorKey.createElectrostaticPotentialRWBColorKey();
const electronDensityColorKey = SurfaceColorKey.createElectronDensityColorKey();

// Group color keys under a common parent, so that PhET-iO can hide the color key.
const colorKeysTandem = options.tandem.createTandem( 'colorKeys' );

const electrostaticPotentialColorKey = SurfaceColorKey.createElectrostaticPotentialRWBColorKey( {
tandem: colorKeysTandem.createTandem( 'electrostaticPotentialColorKey' ),
phetioVisiblePropertyInstrumented: false
} );
const electronDensityColorKey = SurfaceColorKey.createElectronDensityColorKey( {
tandem: colorKeysTandem.createTandem( 'electronDensityColorKey' ),
visiblePropertyOptions: { readOnly: true }
} );

const colorKeyNode = new Node( {
children: [ electrostaticPotentialColorKey, electronDensityColorKey ],
tandem: options.tandem.createTandem( 'colorKeyNode' )
children: [ electrostaticPotentialColorKey, electronDensityColorKey ]
} );

const controlPanel = new TwoAtomsControlPanel( viewProperties, model.eFieldEnabledProperty, {
Expand Down

0 comments on commit 1128a2d

Please sign in to comment.