From 4974cee0ac2866654503049787c0832dfc2fd51f Mon Sep 17 00:00:00 2001
From: Jonathan Olson <olsonsjc@gmail.com>
Date: Mon, 13 Feb 2017 20:55:27 -0600
Subject: [PATCH] Improve alignment of edit buttons on adding screen. See
 https://github.com/phetsims/make-a-ten/issues/268

---
 .../adding/view/MakeATenAddingScreenView.js   | 21 +++++++------------
 .../common/view/AdditionTermsNode.js          |  8 +++++++
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/js/make-a-ten/adding/view/MakeATenAddingScreenView.js b/js/make-a-ten/adding/view/MakeATenAddingScreenView.js
index 9cd5298..82b204d 100644
--- a/js/make-a-ten/adding/view/MakeATenAddingScreenView.js
+++ b/js/make-a-ten/adding/view/MakeATenAddingScreenView.js
@@ -13,7 +13,6 @@ define( function( require ) {
   var makeATen = require( 'MAKE_A_TEN/makeATen' );
   var inherit = require( 'PHET_CORE/inherit' );
   var Dimension2 = require( 'DOT/Dimension2' );
-  var HBox = require( 'SCENERY/nodes/HBox' );
   var Image = require( 'SCENERY/nodes/Image' );
   var Plane = require( 'SCENERY/nodes/Plane' );
   var RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' );
@@ -59,18 +58,6 @@ define( function( require ) {
       } );
     }
 
-    var editButtonBox = new HBox( {
-      children: [
-        createEditNumberButton( ActiveTerm.LEFT ),
-        createEditNumberButton( ActiveTerm.RIGHT )
-      ],
-      spacing: 45
-    } );
-    this.addChild( editButtonBox );
-
-    editButtonBox.left = this.layoutBounds.left + 75;
-    editButtonBox.top = this.layoutBounds.top + 32;
-
     // The node that display "12 + 100 = "
     var additionTermsNode = new AdditionTermsNode( model.additionTerms, true );
     this.addChild( additionTermsNode );
@@ -78,6 +65,14 @@ define( function( require ) {
     additionTermsNode.left = this.layoutBounds.left + 38;
     additionTermsNode.top = this.layoutBounds.top + 85;
 
+    var leftEditButton = createEditNumberButton( ActiveTerm.LEFT );
+    var rightEditButton = createEditNumberButton( ActiveTerm.RIGHT );
+    leftEditButton.top = rightEditButton.top = this.layoutBounds.top + 32;
+    leftEditButton.right = additionTermsNode.getLeftAlignment() + additionTermsNode.x;
+    rightEditButton.left = additionTermsNode.getRightAlignment() + additionTermsNode.x;
+    this.addChild( leftEditButton );
+    this.addChild( rightEditButton );
+
     // Where all of the paper numbers go (from supertype)
     this.addChild( this.paperNumberLayerNode );
 
diff --git a/js/make-a-ten/common/view/AdditionTermsNode.js b/js/make-a-ten/common/view/AdditionTermsNode.js
index 8f280df..de71d61 100644
--- a/js/make-a-ten/common/view/AdditionTermsNode.js
+++ b/js/make-a-ten/common/view/AdditionTermsNode.js
@@ -100,6 +100,14 @@ define( function( require ) {
 
     // Unchanging layout position of the right text node
     rightTermText.left = rightNumberDisplayBackground.left + rightNumberDisplayBackground.width * LAYOUT_MULTIPLIER;
+
+    // @public
+    this.getLeftAlignment = function() {
+      return leftTermText.right;
+    };
+    this.getRightAlignment = function() {
+      return rightTermText.left;
+    };
   }
 
   makeATen.register( 'AdditionTermsNode', AdditionTermsNode );