Skip to content

Commit

Permalink
Move Fluid Displayed from checkbox to accordion box, see phetsims/buo…
Browse files Browse the repository at this point in the history 
…yancy#150
  • Loading branch information
@samreid
samreid committed May 7, 2024
1 parent d791ece commit 82c6121
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 59 deletions.
2 changes: 1 addition & 1 deletion density-buoyancy-common-strings_en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,7 @@
"value": "% Submerged"
},
"fluidDisplaced": {
"value": "Fluid Displaced"
"value": "Fluid<br>Displaced"
},
"depthLines": {
"value": "Depth Lines"
Expand Down
74 changes: 39 additions & 35 deletions js/buoyancy/view/BuoyancyLabScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -55,19 +57,40 @@ export default class BuoyancyLabScreenView extends DensityBuoyancyScreenView<Buo
// In liters
const maxBlockVolume = 10;

const fluidDisplacedPanel = new FluidDisplacedPanel( this.waterLevelVolumeProperty,
const fluidDisplacedAccordionBoxTandem = tandem.createTandem( 'fluidDisplacedAccordionBox' );

const accordionBoxIsExpandedProperty = new BooleanProperty( false, {
tandem: fluidDisplacedAccordionBoxTandem.createTandem( 'expandedProperty' )
} );

const fluidDisplacedAccordionBox = new AccordionBox( new FluidDisplacedPanel( this.waterLevelVolumeProperty,
maxBlockVolume,
model.liquidMaterialProperty,
model.gravityProperty, {
visibleProperty: model.showFluidDisplacedProperty
} );
model.gravityProperty ), {
titleNode: new RichText( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, {
font: new PhetFont( 14 ), // Matches the checkbox label font size
maxWidth: 130
} ),
expandedProperty: accordionBoxIsExpandedProperty,

titleAlignX: 'left',
titleAlignY: 'center',
titleXMargin: 5,
titleXSpacing: 10,

contentXMargin: 2,
contentYMargin: 2,
contentXSpacing: 2,
contentYSpacing: 2,
tandem: fluidDisplacedAccordionBoxTandem
} );

const leftSideVBox = new VBox( {
align: 'left',
spacing: 5,
children: [
fluidDisplacedPanel,
fluidDisplacedAccordionBox,
new MultiSectionPanelsNode( [ new BuoyancyDisplayOptionsNode( model, {
showFluidDisplacedProperty: model.showFluidDisplacedProperty,
tandem: tandem.createTandem( 'buoyancyDisplayOptionsNode' )
} ) ] )
]
Expand All @@ -78,39 +101,20 @@ export default class BuoyancyLabScreenView extends DensityBuoyancyScreenView<Buo
} );
this.addChild( leftSideContent );

const applyDefaultMargins = () => {
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
Expand Down
21 changes: 7 additions & 14 deletions js/buoyancy/view/FluidDisplacedPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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<FluidDisplacedPanelOptions, SelfOptions, MultiSectionPanelsNodeOptions>()( {
yMargin: DensityBuoyancyCommonConstants.MARGIN / 2
yMargin: DensityBuoyancyCommonConstants.MARGIN / 2,
stroke: null
}, providedOptions );

const displayRange = new Range( 0, maxBeakerVolume );
Expand Down Expand Up @@ -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 {
Expand Down
9 changes: 0 additions & 9 deletions js/common/view/BuoyancyDisplayOptionsNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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<boolean> | null;
};

type BuoyancyDisplayOptionsNodeOptions = SelfOptions & WithRequired<VBoxOptions, 'tandem'>;
Expand All @@ -54,7 +50,6 @@ export default class BuoyancyDisplayOptionsNode extends VBox {

const options = optionize<BuoyancyDisplayOptionsNodeOptions, SelfOptions, VBoxOptions>()( {
includeVectorScaleControl: true,
showFluidDisplacedProperty: null,
spacing: DensityBuoyancyCommonConstants.MARGIN,
align: 'left'
}, providedOptions );
Expand Down Expand Up @@ -138,10 +133,6 @@ export default class BuoyancyDisplayOptionsNode extends VBox {
new Checkbox( model.showForceValuesProperty, new Text( DensityBuoyancyCommonStrings.forceValuesStringProperty, labelOptions ), combineOptions<CheckboxOptions>( {
tandem: options.tandem.createTandem( 'forcesCheckbox' )
}, checkboxOptions ) ),
...( options.showFluidDisplacedProperty ?
[ new Checkbox( options.showFluidDisplacedProperty, new Text( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, labelOptions ), combineOptions<CheckboxOptions>( {
tandem: options.tandem.createTandem( 'fluidDisplacedCheckbox' )
}, checkboxOptions ) ) ] : [] ),
...( model.supportsDepthLines ?
[ new Checkbox( model.showDepthLinesProperty, new Text( DensityBuoyancyCommonStrings.depthLinesStringProperty, labelOptions ), combineOptions<CheckboxOptions>( {
tandem: options.tandem.createTandem( 'depthLinesCheckbox' )
Expand Down

0 comments on commit 82c6121

Please sign in to comment.