make it possible to hide icon and NumberDisplay, feature visiblePrope…

…rty, #277
phetsims · Jul 3, 2024 · ad8591e · ad8591e
1 parent 0ad84bf
commit ad8591e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/js/common/view/ParticleNode.ts b/js/common/view/ParticleNode.ts
@@ -12,10 +12,11 @@ import ShadedSphereNode, { ShadedSphereNodeOptions } from '../../../../scenery-p
 import { NodeTranslationOptions } from '../../../../scenery/js/imports.js';
 import gasProperties from '../../gasProperties.js';
 import Particle from '../model/Particle.js';
+import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
 
 type SelfOptions = EmptySelfOptions;
 
-export type ParticleNodeOptions = SelfOptions & NodeTranslationOptions;
+export type ParticleNodeOptions = SelfOptions & NodeTranslationOptions & PickOptional<ShadedSphereNodeOptions, 'visibleProperty'>;
 
 export default class ParticleNode extends ShadedSphereNode {
 

diff --git a/js/energy/view/AverageSpeedAccordionBox.ts b/js/energy/view/AverageSpeedAccordionBox.ts
@@ -48,11 +48,6 @@ export default class AverageSpeedAccordionBox extends AccordionBox {
         } )
       }, providedOptions );
 
-    // Icons for the particles, with same effective size.
-    const alignGroup = new AlignGroup();
-    const heavyParticleNode = alignGroup.createBox( GasPropertiesIconFactory.createHeavyParticleIcon( modelViewTransform ) );
-    const lightParticleNode = alignGroup.createBox( GasPropertiesIconFactory.createLightParticleIcon( modelViewTransform ) );
-
     // Used for both NumberDisplay instances
     const valuePatternStringProperty = new PatternStringProperty( GasPropertiesStrings.valueUnitsStringProperty, {
       units: GasPropertiesStrings.metersPerSecondStringProperty
@@ -77,13 +72,28 @@ export default class AverageSpeedAccordionBox extends AccordionBox {
     // since the conversion (1E-12) is the same for numerator and denominator.
     const heavyNumberDisplay = new NumberDisplay( heavyAverageSpeedProperty, numberDisplayRange,
       combineOptions<NumberDisplayOptions>( {}, numberDisplayOptions, {
-        tandem: options.tandem.createTandem( 'heavyNumberDisplay' )
+        tandem: options.tandem.createTandem( 'heavyNumberDisplay' ),
+        visiblePropertyOptions: {
+          phetioFeatured: true
+        }
       } ) );
     const lightNumberDisplay = new NumberDisplay( lightAverageSpeedProperty, numberDisplayRange,
       combineOptions<NumberDisplayOptions>( {}, numberDisplayOptions, {
-        tandem: options.tandem.createTandem( 'lightNumberDisplay' )
+        tandem: options.tandem.createTandem( 'lightNumberDisplay' ),
+        visiblePropertyOptions: {
+          phetioFeatured: true
+        }
       } ) );
 
+    // Icons for the particles, with same effective size. Visibility is linked to the visibility of their associated NumberDisplays.
+    const alignGroup = new AlignGroup();
+    const heavyParticleNode = alignGroup.createBox( GasPropertiesIconFactory.createHeavyParticleIcon( modelViewTransform, {
+      visibleProperty: heavyNumberDisplay.visibleProperty
+    } ) );
+    const lightParticleNode = alignGroup.createBox( GasPropertiesIconFactory.createLightParticleIcon( modelViewTransform, {
+      visibleProperty: lightNumberDisplay.visibleProperty
+    } ) );
+
     // layout icons and NumberDisplays in a grid
     const gridBox = new GridBox( {
       rows: [