From 068559c8af3a0b64dae3abbf21786be5a2f14ef4 Mon Sep 17 00:00:00 2001
From: Chris Malley <cmalley@pixelzoom.com>
Date: Thu, 14 Feb 2019 14:26:51 -0700
Subject: [PATCH] adjust pointer areas for NumberPickers to address overlap,
 #124

---
 js/common/GLConstants.js                           | 11 +++++++++--
 js/common/view/picker/CoordinatePicker.js          |  5 ++---
 js/common/view/picker/SlopePicker.js               |  5 ++---
 js/pointslope/view/PointSlopeEquationNode.js       | 14 ++++++--------
 .../view/SlopeInterceptEquationNode.js             | 10 +++++-----
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/js/common/GLConstants.js b/js/common/GLConstants.js
index ea43d5a9..c5213ebf 100644
--- a/js/common/GLConstants.js
+++ b/js/common/GLConstants.js
@@ -20,13 +20,20 @@ define( function( require ) {
     X_AXIS_RANGE: new Range( -10, 10 ),
     Y_AXIS_RANGE: new Range( -10, 10 ),
     INTERACTIVE_EQUATION_FONT_SIZE: 34,
-    PICKER_TOUCH_AREA_X_DILATION: 30,
     MANIPULATOR_RADIUS: 0.425,
     SCREEN_X_MARGIN: 40,
     SCREEN_Y_MARGIN: 20,
     RESET_ALL_BUTTON_SCALE: 1.32,
     PATTERN_0VALUE_EQUALS_1VALUE: '{0} ' + MathSymbols.EQUAL_TO + ' {1}', // i18n not required, used for e.g. x = 5
-    EQUATION_FONT_WEIGHT: 'bold'
+    EQUATION_FONT_WEIGHT: 'bold',
+
+    // see https://github.com/phetsims/graphing-lines/issues/124
+    PICKER_OPTIONS: {
+      touchAreaXDilation: 26,
+      touchAreaYDilation: 4,
+      mouseAreaXDilation: 0,
+      mouseAreaYDilation: 4
+    }
   };
 
   graphingLines.register( 'GLConstants', GLConstants );
diff --git a/js/common/view/picker/CoordinatePicker.js b/js/common/view/picker/CoordinatePicker.js
index 624c4fac..0eb2db32 100644
--- a/js/common/view/picker/CoordinatePicker.js
+++ b/js/common/view/picker/CoordinatePicker.js
@@ -28,9 +28,8 @@ define( function( require ) {
    */
   function CoordinatePicker( a1Property, b1Property, a2Property, b2Property, rangeProperty, options ) {
 
-    options = _.extend( {
-      color: GLColors.POINT_X1_Y1,
-      touchAreaXDilation: GLConstants.PICKER_TOUCH_AREA_X_DILATION
+    options = _.extend( {}, GLConstants.PICKER_OPTIONS, {
+      color: GLColors.POINT_X1_Y1
     }, options );
 
     // computes value when 'up' button is pressed
diff --git a/js/common/view/picker/SlopePicker.js b/js/common/view/picker/SlopePicker.js
index afc41b8f..5a610647 100644
--- a/js/common/view/picker/SlopePicker.js
+++ b/js/common/view/picker/SlopePicker.js
@@ -25,9 +25,8 @@ define( function( require ) {
    */
   function SlopePicker( variableComponentProperty, fixedComponentProperty, variableRangeProperty, options ) {
 
-    options = _.extend( {
-      color: GLColors.SLOPE,
-      touchAreaXDilation: GLConstants.PICKER_TOUCH_AREA_X_DILATION
+    options = _.extend( {}, GLConstants.PICKER_OPTIONS, {
+      color: GLColors.SLOPE
     }, options );
 
     // 'up' function, skips over undefined line condition (slope=0/0) - not changeable by clients
diff --git a/js/pointslope/view/PointSlopeEquationNode.js b/js/pointslope/view/PointSlopeEquationNode.js
index ba3903c6..7ef85ae9 100644
--- a/js/pointslope/view/PointSlopeEquationNode.js
+++ b/js/pointslope/view/PointSlopeEquationNode.js
@@ -108,11 +108,10 @@ define( function( require ) {
     var yMinusNode = new MinusNode( _.extend( { size: self.operatorLineSize }, staticOptions ) );
     var y1Node;
     if ( options.interactivePoint ) {
-      y1Node = new NumberPicker( y1Property, options.y1RangeProperty, {
+      y1Node = new NumberPicker( y1Property, options.y1RangeProperty, _.extend( {}, GLConstants.PICKER_OPTIONS, {
         color: GLColors.POINT_X1_Y1,
-        font: interactiveFont,
-        touchAreaXDilation: 30
-      } );
+        font: interactiveFont
+      } ) );
     }
     else {
       y1Node = new DynamicValueNode( y1Property, _.extend( { absoluteValue: true }, staticOptions ) );
@@ -138,11 +137,10 @@ define( function( require ) {
     var xMinusNode = new MinusNode( _.extend( { size: self.operatorLineSize }, staticOptions ) );
     var x1Node;
     if ( options.interactivePoint ) {
-      x1Node = new NumberPicker( x1Property, options.x1RangeProperty, {
+      x1Node = new NumberPicker( x1Property, options.x1RangeProperty, _.extend( {}, GLConstants.PICKER_OPTIONS, {
         color: GLColors.POINT_X1_Y1,
-        font: interactiveFont,
-        touchAreaXDilation: GLConstants.PICKER_TOUCH_AREA_X_DILATION
-      } );
+        font: interactiveFont
+      } ) );
     }
     else {
       x1Node = new DynamicValueNode( x1Property, _.extend( { absoluteValue: true }, staticOptions ) );
diff --git a/js/slopeintercept/view/SlopeInterceptEquationNode.js b/js/slopeintercept/view/SlopeInterceptEquationNode.js
index 3663ee72..4a6f9482 100644
--- a/js/slopeintercept/view/SlopeInterceptEquationNode.js
+++ b/js/slopeintercept/view/SlopeInterceptEquationNode.js
@@ -128,11 +128,11 @@ define( function( require ) {
     }, staticOptions ) );
     var yInterceptNumeratorNode; // also used for integer values
     if ( options.interactiveIntercept ) {
-      yInterceptNumeratorNode = new NumberPicker( yInterceptProperty, options.yInterceptRangeProperty, {
-        color: GLColors.INTERCEPT,
-        font: interactiveFont,
-        touchAreaXDilation: GLConstants.PICKER_TOUCH_AREA_X_DILATION
-      } );
+      yInterceptNumeratorNode = new NumberPicker( yInterceptProperty, options.yInterceptRangeProperty,
+        _.extend( {}, GLConstants.PICKER_OPTIONS, {
+          color: GLColors.INTERCEPT,
+          font: interactiveFont
+        } ) );
     }
     else {
       yInterceptNumeratorNode = new DynamicValueNode( yInterceptNumeratorProperty, _.extend( { absoluteValue: true }, staticOptions ) );