diff --git a/js/common/view/CAVScreenView.ts b/js/common/view/CAVScreenView.ts index 637659a4..89263683 100644 --- a/js/common/view/CAVScreenView.ts +++ b/js/common/view/CAVScreenView.ts @@ -18,12 +18,8 @@ import { AlignBox, ManualConstraint, Node } from '../../../../scenery/js/imports import CAVObjectType from '../model/CAVObjectType.js'; import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js'; import EraserButton from '../../../../scenery-phet/js/buttons/EraserButton.js'; -import PredictionSlider from './PredictionSlider.js'; -import CAVColors from '../CAVColors.js'; import BooleanProperty from '../../../../axon/js/BooleanProperty.js'; import DragIndicatorArrowNode from './DragIndicatorArrowNode.js'; -import Property from '../../../../axon/js/Property.js'; -import Range from '../../../../dot/js/Range.js'; import QuestionBar, { QuestionBarOptions } from '../../../../scenery-phet/js/QuestionBar.js'; import NumberLineNode from './NumberLineNode.js'; import Bounds2 from '../../../../dot/js/Bounds2.js'; @@ -36,6 +32,11 @@ import CAVAccordionBox from './CAVAccordionBox.js'; import VerticalCheckboxGroup, { VerticalCheckboxGroupItem } from '../../../../sun/js/VerticalCheckboxGroup.js'; import { AnimationMode } from '../model/AnimationMode.js'; import SoccerBallNode from './SoccerBallNode.js'; +import PredictionSlider from './PredictionSlider.js'; +import CAVColors from '../CAVColors.js'; +import Property from '../../../../axon/js/Property.js'; +import Range from '../../../../dot/js/Range.js'; +import Tandem from '../../../../tandem/js/Tandem.js'; type SelfOptions = { questionBarOptions: QuestionBarOptions; @@ -62,9 +63,6 @@ export default class CAVScreenView extends ScreenView { // Subclasses use this to add to for correct z-ordering and correct tab navigation order protected readonly contentLayer = new Node(); - protected readonly medianPredictionNode: PredictionSlider; - protected readonly meanPredictionNode: PredictionSlider; - protected accordionBox: CAVAccordionBox | null = null; protected readonly questionBar: QuestionBar; @@ -186,26 +184,6 @@ export default class CAVScreenView extends ScreenView { model.objectChangedEmitter.addListener( this.updateMedianNode ); model.isShowingPlayAreaMedianProperty.link( this.updateMedianNode ); - this.medianPredictionNode = new PredictionSlider( model.medianPredictionProperty, this.modelViewTransform, model.physicalRange, { - predictionThumbNodeOptions: { - color: CAVColors.medianColorProperty - }, - valueProperty: model.medianPredictionProperty, - enabledRangeProperty: new Property( model.physicalRange ), - roundToInterval: 0.5, - visibleProperty: model.isShowingMedianPredictionProperty, - tandem: options.tandem.createTandem( 'medianPredictionNode' ) - } ); - this.meanPredictionNode = new PredictionSlider( model.meanPredictionProperty, this.modelViewTransform, model.physicalRange, { - predictionThumbNodeOptions: { - color: CAVColors.meanColorProperty - }, - valueProperty: model.meanPredictionProperty, - enabledRangeProperty: new Property( model.physicalRange ), - roundToInterval: null, // continuous - visibleProperty: model.isShowingMeanPredictionProperty, - tandem: options.tandem.createTandem( 'meanPredictionNode' ) - } ); this.resetAllButton = new ResetAllButton( { listener: () => { @@ -276,12 +254,6 @@ export default class CAVScreenView extends ScreenView { // Soccer balls go behind the accordion box after they land this.contentLayer.addChild( this.backObjectLayer ); - - // Add in the same order as the checkboxes, so the z-order matches the checkbox order - - // TODO: meanPredictionNode should only exist in MeanAndMedianScreenView. Neither should exist in VariabilityScreenView - this.contentLayer.addChild( this.meanPredictionNode ); - this.contentLayer.addChild( this.medianPredictionNode ); } private updateAccordionBoxPosition(): void { @@ -343,6 +315,22 @@ export default class CAVScreenView extends ScreenView { yMargin: BOTTOM_CHECKBOX_PANEL_Y_MARGIN } ) ); } + + /** + * The MedianPredictionNode is shared in the Median screen and MeanAndMedianScreen, so factored out here. + */ + public static createMedianPredictionNode( model: CAVModel, modelViewTransform: ModelViewTransform2, tandem: Tandem ): PredictionSlider { + return new PredictionSlider( model.medianPredictionProperty, modelViewTransform, model.physicalRange, { + predictionThumbNodeOptions: { + color: CAVColors.medianColorProperty + }, + valueProperty: model.medianPredictionProperty, + enabledRangeProperty: new Property( model.physicalRange ), + roundToInterval: 0.5, + visibleProperty: model.isShowingMedianPredictionProperty, + tandem: tandem + } ); + } } centerAndVariability.register( 'CAVScreenView', CAVScreenView ); \ No newline at end of file diff --git a/js/mean-and-median/view/MeanAndMedianScreenView.ts b/js/mean-and-median/view/MeanAndMedianScreenView.ts index c11b9b78..0bd820f4 100644 --- a/js/mean-and-median/view/MeanAndMedianScreenView.ts +++ b/js/mean-and-median/view/MeanAndMedianScreenView.ts @@ -13,11 +13,14 @@ import MeanAndMedianModel from '../model/MeanAndMedianModel.js'; import CAVColors from '../../common/CAVColors.js'; import CenterAndVariabilityStrings from '../../CenterAndVariabilityStrings.js'; import { AlignGroup } from '../../../../scenery/js/imports.js'; +import Range from '../../../../dot/js/Range.js'; import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js'; import CAVScreenView, { CAVScreenViewOptions } from '../../common/view/CAVScreenView.js'; import MeanAndMedianAccordionBox from './MeanAndMedianAccordionBox.js'; import BottomRepresentationCheckboxGroup from '../../common/view/BottomRepresentationCheckboxGroup.js'; import CAVConstants from '../../common/CAVConstants.js'; +import PredictionSlider from '../../common/view/PredictionSlider.js'; +import Property from '../../../../axon/js/Property.js'; type MeanAndMedianScreenViewOptions = StrictOmit; @@ -43,6 +46,22 @@ export default class MeanAndMedianScreenView extends CAVScreenView { BottomRepresentationCheckboxGroup.getMedianCheckboxItem( iconGroup, model ), BottomRepresentationCheckboxGroup.getMeanCheckboxItem( iconGroup, model ) ] ); + + this.contentLayer.addChild( new PredictionSlider( model.meanPredictionProperty, this.modelViewTransform, model.physicalRange, { + predictionThumbNodeOptions: { + color: CAVColors.meanColorProperty + }, + valueProperty: model.meanPredictionProperty, + enabledRangeProperty: new Property( model.physicalRange ), + roundToInterval: null, // continuous + visibleProperty: model.isShowingMeanPredictionProperty, + tandem: options.tandem.createTandem( 'meanPredictionNode' ) + } ) ); + this.contentLayer.addChild( CAVScreenView.createMedianPredictionNode( + model, + this.modelViewTransform, + options.tandem.createTandem( 'medianPredictionNode' ) + ) ); } } diff --git a/js/median/view/MedianScreenView.ts b/js/median/view/MedianScreenView.ts index 6411fe08..968edcd2 100644 --- a/js/median/view/MedianScreenView.ts +++ b/js/median/view/MedianScreenView.ts @@ -44,6 +44,12 @@ export default class MedianScreenView extends CAVScreenView { BottomRepresentationCheckboxGroup.getPredictMedianCheckboxItem( iconGroup, model ), BottomRepresentationCheckboxGroup.getMedianCheckboxItem( iconGroup, model ) ] ); + + this.contentLayer.addChild( CAVScreenView.createMedianPredictionNode( + model, + this.modelViewTransform, + options.tandem.createTandem( 'medianPredictionNode' ) + ) ); } }