avoid decorator pattern for AccordionBox, see phetsims/sun#860

phetsims · Aug 19, 2024 · 6e2c9ef · 6e2c9ef
1 parent 1047314
commit 6e2c9ef
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/js/common/view/EnergyBarGraphAccordionBox.js b/js/common/view/EnergyBarGraphAccordionBox.js
@@ -7,11 +7,15 @@
  */
 
 import merge from '../../../../phet-core/js/merge.js';
+import { Node } from '../../../../scenery/js/imports.js';
 import AccordionBox from '../../../../sun/js/AccordionBox.js';
 import energySkatePark from '../../energySkatePark.js';
 import EnergySkateParkConstants from '../EnergySkateParkConstants.js';
 import EnergyBarGraph from './EnergyBarGraph.js';
 
+// constants
+const PANEL_MARGIN = 5;
+
 class EnergyBarGraphAccordionBox extends AccordionBox {
 
   /**
@@ -23,15 +27,25 @@ class EnergyBarGraphAccordionBox extends AccordionBox {
    */
   constructor( skater, barGraphScaleProperty, barGraphVisibleProperty, tandem, options ) {
 
-    const defaultMargin = 5;
+    const titleNode = new Node();
+
+    // create an icon that represents the content, it is invisible when expanded
+    const graphLabel = EnergyBarGraph.createLabel();
+    const graphIcon = EnergyBarGraph.createBarGraphIcon( tandem.createTandem( 'barGraphIcon' ) );
+    titleNode.children = [ graphLabel, graphIcon ];
+
+    // layout the label and icon
+    graphIcon.leftCenter = graphLabel.rightCenter.plusXY( PANEL_MARGIN * 8, 0 );
+
     options = merge( {
 
-      titleNode: EnergyBarGraph.createLabel(),
+      titleNode: titleNode,
+      titleAlignX: 'left',
 
-      contentXMargin: defaultMargin,
-      contentYMargin: defaultMargin,
-      buttonXMargin: defaultMargin,
-      buttonYMargin: defaultMargin,
+      contentXMargin: PANEL_MARGIN,
+      contentYMargin: PANEL_MARGIN,
+      buttonXMargin: PANEL_MARGIN,
+      buttonYMargin: PANEL_MARGIN,
 
       // use this model Property because the graph only updates when it is visible
       expandedProperty: barGraphVisibleProperty,
@@ -50,12 +64,6 @@ class EnergyBarGraphAccordionBox extends AccordionBox {
 
     super( energyBarGraph, options );
 
-    // create an icon that represents the content, it is invisible when expanded
-    const graphIcon = EnergyBarGraph.createBarGraphIcon( tandem.createTandem( 'barGraphIcon' ) );
-    this.addChild( graphIcon );
-    graphIcon.right = graphIcon.globalToParentPoint( energyBarGraph.parentToGlobalPoint( energyBarGraph.rightCenter ) ).x;
-    graphIcon.top = options.buttonYMargin;
-
     barGraphVisibleProperty.link( visible => {
       graphIcon.visible = !visible;
     } );

diff --git a/js/common/view/PieChartLegend.js b/js/common/view/PieChartLegend.js
@@ -9,7 +9,7 @@
 import merge from '../../../../phet-core/js/merge.js';
 import MoveToTrashLegendButton from '../../../../scenery-phet/js/buttons/MoveToTrashLegendButton.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { HBox, HStrut, Rectangle, Text, VBox, VStrut } from '../../../../scenery/js/imports.js';
+import { HBox, HStrut, Rectangle, Text, VBox, VStrut, Node } from '../../../../scenery/js/imports.js';
 import Panel from '../../../../sun/js/Panel.js';
 import energySkatePark from '../../energySkatePark.js';
 import EnergySkateParkStrings from '../../EnergySkateParkStrings.js';
@@ -115,7 +115,10 @@ class PieChartLegend extends Panel {
       ]
     } );
 
-    super( contentWithTitle, merge( {
+    const panelContent = new Node();
+    panelContent.children = [ contentWithTitle, clearThermalButton ];
+
+    super( panelContent, merge( {
       x: 4,
       y: 4,
       xMargin: 7,
@@ -124,7 +127,6 @@ class PieChartLegend extends Panel {
       tandem: tandem
     }, EnergySkateParkConstants.GRAPH_PANEL_OPTONS ) );
 
-    this.addChild( clearThermalButton );
     const strutGlobal = clearThermalButtonStrut.parentToGlobalPoint( clearThermalButtonStrut.center );
     const buttonLocal = clearThermalButton.globalToParentPoint( strutGlobal );
     clearThermalButton.center = buttonLocal;