From 4b40a402df613dfc5ebd7fc13f03d1bb81ffd794 Mon Sep 17 00:00:00 2001
From: pixelzoom <cmalley@pixelzoom.com>
Date: Tue, 1 Sep 2020 15:37:48 -0600
Subject: [PATCH] add support for pointer area dilation to ZoomButtonGroup,
 https://github.com/phetsims/natural-selection/issues/192

---
 js/ZoomButtonGroup.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/js/ZoomButtonGroup.js b/js/ZoomButtonGroup.js
index 6df93b72..c7b80eb5 100644
--- a/js/ZoomButtonGroup.js
+++ b/js/ZoomButtonGroup.js
@@ -37,6 +37,12 @@ class ZoomButtonGroup extends LayoutBox {
       zoomInDelta: 1,   // delta applied when the '+' button is pressed
       zoomOutDelta: -1, // delta applied when the '-' button is pressed
 
+      // pointer area dilation, correct for options.orientation, and overlap will be prevented by shifting
+      touchAreaXDilation: 0,
+      touchAreaYDilation: 0,
+      mouseAreaXDilation: 0,
+      mouseAreaYDilation: 0,
+
       // RectangularPushButton options
       buttonOptions: {
         baseColor: 'white',
@@ -85,7 +91,25 @@ class ZoomButtonGroup extends LayoutBox {
     } ) );
 
     assert && assert( !options.children, 'ZoomButtonGroup sets children' );
-    options.children = [ zoomInButton, zoomOutButton ];
+    options.children = ( options.orientation === 'horizontal' ) ? [ zoomOutButton, zoomInButton ] : [ zoomInButton, zoomOutButton ];
+
+    // Pointer areas, shifted to prevent overlap
+    zoomInButton.touchArea = zoomInButton.localBounds.dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation );
+    zoomOutButton.touchArea = zoomInButton.localBounds.dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation );
+    zoomInButton.mouseArea = zoomInButton.localBounds.dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation );
+    zoomOutButton.mouseArea = zoomInButton.localBounds.dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation );
+    if ( options.orientation === 'horizontal' ) {
+      zoomInButton.touchArea = zoomInButton.touchArea.shiftedX( options.touchAreaXDilation );
+      zoomOutButton.touchArea = zoomOutButton.touchArea.shiftedX( -options.touchAreaXDilation );
+      zoomInButton.mouseArea = zoomInButton.mouseArea.shiftedX( options.mouseAreaXDilation );
+      zoomOutButton.mouseArea = zoomOutButton.mouseArea.shiftedX( -options.mouseAreaXDilation );
+    }
+    else {
+      zoomInButton.touchArea = zoomInButton.touchArea.shiftedY( -options.touchAreaYDilation );
+      zoomOutButton.touchArea = zoomOutButton.touchArea.shiftedY( options.touchAreaYDilation );
+      zoomInButton.mouseArea = zoomInButton.mouseArea.shiftedY( -options.mouseAreaYDilation );
+      zoomOutButton.mouseArea = zoomOutButton.mouseArea.shiftedY( options.mouseAreaYDilation );
+    }
 
     super( options );