Molecule dipole does not align with E-field in Preview sim

[pixelzoom]

In https://github.com/phetsims/molecule-polarity/issues/105 for phetsims/QA/issues/627, @phet-steele reported a scenario in which the molecule dipole does not align with the E-field in the sim launched using Studio's "Preview Sim" button. There were some other unrelated issues intertwined in that report, so I'm creating this issue to fix and track that specific problem.

The steps to reproduce are:

1. Run https://phet-dev.colorado.edu/html/molecule-polarity/1.1.0-rc.1/phet-io/wrappers/studio/
2. Enter a Screen, turn on the E-field
3. Start dragging the molecule such that if you released your pointer it would rotate to align itself, but don't release.
4. Move your pointer out of the iframe while still holding the pointer down, then click "Preview Sim".

[pixelzoom]

In https://github.com/phetsims/molecule-polarity/issues/105#issuecomment-804450393, I noted:

Here's the reason why the molecule doesn't align with the E-field in the Preview sim. In MPModel.js:

  step( dt ) {

    // If the E-field is on and the user isn't controlling the molecule's orientation, animate molecule rotation.
    if ( this.eFieldEnabledProperty.value && !this.molecule.isDraggingProperty.value ) {
      this.updateMoleculeOrientation( this.molecule );
    }
  }

The molecule's orientation is not updated while it's being dragged. molecule.isDraggingProperty is an instrumented Property, so it's state is being saved and restored. Since you pressed "Preview Sim" while you were in the middle of a drag, the Preview sim thinks it's in the middle of a drag (because it is!) and doesn't update the molecule orientation.

I'm familiar with lots of sims that have something like isDraggingProperty, often called something like isUserControlledProperty. I would expect that those sims would have a similar problem if we allow Studio buttons to be pressed in the middle of sim interactions. The Preview sim will think it's in the middle of an interaction, when that is in fact impossible.

[pixelzoom]

In https://github.com/phetsims/molecule-polarity/issues/105#issuecomment-804455813, @zepumph suggested:

I would consider isDraggingProperty a transient value, and not something that should be stateful. I would start in this issue by setting that to be phetioState:false and seeing how that feels.

[pixelzoom]

molecule.isDraggingProperty has been set to phetioState: false in master and 1.1 branches. See above commits.

@phet-steele please confirm that this is fixed in master. You should now see the molecule immediately rotate into alignment in the launched Preview sim. If it looks OK, please leave the issue open, but change the label to "fixed-awaiting-deploy".

[phet-steele]

This does look okay in master, thank you for all your work!

[KatieWoe]

Noting that this iframe behavior was previously known I believe (although I'm having trouble finding the issue) and I believe it varies between browsers.

[pixelzoom]

To verify this issue in 1.1.0-rc.2, follow the steps in https://github.com/phetsims/molecule-polarity/issues/107#issue-838900878. Verify that the molecule dipole immediately aligns with the E-field when the Preview sim starts up.

It is sufficient to verify this issue on 1 platform.

[KatieWoe]

This looks ok in rc.2