From 7138187b767dc799d9578e53471d460c6641c3ea Mon Sep 17 00:00:00 2001 From: Chris Malley Date: Thu, 27 Sep 2018 23:00:34 -0600 Subject: [PATCH] more instrumentation #14 Signed-off-by: Chris Malley --- js/common/model/GQModel.js | 49 +++++++++---------- js/common/view/EquationAccordionBox.js | 15 ++++-- js/common/view/GQScreenView.js | 32 ++++++++---- js/common/view/GraphContentsToggleButton.js | 2 + js/common/view/PointToolNode.js | 4 +- ...veCurveControls.js => SaveEraseButtons.js} | 10 ++-- 6 files changed, 66 insertions(+), 46 deletions(-) rename js/common/view/{SaveCurveControls.js => SaveEraseButtons.js} (84%) diff --git a/js/common/model/GQModel.js b/js/common/model/GQModel.js index c3093fa7..3b20a9f9 100644 --- a/js/common/model/GQModel.js +++ b/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(); } /** diff --git a/js/common/view/EquationAccordionBox.js b/js/common/view/EquationAccordionBox.js index 5e792851..a6f42d8a 100644 --- a/js/common/view/EquationAccordionBox.js +++ b/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 ] } ); diff --git a/js/common/view/GQScreenView.js b/js/common/view/GQScreenView.js index 5598779a..6d7a0db8 100644 --- a/js/common/view/GQScreenView.js +++ b/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 ); } diff --git a/js/common/view/GraphContentsToggleButton.js b/js/common/view/GraphContentsToggleButton.js index ee530367..be31aba7 100644 --- a/js/common/view/GraphContentsToggleButton.js +++ b/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' ); diff --git a/js/common/view/PointToolNode.js b/js/common/view/PointToolNode.js index 70fbf81e..61cad554 100644 --- a/js/common/view/PointToolNode.js +++ b/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', diff --git a/js/common/view/SaveCurveControls.js b/js/common/view/SaveEraseButtons.js similarity index 84% rename from js/common/view/SaveCurveControls.js rename to js/common/view/SaveEraseButtons.js index 1b4acbd8..a620b0bc 100644 --- a/js/common/view/SaveCurveControls.js +++ b/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 ); } ); \ No newline at end of file