FaucetNode pointer areas aren't behaving correctly

[pixelzoom]

Reported in phetsims/ph-scale#180, but occurs with FaucetNode in all sims (ph-scale, BLL, EFAC, FPAF, Wave Interference). This is blocking RC for ph-scale and ph-scale-basics.

The mouseArea for FaucetNode's knob (aka "shooter") is not working correctly. It looks like this with ?showPointerAreas in ph-scale:

But the lower 25% of the mouseArea is not responsive, and the cursor doesn't change. See the video capture in phetsims/ph-scale#180.

If I comment out this line in FaucetNode.js, then the default mouseArea works correctly:

355   knobNode.mouseArea = knobNode.localBounds.dilatedXY( config.mouseAreaXDilation, config.mouseAreaYDilation );

This line of code was modified by @chrisklus in 6bdfe83. Here's the diff:

-    knobNode.touchArea = Shape.rectangle( -dxTouch, -dyTouch, knobNode.width + 2 * dxTouch, knobNode.height + 2 * dyTouch );
-    knobNode.mouseArea = Shape.rectangle( -dxMouse, -dyMouse, knobNode.width + 2 * dxMouse, knobNode.height + 2 * dyMouse );
+    knobNode.mouseArea = knobNode.localBounds.dilatedXY( config.mouseAreaXDilation, config.mouseAreaYDilation );

[pixelzoom]

This affects both touchArea and mouseArea, title of this issue changed accordingly. As noted in phetsims/ph-scale#180:

it looks to me like touchArea is also broken. Testing ph-scale 1.4.0-rc.1 on iPad6, I can't snag in the bottom part of the touchArea.

[pixelzoom]

This problem is not present in 1.2.20 (8/5/19). It is present in 1.3.0 (8/7/19). There were no changes to FaucetNode.js during that window. @chrisklus's change in 6bdfe83 was made 8/19/19.

@jonathanolson would you have some time to investigate this?

[jonathanolson]

The cause seems to be this Scenery Image node, which is layered on top of the shooter:

This is triggered by an inputListener on the FaucetNode specifically. I'd recommend just changing the visual stacking order, @pixelzoom is that possible?

[pixelzoom]

@jonathanolson thanks for finding the problem! Changing the order is definitely doable, and I've done that in the above commit.

The Node that you've highlighted above is bodyNode, and another way to solve this would be to set bodyNode to pickable: false. So I've done that too, in case the order is ever changed for some other reason.

[pixelzoom]

@KatieWoe please verify this in master, with a few sims that use FaucetNode (ph-scale, BLL, EFAC, FPAF, Wave Interference). If it looks good, assign back to me so that I can cherry-pick for ph-scale and ph-scale-basics RCs.

[jonathanolson]

and another way to solve this would be to set bodyNode to pickable: false. So I've done that too, in case the order is ever changed for some other reason.

That might be a problem if (a) you want to prevent clicks on things behind a faucet (likely), or (b) you want a draggable faucet (less likely). Having it normal pickability still sounds correct, UNLESS its hit area isn't affected by that.

[pixelzoom]

Good point. I've removed pickable:false for bodyNode.

[pixelzoom]

Note to self: I need to cherry-pick ae6db07 and a78d82a.

[KatieWoe]

Does look fixed on master. WI has a button, rather than a knob, so I'm not sure if the issue ever showed up there at all. Others look ok.

[pixelzoom]

Cherry-picks done for ph-scale and ph-scale-basics.

Closing.