added phet-io control of the cueing arrows, see #188

js/common/GreenhouseEffectOptions.ts

@@ -0,0 +1,28 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ * GreenhouseEffectOptions defines the global options for this simulation.  Depending on the particulars, these can be
+ * controlled via phet-io, query parameters, and/or from the "Options..." dialog.
+ *
+ * @author John Blanco (PhET Interactive Simulations)
+ */
+
+import BooleanProperty from '../../../axon/js/BooleanProperty.js';
+import Tandem from '../../../tandem/js/Tandem.js';
+import greenhouseEffect from '../greenhouseEffect.js';
+import GreenhouseEffectQueryParameters from './GreenhouseEffectQueryParameters.js';
+
+// constants
+const optionsTandem = Tandem.GLOBAL_VIEW.createTandem( 'options' );
+
+const GreenhouseEffectOptions = {
+
+  cueingArrowsEnabledProperty: new BooleanProperty( GreenhouseEffectQueryParameters.cueingArrowsEnabled, {
+    tandem: optionsTandem.createTandem( 'cueingArrowsEnabledProperty' ),
+    phetioDocumentation: 'shows cueing arrows on draggable elements'
+  } )
+
+};
+
+greenhouseEffect.register( 'GreenhouseEffectOptions', GreenhouseEffectOptions );
+export default GreenhouseEffectOptions;

js/common/GreenhouseEffectQueryParameters.ts

@@ -38,6 +38,14 @@ const GreenhouseEffectQueryParameters = QueryStringMachine.getAll( {
     defaultValue: 'K'
   },
 
+  // Enables the feature that shows cueing arrows on the flux sensor.  This sets the initial value of
+  // GreenhouseEffectOptions.cueingArrowsEnabledProperty.
+  cueingArrowsEnabled: {
+    type: 'boolean',
+    defaultValue: true,
+    public: true
+  },
+
   // a flag that starts the launches the sim with the sunlight initially started, for ease of development
   initiallyStarted: { type: 'boolean', defaultValue: false },
 

js/common/view/FluxMeterNode.ts

@@ -28,6 +28,7 @@ import Tandem from '../../../../tandem/js/Tandem.js';
 import greenhouseEffect from '../../greenhouseEffect.js';
 import greenhouseEffectStrings from '../../greenhouseEffectStrings.js';
 import GreenhouseEffectConstants from '../GreenhouseEffectConstants.js';
+import GreenhouseEffectOptions from '../GreenhouseEffectOptions.js';
 import FluxMeter from '../model/FluxMeter.js';
 import LayersModel from '../model/LayersModel.js';
 
@@ -53,7 +54,7 @@ const SENSOR_VIEW_HEIGHT = 10;
 
 class FluxMeterNode extends Node {
   public readonly fluxPanel: Panel;
-  private readonly showFluxSensorCueArrowProperty: BooleanProperty
+  private readonly wasDraggedProperty: BooleanProperty
 
   /**
    * @param model - model component for the FluxMeter
@@ -73,7 +74,7 @@ class FluxMeterNode extends Node {
 
     super();
 
-    // wire connecting panel and sensor, beneath both so it appears like the wire is solidly connected to both
+    // Create the node that represents the wire connecting the panel and the sensor.
     const wireNode = new WireNode(
       new DerivedProperty(
         [ model.wireSensorAttachmentPositionProperty ],
@@ -121,28 +122,29 @@ class FluxMeterNode extends Node {
     } );
     this.addChild( fluxSensorNode );
 
+    // The cueing arrows for the flux sensor are shown initially if globally enabled, then hidden after the first drag.
+    this.wasDraggedProperty = new BooleanProperty( false );
+    const cueingArrowsShownProperty = new DerivedProperty(
+      [ this.wasDraggedProperty, GreenhouseEffectOptions.cueingArrowsEnabledProperty ],
+      ( wasDragged, cueingArrowsEnabled ) => !wasDragged && cueingArrowsEnabled
+    );
+
     // green arrows around the flux sensor flag, cues the user to drag it
-    const cueArrowsNode = new VBox( {
+    const cuingArrowsNode = new VBox( {
       cursor: 'pointer',
       spacing: 15,
       children: [
         new ArrowNode( 0, 0, 0, -CUE_ARROW_LENGTH, CUE_ARROW_OPTIONS ),
         new ArrowNode( 0, 0, 0, CUE_ARROW_LENGTH, CUE_ARROW_OPTIONS )
       ],
-      centerX: fluxSensorNode.rectBounds.maxX
+      centerX: fluxSensorNode.rectBounds.maxX,
+      visibleProperty: cueingArrowsShownProperty
     } );
-    this.addChild( cueArrowsNode );
+    this.addChild( cuingArrowsNode );
 
     // Reposition the cue arrows as the flux sensor moves.
     model.fluxSensor.positionProperty.link( fluxSensorPosition => {
-      cueArrowsNode.centerY = modelViewTransform.modelToViewY( fluxSensorPosition.y );
-    } );
-
-    // The flux arrows are shown initially, then hidden after the first drag.  This is where the visibility is
-    // controlled.
-    this.showFluxSensorCueArrowProperty = new BooleanProperty( true );
-    this.showFluxSensorCueArrowProperty.link( showFluxSensorCueArrows => {
-      cueArrowsNode.visible = showFluxSensorCueArrows;
+      cuingArrowsNode.centerY = modelViewTransform.modelToViewY( fluxSensorPosition.y );
     } );
 
     // {Panel} - contains the display showing energy flux, public for positioning in the view
@@ -165,7 +167,7 @@ class FluxMeterNode extends Node {
       drag: ( event: SceneryEvent ) => {
 
         // Hide the cue arrows if they are visible.
-        this.showFluxSensorCueArrowProperty.set( false );
+        this.wasDraggedProperty.set( true );
 
         // Clear the flux sensor if it is dragged while the main model is paused.  This prevents the display of flux
         // readings that are incorrect for the altitude at which the sensor is positioned.
@@ -203,7 +205,7 @@ class FluxMeterNode extends Node {
   }
 
   public reset(): void {
-    this.showFluxSensorCueArrowProperty.reset();
+    this.wasDraggedProperty.reset();
   }
 }
 
@@ -258,7 +260,7 @@ class EnergyFluxDisplay extends Node {
     } );
     this.addChild( boundsRectangle );
 
-    // Set a clip area so that the arrows don't go outside of the background.
+    // Set a clip area so that the arrows don't go outside the background.
     boundsRectangle.clipArea = Shape.bounds( boundsRectangle.getRectBounds() );
 
     // Create and add the arrows.