From 82c61216667257b9acc1e3ed3e19e03081e15183 Mon Sep 17 00:00:00 2001 From: Sam Reid Date: Tue, 7 May 2024 16:35:12 -0600 Subject: [PATCH] Move Fluid Displayed from checkbox to accordion box, see https://github.com/phetsims/buoyancy/issues/150 --- density-buoyancy-common-strings_en.json | 2 +- js/buoyancy/view/BuoyancyLabScreenView.ts | 74 +++++++++++--------- js/buoyancy/view/FluidDisplacedPanel.ts | 21 ++---- js/common/view/BuoyancyDisplayOptionsNode.ts | 9 --- 4 files changed, 47 insertions(+), 59 deletions(-) diff --git a/density-buoyancy-common-strings_en.json b/density-buoyancy-common-strings_en.json index cd50358e..8a6372d6 100644 --- a/density-buoyancy-common-strings_en.json +++ b/density-buoyancy-common-strings_en.json @@ -405,7 +405,7 @@ "value": "% Submerged" }, "fluidDisplaced": { - "value": "Fluid Displaced" + "value": "Fluid
Displaced" }, "depthLines": { "value": "Depth Lines" diff --git a/js/buoyancy/view/BuoyancyLabScreenView.ts b/js/buoyancy/view/BuoyancyLabScreenView.ts index ff965757..4404faf3 100644 --- a/js/buoyancy/view/BuoyancyLabScreenView.ts +++ b/js/buoyancy/view/BuoyancyLabScreenView.ts @@ -10,7 +10,7 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import Vector2 from '../../../../dot/js/Vector2.js'; import { combineOptions } from '../../../../phet-core/js/optionize.js'; -import { AlignBox, HBox, Node, VBox } from '../../../../scenery/js/imports.js'; +import { AlignBox, HBox, ManualConstraint, Node, RichText, VBox } from '../../../../scenery/js/imports.js'; import Panel from '../../../../sun/js/Panel.js'; import DensityBuoyancyCommonConstants from '../../common/DensityBuoyancyCommonConstants.js'; import Material from '../../common/model/Material.js'; @@ -33,7 +33,9 @@ import ScaleView from '../../common/view/ScaleView.js'; import Bounds2 from '../../../../dot/js/Bounds2.js'; import ScaleHeightControl from '../../common/view/ScaleHeightControl.js'; import fluid_displaced_scale_icon_png from '../../../images/fluid_displaced_scale_icon_png.js'; -import Multilink from '../../../../axon/js/Multilink.js'; +import AccordionBox from '../../../../sun/js/AccordionBox.js'; +import BooleanProperty from '../../../../axon/js/BooleanProperty.js'; +import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; // constants const MARGIN = DensityBuoyancyCommonConstants.MARGIN; @@ -55,19 +57,40 @@ export default class BuoyancyLabScreenView extends DensityBuoyancyScreenView { + const positionLeftSideContent = () => { leftSideContent.bottom = this.visibleBoundsProperty.value.bottom - DESIRED_LEFT_SIDE_MARGIN; leftSideContent.left = this.visibleBoundsProperty.value.left + DESIRED_LEFT_SIDE_MARGIN; - leftSideVBox.spacing = DESIRED_LEFT_SIDE_MARGIN; }; - // Custom layout code to even out margins when we are close to overlapping with the ground because the - // fluidDisplacedPanel is showing - Multilink.multilink( [ this.visibleBoundsProperty, fluidDisplacedPanel.visibleProperty ], ( visibleBounds, fluidDisplacedPanelVisible ) => { - applyDefaultMargins(); - - // No worry of layout going above ground unless the fluid displaced panel is showing - if ( fluidDisplacedPanelVisible ) { - - // In screen view coordinates (0,0 is at the top left of layout bounds) - const poolTopFrontHeight = this.modelToViewPoint( new Vector3( this.model.poolBounds.left, this.model.poolBounds.maxY, this.model.poolBounds.front ) ); - - // Space under the ground that we have for the two panels - const availableHeight = visibleBounds.bottom - poolTopFrontHeight.y; - - // The height of just content, no margins counted (top/middle/bottom) - const contentHeightNotMargins = leftSideVBox.height - DESIRED_LEFT_SIDE_MARGIN; - - const availableMarginSpace = availableHeight - contentHeightNotMargins; - assert && assert( availableMarginSpace > 0, 'left control panels on lab screen are too big to fit under the ground' ); - if ( availableMarginSpace < 3 * DESIRED_LEFT_SIDE_MARGIN ) { - const calculatedMargin = availableMarginSpace > 0 ? availableMarginSpace / 3 : 1; - leftSideVBox.spacing = calculatedMargin; - leftSideContent.bottom = visibleBounds.bottom - calculatedMargin; - } - } + // Reflow when the entire accordion box is hidden in phet-io studio. + // TODO: https://github.com/phetsims/buoyancy/issues/150 this layout is duplicated with the abvoe + ManualConstraint.create( this, [ leftSideContent ], leftSideContentProxy => { + leftSideContentProxy.bottom = this.visibleBoundsProperty.value.bottom - DESIRED_LEFT_SIDE_MARGIN; + leftSideContentProxy.left = this.visibleBoundsProperty.value.left + DESIRED_LEFT_SIDE_MARGIN; } ); + this.visibleBoundsProperty.link( positionLeftSideContent ); + const displayedMysteryMaterials = [ Material.DENSITY_A, Material.DENSITY_B diff --git a/js/buoyancy/view/FluidDisplacedPanel.ts b/js/buoyancy/view/FluidDisplacedPanel.ts index 5b8b1405..7998e97f 100644 --- a/js/buoyancy/view/FluidDisplacedPanel.ts +++ b/js/buoyancy/view/FluidDisplacedPanel.ts @@ -13,7 +13,7 @@ import BeakerNode, { BeakerNodeOptions } from '../../../../scenery-phet/js/Beake import NumberProperty from '../../../../axon/js/NumberProperty.js'; import Range from '../../../../dot/js/Range.js'; import optionize, { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js'; -import { Color, Node, RichText, Text, VBox } from '../../../../scenery/js/imports.js'; +import { Color, Node, RichText, Text } from '../../../../scenery/js/imports.js'; import DensityBuoyancyCommonStrings from '../../DensityBuoyancyCommonStrings.js'; import DensityBuoyancyCommonConstants from '../../common/DensityBuoyancyCommonConstants.js'; import NumberDisplay from '../../../../scenery-phet/js/NumberDisplay.js'; @@ -48,7 +48,8 @@ export default class FluidDisplacedPanel extends MultiSectionPanelsNode { `This class greatly expects the starting volume of the pool to be ${STARTING_VOLUME}L.` ); const options = optionize()( { - yMargin: DensityBuoyancyCommonConstants.MARGIN / 2 + yMargin: DensityBuoyancyCommonConstants.MARGIN / 2, + stroke: null }, providedOptions ); const displayRange = new Range( 0, maxBeakerVolume ); @@ -127,18 +128,10 @@ export default class FluidDisplacedPanel extends MultiSectionPanelsNode { numberDisplay.right = beakerNode.right; } ); - super( [ new VBox( { - spacing: DensityBuoyancyCommonConstants.MARGIN / 2, - children: [ - new Text( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, { - font: DensityBuoyancyCommonConstants.ITEM_FONT, - maxWidth: CONTENT_WIDTH - } ), - new Node( { - children: [ scaleIcon, beakerNode, numberDisplay, forceReadout ] - } ) - ] - } ) ], options ); + super( [ new Node( { + children: [ scaleIcon, beakerNode, numberDisplay, forceReadout ] + } ) + ], options ); } private static getBeakerOptions(): BeakerNodeOptions { diff --git a/js/common/view/BuoyancyDisplayOptionsNode.ts b/js/common/view/BuoyancyDisplayOptionsNode.ts index 883cec9f..627c834d 100644 --- a/js/common/view/BuoyancyDisplayOptionsNode.ts +++ b/js/common/view/BuoyancyDisplayOptionsNode.ts @@ -17,7 +17,6 @@ import DensityBuoyancyCommonConstants from '../DensityBuoyancyCommonConstants.js import DensityBuoyancyCommonColors from './DensityBuoyancyCommonColors.js'; import DensityBuoyancyModel from '../model/DensityBuoyancyModel.js'; import optionize, { combineOptions } from '../../../../phet-core/js/optionize.js'; -import Property from '../../../../axon/js/Property.js'; import RectangularButton from '../../../../sun/js/buttons/RectangularButton.js'; import WithRequired from '../../../../phet-core/js/types/WithRequired.js'; @@ -42,9 +41,6 @@ const checkboxSpacing = 5; type SelfOptions = { includeVectorScaleControl?: boolean; - - // If provided, a checkbox control will be added to this panel, null to omit. - showFluidDisplacedProperty?: Property | null; }; type BuoyancyDisplayOptionsNodeOptions = SelfOptions & WithRequired; @@ -54,7 +50,6 @@ export default class BuoyancyDisplayOptionsNode extends VBox { const options = optionize()( { includeVectorScaleControl: true, - showFluidDisplacedProperty: null, spacing: DensityBuoyancyCommonConstants.MARGIN, align: 'left' }, providedOptions ); @@ -138,10 +133,6 @@ export default class BuoyancyDisplayOptionsNode extends VBox { new Checkbox( model.showForceValuesProperty, new Text( DensityBuoyancyCommonStrings.forceValuesStringProperty, labelOptions ), combineOptions( { tandem: options.tandem.createTandem( 'forcesCheckbox' ) }, checkboxOptions ) ), - ...( options.showFluidDisplacedProperty ? - [ new Checkbox( options.showFluidDisplacedProperty, new Text( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, labelOptions ), combineOptions( { - tandem: options.tandem.createTandem( 'fluidDisplacedCheckbox' ) - }, checkboxOptions ) ) ] : [] ), ...( model.supportsDepthLines ? [ new Checkbox( model.showDepthLinesProperty, new Text( DensityBuoyancyCommonStrings.depthLinesStringProperty, labelOptions ), combineOptions( { tandem: options.tandem.createTandem( 'depthLinesCheckbox' )