From 022da282b21437814767aa198e6f7a66b5219fe3 Mon Sep 17 00:00:00 2001
From: Jesse <jesse.greenberg@colorado.edu>
Date: Wed, 9 Oct 2019 18:30:24 -0400
Subject: [PATCH] custom layout for speedometer on Graphs screen, see #88

---
 .../common/view/EnergySkateParkScreenView.js     | 16 ++++++++++------
 .../graphs/view/GraphsScreenView.js              |  5 +++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/js/energy-skate-park/common/view/EnergySkateParkScreenView.js b/js/energy-skate-park/common/view/EnergySkateParkScreenView.js
index 44e698ed..f3df9559 100644
--- a/js/energy-skate-park/common/view/EnergySkateParkScreenView.js
+++ b/js/energy-skate-park/common/view/EnergySkateParkScreenView.js
@@ -227,7 +227,9 @@ define( require => {
       this.bottomLayer.addChild( this.returnSkaterButton );
 
       const gaugeRadius = 62;
-      const speedometerNode = new ValueGaugeNode( model.skater.speedProperty, propertiesSpeedString, new Range( 0, 30 ), {
+
+      // @protected (read-only) - for layout or repositioning in subtypes
+      this.speedometerNode = new ValueGaugeNode( model.skater.speedProperty, propertiesSpeedString, new Range( 0, 30 ), {
           numberDisplayOptions: {
             valuePattern: speedometerMetersPerSecondPatternString,
             numberMaxWidth: gaugeRadius * 1.3,
@@ -240,11 +242,13 @@ define( require => {
           radius: gaugeRadius,
           tandem: tandem.createTandem( 'speedometerNode' )
       } );
-      model.speedometerVisibleProperty.linkAttribute( speedometerNode, 'visible' );
-      model.speedValueVisibleProperty.link( visible => { speedometerNode.setNumberDisplayVisible( visible ); } );
-      speedometerNode.centerX = this.layoutBounds.centerX;
-      speedometerNode.top = this.layoutBounds.minY + 5;
-      this.bottomLayer.addChild( speedometerNode );
+      model.speedometerVisibleProperty.linkAttribute( this.speedometerNode, 'visible' );
+      model.speedValueVisibleProperty.link( visible => { this.speedometerNode.setNumberDisplayVisible( visible ); } );
+
+      // default layout, but may change in subtypes
+      this.speedometerNode.centerX = this.layoutBounds.centerX;
+      this.speedometerNode.top = this.layoutBounds.minY + 5;
+      this.bottomLayer.addChild( this.speedometerNode );
 
       // @public (for layout) - Layer which will contain all of the tracks
       this.trackLayer = new Node( {
diff --git a/js/energy-skate-park/graphs/view/GraphsScreenView.js b/js/energy-skate-park/graphs/view/GraphsScreenView.js
index 73206d7f..c83a0038 100644
--- a/js/energy-skate-park/graphs/view/GraphsScreenView.js
+++ b/js/energy-skate-park/graphs/view/GraphsScreenView.js
@@ -12,6 +12,7 @@ define( require => {
   const EnergySkateParkTrackSetScreenView = require( 'ENERGY_SKATE_PARK/energy-skate-park/common/view/EnergySkateParkTrackSetScreenView' );
   const EnergyGraphAccordionBox = require( 'ENERGY_SKATE_PARK/energy-skate-park/graphs/view/EnergyGraphAccordionBox' );
   const FrictionSlider = require( 'ENERGY_SKATE_PARK/energy-skate-park/common/view/FrictionSlider' );
+  const GraphsConstants = require( 'ENERGY_SKATE_PARK/energy-skate-park/graphs/GraphsConstants' );
   const GravityNumberControl = require( 'ENERGY_SKATE_PARK/energy-skate-park/common/view/GravityNumberControl' );
   const Node = require( 'SCENERY/nodes/Node' );
   const GravityComboBox = require( 'ENERGY_SKATE_PARK/energy-skate-park/common/view/GravityComboBox' );
@@ -68,6 +69,10 @@ define( require => {
       // track align perfectly with positions along the graph
       this.graphAccordionBox.right = this.trackLayer.right + EnergyGraphAccordionBox.GRAPH_OFFSET;
       this.graphAccordionBox.top = this.controlPanel.top;
+
+      // special layout for the speedometer in this screen
+      this.speedometerNode.left = this.graphAccordionBox.left;
+      this.speedometerNode.top = this.modelViewTransform.modelToViewY( GraphsConstants.TRACK_HEIGHT );
     }
   }