add showRulerRegions query parameter, phetsims/gravity-force-lab#185

js/ISLCQueryParameters.js

@@ -19,6 +19,11 @@ define( require => {
       type: 'flag'
     },
 
+    // when flagged, shows the ruler region boundaries for interactive descriptions.
+    showRulerRegions: {
+      type: 'flag'
+    },
+
     // Shows boundary positions of the two objects, as .  The boundary positions for each
     // object will change depending on the size and position of both objects.
     showDragBounds: { type: 'flag' }

js/view/ISLCRulerNode.js

@@ -15,8 +15,10 @@ define( require => {
   const GrabDragInteraction = require( 'SCENERY_PHET/accessibility/GrabDragInteraction' );
   const inverseSquareLawCommon = require( 'INVERSE_SQUARE_LAW_COMMON/inverseSquareLawCommon' );
   const ISLCA11yStrings = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCA11yStrings' );
+  const ISLCQueryParameters = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCQueryParameters' );
   const KeyboardDragListener = require( 'SCENERY/listeners/KeyboardDragListener' );
   const KeyboardUtil = require( 'SCENERY/accessibility/KeyboardUtil' );
+  const Line = require( 'SCENERY/nodes/Line' );
   const merge = require( 'PHET_CORE/merge' );
   const MovableDragHandler = require( 'SCENERY_PHET/input/MovableDragHandler' );
   const Node = require( 'SCENERY/nodes/Node' );
@@ -46,6 +48,7 @@ define( require => {
   const RULER_WIDTH = 500;
   const RULER_HEIGHT = 35;
   const RULER_INSET = 10;
+  const SHOW_RULER_REGIONS = ISLCQueryParameters.showRulerRegions;
 
   class ISLCRulerNode extends Node {
 
@@ -237,6 +240,14 @@ define( require => {
         ruler.center = modelViewTransform.modelToViewPosition( value );
         ruler.addChild( focusHighlight );
       } );
+
+      if ( SHOW_RULER_REGIONS ) {
+        const lineOptions = { stroke: 'black', x: ruler.width / 2, y: RULER_HEIGHT / 2 };
+        const xLine = new Line( -10, 0, 10, 0, lineOptions );
+        const yLine = new Line( 0, -10, 0, 10, lineOptions );
+        ruler.addChild( xLine );
+        ruler.addChild( yLine );
+      }
     }
 
     /**

js/view/ISLCRulerRegionsNode.js

@@ -0,0 +1,46 @@
+// Copyright 2019, University of Colorado Boulder
+
+/**
+ * Shows the regions that a ruler can occupy in vertical space. These regions are used for interactive descriptions of
+ * the ruler.
+ *
+ * @author Michael Kauzmann (PhET Interactive Simulations)
+ */
+define( require => {
+  'use strict';
+
+  // modules
+  const inverseSquareLawCommon = require( 'INVERSE_SQUARE_LAW_COMMON/inverseSquareLawCommon' );
+  const merge = require( 'PHET_CORE/merge' );
+  const Path = require( 'SCENERY/nodes/Path' );
+  const Shape = require( 'KITE/Shape' );
+
+  /**
+   * @param {Array.<number>} rulerRegionPositions - a list of y values that are the ruler region boundaries
+   * @param {Bounds2} layoutBounds
+   * @param {Object} [options]
+   * @constructor
+   */
+  class ISLCRulerRegionsNode extends Path {
+    constructor( rulerRegionPositions, layoutBounds, options ) {
+
+      options = merge( {
+        stroke: 'rgba(237,54,187,0.6)',
+        lineWidth: 1.5
+      }, options );
+
+      const regionsShape = new Shape();
+
+      rulerRegionPositions.forEach( position => {
+
+        // draw the grid line
+        regionsShape.moveTo( layoutBounds.left, position );
+        regionsShape.lineTo( layoutBounds.right, position );
+      } );
+
+      super( regionsShape, options );
+    }
+  }
+
+  return inverseSquareLawCommon.register( 'ISLCRulerRegionsNode', ISLCRulerRegionsNode );
+} );