From de7524a0508bd6dd3ec3383ba99991a271c7736d Mon Sep 17 00:00:00 2001
From: jbphet <john.blanco@colorado.edu>
Date: Mon, 13 Sep 2021 16:38:11 -0600
Subject: [PATCH] restore default z-order on reset all and reset balloons, see
 https://github.com/phetsims/balloons-and-static-electricity/issues/535

---
 .../view/BASEView.js                          | 35 +++++++++++++------
 .../view/ControlPanel.js                      | 14 ++++++--
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/js/balloons-and-static-electricity/view/BASEView.js b/js/balloons-and-static-electricity/view/BASEView.js
index fa2511d7..49131193 100644
--- a/js/balloons-and-static-electricity/view/BASEView.js
+++ b/js/balloons-and-static-electricity/view/BASEView.js
@@ -77,7 +77,7 @@ class BASEView extends ScreenView {
       { fill: 'black', tandem: tandem.createTandem( 'spaceToLeftOfWall' ) }
     ) );
 
-    const controlPanel = new ControlPanel( model, this.layoutBounds, tandem.createTandem( 'controlPanel' ) );
+    const controlPanel = new ControlPanel( model, this, tandem.createTandem( 'controlPanel' ) );
 
     // @private - sound generator for the deflection of the charges in the wall, never disposed
     this.chargeDeflectionSoundGenerator = new ChargeDeflectionSoundGenerator(
@@ -154,11 +154,13 @@ class BASEView extends ScreenView {
     const screenSummaryNode = new BASESummaryNode( model, this.yellowBalloonNode, this.greenBalloonNode, this.wallNode, tandem.createTandem( 'screenSummaryNode' ) );
     this.setScreenSummaryContent( screenSummaryNode );
 
-    // combine the balloon content into single nodes so that they are easily layerable
-    const greenBalloonLayerNode = new Node( { children: [ this.greenBalloonTetherNode, this.greenBalloonNode ] } );
-    const yellowBalloonLayerNode = new Node( { children: [ this.yellowBalloonTetherNode, this.yellowBalloonNode ] } );
-    this.addChild( yellowBalloonLayerNode );
-    this.addChild( greenBalloonLayerNode );
+    // @private {Node} - layer on which the green balloon resides.
+    this.greenBalloonLayerNode = new Node( { children: [ this.greenBalloonTetherNode, this.greenBalloonNode ] } );
+    this.addChild( this.greenBalloonLayerNode );
+
+    // @private {Node} - layer on which the yellow balloon resides.
+    this.yellowBalloonLayerNode = new Node( { children: [ this.yellowBalloonTetherNode, this.yellowBalloonNode ] } );
+    this.addChild( this.yellowBalloonLayerNode );
 
     // Only show the selected balloon(s)
     model.greenBalloon.isVisibleProperty.link( isVisible => {
@@ -168,18 +170,23 @@ class BASEView extends ScreenView {
 
     this.addChild( controlPanel );
 
-    // when one of the balloons is picked up, move its content and cue nodes to front
+    // When one of the balloons is picked up, move its content and cue nodes to the front.
     Property.multilink( [ model.yellowBalloon.isDraggedProperty, model.greenBalloon.isDraggedProperty ], ( yellowDragged, greenDragged ) => {
       if ( yellowDragged ) {
-        yellowBalloonLayerNode.moveToFront();
+        this.yellowBalloonLayerNode.moveToFront();
       }
       else if ( greenDragged ) {
-        greenBalloonLayerNode.moveToFront();
+        this.greenBalloonLayerNode.moveToFront();
       }
     } );
 
     // pdom - assign components to the appropriate sections and specify order
-    this.pdomPlayAreaNode.pdomOrder = [ sweaterNode, yellowBalloonLayerNode, greenBalloonLayerNode, this.wallNode ];
+    this.pdomPlayAreaNode.pdomOrder = [
+      sweaterNode,
+      this.yellowBalloonLayerNode,
+      this.greenBalloonLayerNode,
+      this.wallNode
+    ];
     this.pdomControlAreaNode.pdomOrder = [ controlPanel ];
 
     //--------------------------------------------------------------------------
@@ -202,6 +209,14 @@ class BASEView extends ScreenView {
     this.yellowBalloonNode.step( dt );
   }
 
+  /**
+   * Set the default layering of the balloons, generally used to restore initial view state.
+   * @public
+   */
+  setDefaultBalloonZOrder() {
+    this.greenBalloonLayerNode.moveToFront();
+  }
+
   /**
    * Custom layout function for this view. It is most natural for this simulation for the view to
    * be held on the bottom of the navigation bar so that the balloon's tether and wall are always cut
diff --git a/js/balloons-and-static-electricity/view/ControlPanel.js b/js/balloons-and-static-electricity/view/ControlPanel.js
index 0779f29b..598a7722 100644
--- a/js/balloons-and-static-electricity/view/ControlPanel.js
+++ b/js/balloons-and-static-electricity/view/ControlPanel.js
@@ -65,10 +65,10 @@ class ControlPanel extends Node {
 
   /**
    * @param {BASEModel} model
-   * @param {Bounds2} layoutBounds
+   * @param {BASEView} view
    * @param {Tandem} tandem
    */
-  constructor( model, layoutBounds, tandem ) {
+  constructor( model, view, tandem ) {
 
     // super constructor
     super();
@@ -231,6 +231,9 @@ class ControlPanel extends Node {
         balloon.reset( true );
       } );
 
+      // Make sure the balloons are correctly layered in the view.
+      view.setDefaultBalloonZOrder();
+
       this.forEachUtteranceQueue( utteranceQueue => { utteranceQueue.enabled = true; } );
 
       // alert to assistive technology
@@ -277,7 +280,10 @@ class ControlPanel extends Node {
 
     //Add the controls at the right, with the reset all button and the wall button
     const resetAllButton = new ResetAllButton( {
-      listener: model.reset.bind( model ),
+      listener: () => {
+        model.reset();
+        view.setDefaultBalloonZOrder();
+      },
       scale: 0.96,
       tandem: tandem.createTandem( 'resetAllButton' )
     } );
@@ -288,6 +294,8 @@ class ControlPanel extends Node {
       children: [ resetAllButton, this.wallButton ]
     } );
 
+    const layoutBounds = view.layoutBounds;
+
     // more than other controls so the reset button touch area doesn't overlap the nav bar
     controls.bottom = layoutBounds.maxY - BOTTOM_CONTROL_SPACING;
     controls.right = layoutBounds.maxX - 4.5;// so "Remove Wall" button looks centered with wall