Address TODOs, see #45

js/common/view/CAVObjectNode.ts

@@ -45,7 +45,8 @@ export default abstract class CAVObjectNode extends Node {
 
     const viewRadius = modelViewTransform.modelToViewDeltaX( modelRadius );
 
-    // TODO: Make sure it is always in the front in z-ordering, sometimes it gets obscured by adjacent soccer balls
+    // Visibilty controlled by subclass logic. Also this whole node is moved to front when the medianHighlight is shown
+    // so it will appear in front (unless the user drags another object on top of it).
     this.medianHighlight = new Circle( viewRadius + 1.75, {
       fill: CAVColors.medianColorProperty
     } );

js/common/view/DataPointNode.ts

@@ -60,6 +60,12 @@ export default class DataPointNode extends CAVObjectNode {
       [ soccerBall.isMedianObjectProperty, isShowingPlayAreaMedianProperty, soccerBall.isShowingAnimationHighlightProperty ],
       ( isMedianObject, isShowingPlayAreaMedian, isShowingAnimationHighlight ) => {
         this.medianHighlight.visible = isShowingAnimationHighlight;
+
+        // Median highlights should be in front in z-ordering. Rather than accomplishing this via a different layer,
+        // move this to the front when it is visible.
+        if ( this.medianHighlight.visible ) {
+          this.moveToFront();
+        }
       } );
   }
 }

js/common/view/SoccerBallNode.ts

@@ -104,6 +104,12 @@ export default class SoccerBallNode extends CAVObjectNode {
       [ soccerBall.isMedianObjectProperty, isShowingPlayAreaMedianProperty, soccerBall.isShowingAnimationHighlightProperty ],
       ( isMedianObject, isShowingPlayAreaMedian, isShowingAnimationHighlight ) => {
         this.medianHighlight.visible = isShowingPlayAreaMedian && isMedianObject;
+
+        // Median highlights should be in front in z-ordering. Rather than accomplishing this via a different layer,
+        // move this to the front when it is visible.
+        if ( this.medianHighlight.visible ) {
+          this.moveToFront();
+        }
       } );
   }
 }