diff --git a/js/common/NumberPairsConstants.ts b/js/common/NumberPairsConstants.ts index 2819244..9f381e3 100644 --- a/js/common/NumberPairsConstants.ts +++ b/js/common/NumberPairsConstants.ts @@ -11,9 +11,14 @@ import Range from '../../../dot/js/Range.js'; import PhetColorScheme from '../../../scenery-phet/js/PhetColorScheme.js'; import PhetFont from '../../../scenery-phet/js/PhetFont.js'; import numberPairs from '../numberPairs.js'; +import Bounds2 from '../../../dot/js/Bounds2.js'; +import ScreenView from '../../../joist/js/ScreenView.js'; const TEN_TOTAL_RANGE = new Range( 0, 10 ); const TWENTY_TOTAL_RANGE = new Range( 11, 20 ); +const COUNTING_AREA_X_MARGIN = 80; +const COUNTING_AREA_MIN_Y = ScreenView.DEFAULT_LAYOUT_BOUNDS.minY + 200; + const NumberPairsConstants = { SCREEN_VIEW_X_MARGIN: 15, @@ -31,6 +36,8 @@ const NumberPairsConstants = { SUM_INITIAL_LEFT_ADDEND_VALUE: 2, COUNTING_AREA_X_MARGIN: 80, COUNTING_AREA_CORNER_RADIUS: 5, + COUNTING_AREA_BOUNDS: new Bounds2( ScreenView.DEFAULT_LAYOUT_BOUNDS.minX + COUNTING_AREA_X_MARGIN, + COUNTING_AREA_MIN_Y, ScreenView.DEFAULT_LAYOUT_BOUNDS.maxX - COUNTING_AREA_X_MARGIN, COUNTING_AREA_MIN_Y + 340 ), TEN_TOTAL_RANGE: TEN_TOTAL_RANGE, TEN_NUMBER_LINE_RANGE: new Range( 0, TEN_TOTAL_RANGE.max ), diff --git a/js/common/model/NumberPairsModel.ts b/js/common/model/NumberPairsModel.ts index a5abd97..b2856da 100644 --- a/js/common/model/NumberPairsModel.ts +++ b/js/common/model/NumberPairsModel.ts @@ -300,7 +300,8 @@ export default class NumberPairsModel implements TModel { /** * Set the left addend to the right addend value and update positions as is desired. */ - public swapAddends( countingAreaWidth: number ): void { + public swapAddends(): void { + const countingAreaWidth = NumberPairsConstants.COUNTING_AREA_BOUNDS.width; const leftAddendObjects = this.leftAddendCountingObjectsProperty.value; const rightAddendObjects = this.rightAddendCountingObjectsProperty.value; diff --git a/js/common/view/CommutativeButton.ts b/js/common/view/CommutativeButton.ts index 65ffbc5..0442d04 100644 --- a/js/common/view/CommutativeButton.ts +++ b/js/common/view/CommutativeButton.ts @@ -21,16 +21,15 @@ type SelfOptions = EmptySelfOptions; type CommutativeButtonOptions = SelfOptions & PickRequired - & StrictOmit; + & StrictOmit; export default class CommutativeButton extends RectangularPushButton { - public constructor( swapAddends: ( countingAreaWidth: number ) => void, countingAreaWidth: number, providedOptions: CommutativeButtonOptions ) { + public constructor( providedOptions: CommutativeButtonOptions ) { const commutativeArrowsIcon = CommutativeButton.createCommutativeArrowsIcon(); const options = optionize4()( {}, { - content: commutativeArrowsIcon, - listener: () => swapAddends( countingAreaWidth ) + content: commutativeArrowsIcon }, NumberPairsConstants.RECTANGULAR_PUSH_BUTTON_OPTIONS, providedOptions ); super( options ); } diff --git a/js/common/view/NumberPairsScreenView.ts b/js/common/view/NumberPairsScreenView.ts index 92c146c..76e3548 100644 --- a/js/common/view/NumberPairsScreenView.ts +++ b/js/common/view/NumberPairsScreenView.ts @@ -48,9 +48,9 @@ export type NumberPairsScreenViewOptions = SelfOptions & PickRequired; const COUNTING_AREA_Y_MARGIN = 15; // empirically determined +const COUNTING_AREA_BOUNDS = NumberPairsConstants.COUNTING_AREA_BOUNDS; export default class NumberPairsScreenView extends ScreenView { - protected readonly countingAreaBounds: Bounds2; protected readonly resetAllButton: Node; public constructor( model: NumberPairsModel, providedOptions: NumberPairsScreenViewOptions ) { @@ -111,14 +111,6 @@ export default class NumberPairsScreenView extends ScreenView { } ); this.addChild( this.resetAllButton ); - const countingAreaMinX = this.layoutBounds.minX + NumberPairsConstants.COUNTING_AREA_X_MARGIN; - const countingAreaMinY = this.layoutBounds.minY + NumberPairsConstants.SCREEN_VIEW_Y_MARGIN - + options.numberBondContent.bounds.height + COUNTING_AREA_Y_MARGIN; - const countingAreaMaxX = this.layoutBounds.maxX - NumberPairsConstants.COUNTING_AREA_X_MARGIN; - const countingAreaMaxY = countingAreaMinY + 340; // empirically determined - this.countingAreaBounds = new Bounds2( countingAreaMinX, countingAreaMinY, - countingAreaMaxX, countingAreaMaxY ); - /** * Create the buttons along the left edge of each screen */ @@ -138,8 +130,8 @@ export default class NumberPairsScreenView extends ScreenView { // The sum screen organizes all the objects into one central ten frame. We create that bounds here so that // we have access to the countingAreaBounds which are defined during construction. - const sumTenFrameBounds = this.countingAreaBounds.erodedX( this.countingAreaBounds.width / 3.5 ); - const tenFrameBounds = options.sumScreen ? [ sumTenFrameBounds ] : NumberPairsScreenView.splitBoundsInHalf( this.countingAreaBounds ); + const sumTenFrameBounds = COUNTING_AREA_BOUNDS.erodedX( COUNTING_AREA_BOUNDS.width / 3.5 ); + const tenFrameBounds = options.sumScreen ? [ sumTenFrameBounds ] : NumberPairsScreenView.splitBoundsInHalf( COUNTING_AREA_BOUNDS ); const tenFrameButton = new TenFrameButton( tenFrameBounds, model.organizeIntoTenFrame.bind( model ), { tandem: options.tandem.createTandem( 'tenFrameButton' ), visibleProperty: tenFrameButtonVisibleProperty @@ -150,14 +142,15 @@ export default class NumberPairsScreenView extends ScreenView { tandem: options.tandem.createTandem( 'organizeBeadsButton' ), visibleProperty: organizeButtonVisibleProperty } ); - const commutativeButton = new CommutativeButton( model.swapAddends.bind( model ), this.countingAreaBounds.width, { + const commutativeButton = new CommutativeButton( { + listener: model.swapAddends, tandem: options.tandem.createTandem( 'commutativeButton' ) } ); const countingAreaButtonsVBox = new VBox( { children: [ tenFrameButton, organizeBeadsButton, commutativeButton ], spacing: 10, x: this.layoutBounds.minX + NumberPairsConstants.SCREEN_VIEW_X_MARGIN, - y: this.countingAreaBounds.minY + y: COUNTING_AREA_BOUNDS.minY } ); this.addChild( countingAreaButtonsVBox ); @@ -173,7 +166,7 @@ export default class NumberPairsScreenView extends ScreenView { } } ); const countingAreaNode = new CountingAreaNode( model.leftAddendVisibleProperty, model.rightAddendVisibleProperty, - this.countingAreaBounds, { + COUNTING_AREA_BOUNDS, { countingRepresentationTypeProperty: model.representationTypeProperty, backgroundColorProperty: countingAreaBackgroundColorProperty, tandem: options.tandem.createTandem( 'countingAreaNode' ) @@ -188,7 +181,7 @@ export default class NumberPairsScreenView extends ScreenView { countingRepresentationType === RepresentationType.ONE_CARDS || countingRepresentationType === RepresentationType.BUTTERFLIES || countingRepresentationType === RepresentationType.SOCCER_BALLS ); - const locationCountingObjectsLayerNode = new LocationCountingObjectsLayerNode( model, this.countingAreaBounds, { + const locationCountingObjectsLayerNode = new LocationCountingObjectsLayerNode( model, COUNTING_AREA_BOUNDS, { visibleProperty: locationLayerVisibleProperty, tandem: options.tandem.createTandem( 'locationCountingObjectsLayerNode' ) } ); @@ -207,7 +200,7 @@ export default class NumberPairsScreenView extends ScreenView { */ if ( model.representationTypeProperty.validValues?.includes( RepresentationType.KITTENS ) ) { const kittensLayerVisibleProperty = DerivedProperty.valueEqualsConstant( model.representationTypeProperty, RepresentationType.KITTENS ); - const kittensLayerNode = new KittensLayerNode( model, model.countingObjects, this.countingAreaBounds, { + const kittensLayerNode = new KittensLayerNode( model, model.countingObjects, COUNTING_AREA_BOUNDS, { visibleProperty: kittensLayerVisibleProperty, tandem: options.tandem.createTandem( 'kittensLayerNode' ) } ); @@ -237,7 +230,7 @@ export default class NumberPairsScreenView extends ScreenView { RepresentationType.NUMBER_LINE ); - const numberLineNode = new NumberLineNode( model, this.countingAreaBounds.width - 40, { + const numberLineNode = new NumberLineNode( model, COUNTING_AREA_BOUNDS.width - 40, { visibleProperty: numberLineVisibleProperty, numberLineRange: options.sceneRange?.max === NumberPairsConstants.TEN_TOTAL_RANGE.max ? NumberPairsConstants.TEN_NUMBER_LINE_RANGE : NumberPairsConstants.TWENTY_NUMBER_LINE_RANGE, @@ -247,9 +240,9 @@ export default class NumberPairsScreenView extends ScreenView { // TODO: I'm having a hard time finding the offset I need to apply for this to be correct before the numberLineNode // is added to the scene graph. - numberLineNode.center = this.countingAreaBounds.center; + numberLineNode.center = COUNTING_AREA_BOUNDS.center; - const numberLineCheckboxGroup = new NumberLineOptionsCheckboxGroup( model, this.countingAreaBounds, { + const numberLineCheckboxGroup = new NumberLineOptionsCheckboxGroup( model, COUNTING_AREA_BOUNDS, { visibleProperty: numberLineVisibleProperty, tandem: options.tandem.createTandem( 'numberLineCheckboxGroup' ) } ); @@ -262,8 +255,8 @@ export default class NumberPairsScreenView extends ScreenView { 'handle', new NumberLineIcon( iconWidth, iconValue, { showRightArrow: true } ), 'arrow', new NumberLineIcon( iconWidth, iconValue, { showLeftArrow: true, showRightArrow: true } ), { - top: this.countingAreaBounds.bottom + COUNTING_AREA_Y_MARGIN, - left: this.countingAreaBounds.left, + top: COUNTING_AREA_BOUNDS.bottom + COUNTING_AREA_Y_MARGIN, + left: COUNTING_AREA_BOUNDS.left, visibleProperty: numberLineVisibleProperty, toggleSwitchOptions: { size: new Dimension2( 36, 18 ) @@ -279,18 +272,18 @@ export default class NumberPairsScreenView extends ScreenView { if ( model.representationTypeProperty.validValues?.includes( RepresentationType.CUBES ) ) { const beadsVisibleProperty = DerivedProperty.valueEqualsConstant( model.representationTypeProperty, RepresentationType.CUBES ); const sceneRange = options.sceneRange || NumberPairsConstants.TWENTY_TOTAL_RANGE; - const beadsOnWireNode = new BeadsOnWireNode( model, this.countingAreaBounds, { + const beadsOnWireNode = new BeadsOnWireNode( model, COUNTING_AREA_BOUNDS, { sceneRange: sceneRange, visibleProperty: beadsVisibleProperty, tandem: options.tandem.createTandem( 'beadsOnWireNode' ) } ); countingRepresentationsLayer.addChild( beadsOnWireNode ); - beadsOnWireNode.center = this.countingAreaBounds.center; + beadsOnWireNode.center = COUNTING_AREA_BOUNDS.center; } // Position the counting representation radio buttons below the counting area. - countingRepresentationRadioButtonGroup.centerTop = new Vector2( this.countingAreaBounds.centerX, this.countingAreaBounds.maxY + COUNTING_AREA_Y_MARGIN ); + countingRepresentationRadioButtonGroup.centerTop = new Vector2( COUNTING_AREA_BOUNDS.centerX, COUNTING_AREA_BOUNDS.maxY + COUNTING_AREA_Y_MARGIN ); } /** diff --git a/js/sum/view/SumScreenView.ts b/js/sum/view/SumScreenView.ts index c551a8d..0b56cb0 100644 --- a/js/sum/view/SumScreenView.ts +++ b/js/sum/view/SumScreenView.ts @@ -26,6 +26,9 @@ type SelfOptions = { type SumScreenViewOptions = SelfOptions & StrictOmit & PickRequired; + +const COUNTING_AREA_BOUNDS = NumberPairsConstants.COUNTING_AREA_BOUNDS; + export default class SumScreenView extends NumberPairsScreenView { public constructor( model: SumModel, providedOptions: SumScreenViewOptions ) { @@ -77,7 +80,7 @@ export default class SumScreenView extends NumberPairsScreenView { const addendSpinners = new VBox( { children: [ leftAddendControlPanel, rightAddendControlPanel ], spacing: 35, - centerY: this.countingAreaBounds.centerY, + centerY: COUNTING_AREA_BOUNDS.centerY, right: this.layoutBounds.maxX - NumberPairsConstants.SCREEN_VIEW_X_MARGIN } ); this.addChild( addendSpinners );