more instrumentation #14

Signed-off-by: Chris Malley <[email protected]>

js/common/model/GQModel.js

@@ -78,38 +78,35 @@ define( require => {
         -modelViewTransformScale // y is inverted
       );
 
-      // @public (read-only) point tools, initial locations and drag bounds determined empirically
-      this.pointTools = [
-
-        // probe on right
-        new PointTool( this.quadratics, {
-          orientation: 'right',
-          location: new Vector2( -2, -12 ),
-          dragBounds: new Bounds2(
-            this.graph.xRange.min - 1, this.graph.yRange.min - 3,
-            this.graph.xRange.max + 1, this.graph.yRange.max + 1 ),
-          tandem: tandem.createTandem( 'rightPointTool' ),
-          phetioInstanceDocumentation: 'the point tool whose probe is on the right side'
-        } ),
-
-        // probe on left
-        new PointTool( this.quadratics, {
-          orientation: 'left',
-          location: new Vector2( 2, -12 ),
-          dragBounds: new Bounds2(
-            this.graph.xRange.min - 1, this.graph.yRange.min - 3,
-            this.graph.xRange.max + 1, this.graph.yRange.max + 1 ),
-          tandem: tandem.createTandem( 'leftPointTool' ),
-          phetioInstanceDocumentation: 'the point tool whose probe is on the left side'
-        } )
-      ];
+      // @public (read-only)
+      this.rightPointTool = new PointTool( this.quadratics, {
+        orientation: 'right',
+        location: new Vector2( -2, -12 ),
+        dragBounds: new Bounds2(
+          this.graph.xRange.min - 1, this.graph.yRange.min - 3,
+          this.graph.xRange.max + 1, this.graph.yRange.max + 1 ),
+        tandem: tandem.createTandem( 'rightPointTool' ),
+        phetioInstanceDocumentation: 'the point tool whose probe is on the right side'
+      } );
+
+      // @public (read-only)
+      this.leftPointTool = new PointTool( this.quadratics, {
+        orientation: 'left',
+        location: new Vector2( 2, -12 ),
+        dragBounds: new Bounds2(
+          this.graph.xRange.min - 1, this.graph.yRange.min - 3,
+          this.graph.xRange.max + 1, this.graph.yRange.max + 1 ),
+        tandem: tandem.createTandem( 'leftPointTool' ),
+        phetioInstanceDocumentation: 'the point tool whose probe is on the left side'
+      } );
     }
 
     // @public
     reset() {
       this.quadraticProperty.reset();
       this.eraseQuadratics();
-      this.pointTools.forEach( pointTool => { pointTool.reset(); } );
+      this.rightPointTool.reset();
+      this.leftPointTool.reset();
     }
 
     /**

js/common/view/EquationAccordionBox.js

@@ -14,7 +14,7 @@ define( require => {
   const GQConstants = require( 'GRAPHING_QUADRATICS/common/GQConstants' );
   const graphingQuadratics = require( 'GRAPHING_QUADRATICS/graphingQuadratics' );
   const HSeparator = require( 'SUN/HSeparator' );
-  const SaveCurveControls = require( 'GRAPHING_QUADRATICS/common/view/SaveCurveControls' );
+  const SaveEraseButtons = require( 'GRAPHING_QUADRATICS/common/view/SaveEraseButtons' );
   const Tandem = require( 'TANDEM/Tandem' );
   const VBox = require( 'SCENERY/nodes/VBox' );
 
@@ -40,10 +40,15 @@ define( require => {
       assert && assert( !options.titleNode, 'EquationAccordionBox sets titleNode' );
       options.titleNode = titleNode;
 
-      const saveCurveControls = new SaveCurveControls(
-        model.saveQuadratic.bind( model ), model.eraseQuadratics.bind( model ), model.savedQuadratics.lengthProperty );
+      const saveEraseButtons = new SaveEraseButtons( 
+        model.saveQuadratic.bind( model ), 
+        model.eraseQuadratics.bind( model ), 
+        model.savedQuadratics.lengthProperty, {
+          tandem: options.tandem.createTandem( 'saveEraseButtons' ),
+          phetioInstanceDocumentation: 'buttons to save and erase a quadratic on the graph'
+        } );
 
-      const separatorWidth = Math.max( interactiveEquationNode.width, saveCurveControls.width );
+      const separatorWidth = Math.max( interactiveEquationNode.width, saveEraseButtons.width );
 
       const separatorOptions = { stroke: GQColors.SEPARATOR };
 
@@ -54,7 +59,7 @@ define( require => {
           new HSeparator( separatorWidth, separatorOptions ),
           interactiveEquationNode,
           new HSeparator( separatorWidth, separatorOptions ),
-          saveCurveControls
+          saveEraseButtons
         ]
       } );
 

js/common/view/GQScreenView.js

@@ -44,20 +44,30 @@ define( require => {
 
       // Point tools moveToFront when dragged, so give them a common parent to preserve rendering order.
       const pointToolsParent = new Node();
-      model.pointTools.forEach( pointTool => {
-        pointToolsParent.addChild( new PointToolNode(
-          pointTool,
-          model.modelViewTransform,
-          model.graph,
-          viewProperties.graphContentsVisibleProperty
-        ) );
-      } );
+      pointToolsParent.addChild( new PointToolNode(
+        model.rightPointTool,
+        model.modelViewTransform,
+        model.graph,
+        viewProperties.graphContentsVisibleProperty, {
+          tandem: options.tandem.createTandem( 'rightPointToolNode' ),
+          phetioInstanceDocumentation: 'the point tool Node whose probe is on the right side'
+        } ) );
+      pointToolsParent.addChild( new PointToolNode(
+        model.leftPointTool,
+        model.modelViewTransform,
+        model.graph,
+        viewProperties.graphContentsVisibleProperty, {
+          tandem: options.tandem.createTandem( 'leftPointToolNode' ),
+          phetioInstanceDocumentation: 'the point tool Node whose probe is on the left side'
+        } ) );
 
       // Toggle button for showing/hiding contents of graph
       const eyeToggleButton = new GraphContentsToggleButton( viewProperties.graphContentsVisibleProperty, {
         scale: 0.75,
         left: model.modelViewTransform.modelToViewX( model.graph.xRange.max ) + 10,
-        bottom: model.modelViewTransform.modelToViewY( model.graph.yRange.min )
+        bottom: model.modelViewTransform.modelToViewY( model.graph.yRange.min ),
+        tandem: options.tandem.createTandem( 'eyeToggleButton' ),
+        phetioInstanceDocumentation: 'button that shows/hides the contents of the graph'
       } );
 
       const controlPanelMaxWidth = this.layoutBounds.width - graphNode.width - ( 2 * GQConstants.SCREEN_VIEW_X_MARGIN ) - X_SPACING;
@@ -91,7 +101,9 @@ define( require => {
           viewProperties.reset();
         },
         right: this.layoutBounds.maxX - GQConstants.SCREEN_VIEW_X_MARGIN,
-        bottom: this.layoutBounds.maxY - GQConstants.SCREEN_VIEW_Y_MARGIN
+        bottom: this.layoutBounds.maxY - GQConstants.SCREEN_VIEW_Y_MARGIN,
+        tandem: options.tandem.createTandem( 'resetAllButton' ),
+        phetioInstanceDocumentation: 'button that resets the screen to its initial state'
       } );
       this.addChild( resetAllButton );
     }

js/common/view/GraphContentsToggleButton.js

@@ -20,7 +20,9 @@ define( require => {
      * @param {Object} [options]
      */
     constructor( graphContentsVisibleProperty, options ) {
+
       super( graphContentsVisibleProperty, options );
+
       graphContentsVisibleProperty.link( visible => {
         if ( visible ) {
           this.setBaseColor( 'white' );

js/common/view/PointToolNode.js

@@ -23,6 +23,7 @@ define( require => {
   const Shape = require( 'KITE/Shape' );
   const SimpleDragHandler = require( 'SCENERY/input/SimpleDragHandler' );
   const StringUtils = require( 'PHETCOMMON/util/StringUtils' );
+  const Tandem = require( 'TANDEM/Tandem' );
   const Text = require( 'SCENERY/nodes/Text' );
   const Util = require( 'DOT/Util' );
   const Vector2 = require( 'DOT/Vector2' );
@@ -53,7 +54,8 @@ define( require => {
         cursor: 'pointer',
         backgroundNormalColor: 'white',
         foregroundNormalColor: 'black',
-        foregroundHighlightColor: 'white'
+        foregroundHighlightColor: 'white',
+        tandem: Tandem.required
       }, options );
 
       assert && assert( pointTool.orientation === 'left' || pointTool.orientation === 'right',

js/common/view/SaveCurveControls.js → js/common/view/SaveEraseButtons.js

@@ -15,11 +15,12 @@ define( function( require ) {
   const HBox = require( 'SCENERY/nodes/HBox' );
   const PhetColorScheme = require( 'SCENERY_PHET/PhetColorScheme' );
   const RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' );
+  const Tandem = require( 'TANDEM/Tandem' );
 
   // constants
   const BUTTON_ICON_WIDTH = 30;
 
-  class SaveCurveControls extends HBox {
+  class SaveEraseButtons extends HBox {
 
     /**
      * @param {function} saveFunction
@@ -30,7 +31,8 @@ define( function( require ) {
     constructor( saveFunction, eraseFunction, numberOfSavedLinesProperty, options ) {
 
       options = _.extend( {
-        spacing: 40
+        spacing: 40,
+        tandem: Tandem.required
       }, options );
 
       // Save button
@@ -46,7 +48,7 @@ define( function( require ) {
         listener: eraseFunction
       } );
 
-      assert && assert( !options.children, 'SaveCurveControls sets children' );
+      assert && assert( !options.children, 'SaveEraseButtons sets children' );
       options.children = [ saveButton, eraseButton ];
 
       super( options );
@@ -58,5 +60,5 @@ define( function( require ) {
     }
   }
 
-  return graphingQuadratics.register( 'SaveCurveControls', SaveCurveControls );
+  return graphingQuadratics.register( 'SaveEraseButtons', SaveEraseButtons );
 } );