From 43492380ef66131bfa1369ad17eeb6e5e2e893d1 Mon Sep 17 00:00:00 2001 From: Andrey Zelenkov Date: Mon, 14 Sep 2015 03:39:05 +0300 Subject: [PATCH] #64 replaced painting bucket node by standard scenery-phew component --- js/curve-fitting/CurveFittingScreen.js | 6 ++- js/curve-fitting/model/CurveFittingModel.js | 15 ++++++- .../view/BucketAndGraphAreaNode.js | 5 ++- js/curve-fitting/view/BucketNode.js | 39 +++++++------------ js/curve-fitting/view/CurveFittingView.js | 5 ++- 5 files changed, 37 insertions(+), 33 deletions(-) diff --git a/js/curve-fitting/CurveFittingScreen.js b/js/curve-fitting/CurveFittingScreen.js index 8444db2..5789e43 100644 --- a/js/curve-fitting/CurveFittingScreen.js +++ b/js/curve-fitting/CurveFittingScreen.js @@ -12,6 +12,7 @@ define( function( require ) { var CurveFittingModel = require( 'CURVE_FITTING/curve-fitting/model/CurveFittingModel' ); var CurveFittingView = require( 'CURVE_FITTING/curve-fitting/view/CurveFittingView' ); var inherit = require( 'PHET_CORE/inherit' ); + var ModelViewTransform2 = require( 'PHETCOMMON/view/ModelViewTransform2' ); var Screen = require( 'JOIST/Screen' ); // strings @@ -26,9 +27,12 @@ define( function( require ) { //If there are multiple screens, then the icon must be provided here. var icon = null; + // model coordinates are the same as view coordinates + var modelViewTransform = ModelViewTransform2.createIdentity(); + Screen.call( this, curveFittingSimString, icon, function() { return new CurveFittingModel(); }, - function( model ) { return new CurveFittingView( model ); }, + function( model ) { return new CurveFittingView( model, modelViewTransform ); }, { backgroundColor: 'rgb( 187, 230, 246 )' } ); } diff --git a/js/curve-fitting/model/CurveFittingModel.js b/js/curve-fitting/model/CurveFittingModel.js index 502f166..ab3c625 100644 --- a/js/curve-fitting/model/CurveFittingModel.js +++ b/js/curve-fitting/model/CurveFittingModel.js @@ -11,9 +11,11 @@ define( function( require ) { // modules var Bounds2 = require( 'DOT/Bounds2' ); var Curve = require( 'CURVE_FITTING/curve-fitting/model/Curve' ); + var Dimension2 = require( 'DOT/Dimension2' ); var FitType = require( 'CURVE_FITTING/curve-fitting/model/FitType' ); var inherit = require( 'PHET_CORE/inherit' ); var PropertySet = require( 'AXON/PropertySet' ); + var SphereBucket = require( 'PHETCOMMON/model/SphereBucket' ); /** * Main constructor for CurveFittingModel, which contains all of the model logic for the entire sim screen. @@ -32,12 +34,21 @@ define( function( require ) { // max order of fit this.maxOrderOfFit = 3; + // bucket model + var BUCKET_WIDTH = 90; + var BUCKET_HEIGHT = BUCKET_WIDTH * 0.50; + this.bucket = new SphereBucket( { + size: new Dimension2( BUCKET_WIDTH, BUCKET_HEIGHT ), + caption: '', + baseColor: 'rgb( 65, 63, 117 )' + } ); + // curve model this.curve = new Curve( this.orderOfFitProperty, this.fitTypeProperty, this.maxOrderOfFit ); // graph area size this.graphArea = { - // x-y size for point position + // x-y size for point position, expecting equal x and y deltas size: new Bounds2( -10, -10, 10, 10 ), // real bounds of graph area, will be set according to available space @@ -52,6 +63,6 @@ define( function( require ) { // reset curve this.curve.reset(); - }, + } } ); } ); \ No newline at end of file diff --git a/js/curve-fitting/view/BucketAndGraphAreaNode.js b/js/curve-fitting/view/BucketAndGraphAreaNode.js index ee4b4e2..01203e8 100644 --- a/js/curve-fitting/view/BucketAndGraphAreaNode.js +++ b/js/curve-fitting/view/BucketAndGraphAreaNode.js @@ -22,14 +22,15 @@ define( function( require ) { /** * @param {CurveFittingModel} curveFittingModel + * @param {ModelViewTransform2} modelViewTransform * @param {Object} [options] for graph node * @constructor */ - function BucketAndGraphAreaNode( curveFittingModel, options ) { + function BucketAndGraphAreaNode( curveFittingModel, modelViewTransform, options ) { var self = this; // create bucket node - var bucketNode = new BucketNode(); + var bucketNode = new BucketNode( curveFittingModel.bucket, modelViewTransform ); // create graph area node var graphAreaNode = new GraphAreaNode( curveFittingModel.curve, curveFittingModel.orderOfFitProperty, curveFittingModel.areResidualsVisibleProperty, curveFittingModel.graphArea ); diff --git a/js/curve-fitting/view/BucketNode.js b/js/curve-fitting/view/BucketNode.js index 58b957c..d042808 100644 --- a/js/curve-fitting/view/BucketNode.js +++ b/js/curve-fitting/view/BucketNode.js @@ -17,6 +17,8 @@ define( function( require ) { var Node = require( 'SCENERY/nodes/Node' ); var Path = require( 'SCENERY/nodes/Path' ); var Shape = require( 'KITE/Shape' ); + var BucketFront = require( 'SCENERY_PHET/bucket/BucketFront' ); + var BucketHole = require( 'SCENERY_PHET/bucket/BucketHole' ); // constants var POINTS_COORDS = [ @@ -40,43 +42,28 @@ define( function( require ) { { x: -20, y: 7 }, { x: 33, y: 8 } ]; - var RADIUS_X = 44; - var RADIUS_Y = 9; /** + * @param {SphereBucket} bucketModel - Model of bucket. + * @param {ModelViewTransform2} modelViewTransform * @param {Object} [options] for graph node * @constructor */ - function BucketNode( options ) { + function BucketNode( bucketModel, modelViewTransform, options ) { Node.call( this, _.extend( { cursor: 'pointer' }, options ) ); - // create bucket - var bucketShape = new Shape(); - bucketShape.ellipticalArc( 0, 0, RADIUS_X, RADIUS_Y, 0, Math.PI, 0, false ); - bucketShape.ellipticalArc( 0, 30, RADIUS_X * 0.7, RADIUS_Y * 0.7, 0, 0, Math.PI, false ); - bucketShape.ellipticalArc( 0, 0, RADIUS_X, RADIUS_Y, 0, Math.PI, 2 * Math.PI, true ); + var bucketNode = new BucketFront( bucketModel, modelViewTransform ); + bucketNode.rotate( Math.PI ); + this.addChild( bucketNode ); - var bucketPath = new Path( bucketShape, { - fill: new LinearGradient( 0, 0, RADIUS_X, 0 ). - addColorStop( 0, 'rgb( 68, 66, 123 )' ). - addColorStop( 1, 'rgb( 26, 25, 79 )' ), - stroke: 'rgb( 24, 25, 74 )', - lineWidth: 1 - } ); - this.addChild( bucketPath ); - - // create hole - var bucketHolePath = new Path( Shape.ellipse( 0, 0, RADIUS_X, RADIUS_Y ), { - fill: new LinearGradient( 0, 0, RADIUS_X, 0 ). - addColorStop( 0, 'rgb( 62, 62, 62 )' ). - addColorStop( 1, 'rgb( 201, 201, 201 )' ) - } ); - this.addChild( bucketHolePath ); + var bucketHoleNode = new BucketHole( bucketModel, modelViewTransform ); + bucketHoleNode.rotate( Math.PI ); + this.addChild( bucketHoleNode ); // create clip shape for points var clipShape = new Shape(); - clipShape.ellipticalArc( 0, 0, RADIUS_X, RADIUS_Y, 0, Math.PI, 2 * Math.PI, true ); - clipShape.ellipticalArc( 0, 0, RADIUS_X, 4 * RADIUS_Y, 0, 0, Math.PI, true ); + clipShape.ellipticalArc( 0, 0, bucketHoleNode.bounds.width / 2, bucketHoleNode.bounds.height / 2, 0, Math.PI, 2 * Math.PI, true ); + clipShape.ellipticalArc( 0, 0, bucketHoleNode.bounds.width / 2, bucketHoleNode.bounds.height * 2, 0, 0, Math.PI, true ); // create points var pointsNode = new Node( { clipArea: clipShape } ); diff --git a/js/curve-fitting/view/CurveFittingView.js b/js/curve-fitting/view/CurveFittingView.js index aea2ebe..f7271c0 100644 --- a/js/curve-fitting/view/CurveFittingView.js +++ b/js/curve-fitting/view/CurveFittingView.js @@ -24,9 +24,10 @@ define( function( require ) { /** * @param {CurveFittingModel} curveFittingModel + * @param {ModelViewTransform2} modelViewTransform * @constructor */ - function CurveFittingView( curveFittingModel ) { + function CurveFittingView( curveFittingModel, modelViewTransform ) { ScreenView.call( this, { layoutBounds: SIM_BOUNDS } ); // add deviations node @@ -44,7 +45,7 @@ define( function( require ) { // add bucket and graph area node var graphAreaWidth = SIM_BOUNDS.width - deviationsPanel.bounds.width - controlMenuNode.bounds.width - 50; curveFittingModel.graphArea.bounds.setMinMax( 0, 0, graphAreaWidth, graphAreaWidth ); - var bucketAndGraphAreaNode = new BucketAndGraphAreaNode( curveFittingModel ); + var bucketAndGraphAreaNode = new BucketAndGraphAreaNode( curveFittingModel, modelViewTransform ); bucketAndGraphAreaNode.centerX = bucketAndGraphAreaNode.width / 2 + PADDING_LEFT_RIGHT + 25; bucketAndGraphAreaNode.centerY = bucketAndGraphAreaNode.height / 2 + PADDING_TOP_BOTTOM; this.addChild( bucketAndGraphAreaNode );