marlitas
commented
9 months ago @Luisav1 and I worked on this patch together that seems to solve the problem. We checked the before and after on arithmetic, BCE, area-model-algebra/multiplication, and vegas demos. We saw no changes here. There is still work to be done to address all uses of LevelSelectionButtonGroup to make sure options are updated.
```diff
Subject: [PATCH] remove align box from LevelSelectionButtonGroup.ts
---
Index: vegas/js/LevelSelectionButton.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/vegas/js/LevelSelectionButton.ts b/vegas/js/LevelSelectionButton.ts
--- a/vegas/js/LevelSelectionButton.ts (revision 775277a8a4b9afc30ee19529773fc6ab6ea34a5c)
+++ b/vegas/js/LevelSelectionButton.ts (date 1701210571704)
@@ -58,6 +58,7 @@
export type LevelSelectionButtonOptions = SelfOptions & StrictOmit;
+export const DEFAULT_BUTTON_DIMENSION = 150;
export default class LevelSelectionButton extends RectangularPushButton {
private readonly disposeLevelSelectionButton: () => void;
Index: arithmetic/js/common/view/LevelSelectionNode.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/arithmetic/js/common/view/LevelSelectionNode.js b/arithmetic/js/common/view/LevelSelectionNode.js
--- a/arithmetic/js/common/view/LevelSelectionNode.js (revision b5c7020c5225747a6d86f8071243fb3ee2d33687)
+++ b/arithmetic/js/common/view/LevelSelectionNode.js (date 1701210571709)
@@ -11,8 +11,8 @@
import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
import TimerToggleButton from '../../../../scenery-phet/js/buttons/TimerToggleButton.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { HBox, Node, Text, VBox } from '../../../../scenery/js/imports.js';
-import LevelSelectionButton from '../../../../vegas/js/LevelSelectionButton.js';
+import { Node, Text, VBox } from '../../../../scenery/js/imports.js';
+import LevelSelectionButtonGroup from '../../../../vegas/js/LevelSelectionButtonGroup.js';
import ScoreDisplayStars from '../../../../vegas/js/ScoreDisplayStars.js';
import arithmetic from '../../arithmetic.js';
import ArithmeticStrings from '../../ArithmeticStrings.js';
@@ -69,29 +69,35 @@
// add select level buttons
assert && assert( model.levelModels.length === iconSets[ options.iconSet ].length, 'Number of icons doesn\'t match number of levels' );
- const levelSelectButtons = model.levelModels.map( ( level, levelIndex ) => new LevelSelectionButton(
- iconSets[ options.iconSet ][ levelIndex ],
- model.levelModels[ levelIndex ].displayScoreProperty,
- {
- buttonWidth: BUTTON_LENGTH,
- buttonHeight: BUTTON_LENGTH,
- baseColor: options.buttonBaseColor,
- bestTimeProperty: model.levelModels[ levelIndex ].bestTimeProperty,
- bestTimeVisibleProperty: ArithmeticGlobals.timerEnabledProperty,
- listener: () => {
- callback( levelIndex );
- },
- createScoreDisplay: scoreProperty => new ScoreDisplayStars( scoreProperty, {
- numberOfStars: ArithmeticConstants.NUM_STARS,
- perfectScore: level.perfectScore
- } ),
- soundPlayerIndex: levelIndex
+ const levelSelectButtons = model.levelModels.map( ( level, levelIndex ) => {
+ return {
+ icon: iconSets[ options.iconSet ][ levelIndex ],
+ scoreProperty: model.levelModels[ levelIndex ].displayScoreProperty,
+ options: {
+ baseColor: options.buttonBaseColor,
+ bestTimeVisibleProperty: ArithmeticGlobals.timerEnabledProperty,
+ bestTimeProperty: model.levelModels[ levelIndex ].bestTimeProperty,
+ listener: () => {
+ callback( levelIndex );
+ },
+ createScoreDisplay: scoreProperty => new ScoreDisplayStars( scoreProperty, {
+ numberOfStars: ArithmeticConstants.NUM_STARS,
+ perfectScore: level.perfectScore
+ } ),
+ soundPlayerIndex: levelIndex
+ }
+ };
+ } );
+ const levelSelectionButtonGroup = new LevelSelectionButtonGroup( levelSelectButtons, {
+ groupButtonHeight: BUTTON_LENGTH,
+ groupButtonWidth: BUTTON_LENGTH,
+ flowBoxOptions: {
+ spacing: 50,
+ top: chooseLevelTitle.bottom + 15,
+ centerX: chooseLevelTitle.centerX
}
- ) );
- const selectLevelButtonsHBox = new HBox( { spacing: 50, children: levelSelectButtons } );
- selectLevelButtonsHBox.top = chooseLevelTitle.bottom + 15;
- selectLevelButtonsHBox.centerX = chooseLevelTitle.centerX;
- this.addChild( selectLevelButtonsHBox );
+ } );
+ this.addChild( levelSelectionButtonGroup );
// add timer and sound buttons
const soundAndTimerButtons = new VBox( {
Index: vegas/js/demo/components/demoLevelSelectionButtonGroup.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/vegas/js/demo/components/demoLevelSelectionButtonGroup.ts b/vegas/js/demo/components/demoLevelSelectionButtonGroup.ts
--- a/vegas/js/demo/components/demoLevelSelectionButtonGroup.ts (revision 775277a8a4b9afc30ee19529773fc6ab6ea34a5c)
+++ b/vegas/js/demo/components/demoLevelSelectionButtonGroup.ts (date 1701210652340)
@@ -85,13 +85,13 @@
super( items, {
levelSelectionButtonOptions: {
baseColor: 'pink',
- buttonWidth: 100,
- buttonHeight: 100,
bestTimeFont: new PhetFont( 18 )
},
flowBoxOptions: {
spacing: 30
},
+ groupButtonHeight: 100,
+ groupButtonWidth: 100,
tandem: Tandem.OPT_OUT
} );
}
@@ -142,8 +142,6 @@
super( items, {
levelSelectionButtonOptions: {
baseColor: 'lightGreen',
- buttonWidth: buttonWidth,
- buttonHeight: buttonHeight,
lineWidth: buttonLineWidth,
bestTimeFont: new PhetFont( 18 )
},
@@ -154,6 +152,8 @@
wrap: true, // start a new row when preferredWidth is reached
justify: 'center' // horizontal justification
},
+ groupButtonHeight: buttonHeight,
+ groupButtonWidth: buttonWidth,
tandem: Tandem.OPT_OUT
} );
}
@@ -188,10 +188,10 @@
super( items, {
levelSelectionButtonOptions: {
- baseColor: 'orange',
- buttonWidth: 75,
- buttonHeight: 75
+ baseColor: 'orange'
},
+ groupButtonWidth: 75,
+ groupButtonHeight: 75,
// Create a custom layout, not possible via the default FlowBox and flowBoxOptions.
createLayoutNode: ( buttons: LevelSelectionButton[] ) => {
Index: vegas/js/LevelSelectionButtonGroup.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/vegas/js/LevelSelectionButtonGroup.ts b/vegas/js/LevelSelectionButtonGroup.ts
--- a/vegas/js/LevelSelectionButtonGroup.ts (revision 775277a8a4b9afc30ee19529773fc6ab6ea34a5c)
+++ b/vegas/js/LevelSelectionButtonGroup.ts (date 1701210571721)
@@ -21,10 +21,11 @@
import PickRequired from '../../phet-core/js/types/PickRequired.js';
import optionize, { combineOptions } from '../../phet-core/js/optionize.js';
import { AlignBox, AlignGroup, FlowBox, FlowBoxOptions, LayoutNode, Node, NodeLayoutConstraint, NodeOptions } from '../../scenery/js/imports.js';
-import LevelSelectionButton, { LevelSelectionButtonOptions } from './LevelSelectionButton.js';
+import LevelSelectionButton, { DEFAULT_BUTTON_DIMENSION, LevelSelectionButtonOptions } from './LevelSelectionButton.js';
import TProperty from '../../axon/js/TProperty.js';
import Tandem from '../../tandem/js/Tandem.js';
import vegas from './vegas.js';
+import tandem from '../../tandem/js/Tandem.js';
// Describes one LevelSelectionButton
export type LevelSelectionButtonGroupItem = {
@@ -40,14 +41,14 @@
// Options for the button. These will override LevelSelectionButtonGroupOptions.levelSelectionButtonOptions.
// Setting tandem is the responsibility of the group, so it is omitted here.
- options?: StrictOmit;
+ options?: StrictOmit;
};
type SelfOptions = {
// Options for all LevelSelectionButton instances in the group.
// These can be overridden for specific button(s) via LevelSelectionButtonGroupItem.options.
- levelSelectionButtonOptions?: StrictOmit;
+ levelSelectionButtonOptions?: StrictOmit;
// Options for the default layout, which is a FlowBox. Ignored if createLayoutNode is provided.
flowBoxOptions?: StrictOmit;
@@ -60,6 +61,9 @@
// query parameter. Set this to the value of the gameLevels query parameter, if supported by your sim.
// See getGameLevelsSchema.ts.
gameLevels?: number[];
+
+ groupButtonHeight?: number;
+ groupButtonWidth?: number;
};
export type LevelSelectionButtonGroupOptions = SelfOptions & StrictOmit & PickRequired;
@@ -79,7 +83,8 @@
const options = optionize, NodeOptions>()( {
-
+ groupButtonHeight: DEFAULT_BUTTON_DIMENSION,
+ groupButtonWidth: DEFAULT_BUTTON_DIMENSION,
// The default layout is a single row of buttons.
flowBoxOptions: {
orientation: 'horizontal',
@@ -89,11 +94,6 @@
tandem: Tandem.REQUIRED
}, providedOptions );
- // All icons will have the same effective size.
- const alignBoxOptions = {
- group: new AlignGroup()
- };
-
// Create the LevelSelectionButton instances.
const buttons = items.map( ( item, index ) => {
@@ -103,10 +103,13 @@
tandem = options.tandem.createTandem( tandemName );
}
- return new LevelSelectionButton( new AlignBox( item.icon, alignBoxOptions ), item.scoreProperty,
- combineOptions( {
- tandem: tandem
- }, options.levelSelectionButtonOptions, item.options ) );
+ const buttonOptions = combineOptions( {
+ buttonHeight: options.groupButtonHeight,
+ buttonWidth: options.groupButtonWidth,
+ tandem: tandem
+ }, options.levelSelectionButtonOptions, item.options );
+
+ return new LevelSelectionButton( item.icon, item.scoreProperty, buttonOptions );
} );
// Hide buttons for levels that are not included in gameLevels.
Index: balancing-chemical-equations/js/game/view/LevelSelectionNode.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/balancing-chemical-equations/js/game/view/LevelSelectionNode.ts b/balancing-chemical-equations/js/game/view/LevelSelectionNode.ts
--- a/balancing-chemical-equations/js/game/view/LevelSelectionNode.ts (revision a537d661a427843dd77ee8f6eb3872218dbad003)
+++ b/balancing-chemical-equations/js/game/view/LevelSelectionNode.ts (date 1701210571729)
@@ -59,14 +59,14 @@
const buttonGroup = new LevelSelectionButtonGroup( buttonItems, {
levelSelectionButtonOptions: {
baseColor: '#d9ebff',
- buttonWidth: 155,
- buttonHeight: 155,
bestTimeVisibleProperty: viewProperties.timerEnabledProperty
},
flowBoxOptions: {
spacing: 50,
center: layoutBounds.center
},
+ groupButtonHeight: 155,
+ groupButtonWidth: 155,
tandem: tandem.createTandem( 'buttonGroup' )
} );
```
@Luisav1 mentioned she can keep working on using the new options to size buttons and make sure all buttons remain a consistent size.
@pixelzoom your review and input here would be greatly appreciated. Let me know if you would like to connect synchronously.
Luisav1
pixelzoom
phet-dev
jonathanolson
While working on https://github.com/phetsims/arithmetic/issues/196 @Luisav1 and I were having issues with the level selection icons and layouts matching up. Upon inspecting the scenery helper we saw that an alignBox was pushing down our leftmost icon and causing other shifting behavior in the buttons.
We found that
LevelSelectionButtonGroupwas using analignGroupto match the bounds of icons across all buttons. However, this was conflicting with the scaling logic inLevelSelectionButtonThis scaling logic accurately downsized icons to fit within the button sizes provided in options, however when the bounds of the
alignBoxwere scaled down, that triggered anupdateLayoutinAlignGroup, that would then reset the bounds to match the largest height of the alignBoxes in the group. Since no other AlignBoxes had been visited yet the scaling was essentially reversed in this situation.