#64 replaced painting bucket node by standard scenery-phew component

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 )' }
     );
   }

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();
-    },
+    }
   } );
 } );

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 );

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 } );

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 );