Fixing touch area updates based on dynamic locale changes, see #239

phetsims · Dec 23, 2022 · f393695 · f393695
1 parent 546e511
commit f393695
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 52 deletions.
diff --git 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
@@ -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
@@ -6,67 +6,54 @@
  * @author Jonathan Olson <[email protected]>
  */
 
-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
@@ -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, {