layering of items in energy-skate-park, see #110

phetsims · Sep 5, 2019 · 8b6c487 · 8b6c487
1 parent 0cc7828
commit 8b6c487
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 32 deletions.
diff --git a/js/energy-skate-park/common/view/EnergySkateParkPlaygroundScreenView.js b/js/energy-skate-park/common/view/EnergySkateParkPlaygroundScreenView.js
@@ -47,10 +47,6 @@ define( require => {
     } );
     this.bottomLayer.addChild( this.trackCreationPanel );
 
-    // move the panel behind the tracks (which were added in supertype)
-    const indexOfTrackLayer = _.indexOf( this.bottomLayer.children, this.trackLayer );
-    this.bottomLayer.moveChildToIndex( this.trackCreationPanel, indexOfTrackLayer );
-
     model.tracks.addItemAddedListener( this.addTrackNode.bind( this ) );
 
     // @protected - for layout in subtypes

diff --git a/js/energy-skate-park/common/view/EnergySkateParkScreenView.js b/js/energy-skate-park/common/view/EnergySkateParkScreenView.js
@@ -163,31 +163,6 @@ define( function( require ) {
     );
     this.bottomLayer.addChild( this.pieChartLegend );
 
-    // add a measuring tape if specified as part of this screen view
-    if ( options.showMeasuringTape ) {
-
-      var unitsProperty = new Property( { name: 'meters', multiplier: 1 } );
-
-      // @private {MeasuringTapeNode} - The measuring tape node will not
-      this.measuringTapeNode = new MeasuringTapeNode( unitsProperty, model.measuringTapeVisibleProperty, {
-        basePositionProperty: model.measuringTapeBasePositionProperty,
-        tipPositionProperty: model.measuringTapeTipPositionProperty,
-        modelViewTransform: modelViewTransform,
-        dragBounds: this.availableModelBoundsProperty.get(),
-        baseDragEnded: function() {
-          if ( self.measuringTapeNode.getLocalBaseBounds().intersectsBounds( self.measuringTapePanel.bounds ) ) {
-            model.measuringTapeVisibleProperty.set( false );
-          }
-        },
-        tandem: tandem.createTandem( 'measuringTapeNode' )
-      } );
-      this.topLayer.addChild( this.measuringTapeNode );
-
-      // @private {MeasuringTapePanel} - so it can float to the layout bounds, see layout()
-      this.measuringTapePanel = new MeasuringTapePanel( model, this.measuringTapeNode, modelViewTransform );
-      this.bottomLayer.addChild( this.measuringTapePanel );
-    }
-
     // For the playground screen, show attach/detach toggle buttons
     if ( options.showAttachDetachRadioButtons ) {
       var property = model.tracksDraggable ? new Property( true ) :
@@ -274,7 +249,33 @@ define( function( require ) {
       tandem: tandem.createTandem( 'trackLayer' )
     } );
 
-    this.bottomLayer.addChild( this.trackLayer );
+    // tracks on top of panels and non-interactive visualizations
+    this.topLayer.addChild( this.trackLayer );
+
+    // add a measuring tape, on top of tracks, below the skater
+    if ( options.showMeasuringTape ) {
+
+      var unitsProperty = new Property( { name: 'meters', multiplier: 1 } );
+
+      // @private {MeasuringTapeNode} - The measuring tape node will not
+      this.measuringTapeNode = new MeasuringTapeNode( unitsProperty, model.measuringTapeVisibleProperty, {
+        basePositionProperty: model.measuringTapeBasePositionProperty,
+        tipPositionProperty: model.measuringTapeTipPositionProperty,
+        modelViewTransform: modelViewTransform,
+        dragBounds: this.availableModelBoundsProperty.get(),
+        baseDragEnded: function() {
+          if ( self.measuringTapeNode.getLocalBaseBounds().intersectsBounds( self.measuringTapePanel.bounds ) ) {
+            model.measuringTapeVisibleProperty.set( false );
+          }
+        },
+        tandem: tandem.createTandem( 'measuringTapeNode' )
+      } );
+      this.topLayer.addChild( this.measuringTapeNode );
+
+      // @private {MeasuringTapePanel} - so it can float to the layout bounds, see layout()
+      this.measuringTapePanel = new MeasuringTapePanel( model, this.measuringTapeNode, modelViewTransform );
+      this.bottomLayer.addChild( this.measuringTapePanel );
+    }
 
     var skaterNode = new SkaterNode(
       model.skater,

diff --git a/js/energy-skate-park/measure/view/MeasureScreenView.js b/js/energy-skate-park/measure/view/MeasureScreenView.js
@@ -63,8 +63,12 @@ define( require => {
       } );
       this.pathSensor.top = this.modelViewTransform.modelToViewDeltaY( -2 );
 
-      this.addToTopLayer( new SkaterSamplesNode( model, this.modelViewTransform ) );
-      this.addToTopLayer( this.pathSensor );
+      // insert the samples and measure into the layering so that the measurable path is above the track but below
+      // the skater, and the sensor is below the measuring tape to avoid occlusion
+      const skaterSamplesNode = new SkaterSamplesNode( model, this.modelViewTransform );
+      const indexOfTrackLayer = _.indexOf( this.topLayer.children, this.trackLayer );
+      this.topLayer.insertChild( indexOfTrackLayer + 1, skaterSamplesNode );
+      this.topLayer.insertChild( indexOfTrackLayer + 2, this.pathSensor );
     }
 
     /**