deprecate LayoutBox, phetsims/scenery#1418

phetsims · May 31, 2022 · 1b34309 · 1b34309 · pixelzoom · May 31, 2022
1 parent b2db35f
commit 1b34309
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 38 deletions.
diff --git a/js/common/view/BeforeAfterNode.js b/js/common/view/BeforeAfterNode.js
@@ -14,9 +14,7 @@
 import Dimension2 from '../../../../dot/js/Dimension2.js';
 import merge from '../../../../phet-core/js/merge.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { LayoutBox } from '../../../../scenery/js/imports.js';
-import { Node } from '../../../../scenery/js/imports.js';
-import { Text } from '../../../../scenery/js/imports.js';
+import { HBox, Node, Text } from '../../../../scenery/js/imports.js';
 import reactantsProductsAndLeftovers from '../../reactantsProductsAndLeftovers.js';
 import reactantsProductsAndLeftoversStrings from '../../reactantsProductsAndLeftoversStrings.js';
 import RPALColors from '../RPALColors.js';
@@ -76,9 +74,8 @@ class BeforeAfterNode extends Node {
     const arrowNode = new RightArrowNode( { fill: RPALColors.PANEL_FILL, stroke: null, scale: 0.75 } );
 
     // layout of boxes and arrow
-    const hBox = new LayoutBox( {
+    const hBox = new HBox( {
       children: [ this.beforeBox, arrowNode, this.afterBox ],
-      orientation: 'horizontal',
       spacing: 10
     } );
     this.addChild( hBox );

diff --git a/js/dev/DevGameControls.js b/js/dev/DevGameControls.js
@@ -8,7 +8,7 @@
 
 import merge from '../../../phet-core/js/merge.js';
 import PhetFont from '../../../scenery-phet/js/PhetFont.js';
-import { LayoutBox } from '../../../scenery/js/imports.js';
+import { HBox } from '../../../scenery/js/imports.js';
 import TextPushButton from '../../../sun/js/buttons/TextPushButton.js';
 import reactantsProductsAndLeftovers from '../reactantsProductsAndLeftovers.js';
 
@@ -19,7 +19,7 @@ const BUTTON_OPTIONS = {
   textFill: 'white'
 };
 
-class DevGameControls extends LayoutBox {
+class DevGameControls extends HBox {
 
   /**
    * @param {GameModel} model
@@ -28,7 +28,6 @@ class DevGameControls extends LayoutBox {
   constructor( model, options ) {
 
     options = merge( {
-      orientation: 'horizontal',
       spacing: 5
     }, options );
 

diff --git a/js/game/GameScreen.js b/js/game/GameScreen.js
@@ -11,10 +11,7 @@ import Screen from '../../../joist/js/Screen.js';
 import ScreenIcon from '../../../joist/js/ScreenIcon.js';
 import { Shape } from '../../../kite/js/imports.js';
 import FaceNode from '../../../scenery-phet/js/FaceNode.js';
-import { LayoutBox } from '../../../scenery/js/imports.js';
-import { Node } from '../../../scenery/js/imports.js';
-import { Path } from '../../../scenery/js/imports.js';
-import { Rectangle } from '../../../scenery/js/imports.js';
+import { HBox, Node, Path, Rectangle, VBox } from '../../../scenery/js/imports.js';
 import RPALColors from '../common/RPALColors.js';
 import reactantsProductsAndLeftovers from '../reactantsProductsAndLeftovers.js';
 import reactantsProductsAndLeftoversStrings from '../reactantsProductsAndLeftoversStrings.js';
@@ -69,16 +66,14 @@ function createIcon() {
       .lineTo( ARROW_SIZE / 2, -ARROW_SIZE )
       .close(),
     ARROW_OPTIONS );
-  const arrowsBox = new LayoutBox( {
+  const arrowsBox = new VBox( {
     children: [ upArrowNode, downArrowNode ],
-    orientation: 'vertical',
     spacing: 20
   } );
 
   // centered in background, scaled to fit
-  const contentNode = new LayoutBox( {
+  const contentNode = new HBox( {
     children: [ arrowsBox, faceNode ],
-    orientation: 'horizontal',
     spacing: 25
   } );
   contentNode.setScaleMagnitude(

diff --git a/js/game/view/SettingsNode.js b/js/game/view/SettingsNode.js
@@ -15,10 +15,7 @@ import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js';
 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 { LayoutBox } from '../../../../scenery/js/imports.js';
-import { Node } from '../../../../scenery/js/imports.js';
-import { Rectangle } from '../../../../scenery/js/imports.js';
-import { Text } from '../../../../scenery/js/imports.js';
+import { HBox, Node, Rectangle, Text, VBox } from '../../../../scenery/js/imports.js';
 import TextPushButton from '../../../../sun/js/buttons/TextPushButton.js';
 import LevelSelectionButton from '../../../../vegas/js/LevelSelectionButton.js';
 import ScoreDisplayStars from '../../../../vegas/js/ScoreDisplayStars.js';
@@ -67,10 +64,9 @@ class SettingsNode extends Node {
     for ( let level = 0; level < model.numberOfLevels; level++ ) {
       buttons.push( createLevelSelectionButton( level, model, levelIcons[ level ], maxIconWidth, maxIconHeight ) );
     }
-    const buttonsParent = new LayoutBox( {
+    const buttonsParent = new HBox( {
       children: buttons,
       spacing: 40,
-      orientation: 'horizontal',
       center: layoutBounds.center
     } );
 
@@ -98,9 +94,8 @@ class SettingsNode extends Node {
 
     options.children = [
       // title and level-selection buttons, centered in space above visibility radio buttons
-      new LayoutBox( {
+      new VBox( {
         children: [ title, buttonsParent ],
-        orientation: 'vertical',
         align: 'center',
         spacing: 40,
         centerX: layoutBounds.centerX,
@@ -168,18 +163,16 @@ function createLevelSelectionButton( level, model, icon, maxIconWidth, maxIconHe
  */
 function createIcon( level, leftNode, rightNode ) {
   const arrowNode = new ArrowNode( 0, 0, 50, 0, { headHeight: 20, headWidth: 20, tailWidth: 6 } );
-  const iconNode = new LayoutBox( {
+  const iconNode = new HBox( {
     children: [ leftNode, arrowNode, rightNode ],
-    orientation: 'horizontal',
     spacing: 20
   } );
   const labelNode = new Text( StringUtils.format( reactantsProductsAndLeftoversStrings.pattern_Level_0, level ), {
     font: new PhetFont( 45 ),
     maxWidth: iconNode.width
   } );
-  return new LayoutBox( {
+  return new VBox( {
     children: [ labelNode, iconNode ],
-    orientation: 'vertical',
     spacing: 30
   } );
 }

diff --git a/js/game/view/VisibilityPanel.js b/js/game/view/VisibilityPanel.js
@@ -10,10 +10,7 @@
 import H2ONode from '../../../../nitroglycerin/js/nodes/H2ONode.js';
 import merge from '../../../../phet-core/js/merge.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { LayoutBox } from '../../../../scenery/js/imports.js';
-import { Node } from '../../../../scenery/js/imports.js';
-import { Path } from '../../../../scenery/js/imports.js';
-import { Text } from '../../../../scenery/js/imports.js';
+import { HBox, Node, Path, Text } from '../../../../scenery/js/imports.js';
 import eyeSlashSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSlashSolidShape.js';
 import eyeSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSolidShape.js';
 import AquaRadioButtonGroup from '../../../../sun/js/AquaRadioButtonGroup.js';
@@ -73,9 +70,8 @@ class VisibilityPanel extends Panel {
 function createShowAllNode() {
   const eyeNode = new Path( eyeSolidShape, FONT_AWESOME_OPTIONS );
   const textNode = new Text( reactantsProductsAndLeftoversStrings.showAll, TEXT_OPTIONS );
-  return new LayoutBox( {
+  return new HBox( {
     children: [ eyeNode, textNode ],
-    orientation: 'horizontal',
     spacing: 12
   } );
 }
@@ -95,9 +91,8 @@ function createHideMoleculesNode() {
     centerY: eyeNode.bottom
   } );
   const textNode = new Text( reactantsProductsAndLeftoversStrings.hideMolecules, TEXT_OPTIONS );
-  return new LayoutBox( {
+  return new HBox( {
     children: [ new Node( { children: [ eyeNode, moleculeNode ] } ), textNode ],
-    orientation: 'horizontal',
     spacing: 7
   } );
 }
@@ -115,9 +110,8 @@ function createHideNumbersNode() {
     centerY: eyeNode.bottom
   } );
   const textNode = new Text( reactantsProductsAndLeftoversStrings.hideNumbers, TEXT_OPTIONS );
-  return new LayoutBox( {
+  return new HBox( {
     children: [ new Node( { children: [ eyeNode, numbersNode ] } ), textNode ],
-    orientation: 'horizontal',
     spacing: 5
   } );
 }