Addressing REVIEW: this.backLayer used for z-ordering of elements in …

…StretchScreenView #48
phetsims · Jan 23, 2019 · b10beca · b10beca
1 parent 6fc89e1
commit b10beca
Showing 1 changed file with 5 additions and 10 deletions.
diff --git a/js/stretch/view/StretchScreenView.js b/js/stretch/view/StretchScreenView.js
@@ -89,30 +89,20 @@ define( require => {
       // Panel that will display all the toggleable options.
       const optionsPanel = this.createOptionsPanel( lineOptionsPanel, this.rightPanelAlignGroup, tandem );
 
-      this.addChild( optionsPanel );
-      optionsPanel.moveToBack();
-
-      // Move this plane to the back of the scene graph
-      this.backgroundDragPlane.moveToBack();
-
       // Shelves used for masses
       const labeledMassesShelf = new Shelf( tandem, {
         rectHeight: 7,
         rectWidth: 185,
         left: this.layoutBounds.left + this.spacing,
         rectY: this.modelViewTransform.modelToViewY( MassesAndSpringsConstants.FLOOR_Y ) - this.shelf.rectHeight
       } );
-      this.addChild( labeledMassesShelf );
-      labeledMassesShelf.moveToBack();
 
       const mysteryMassesShelf = new Shelf( tandem, {
         rectHeight: 7,
         rectWidth: 120,
         left: labeledMassesShelf.right + this.spacing * 2,
         rectY: this.modelViewTransform.modelToViewY( MassesAndSpringsConstants.FLOOR_Y ) - this.shelf.rectHeight
       } );
-      this.addChild( mysteryMassesShelf );
-      mysteryMassesShelf.moveToBack();
 
       // @public {DraggableRulerNode}
       this.rulerNode = new DraggableRulerNode(
@@ -125,6 +115,11 @@ define( require => {
       );
       this.addChild( this.rulerNode );
 
+      // Back layer used to handle z order of view elements.
+      this.addChild( this.backLayer );
+      this.backLayer.children = [ this.backgroundDragPlane, optionsPanel, labeledMassesShelf, mysteryMassesShelf ];
+      this.backLayer.moveToBack();
+
       this.visibleBoundsProperty.link( () => {
         optionsPanel.rightTop = new Vector2( this.panelRightSpacing, this.springSystemControlsNode.top );
         this.rulerNode.positionProperty.set( optionsPanel.rightBottom.plusXY( 0, this.spacing ) );