add options for shifting pointer areas, #500

phetsims · May 2, 2019 · f915af8 · f915af8
1 parent e0cab97
commit f915af8
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/js/buttons/RectangularButtonView.js b/js/buttons/RectangularButtonView.js
@@ -52,10 +52,19 @@ define( function( require ) {
       xMargin: 8, // should be visibly greater than yMargin, see issue #109
       yMargin: 5,
       fireOnDown: false,
+
+      // pointer area dilation
       touchAreaXDilation: 0,
       touchAreaYDilation: 0,
       mouseAreaXDilation: 0,
       mouseAreaYDilation: 0,
+
+      // pointer area shift, see https://github.com/phetsims/sun/issues/500
+      touchAreaXShift: 0,
+      touchAreaYShift: 0,
+      mouseAreaXShift: 0,
+      mouseAreaYShift: 0,
+
       stroke: undefined, // undefined by default, which will cause a stroke to be derived from the base color
       lineWidth: 0.5, // Only meaningful if stroke is non-null
       xAlign: 'center', // {string} see X_ALIGN_VALUES
@@ -169,8 +178,12 @@ define( function( require ) {
     interactionStateProperty.link( handleInteractionStateChanged );
 
     // set pointer areas
-    this.touchArea = button.localBounds.dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation );
-    this.mouseArea = button.localBounds.dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation );
+    this.touchArea = button.localBounds
+      .dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation )
+      .shifted( options.touchAreaXShift,  options.touchAreaYShift );
+    this.mouseArea = button.localBounds
+      .dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation )
+      .shifted( options.mouseAreaXShift,  options.mouseAreaYShift );
 
     // Mutate with the options after the layout is complete so that width-
     // dependent fields like centerX will work.

diff --git a/js/buttons/RoundButtonView.js b/js/buttons/RoundButtonView.js
@@ -50,8 +50,17 @@ define( function( require ) {
       minXMargin: 5, // Minimum margin in x direction, i.e. on left and right
       minYMargin: 5, // Minimum margin in y direction, i.e. on top and bottom
       fireOnDown: false,
+
+      // pointer area dilation
       touchAreaDilation: 0, // radius dilation for touch area
       mouseAreaDilation: 0, // radius dilation for mouse area
+
+      // pointer area shift
+      touchAreaXShift: 0,
+      touchAreaYShift: 0,
+      mouseAreaXShift: 0,
+      mouseAreaYShift: 0,
+
       stroke: undefined, // undefined by default, which will cause a stroke to be derived from the base color
       lineWidth: 0.5, // Only meaningful if stroke is non-null
       tandem: Tandem.optional, // This duplicates the parent option and works around https://github.com/phetsims/tandem/issues/50
@@ -132,8 +141,10 @@ define( function( require ) {
     interactionStateProperty.link( handleInteractionStateChanged );
 
     // Dilate the pointer areas.
-    this.touchArea = Shape.circle( 0, 0, buttonRadius + options.touchAreaDilation );
-    this.mouseArea = Shape.circle( 0, 0, buttonRadius + options.mouseAreaDilation );
+    this.touchArea = Shape.circle( options.touchAreaXShift, options.touchAreaYShift,
+      buttonRadius + options.touchAreaDilation );
+    this.mouseArea = Shape.circle( options.mouseAreaXShift, options.mouseAreaYShift,
+      buttonRadius + options.mouseAreaDilation );
 
     // Set pickable such that sub-nodes are pruned from hit testing.
     this.pickable = null;

diff --git a/js/demo/ButtonsScreenView.js b/js/demo/ButtonsScreenView.js
@@ -180,7 +180,13 @@ define( function( require ) {
     var buttonE = new RoundPushButton( {
       content: new Text( '--- E ---', { font: BUTTON_FONT } ),
       listener: function() { message( 'Button E pressed' ); },
-      baseColor: roundBaseColor
+      baseColor: 'yellow',
+
+      // Demonstrate shifted pointer areas, https://github.com/phetsims/sun/issues/500
+      touchAreaXShift: 20,
+      touchAreaYShift: 20,
+      mouseAreaXShift: 10,
+      mouseAreaYShift: 10
     } );
 
     var pseudo3DButtonsBox = new HBox( {
@@ -501,7 +507,13 @@ define( function( require ) {
           message( 'Button colors changed' );
         },
         right: disableEnableButton.right,
-        bottom: disableEnableButton.top - 15
+        bottom: disableEnableButton.top - 15,
+
+        // Demonstrate shifted pointer areas, https://github.com/phetsims/sun/issues/500
+        touchAreaXShift: -20,
+        touchAreaYShift: -20,
+        mouseAreaXShift: -10,
+        mouseAreaYShift: -10
       }
     );
     this.addChild( changeButtonColorsButton );