pointer areas for vectors

[pixelzoom]

Running with ?showPointerAreas, blue dashed lines are mouseArea, red dashed lines are touchArea.

I see 2 cases where the mouseArea is dilated to make vectors easier to grab -- they are shown below, along with screenshots. But I see nothing done for touchArea. @arouinfar what do you want to do here?

In RootVectorNode:

      if ( rootVector.magnitude > 0 && this.arrowNode.shape ) {
        // Make the arrow easier to grab
        this.arrowNode.mouseArea = this.arrowNode.shape.getOffsetShape( 3 );
      }

In VectorCreatorPanelSlot:

      // Make the iconNode easier to grab
      iconNode.mouseArea = iconNode.shape.getOffsetShape( 8 );

[arouinfar]

@pixelzoom the dilated mouseArea in the screenshots in #183 (comment) look pretty reasonable, so I think that would be a good place to start with the touchArea.

The vectors in the play area are fairly easy to manipulate on an iPad, but might be a little tricky on mobile, so a slight touchArea dilation to match the mouseArea would probably do the trick.

The vectors are incredibly difficult to grab from the toolbox on an iPad. I've also noticed that the vector doesn't pop out of the toolbox when it's tapped, but it does with a mouse. This is a bit frustrating because it's not that clear when the vector has been successfully grabbed or not.

[pixelzoom]

I've set touchArea to be the same as mouseArea, for vectors on the graph and in the toolbox. @arouinfar please review in master. If this is reasonable, we can tweak further when we do general review of pointer areas as part of the master checklist.

[arouinfar]

@pixelzoom looks good on master, thanks!