Skip to content

Commit

Permalink
Move BottomRepresentationCheckboxGroup instantiation to subclasses, see
Browse files Browse the repository at this point in the history 
#153
  • Loading branch information
@samreid
samreid committed Apr 26, 2023
1 parent eb072eb commit 1c86200
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 51 deletions.
26 changes: 3 additions & 23 deletions js/common/view/CAVScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,23 @@
*/

import ScreenView, { ScreenViewOptions } from '../../../../joist/js/ScreenView.js';
import optionize, { combineOptions } from '../../../../phet-core/js/optionize.js';
import optionize from '../../../../phet-core/js/optionize.js';
import centerAndVariability from '../../centerAndVariability.js';
import CAVModel from '../model/CAVModel.js';
import CAVConstants from '../CAVConstants.js';
import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
import PhetioGroup from '../../../../tandem/js/PhetioGroup.js';
import CAVObjectNode from './CAVObjectNode.js';
import { AlignBox, Node } from '../../../../scenery/js/imports.js';
import { Node } from '../../../../scenery/js/imports.js';
import CAVObjectType from '../model/CAVObjectType.js';
import CAVObject from '../model/CAVObject.js';
import BottomRepresentationCheckboxGroup, { BottomRepresentationCheckboxGroupOptions } from './BottomRepresentationCheckboxGroup.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 StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
import Property from '../../../../axon/js/Property.js';
import Range from '../../../../dot/js/Range.js';
import Tandem from '../../../../tandem/js/Tandem.js';
Expand All @@ -42,7 +40,6 @@ import KickButtonGroup from './KickButtonGroup.js';
import PlayAreaMedianIndicatorNode from './PlayAreaMedianIndicatorNode.js';

type SelfOptions = {
bottomCheckboxGroupOptions: StrictOmit<BottomRepresentationCheckboxGroupOptions, 'tandem'>;
questionBarOptions: QuestionBarOptions;
};

Expand All @@ -53,8 +50,6 @@ const GROUND_POSITION_Y = 500;

export default class CAVScreenView extends ScreenView {

protected readonly bottomCheckboxGroup: BottomRepresentationCheckboxGroup;

protected readonly resetAllButton: ResetAllButton;
protected readonly modelViewTransform: ModelViewTransform2;
protected readonly model: CAVModel;
Expand All @@ -80,8 +75,7 @@ export default class CAVScreenView extends ScreenView {
public constructor( model: CAVModel,
// TODO: Structure in options?
createAccordionBox: ( tandem: Tandem, top: number, layoutBounds: Bounds2, playAreaNumberLineNode: Node ) => CAVAccordionBox, providedOptions: CAVScreenViewOptions ) {
const options = optionize<CAVScreenViewOptions,
StrictOmit<SelfOptions, 'bottomCheckboxGroupOptions'>, ScreenViewOptions>()( {}, providedOptions );
const options = optionize<CAVScreenViewOptions, SelfOptions, ScreenViewOptions>()( {}, providedOptions );

// The ground is at y=0
const modelViewTransform = ModelViewTransform2.createRectangleInvertedYMapping(
Expand Down Expand Up @@ -174,20 +168,6 @@ export default class CAVScreenView extends ScreenView {
map.delete( cavObject );
} );

this.bottomCheckboxGroup = new BottomRepresentationCheckboxGroup( model,
combineOptions<BottomRepresentationCheckboxGroupOptions>( {
tandem: options.tandem.createTandem( 'bottomCheckboxGroup' )
}, options.bottomCheckboxGroupOptions ) );

const BOTTOM_CHECKBOX_PANEL_MARGIN = 12.5;

// In order to use the AlignBox we need to know the distance from the top of the screen, to the top of the grass.
const BOTTOM_CHECKBOX_PANEL_Y_MARGIN = this.layoutBounds.maxY - this.modelViewTransform.modelToViewY( 0 ) + BOTTOM_CHECKBOX_PANEL_MARGIN;


const checkboxAlignBox = new AlignBox( this.bottomCheckboxGroup, { alignBounds: this.layoutBounds, xAlign: 'right', yAlign: 'bottom', xMargin: BOTTOM_CHECKBOX_PANEL_MARGIN, yMargin: BOTTOM_CHECKBOX_PANEL_Y_MARGIN } );
this.addChild( checkboxAlignBox );

this.playAreaMedianIndicatorNode = new PlayAreaMedianIndicatorNode();
this.addChild( this.playAreaMedianIndicatorNode );

Expand Down
29 changes: 20 additions & 9 deletions js/mean-and-median/view/MeanAndMedianScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@ import centerAndVariability from '../../centerAndVariability.js';
import MeanAndMedianModel from '../model/MeanAndMedianModel.js';
import CAVColors from '../../common/CAVColors.js';
import CenterAndVariabilityStrings from '../../CenterAndVariabilityStrings.js';
import { ManualConstraint, Node } from '../../../../scenery/js/imports.js';
import { AlignBox, ManualConstraint, Node } from '../../../../scenery/js/imports.js';
import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
import CAVScreenView, { CAVScreenViewOptions } from '../../common/view/CAVScreenView.js';
import Bounds2 from '../../../../dot/js/Bounds2.js';
import Tandem from '../../../../tandem/js/Tandem.js';
import MeanAndMedianAccordionBox from './MeanAndMedianAccordionBox.js';
import BottomRepresentationCheckboxGroup from '../../common/view/BottomRepresentationCheckboxGroup.js';

type MeanAndMedianScreenViewOptions = StrictOmit<CAVScreenViewOptions, 'questionBarOptions' | 'bottomCheckboxGroupOptions'>;
type MeanAndMedianScreenViewOptions = StrictOmit<CAVScreenViewOptions, 'questionBarOptions'>;

export default class MeanAndMedianScreenView extends CAVScreenView {

Expand All @@ -29,13 +30,6 @@ export default class MeanAndMedianScreenView extends CAVScreenView {
questionBarOptions: {
barFill: CAVColors.meanAndMedianQuestionBarFillColorProperty,
questionString: CenterAndVariabilityStrings.meanAndMedianQuestionStringProperty
},
bottomCheckboxGroupOptions: {
includeMean: true,
includePredictMean: true,
includePredictMedian: true,
includeMedian: true,
includeVariability: false
}
}, providedOptions );

Expand All @@ -51,6 +45,23 @@ export default class MeanAndMedianScreenView extends CAVScreenView {
( playAreaNumberLineNodeWrapper, contentsWrapper ) => {
contentsWrapper.x = playAreaNumberLineNodeWrapper.x;
} );

const bottomCheckboxGroup = new BottomRepresentationCheckboxGroup( model, {
includeMean: true,
includePredictMean: true,
includePredictMedian: true,
includeMedian: true,
includeVariability: false,
tandem: options.tandem.createTandem( 'bottomCheckboxGroup' )
} );

// TODO: A bit of duplication across screen views
// In order to use the AlignBox we need to know the distance from the top of the screen, to the top of the grass.
const BOTTOM_CHECKBOX_PANEL_MARGIN = 12.5;
const BOTTOM_CHECKBOX_PANEL_Y_MARGIN = this.layoutBounds.maxY - this.modelViewTransform.modelToViewY( 0 ) + BOTTOM_CHECKBOX_PANEL_MARGIN;

const checkboxAlignBox = new AlignBox( bottomCheckboxGroup, { alignBounds: this.layoutBounds, xAlign: 'right', yAlign: 'bottom', xMargin: BOTTOM_CHECKBOX_PANEL_MARGIN, yMargin: BOTTOM_CHECKBOX_PANEL_Y_MARGIN } );
this.addChild( checkboxAlignBox );
}
}

Expand Down
29 changes: 19 additions & 10 deletions js/median/view/MedianScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@ import CAVScreenView, { CAVScreenViewOptions } from '../../common/view/CAVScreen
import Bounds2 from '../../../../dot/js/Bounds2.js';
import Tandem from '../../../../tandem/js/Tandem.js';
import MedianAccordionBox from './MedianAccordionBox.js';
import BottomRepresentationCheckboxGroup from '../../common/view/BottomRepresentationCheckboxGroup.js';
import { AlignBox } from '../../../../scenery/js/imports.js';

type SelfOptions = EmptySelfOptions;
type MedianScreenViewOptions =
SelfOptions
& StrictOmit<CAVScreenViewOptions, 'questionBarOptions' | 'bottomCheckboxGroupOptions'>;
& StrictOmit<CAVScreenViewOptions, 'questionBarOptions'>;

export default class MedianScreenView extends CAVScreenView {

Expand All @@ -31,15 +33,6 @@ export default class MedianScreenView extends CAVScreenView {
questionBarOptions: {
barFill: CAVColors.medianQuestionBarFillColorProperty,
questionString: CenterAndVariabilityStrings.medianQuestionStringProperty
},

// TODO: Remove this option and just create things correctly in the AccordionBox subclass
bottomCheckboxGroupOptions: {
includeMean: false,
includePredictMean: false,
includePredictMedian: true,
includeMedian: true,
includeVariability: false
}
}, providedOptions );

Expand All @@ -49,6 +42,22 @@ export default class MedianScreenView extends CAVScreenView {
// TODO: Can we just add this after super()? Why does it have to be here?
( tandem: Tandem, top: number, layoutBounds: Bounds2 ) =>
new MedianAccordionBox( model, layoutBounds, tandem, top ), options );

const bottomCheckboxGroup = new BottomRepresentationCheckboxGroup( model, {
includeMean: false,
includePredictMean: false,
includePredictMedian: true,
includeMedian: true,
includeVariability: false,
tandem: options.tandem.createTandem( 'bottomCheckboxGroup' )
} );

// In order to use the AlignBox we need to know the distance from the top of the screen, to the top of the grass.
const BOTTOM_CHECKBOX_PANEL_MARGIN = 12.5;
const BOTTOM_CHECKBOX_PANEL_Y_MARGIN = this.layoutBounds.maxY - this.modelViewTransform.modelToViewY( 0 ) + BOTTOM_CHECKBOX_PANEL_MARGIN;

const checkboxAlignBox = new AlignBox( bottomCheckboxGroup, { alignBounds: this.layoutBounds, xAlign: 'right', yAlign: 'bottom', xMargin: BOTTOM_CHECKBOX_PANEL_MARGIN, yMargin: BOTTOM_CHECKBOX_PANEL_Y_MARGIN } );
this.addChild( checkboxAlignBox );
}
}

Expand Down
29 changes: 20 additions & 9 deletions js/variability/view/VariabilityScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,18 @@ import centerAndVariability from '../../centerAndVariability.js';
import VariabilityModel from '../model/VariabilityModel.js';
import CAVColors from '../../common/CAVColors.js';
import CenterAndVariabilityStrings from '../../CenterAndVariabilityStrings.js';
import { ManualConstraint, Node } from '../../../../scenery/js/imports.js';
import { AlignBox, ManualConstraint, Node } from '../../../../scenery/js/imports.js';
import DistributionRadioButtonGroup from './DistributionRadioButtonGroup.js';
import VariabilityMeasureRadioButtonGroup from './VariabilityMeasureRadioButtonGroup.js';
import InfoDialog from './InfoDialog.js';
import CAVScreenView, { CAVScreenViewOptions } from '../../common/view/CAVScreenView.js';
import Bounds2 from '../../../../dot/js/Bounds2.js';
import Tandem from '../../../../tandem/js/Tandem.js';
import VariabilityAccordionBox from './VariabilityAccordionBox.js';
import BottomRepresentationCheckboxGroup from '../../common/view/BottomRepresentationCheckboxGroup.js';

type SelfOptions = EmptySelfOptions;
type VariabilityScreenViewOptions = SelfOptions & StrictOmit<CAVScreenViewOptions, 'questionBarOptions' | 'bottomCheckboxGroupOptions'>;
type VariabilityScreenViewOptions = SelfOptions & StrictOmit<CAVScreenViewOptions, 'questionBarOptions'>;

export default class VariabilityScreenView extends CAVScreenView {

Expand All @@ -34,13 +35,6 @@ export default class VariabilityScreenView extends CAVScreenView {
questionBarOptions: {
barFill: CAVColors.variabilityQuestionBarFillColorProperty,
questionString: CenterAndVariabilityStrings.variabilityQuestionStringProperty
},
bottomCheckboxGroupOptions: {
includeVariability: true,
includePredictMean: false,
includePredictMedian: false,
includeMean: true,
includeMedian: true
}
}, providedOptions );

Expand Down Expand Up @@ -95,6 +89,23 @@ export default class VariabilityScreenView extends CAVScreenView {
infoDialog.hide();
}
} );

const bottomCheckboxGroup = new BottomRepresentationCheckboxGroup( model, {
includeVariability: true,
includePredictMean: false,
includePredictMedian: false,
includeMean: true,
includeMedian: true,
tandem: options.tandem.createTandem( 'bottomCheckboxGroup' )
} );

// TODO: A bit of duplication across screen views
// In order to use the AlignBox we need to know the distance from the top of the screen, to the top of the grass.
const BOTTOM_CHECKBOX_PANEL_MARGIN = 12.5;
const BOTTOM_CHECKBOX_PANEL_Y_MARGIN = this.layoutBounds.maxY - this.modelViewTransform.modelToViewY( 0 ) + BOTTOM_CHECKBOX_PANEL_MARGIN;

const checkboxAlignBox = new AlignBox( bottomCheckboxGroup, { alignBounds: this.layoutBounds, xAlign: 'right', yAlign: 'bottom', xMargin: BOTTOM_CHECKBOX_PANEL_MARGIN, yMargin: BOTTOM_CHECKBOX_PANEL_Y_MARGIN } );
this.addChild( checkboxAlignBox );
}
}

Expand Down

0 comments on commit 1c86200

Please sign in to comment.