Touch area overlap of FineCoarseSpinner buttons

[jessegreenberg]

From #450 and phetsims/forces-and-motion-basics#274. With default options, there is a slight overlap in the touch areas of adjacent ArrowButtons of the FineCoarseSpinner.

Overlap becomes greater if spacing is reduced. In forces-and-motion-basics, there was a special shape to get around this.

    // define custom touch areas so the arrow buttons don't overlap
    var doubleLeftShape = new Shape.rect( 0, -ARROW_TOUCH_DILATION, doubleLeftArrowButton.width + ARROW_TOUCH_DILATION, doubleLeftArrowButton.height + 2 * ARROW_TOUCH_DILATION );
    doubleLeftArrowButton.touchArea = doubleLeftShape;

Should something similar be added to FineCoarseSpinner?

[pixelzoom]

This is due to the non-general default dilation in ArrowButton:

      touchAreaXDilation: 7,
      touchAreaYDilation: 7,

[pixelzoom]

Done. The defaults pointer areas for the ArrowButtons are:

        // pointer areas
        touchAreaXDilation: 3,
        touchAreaYDilation: 3,
        mouseAreaXDilation: 0,
        mouseAreaYDilation: 0

Here's how it looks in the Components screen of scenery-phet demo with ?showPointerAreas:

@jessegreenberg ready for review.

[jessegreenberg]

Overlap is gone, thanks.