From 1128a2d2e5eba7acb1b8f76ea9889639765fab19 Mon Sep 17 00:00:00 2001 From: pixelzoom Date: Tue, 30 Aug 2022 16:09:22 -0600 Subject: [PATCH] support for dynamic locale, https://github.com/phetsims/molecule-polarity/issues/140 --- js/common/view/SurfaceColorKey.js | 60 +++++++++++-------- .../view/SurfaceColorRadioButtonGroup.js | 3 +- .../view/RealMoleculesScreenView.js | 29 +++++---- js/twoatoms/view/TwoAtomsScreenView.js | 17 ++++-- 4 files changed, 66 insertions(+), 43 deletions(-) diff --git a/js/common/view/SurfaceColorKey.js b/js/common/view/SurfaceColorKey.js index 803465d..aa5d966 100644 --- a/js/common/view/SurfaceColorKey.js +++ b/js/common/view/SurfaceColorKey.js @@ -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'; @@ -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} titleStringProperty + * @param {TReadOnlyProperty} leftLabelStringProperty + * @param {TReadOnlyProperty} 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 ), @@ -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(); @@ -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 ); } @@ -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 ); } /** @@ -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 ); } /** @@ -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 ); } } diff --git a/js/common/view/SurfaceColorRadioButtonGroup.js b/js/common/view/SurfaceColorRadioButtonGroup.js index 8f3297d..fb6ab06 100644 --- a/js/common/view/SurfaceColorRadioButtonGroup.js +++ b/js/common/view/SurfaceColorRadioButtonGroup.js @@ -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 { diff --git a/js/realmolecules/view/RealMoleculesScreenView.js b/js/realmolecules/view/RealMoleculesScreenView.js index 41bafd7..e67b927 100644 --- a/js/realmolecules/view/RealMoleculesScreenView.js +++ b/js/realmolecules/view/RealMoleculesScreenView.js @@ -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 @@ -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, { @@ -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 @@ -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; @@ -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 ); } ); diff --git a/js/twoatoms/view/TwoAtomsScreenView.js b/js/twoatoms/view/TwoAtomsScreenView.js index 51a7a21..9541f1c 100644 --- a/js/twoatoms/view/TwoAtomsScreenView.js +++ b/js/twoatoms/view/TwoAtomsScreenView.js @@ -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, {