Remove AlignBox from LevelSelectionButtonGroup.ts. Add groupButtonWid…

…th and groupButtonHeight options to LevelSelectionButtonGroup.ts. See #120.
phetsims · Nov 29, 2023 · 80a06c1 · 80a06c1
1 parent beae0f4
commit 80a06c1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/js/LevelSelectionButton.ts b/js/LevelSelectionButton.ts
@@ -58,6 +58,7 @@ type SelfOptions = {
 
 export type LevelSelectionButtonOptions = SelfOptions & StrictOmit<RectangularPushButtonOptions, 'content'>;
 
+export const DEFAULT_BUTTON_DIMENSION = 150;
 export default class LevelSelectionButton extends RectangularPushButton {
 
   private readonly disposeLevelSelectionButton: () => void;

diff --git a/js/LevelSelectionButtonGroup.ts b/js/LevelSelectionButtonGroup.ts
@@ -20,8 +20,8 @@
 import StrictOmit from '../../phet-core/js/types/StrictOmit.js';
 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 { FlowBox, FlowBoxOptions, LayoutNode, Node, NodeLayoutConstraint, NodeOptions } from '../../scenery/js/imports.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';
@@ -40,14 +40,14 @@ export type LevelSelectionButtonGroupItem = {
 
   // Options for the button. These will override LevelSelectionButtonGroupOptions.levelSelectionButtonOptions.
   // Setting tandem is the responsibility of the group, so it is omitted here.
-  options?: StrictOmit<LevelSelectionButtonOptions, 'tandem'>;
+  options?: StrictOmit<LevelSelectionButtonOptions, 'tandem' | 'buttonHeight' | 'buttonWidth'>;
 };
 
 type SelfOptions = {
 
   // Options for all LevelSelectionButton instances in the group.
   // These can be overridden for specific button(s) via LevelSelectionButtonGroupItem.options.
-  levelSelectionButtonOptions?: StrictOmit<LevelSelectionButtonOptions, 'tandem'>;
+  levelSelectionButtonOptions?: StrictOmit<LevelSelectionButtonOptions, 'tandem' | 'buttonHeight' | 'buttonWidth'>;
 
   // Options for the default layout, which is a FlowBox. Ignored if createLayoutNode is provided.
   flowBoxOptions?: StrictOmit<FlowBoxOptions, 'children'>;
@@ -60,6 +60,9 @@ type SelfOptions = {
   // 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<NodeOptions, 'children'> & PickRequired<NodeOptions, 'tandem'>;
@@ -79,7 +82,8 @@ export default class LevelSelectionButtonGroup extends Node {
 
     const options = optionize<LevelSelectionButtonGroupOptions,
       StrictOmit<SelfOptions, 'createLayoutNode' | 'gameLevels' | 'levelSelectionButtonOptions'>, NodeOptions>()( {
-
+      groupButtonHeight: DEFAULT_BUTTON_DIMENSION,
+      groupButtonWidth: DEFAULT_BUTTON_DIMENSION,
       // The default layout is a single row of buttons.
       flowBoxOptions: {
         orientation: 'horizontal',
@@ -89,11 +93,6 @@ export default class LevelSelectionButtonGroup extends Node {
       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 +102,13 @@ export default class LevelSelectionButtonGroup extends Node {
         tandem = options.tandem.createTandem( tandemName );
       }
 
-      return new LevelSelectionButton( new AlignBox( item.icon, alignBoxOptions ), item.scoreProperty,
-        combineOptions<LevelSelectionButtonOptions>( {
-          tandem: tandem
-        }, options.levelSelectionButtonOptions, item.options ) );
+      const buttonOptions = combineOptions<LevelSelectionButtonOptions>( {
+        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.

diff --git a/js/demo/components/demoLevelSelectionButtonGroup.ts b/js/demo/components/demoLevelSelectionButtonGroup.ts
@@ -85,13 +85,13 @@ class SingleRowButtonGroup extends LevelSelectionButtonGroup {
     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 @@ class MultiRowButtonGroup extends LevelSelectionButtonGroup {
     super( items, {
       levelSelectionButtonOptions: {
         baseColor: 'lightGreen',
-        buttonWidth: buttonWidth,
-        buttonHeight: buttonHeight,
         lineWidth: buttonLineWidth,
         bestTimeFont: new PhetFont( 18 )
       },
@@ -154,6 +152,8 @@ class MultiRowButtonGroup extends LevelSelectionButtonGroup {
         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 @@ class XButtonGroup extends LevelSelectionButtonGroup {
 
     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[] ) => {