custom layout for speedometer on Graphs screen, see #88

phetsims · Oct 9, 2019 · 022da28 · 022da28
1 parent 2cf5cd6
commit 022da28
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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 );
     }
   }