diff --git a/js/common/view/CAVAccordionBox.ts b/js/common/view/CAVAccordionBox.ts index 33c14877..8ff63fc3 100644 --- a/js/common/view/CAVAccordionBox.ts +++ b/js/common/view/CAVAccordionBox.ts @@ -9,7 +9,7 @@ import Bounds2 from '../../../../dot/js/Bounds2.js'; import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js'; -import { ManualConstraint, Node, Rectangle } from '../../../../scenery/js/imports.js'; +import { Node, Rectangle } from '../../../../scenery/js/imports.js'; import AccordionBox, { AccordionBoxOptions } from '../../../../sun/js/AccordionBox.js'; import CAVConstants from '../CAVConstants.js'; import optionize from '../../../../phet-core/js/optionize.js'; @@ -18,15 +18,11 @@ import CAVModel from '../model/CAVModel.js'; import ValueReadoutsNode from './ValueReadoutsNode.js'; import { Shape } from '../../../../kite/js/imports.js'; import PickRequired from '../../../../phet-core/js/types/PickRequired.js'; -import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js'; -import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js'; -import VariabilityModel from '../../variability/model/VariabilityModel.js'; type SelfOptions = { valueReadoutsNode: ValueReadoutsNode | null; contentNodeOffsetY: number; leftMargin: number; - infoShowingProperty: TReadOnlyProperty | null; }; export type CAVAccordionBoxOptions = SelfOptions @@ -102,31 +98,6 @@ export default class CAVAccordionBox extends AccordionBox { super( backgroundNode, options ); model.resetEmitter.addListener( () => this.reset() ); - - if ( options.infoShowingProperty ) { - const infoButton = new InfoButton( { - iconFill: 'cornflowerblue', - scale: 0.5, - rightTop: backgroundNode.rightTop.plusXY( -5, 5 ), - touchAreaDilation: 5, - tandem: options.tandem.createTandem( 'infoButton' ), - listener: () => { - - // TODO: cast? - ( model as VariabilityModel ).isInfoShowingProperty.value = true; - } - } ); - backgroundNode.addChild( infoButton ); - - // NOTE: this overlaps the accordion box top panel - ManualConstraint.create( this, [ backgroundNode, infoButton ], - ( backgroundWrapper, infoButtonWrapper ) => { - - // TODO: Is it a faux pas to move outside of the wrapper bounds? I couldn't figure how to be a child of the accordion - // box content, but overlap the title bar - infoButtonWrapper.rightTop = backgroundWrapper.rightTop.plusXY( 3, -35 ); - } ); - } } } diff --git a/js/mean-and-median/view/MeanAndMedianScreenView.ts b/js/mean-and-median/view/MeanAndMedianScreenView.ts index 9d605cc3..cf6304e9 100644 --- a/js/mean-and-median/view/MeanAndMedianScreenView.ts +++ b/js/mean-and-median/view/MeanAndMedianScreenView.ts @@ -81,8 +81,7 @@ export default class MeanAndMedianScreenView extends CAVScreenView { contentNodeOffsetY: 0, top: top, valueReadoutsNode: new ValueReadoutsNode( model ), - centerX: layoutBounds.centerX, - infoShowingProperty: null + centerX: layoutBounds.centerX } ); }, options ); diff --git a/js/median/view/MedianScreenView.ts b/js/median/view/MedianScreenView.ts index 17a84430..7a401fd4 100644 --- a/js/median/view/MedianScreenView.ts +++ b/js/median/view/MedianScreenView.ts @@ -69,8 +69,7 @@ export default class MedianScreenView extends CAVScreenView { contentNodeOffsetY: -6, top: top, valueReadoutsNode: null, - centerX: layoutBounds.centerX, - infoShowingProperty: null + centerX: layoutBounds.centerX } ); }, options ); } diff --git a/js/variability/view/VariabilityScreenView.ts b/js/variability/view/VariabilityScreenView.ts index 8a60ec6e..a150328a 100644 --- a/js/variability/view/VariabilityScreenView.ts +++ b/js/variability/view/VariabilityScreenView.ts @@ -31,6 +31,7 @@ import CAVAccordionBox from '../../common/view/CAVAccordionBox.js'; import VariabilityReadoutsNode from './VariabilityReadoutsNode.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; import Tandem from '../../../../tandem/js/Tandem.js'; +import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js'; // TODO: Copied from somewhere. What's the best pattern? const TEXT_OPTIONS = { @@ -79,6 +80,21 @@ export default class VariabilityScreenView extends CAVScreenView { tandem: tandem.createTandem( 'plotNode' ) } ); + const infoButton = new InfoButton( { + iconFill: 'cornflowerblue', + scale: 0.5, + touchAreaDilation: 5, + tandem: options.tandem.createTandem( 'infoButton' ), + listener: () => { + model.isInfoShowingProperty.value = true; + }, + top: 0, + + // TODO: How to position this properly? + right: accordionBoxContents.width + 130 + } ); + accordionBoxContents.addChild( infoButton ); + afterInit = () => { // NOTE: This assumes that the NumberLineNode in the play area and in the dot plot have the same characteristics: // * Same font // * Same offset and scale @@ -94,6 +110,15 @@ export default class VariabilityScreenView extends CAVScreenView { ( variabilityRadioButtonGroupWrapper, accordionBoxWrapper ) => { variabilityRadioButtonGroupWrapper.top = accordionBoxWrapper.top; } ); + + // NOTE: this overlaps the accordion box top panel + // ManualConstraint.create( this, [ accordionBoxContents, infoButton ], + // ( backgroundWrapper, infoButtonWrapper ) => { + // + // // TODO: Is it a faux pas to move outside of the wrapper bounds? I couldn't figure how to be a child of the accordion + // // box content, but overlap the title bar + // infoButtonWrapper.rightTop = backgroundWrapper.rightTop.plusXY( 3, -35 ); + // } ); }; return new CAVAccordionBox( model, accordionBoxContents, new ToggleNode( model.selectedVariabilityProperty, [ { value: VariabilityMeasure.RANGE, @@ -124,8 +149,7 @@ export default class VariabilityScreenView extends CAVScreenView { contentNodeOffsetY: 0, top: top, valueReadoutsNode: new VariabilityReadoutsNode( model ), - right: layoutBounds.right - CAVConstants.SCREEN_VIEW_X_MARGIN, - infoShowingProperty: model.isInfoShowingProperty + right: layoutBounds.right - CAVConstants.SCREEN_VIEW_X_MARGIN } ); }, options );