From 6fc89e1a04793ebcf38034b35a06e427d3f06ecc Mon Sep 17 00:00:00 2001
From: denz1994 <denz1994@gmail.com>
Date: Wed, 23 Jan 2019 10:18:01 -0500
Subject: [PATCH] Addressing REVIEW: this.backLayer used for z-ordering of
 elements in BounceScreenView
 https://github.com/phetsims/masses-and-springs-basics/issues/48

---
 js/bounce/view/BounceScreenView.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/js/bounce/view/BounceScreenView.js b/js/bounce/view/BounceScreenView.js
index 27fce68..3596deb 100644
--- a/js/bounce/view/BounceScreenView.js
+++ b/js/bounce/view/BounceScreenView.js
@@ -83,15 +83,11 @@ define( require => {
         children: [ optionsPanel, this.toolboxPanel ],
         spacing: this.spacing * 0.9
       } );
-      this.addChild( rightPanelsVBox );
-      rightPanelsVBox.moveToBack();
 
       this.visibleBoundsProperty.link( () => {
         rightPanelsVBox.rightTop = new Vector2( this.panelRightSpacing, this.spacing );
       } );
 
-      // Move this plane to the back of the scene graph
-      this.backgroundDragPlane.moveToBack();
 
       // Shelves used for masses
       const labeledMassesShelf = new Shelf( tandem, {
@@ -100,10 +96,6 @@ define( require => {
         left: this.layoutBounds.left + this.spacing,
         rectY: this.modelViewTransform.modelToViewY( MassesAndSpringsConstants.FLOOR_Y ) - this.shelf.rectHeight
       } );
-      this.addChild( labeledMassesShelf );
-      // REVIEW: Rather than moving things to the very back, consider having layer Nodes on the supertype, so that
-      // REVIEW: these nodes can be directly added in the correct place. (If that is inconvenient, this is fine)
-      labeledMassesShelf.moveToBack();
 
       const mysteryMassesShelf = new Shelf( tandem, {
         rectHeight: 7,
@@ -111,8 +103,11 @@ define( require => {
         left: labeledMassesShelf.right + this.spacing * 2,
         rectY: this.modelViewTransform.modelToViewY( MassesAndSpringsConstants.FLOOR_Y ) - this.shelf.rectHeight
       } );
-      this.addChild( mysteryMassesShelf );
-      mysteryMassesShelf.moveToBack();
+
+      // Back layer used to handle z order of view elements.
+      this.addChild( this.backLayer );
+      this.backLayer.children = [ this.backgroundDragPlane, rightPanelsVBox, labeledMassesShelf, mysteryMassesShelf ];
+      this.backLayer.moveToBack();
     }
   }