add pointer & touch areas to object nodes and ruler, see phetsims/qa#210

js/view/ISLCObjectNode.js

@@ -297,6 +297,11 @@ define( function( require ) {
 
       // a11y - update the focusHighlight with the radius (Accessibility.js setter)
       self.focusHighlight = Shape.bounds( dragNode.bounds.dilated( 5 ) );
+
+      // set the pointer and touch areas
+      var pullerBounds = self.pullerNode.localToParentBounds( self.pullerNode.touchAreaBounds );
+      self.mouseArea = Shape.xor( [ Shape.bounds( pullerBounds ), self.objectCircle.createCircleShape() ] );
+      self.touchArea = self.mouseArea;
     } );
 
     // for layering purposes, we assume that the ScreenView will add the arrow node and label - by the

js/view/ISLCPullerNode.js

@@ -11,6 +11,7 @@ define( function( require ) {
   'use strict';
 
   // modules
+  var Bounds2 = require( 'DOT/Bounds2' );
   var Image = require( 'SCENERY/nodes/Image' );
   var inherit = require( 'PHET_CORE/inherit' );
   var inverseSquareLawCommon = require( 'INVERSE_SQUARE_LAW_COMMON/inverseSquareLawCommon' );
@@ -59,6 +60,9 @@ define( function( require ) {
     // @private
     this.pullerPusherImages = pullImages;
 
+    // @public
+    this.touchAreaBounds = new Bounds2( 0,0,0,0 );
+
     // used to ensure that small non-zero forces do not map to the zero force puller (see lines 130-132)
     var zeroForceIndex = null;
 
@@ -118,7 +122,7 @@ define( function( require ) {
     // shadow first so it is behind the pullers
     options.displayShadow && this.addChild( shadowNode );
     this.addChild( pullerGroupNode );
-
+    var self = this;
     // @public - set the visibility of the image corresponding to the current force value
     this.setPull = function( force, offsetX ) {
 
@@ -142,6 +146,11 @@ define( function( require ) {
       shadowNode.radius = forceToShadowWidth( force ) / 2;
       shadowNode.right = images[ index ].right - offsetX + Util.roundSymmetric( indexToShadowOffset( index ) );
       shadowNode.centerY = images[ index ].bottom;
+
+      // configure pointer area
+      // NOTE: the rope is not included in the draggable node, so we expose the puller bounds here for setting
+      // the touch and mouse areas in ISLCObjectNode
+      self.touchAreaBounds = pullerGroupNode.bounds.withOffsets( 0, 0, -options.ropeLength + 5, 2 );
     };
   }
 

js/view/ISLCRulerNode.js

@@ -96,6 +96,8 @@ define( function( require ) {
     var maxX = model.rightObjectBoundary;
     var maxY = -modelHeight / 2 + modelRulerHeight; // top bound because Y is inverted
     var bounds = new Bounds2( minX, minY, maxX, maxY );
+    this.mouseArea = ruler.bounds;
+    this.touchArea = this.mouseArea;
 
     this.addInputListener( new MovableDragHandler( model.rulerPositionProperty, {
       dragBounds: bounds,