hide MassTag label when empty, phetsims/buoyancy#102

Signed-off-by: Michael Kauzmann <[email protected]>
phetsims · Mar 4, 2024 · 9b97a34 · 9b97a34
1 parent 20bcfcd
commit 9b97a34
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/js/common/model/MassTag.ts b/js/common/model/MassTag.ts
@@ -40,7 +40,7 @@ export default class MassTag {
 
   public static readonly PRIMARY = new MassTag( DensityBuoyancyCommonStrings.massLabel.primaryStringProperty, MassTag.PRIMARY_COLOR_PROPERTY );
   public static readonly SECONDARY = new MassTag( DensityBuoyancyCommonStrings.massLabel.secondaryStringProperty, MassTag.SECONDARY_COLOR_PROPERTY );
-  public static readonly NONE = new MassTag( new StringProperty( 'NONE' ) ); // TODO: a bit awkward, but better than nulling the param right? https://github.com/phetsims/buoyancy/issues/102
+  public static readonly NONE = new MassTag( new StringProperty( 'NONE' ) );
   public static readonly ONE_A = new MassTag( DensityBuoyancyCommonStrings.massLabel[ '1aStringProperty' ] );
   public static readonly ONE_B = new MassTag( DensityBuoyancyCommonStrings.massLabel[ '1bStringProperty' ] );
   public static readonly ONE_C = new MassTag( DensityBuoyancyCommonStrings.massLabel[ '1cStringProperty' ] );

diff --git a/js/common/view/MassTagView.ts b/js/common/view/MassTagView.ts
@@ -19,6 +19,7 @@ import DensityBuoyancyCommonConstants from '../DensityBuoyancyCommonConstants.js
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import BackgroundNode from '../../../../scenery-phet/js/BackgroundNode.js';
 import MassTag from '../model/MassTag.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 
 // Constant for MassView subtypes to use to consistently offset their tag on their shape
 export const TAG_OFFSET = MASS_MIN_SHAPES_DIMENSION / 20;
@@ -82,9 +83,12 @@ export default class MassTagView extends TextureQuad {
   }
 
   private static getTagNode( massTag: MassTag ): Node {
+    const visibleProperty = new DerivedProperty( [ massTag.nameProperty ], name => name.length > 0 );
+
     const label = new Text( massTag.nameProperty, {
       font: tagFont,
-      maxWidth: 100
+      maxWidth: 100,
+      visibleProperty: visibleProperty
     } );
 
     const colorListener = ( color: Color ) => {
@@ -104,6 +108,7 @@ export default class MassTagView extends TextureQuad {
     backgroundNode.disposeEmitter.addListener( () => {
       massTag.colorProperty.unlink( colorListener );
       label.dispose();
+      visibleProperty.dispose();
     } );
     return backgroundNode;
   }