From f393695d2ff5ab3d0eaf96964ea7beb9ed4af837 Mon Sep 17 00:00:00 2001 From: Jonathan Olson Date: Fri, 23 Dec 2022 11:29:01 -0700 Subject: [PATCH] Fixing touch area updates based on dynamic locale changes, see https://github.com/phetsims/molecule-shapes/issues/239 --- js/common/MoleculeShapesGlobals.js | 8 ++- js/common/view/MoleculeShapesPanel.js | 1 + js/common/view/OptionsNode.js | 87 ++++++++++++--------------- js/common/view/TitledPanel.js | 6 +- 4 files changed, 50 insertions(+), 52 deletions(-) diff --git a/js/common/MoleculeShapesGlobals.js b/js/common/MoleculeShapesGlobals.js index 31d264b..e76786c 100644 --- a/js/common/MoleculeShapesGlobals.js +++ b/js/common/MoleculeShapesGlobals.js @@ -14,11 +14,17 @@ import { Color, Utils } from '../../../scenery/js/imports.js'; import Tandem from '../../../tandem/js/Tandem.js'; import moleculeShapes from '../moleculeShapes.js'; import MoleculeShapesQueryParameters from './MoleculeShapesQueryParameters.js'; +import MoleculeShapesColors from './view/MoleculeShapesColors.js'; const MoleculeShapesGlobals = { showOuterLonePairsProperty: new BooleanProperty( MoleculeShapesQueryParameters.showOuterLonePairs, { tandem: phet.chipper.packageObject.name === 'molecule-shapes-basics' ? Tandem.OPT_OUT : Tandem.PREFERENCES.createTandem( 'showOuterLonePairsProperty' ) - } ) + } ), + + checkboxOptions: { + checkboxColor: MoleculeShapesColors.checkboxProperty, + checkboxColorBackground: MoleculeShapesColors.checkboxBackgroundProperty + } }; moleculeShapes.register( 'MoleculeShapesGlobals', MoleculeShapesGlobals ); diff --git a/js/common/view/MoleculeShapesPanel.js b/js/common/view/MoleculeShapesPanel.js index 6f7da2c..ea3995f 100644 --- a/js/common/view/MoleculeShapesPanel.js +++ b/js/common/view/MoleculeShapesPanel.js @@ -39,6 +39,7 @@ class MoleculeShapesPanel extends TitledPanel { fill: MoleculeShapesColors.controlPanelTitleProperty, tandem: tandem.createTandem( 'titleText' ), phetioVisiblePropertyInstrumented: true, + pickable: false, maxWidth: 280 } ); diff --git a/js/common/view/OptionsNode.js b/js/common/view/OptionsNode.js index 53aa5be..e91a379 100644 --- a/js/common/view/OptionsNode.js +++ b/js/common/view/OptionsNode.js @@ -6,67 +6,54 @@ * @author Jonathan Olson */ -import merge from '../../../../phet-core/js/merge.js'; +import optionize, { combineOptions } from '../../../../phet-core/js/optionize.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; -import { Text, VBox } from '../../../../scenery/js/imports.js'; -import Tandem from '../../../../tandem/js/Tandem.js'; +import { Text } from '../../../../scenery/js/imports.js'; +import VerticalCheckboxGroup from '../../../../sun/js/VerticalCheckboxGroup.js'; import moleculeShapes from '../../moleculeShapes.js'; import MoleculeShapesStrings from '../../MoleculeShapesStrings.js'; -import MoleculeShapesCheckbox from './MoleculeShapesCheckbox.js'; +import MoleculeShapesGlobals from '../MoleculeShapesGlobals.js'; import MoleculeShapesColors from './MoleculeShapesColors.js'; const optionsFont = new PhetFont( 14 ); -class OptionsNode extends VBox { +class OptionsNode extends VerticalCheckboxGroup { /** * @param {MoleculeShapesModel} model * @param {Tandem} tandem - * @param {Object} [options] + * @param {Object} [providedOptions] */ - constructor( model, tandem, options ) { - const showLonePairsCheckboxTandem = model.isBasicsVersion ? Tandem.OPT_OUT : tandem.createTandem( 'showLonePairsCheckbox' ); - const showBondAnglesCheckboxTandem = tandem.createTandem( 'showBondAnglesCheckbox' ); - - const showLonePairsLabel = new Text( MoleculeShapesStrings.control.showLonePairsStringProperty, { - font: optionsFont, - fill: MoleculeShapesColors.controlPanelTextProperty, - tandem: showLonePairsCheckboxTandem.createTandem( 'labelText' ), - maxWidth: 280 - } ); - - const showBondAnglesLabel = new Text( MoleculeShapesStrings.control.showBondAnglesStringProperty, { - font: optionsFont, - fill: MoleculeShapesColors.controlPanelTextProperty, - tandem: showBondAnglesCheckboxTandem.createTandem( 'labelText' ), - maxWidth: 280 - } ); - - const showLonePairsCheckbox = new MoleculeShapesCheckbox( model.showLonePairsProperty, showLonePairsLabel, { - enabledPropertyOptions: { phetioReadOnly: true }, - tandem: showLonePairsCheckboxTandem - } ); - const showBondAnglesCheckbox = new MoleculeShapesCheckbox( model.showBondAnglesProperty, showBondAnglesLabel, { - tandem: showBondAnglesCheckboxTandem - } ); - - // touch areas - const lonePairTouchArea = showLonePairsCheckbox.localBounds.dilatedXY( 10, 4 ); - const bondAngleTouchArea = showBondAnglesCheckbox.localBounds.dilatedXY( 10, 4 ); - // extend both out as far as needed - lonePairTouchArea.maxX = bondAngleTouchArea.maxX = Math.max( lonePairTouchArea.maxX, bondAngleTouchArea.maxX ); - // extend the bottom touch area below - bondAngleTouchArea.maxY += 10; - // extend the top touch area above (changes depending on whether it's basics version or not) - ( model.isBasicsVersion ? bondAngleTouchArea : lonePairTouchArea ).minY -= 10; - showLonePairsCheckbox.touchArea = lonePairTouchArea; - showBondAnglesCheckbox.touchArea = bondAngleTouchArea; - - // TODO: Don't create both on basics? - super( merge( { - children: model.isBasicsVersion ? [ showBondAnglesCheckbox ] : [ showLonePairsCheckbox, showBondAnglesCheckbox ], - spacing: 10, - align: 'left' - }, options ) ); + constructor( model, tandem, providedOptions ) { + const options = optionize()( { // eslint-disable-line bad-text + touchAreaXDilation: 10 + }, providedOptions ); + + super( [ + ...( model.isBasicsVersion ? [] : [ { + property: model.showLonePairsProperty, + createNode: tandem => new Text( MoleculeShapesStrings.control.showLonePairsStringProperty, { + font: optionsFont, + fill: MoleculeShapesColors.controlPanelTextProperty, + tandem: tandem.createTandem( 'labelText' ), + maxWidth: 280 + } ), + tandemName: 'showLonePairsCheckbox', + options: combineOptions( {}, MoleculeShapesGlobals.checkboxOptions, { + enabledPropertyOptions: { phetioReadOnly: true } + } ) + } ] ), + { + property: model.showBondAnglesProperty, + createNode: tandem => new Text( MoleculeShapesStrings.control.showBondAnglesStringProperty, { + font: optionsFont, + fill: MoleculeShapesColors.controlPanelTextProperty, + tandem: tandem.createTandem( 'labelText' ), + maxWidth: 280 + } ), + tandemName: 'showBondAnglesCheckbox', + options: MoleculeShapesGlobals.checkboxOptions + } + ], options ); } } diff --git a/js/common/view/TitledPanel.js b/js/common/view/TitledPanel.js index 0eba090..2f9c894 100644 --- a/js/common/view/TitledPanel.js +++ b/js/common/view/TitledPanel.js @@ -48,7 +48,11 @@ class TitledPanel extends Sizable( Node ) { options = merge( {}, Panel.DEFAULT_PANEL_OPTIONS, options ); this.titleNode = titleNode; // @private {Node} - this.titleBackgroundNode = new Rectangle( 0, 0, 5, 5, 0, 0, { fill: options.fill, visibleProperty: titleNode.visibleProperty } ); // @private {Rectangle} + this.titleBackgroundNode = new Rectangle( 0, 0, 5, 5, 0, 0, { + fill: options.fill, + visibleProperty: titleNode.visibleProperty, + pickable: false + } ); // @private {Rectangle} // @private {Node} this.panel = new Panel( contentContainer, {