Adding mystery questionmark and fitting density readout panel, see ph…

…etsims/buoyancy-basics#6
phetsims · May 14, 2024 · a894dcf · a894dcf
1 parent 98b1105
commit a894dcf
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 36 deletions.
diff --git a/js/buoyancy-basics/view/BuoyancyBasicsExploreScreenView.ts b/js/buoyancy-basics/view/BuoyancyBasicsExploreScreenView.ts
@@ -35,6 +35,7 @@ import DensityBuoyancyCommonColors from '../../common/view/DensityBuoyancyCommon
 import CuboidView from '../../common/view/CuboidView.js';
 import ScaleView from '../../common/view/ScaleView.js';
 import MassView from '../../common/view/MassView.js';
+import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 
 // constants
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
@@ -151,19 +152,24 @@ export default class BuoyancyBasicsExploreScreenView extends DensityBuoyancyScre
       // DerivedProperty doesn't need disposal, since everything here lives for the lifetime of the simulation
       {
         densityProperty: new DerivedProperty( [ model.liquidDensityProperty ], density => density ),
-        color: DensityBuoyancyCommonColors.liquidLabelProperty,
-        nameProperty: DensityBuoyancyCommonStrings.fluidStringProperty
+        nameProperty: DensityBuoyancyCommonStrings.fluidStringProperty,
+        visibleProperty: new BooleanProperty( true ),
+        isHiddenProperty: new BooleanProperty( false ),
+        color: DensityBuoyancyCommonColors.liquidLabelProperty
       },
       {
         densityProperty: new DerivedProperty( [ model.primaryMass.materialProperty ], material => material.density ),
-        color: DensityBuoyancyCommonColors.labelPrimaryProperty,
-        nameProperty: model.primaryMass.tag.nameProperty
+        nameProperty: model.primaryMass.tag.nameProperty,
+        visibleProperty: new BooleanProperty( true ),
+        isHiddenProperty: new DerivedProperty( [ model.primaryMass.materialProperty ], material => material.hidden ),
+        color: DensityBuoyancyCommonColors.labelPrimaryProperty
       },
       {
         densityProperty: new DerivedProperty( [ model.secondaryMass.materialProperty ], material => material.density ),
-        color: DensityBuoyancyCommonColors.labelSecondaryProperty,
+        nameProperty: model.secondaryMass.tag.nameProperty,
         visibleProperty: model.secondaryMass.visibleProperty,
-        nameProperty: model.secondaryMass.tag.nameProperty
+        isHiddenProperty: new DerivedProperty( [ model.secondaryMass.materialProperty ], material => material.hidden ),
+        color: DensityBuoyancyCommonColors.labelSecondaryProperty
       }
     ];
 

diff --git a/js/density/view/DensityIntroScreenView.ts b/js/density/view/DensityIntroScreenView.ts
@@ -25,6 +25,8 @@ import Vector3 from '../../../../dot/js/Vector3.js';
 import DensityBuoyancyCommonColors from '../../common/view/DensityBuoyancyCommonColors.js';
 import BlocksRadioButtonGroup from '../../common/view/BlocksRadioButtonGroup.js';
 import MassView from '../../common/view/MassView.js';
+import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
+import Multilink from '../../../../axon/js/Multilink.js';
 
 // constants
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
@@ -55,14 +57,17 @@ export default class DensityIntroScreenView extends DensityBuoyancyScreenView<De
           // DerivedProperty doesn't need disposal, since everything here lives for the lifetime of the simulation
           {
             densityProperty: new DerivedProperty( [ model.primaryMass.materialProperty ], material => material.density ),
-            color: DensityBuoyancyCommonColors.labelPrimaryProperty,
-            nameProperty: model.primaryMass.tag.nameProperty
+            nameProperty: model.primaryMass.tag.nameProperty,
+            visibleProperty: new BooleanProperty( true ),
+            isHiddenProperty: new BooleanProperty( false ),
+            color: DensityBuoyancyCommonColors.labelPrimaryProperty
           },
           {
             densityProperty: new DerivedProperty( [ model.secondaryMass.materialProperty ], material => material.density ),
-            color: DensityBuoyancyCommonColors.labelSecondaryProperty,
+            nameProperty: model.secondaryMass.tag.nameProperty,
             visibleProperty: model.secondaryMass.visibleProperty,
-            nameProperty: model.secondaryMass.tag.nameProperty
+            isHiddenProperty: new BooleanProperty( false ),
+            color: DensityBuoyancyCommonColors.labelSecondaryProperty
           }
         ],
         tandem: accordionTandem.createTandem( 'densityReadout' ),
@@ -90,12 +95,24 @@ export default class DensityIntroScreenView extends DensityBuoyancyScreenView<De
       tandem: accordionTandem
     }, DensityBuoyancyCommonConstants.ACCORDION_BOX_OPTIONS ) );
 
-    this.addChild( new AlignBox( densityAccordionBox, {
-      alignBoundsProperty: this.visibleBoundsProperty,
-      xAlign: 'center',
-      yAlign: 'top',
-      margin: MARGIN
-    } ) );
+    this.addChild( densityAccordionBox );
+
+    Multilink.multilink( [
+        this.visibleBoundsProperty,
+        this.rightBox.boundsProperty,
+        densityAccordionBox.boundsProperty ],
+      ( visibleBounds, rightBoxBounds, accordionBounds ) => {
+          const rightBoxLeftEdge = rightBoxBounds.left;
+          const visibleBoundsLeftEdge = visibleBounds.left;
+
+          const availableWidth = rightBoxLeftEdge - visibleBoundsLeftEdge - 2 * MARGIN;
+
+          if ( availableWidth > 0 ) {
+            densityAccordionBox.maxWidth = availableWidth;
+            densityAccordionBox.centerX = visibleBoundsLeftEdge + availableWidth / 2 + MARGIN;
+            densityAccordionBox.top = visibleBounds.top + MARGIN;
+          }
+      } );
 
     this.addChild( new AlignBox( this.rightBox, {
       alignBoundsProperty: this.visibleBoundsProperty,

diff --git a/js/density/view/DensityNumberLineNode.ts b/js/density/view/DensityNumberLineNode.ts
@@ -18,13 +18,16 @@ import densityBuoyancyCommon from '../../densityBuoyancyCommon.js';
 import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import DensityBuoyancyCommonStrings from '../../DensityBuoyancyCommonStrings.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
+import Multilink from '../../../../axon/js/Multilink.js';
 
 // Type declarations: DisplayDensity is the object which will construct the marker and the legend
 export type DisplayDensity = {
   densityProperty: TReadOnlyProperty<number>;
   nameProperty: TReadOnlyProperty<string>;
+  visibleProperty: TReadOnlyProperty<boolean>;
+  isHiddenProperty: TReadOnlyProperty<boolean>;
   color: TPaint;
-  visibleProperty?: TReadOnlyProperty<boolean>;
 };
 
 type SelfOptions = {
@@ -40,12 +43,15 @@ type SelfOptions = {
 };
 
 // Constants and Functions
-const WIDTH = 550;
+const WIDTH = 540;
 const HEIGHT = 22;
 const MAX_DENSITY = 10000;
 
 // To display name: xxx kg/L dynamically
-const createDensityStringProperty = ( densityNumberProperty: TReadOnlyProperty<number>, nameStringProperty: TReadOnlyProperty<string> ) => {
+const createDensityStringProperty = (
+  densityNumberProperty: TReadOnlyProperty<number>,
+  nameStringProperty: TReadOnlyProperty<string>,
+  isHiddenProperty: TReadOnlyProperty<boolean> ) => {
   // This is densityProperty kg/L (units depending on preferences)
   const valueUnitsStringProperty = new PatternStringProperty( DensityBuoyancyCommonConstants.KILOGRAMS_PER_VOLUME_PATTERN_STRING_PROPERTY, {
     value: densityNumberProperty
@@ -60,7 +66,11 @@ const createDensityStringProperty = ( densityNumberProperty: TReadOnlyProperty<n
   // This is name: valueUnitsStringProperty
   const nameColonValueStringProperty = new PatternStringProperty( DensityBuoyancyCommonStrings.nameColonValueUnitsPatternStringProperty, {
     name: nameStringProperty,
-    valueWithUnits: valueUnitsStringProperty
+    valueWithUnits: new DerivedProperty(
+      [ isHiddenProperty, DensityBuoyancyCommonStrings.questionMarkStringProperty, valueUnitsStringProperty ],
+      ( isHidden, questionMark, valueUnitsString ) => {
+      return isHidden ? questionMark : valueUnitsString;
+    } )
   } );
 
   return nameColonValueStringProperty;
@@ -175,14 +185,15 @@ export default class DensityNumberLineNode extends Node {
     options.displayDensities.forEach( (
       {
         densityProperty,
+        nameProperty,
         visibleProperty,
-        color,
-        nameProperty
+        isHiddenProperty,
+        color
       }, index ) => {
 
       const arrow = createArrow( index, color );
 
-      const densityStringProperty = options.showNumericValue ? createDensityStringProperty( densityProperty, nameProperty ) : nameProperty;
+      const densityStringProperty = options.showNumericValue ? createDensityStringProperty( densityProperty, nameProperty, isHiddenProperty ) : nameProperty;
 
       const label = new RichText( densityStringProperty, combineOptions<TextOptions>( {
         fill: color
@@ -200,12 +211,6 @@ export default class DensityNumberLineNode extends Node {
       } );
       markerNodes.push( marker );
 
-      // Density links
-      // This instance lives for the lifetime of the simulation, so we don't need to remove this listener
-      densityProperty.link( density => {
-        marker.x = this.modelViewTransform( density );
-        marker.visible = density < options.maxDensity! + 1e-5; // Allow rounding error
-      } );
       ManualConstraint.create( this, [ labelContainer, arrow ], ( labelContainerProxy, arrowProxy ) => {
         if ( index === 0 ) {
           labelContainerProxy.centerBottom = arrowProxy.centerTop;
@@ -216,8 +221,13 @@ export default class DensityNumberLineNode extends Node {
       } );
 
       // This instance lives for the lifetime of the simulation, so we don't need to remove this listener
-      visibleProperty && visibleProperty.link( visible => {
-        marker.visible = visible;
+      Multilink.multilink( [
+        densityProperty,
+        visibleProperty,
+        isHiddenProperty
+      ], ( density, isVisible, isHidden ) => {
+        marker.x = this.modelViewTransform( density );
+        marker.visible = isVisible && !isHidden && density < options.maxDensity! + 1e-5;
       } );
     } );
 
@@ -235,20 +245,21 @@ export class DensityNumberLineLegend extends VBox {
     displayDensities.forEach( (
       {
         densityProperty,
+        nameProperty,
         visibleProperty,
-        color,
-        nameProperty
+        isHiddenProperty,
+        color
       }, index ) => {
 
       legendChildren.push( [
         createArrow( index, color ),
-        new RichText( createDensityStringProperty( densityProperty, nameProperty ), {
+        new RichText( createDensityStringProperty( densityProperty, nameProperty, isHiddenProperty ), {
           font: new PhetFont( 16 ),
-          maxWidth: 100
+          maxWidth: 110
         } )
       ] );
 
-      legendVisibilities.push( visibleProperty! );
+      legendVisibilities.push( visibleProperty );
     } );
 
     super( {