In CL exchange scientificNotationProperty for forceValuesDisplayPrope…

…rty and update UI, phetsims/gravity-force-lab#207

coulombs-law-strings_en.json

@@ -17,9 +17,6 @@
   "pmScale": {
     "value": "1 picometer (pm) = 1 &times; 10<sup>-12</sup> m"
   },
-  "scientificNotation": {
-    "value": "Scientific Notation"
-  },
   "screen.macroScale": {
     "value": "Macro Scale"
   },

js/common/model/CoulombsLawCommonModel.js

@@ -11,8 +11,9 @@ define( require => {
   'use strict';
 
   // modules
-  const BooleanProperty = require( 'AXON/BooleanProperty' );
   const coulombsLaw = require( 'COULOMBS_LAW/coulombsLaw' );
+  const EnumerationProperty = require( 'AXON/EnumerationProperty' );
+  const ForceValuesDisplayEnum = require( 'INVERSE_SQUARE_LAW_COMMON/model/ForceValuesDisplayEnum' );
   const inherit = require( 'PHET_CORE/inherit' );
   const ISLCConstants = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCConstants' );
   const ISLCModel = require( 'INVERSE_SQUARE_LAW_COMMON/model/ISLCModel' );
@@ -36,17 +37,25 @@ define( require => {
       initialRulerPosition: new Vector2( 0, -1.1E-2 )
     }, options );
 
-    // @public {Property.<boolean>} - controls whether we display the force values in decimal or scientific notation format
-    this.scientificNotationProperty = new BooleanProperty( options.displayScientificNotation, {
-      tandem: tandem.createTandem( 'scientificNotationProperty' )
-    } );
-
     // @public - the position of the ruler in the model
     this.rulerPositionProperty = new Vector2Property( options.initialRulerPosition, {
       tandem: tandem.createTandem( 'rulerPositionProperty' )
     } );
 
     ISLCModel.call( this, ISLCConstants.k, charge1, charge2, locationRange, tandem, options );
+
+    // @public
+    this.forceValuesDisplayProperty = new EnumerationProperty( ForceValuesDisplayEnum, ForceValuesDisplayEnum.DECIMAL, {
+      tandem: tandem.createTandem( 'forceValuesDisplayProperty' ),
+      phetioDocumentation: 'This determines the display type for the force values: in decimal or scientific ' +
+                           'notation, and also hidden.'
+    } );
+
+    // ISLC code listens substantially to showForceValuesProperty, so keep that in sync as the display type changes.
+    this.forceValuesDisplayProperty.lazyLink( newValue => {
+      this.showForceValuesProperty.value = newValue === ForceValuesDisplayEnum.DECIMAL ||
+                                           newValue === ForceValuesDisplayEnum.SCIENTIFIC;
+    } );
   }
 
   coulombsLaw.register( 'CoulombsLawCommonModel', CoulombsLawCommonModel );
@@ -83,7 +92,7 @@ define( require => {
 
       // As of writing this, all (both) subtypes have a rulerPositionProperty, so it is easy enough to just reset this here.
       this.rulerPositionProperty.reset();
-      this.scientificNotationProperty.reset();
+      this.forceValuesDisplayProperty.reset();
       ISLCModel.prototype.reset.call( this );
     }
   } );

js/common/view/ChargeNode.js

@@ -15,6 +15,7 @@ define( require => {
   // modules
   const coulombsLaw = require( 'COULOMBS_LAW/coulombsLaw' );
   const CoulombsLawColorProfile = require( 'COULOMBS_LAW/common/CoulombsLawColorProfile' );
+  const ForceValuesDisplayEnum = require( 'INVERSE_SQUARE_LAW_COMMON/model/ForceValuesDisplayEnum' );
   const inherit = require( 'PHET_CORE/inherit' );
   const ISLCObjectNode = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCObjectNode' );
   const merge = require( 'PHET_CORE/merge' );
@@ -62,7 +63,7 @@ define( require => {
         labelShadowFill: CoulombsLawColorProfile.labelShadowFillProperty,
         backgroundFill: CoulombsLawColorProfile.backgroundProperty
       },
-      labelOptions:{
+      labelOptions: {
         fill: CoulombsLawColorProfile.forceArrowLabelFillProperty
       },
 
@@ -90,8 +91,8 @@ define( require => {
       options
     );
 
-    // scientific notation property is never removed/destroyed, no disposal required
-    model.scientificNotationProperty.lazyLink( this.redrawForce.bind( this ) );
+    // force display Property is never removed/destroyed, no disposal required
+    model.forceValuesDisplayProperty.lazyLink( this.redrawForce.bind( this ) );
 
     // stroke added here for projector mode and white bg printing options
     this.objectCircle.stroke = 'black';
@@ -122,7 +123,7 @@ define( require => {
      * Updates the node's arrow length, force readout, and puller image.
      */
     redrawForce: function() {
-      this.arrowNode.scientificNotationMode = this.model.scientificNotationProperty.get();
+      this.arrowNode.scientificNotationMode = this.model.forceValuesDisplayProperty.value === ForceValuesDisplayEnum.SCIENTIFIC;
       ISLCObjectNode.prototype.redrawForce.call( this );
     }
   } );

js/common/view/CoulombsLawCommonView.js

@@ -16,20 +16,19 @@ define( require => {
   const ChargeControl = require( 'COULOMBS_LAW/common/view/ChargeControl' );
   const coulombsLaw = require( 'COULOMBS_LAW/coulombsLaw' );
   const inherit = require( 'PHET_CORE/inherit' );
+  const ISLCForceValuesDisplayControl = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCForceValuesDisplayControl' );
   const ISLCGridNode = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCGridNode' );
+  const ISLCPanel = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCPanel' );
   const ISLCQueryParameters = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCQueryParameters' );
   const ISLCRulerNode = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCRulerNode' );
   const ModelViewTransform2 = require( 'PHETCOMMON/view/ModelViewTransform2' );
   const ResetAllButton = require( 'SCENERY_PHET/buttons/ResetAllButton' );
   const ScreenView = require( 'JOIST/ScreenView' );
   const Vector2 = require( 'DOT/Vector2' );
-  const ISLCCheckboxPanel = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCCheckboxPanel' );
 
   // strings
   const charge1String = require( 'string!COULOMBS_LAW/charge1' );
   const charge2String = require( 'string!COULOMBS_LAW/charge2' );
-  const forceValuesString = require( 'string!INVERSE_SQUARE_LAW_COMMON/forceValues' );
-  const scientificNotationString = require( 'string!COULOMBS_LAW/scientificNotation' );
 
   // constants
   const SHOW_GRID = ISLCQueryParameters.showGrid;
@@ -62,27 +61,15 @@ define( require => {
     // @private
     this.modelViewTransform = modelViewTransform;
 
-    // construct checkbox item list
-    const checkboxItems = [
-      {
-        label: forceValuesString,
-        property: coulombsLawModel.showForceValuesProperty,
-        tandem: tandem.createTandem( 'forceValuesCheckbox' )
-      },
-      {
-        label: scientificNotationString,
-        property: coulombsLawModel.scientificNotationProperty,
-        options: { enabledProperty: coulombsLawModel.showForceValuesProperty }, // force values toggles this enabled
-        tandem: tandem.createTandem( 'scientificNotationCheckbox' )
-      }
-    ];
-
-    const coulombsLawParameterCheckbox = new ISLCCheckboxPanel( checkboxItems, {
-      tandem: tandem.createTandem( 'coulombsLawParameterCheckbox' ),
-      fill: '#EDEDED',
-      right: rightAlignment,
-      bottom: bottomAlignment - 73
-    } );
+    const coulombsLawParameterPanel = new ISLCPanel(
+      new ISLCForceValuesDisplayControl( coulombsLawModel.forceValuesDisplayProperty, {
+        tandem: tandem.createTandem( 'forceValuesDisplayControl' )
+      } ), {
+        tandem: tandem.createTandem( 'coulombsLawParameterPanel' ),
+        fill: '#EDEDED',
+        right: rightAlignment,
+        bottom: bottomAlignment - 43 // empirically determined
+      } );
 
     const charge1Control = new ChargeControl(
       charge1String,
@@ -93,7 +80,7 @@ define( require => {
       { tandem: tandem.createTandem( 'charge1Control' ) }
     );
     charge1Control.right = this.layoutBounds.centerX - 5;
-    charge1Control.top = coulombsLawParameterCheckbox.top;
+    charge1Control.top = coulombsLawParameterPanel.top;
 
     const charge2Control = new ChargeControl(
       charge2String,
@@ -107,11 +94,11 @@ define( require => {
     );
 
     charge2Control.left = this.layoutBounds.centerX + 5;
-    charge2Control.top = coulombsLawParameterCheckbox.top;
+    charge2Control.top = coulombsLawParameterPanel.top;
 
     // ruler drag bounds (in model coordinate frame) - assumes a single point scale inverted Y mapping
     const minX = coulombsLawModel.leftObjectBoundary;
-    const minY = modelViewTransform.viewToModelY( coulombsLawParameterCheckbox.top + 10 ); // bottom bound because Y is inverted
+    const minY = modelViewTransform.viewToModelY( coulombsLawParameterPanel.top + 10 ); // bottom bound because Y is inverted
     const maxX = coulombsLawModel.rightObjectBoundary;
     const maxY = -modelViewTransform.viewToModelDeltaY( this.layoutBounds.height / 2 ); // top bound because Y is inverted
 
@@ -149,7 +136,7 @@ define( require => {
 
     this.children = [
       coulombsLawRuler,
-      coulombsLawParameterCheckbox,
+      coulombsLawParameterPanel,
       charge1Control,
       charge2Control,
       resetAllButton
@@ -160,7 +147,7 @@ define( require => {
       coulombsLawRuler,
       charge1Control,
       charge2Control,
-      coulombsLawParameterCheckbox,
+      coulombsLawParameterPanel,
       resetAllButton
     ];