Improved API support for DropperNode, ConcentrationMeterNode and Shak…

…erNode, see phetsims/concentration#34
phetsims · Mar 6, 2015 · 67b31ed · 67b31ed
1 parent a4e6dfc
commit 67b31ed
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/js/concentration/view/BLLDropperNode.js b/js/concentration/view/BLLDropperNode.js
@@ -43,7 +43,10 @@ define( function( require ) {
     thisNode.addChild( labelBackground );
 
     // label
-    var label = new SubSupText( dropper.solute.formula, { font: new PhetFont( { size: 18, weight: 'bold' } ), fill: 'black' } );
+    var label = new SubSupText( dropper.solute.formula, {
+      font: new PhetFont( { size: 18, weight: 'bold' } ),
+      fill: 'black'
+    } );
     thisNode.addChild( label );
 
     // location
@@ -83,11 +86,18 @@ define( function( require ) {
     thisNode.touchArea = thisNode.localBounds.dilatedX( 0.25 * thisNode.width );
 
     // move the dropper
-    thisNode.addInputListener( new MovableDragHandler( dropper.locationProperty, {
+    this.movableDragHandler = new MovableDragHandler( dropper.locationProperty, {
       dragBounds: dropper.dragBounds,
       modelViewTransform: modelViewTransform
-    } ) );
+    } );
+    thisNode.addInputListener( this.movableDragHandler );
   }
 
-  return inherit( EyeDropperNode, BLLDropperNode );
+  return inherit( EyeDropperNode, BLLDropperNode, {
+    // Pass through componentID and componentType to the movableDragHandler, where the arch messages are reported.
+    set componentID( id ) {this.movableDragHandler.componentID = id;},
+    get componentID() {return this.movableDragHandler.componentID;},
+    set componentType( type ) {this.movableDragHandler.componentType = type;},
+    get componentType() {return this.movableDragHandler.componentType;}
+  } );
 } );
diff --git a/js/concentration/view/ConcentrationMeterNode.js b/js/concentration/view/ConcentrationMeterNode.js
@@ -166,10 +166,11 @@ define( function( require ) {
     thisNode.touchArea = Shape.rectangle( imageNode.x - dx, imageNode.y - dy, imageNode.width + dx + dx, imageNode.height + dy + dy );
 
     // drag handler
-    thisNode.addInputListener( new MovableDragHandler( probe.locationProperty, {
+    this.movableDragHandler = new MovableDragHandler( probe.locationProperty, {
       dragBounds: probe.dragBounds,
       modelViewTransform: modelViewTransform
-    } ) );
+    } );
+    thisNode.addInputListener( this.movableDragHandler );
 
     var isInNode = function( node ) {
       var localPoint = node.parentToLocalPoint( probe.locationProperty.get() );
@@ -195,7 +196,14 @@ define( function( require ) {
     };
   }
 
-  inherit( Node, ProbeNode );
+  inherit( Node, ProbeNode, {
+
+    // Pass through componentID and componentType to the movableDragHandler, where the arch messages are reported.
+    set componentID( id ) {this.movableDragHandler.componentID = id;},
+    get componentID() {return this.movableDragHandler.componentID;},
+    set componentType( type ) {this.movableDragHandler.componentType = type;},
+    get componentType() {return this.movableDragHandler.componentType;}
+  } );
 
   /**
    * Wire that connects the body and probe.
@@ -252,29 +260,29 @@ define( function( require ) {
    */
   function ConcentrationMeterNode( meter, solution, dropper, solutionNode, stockSolutionNode, solventFluidNode, drainFluidNode, modelViewTransform ) {
 
-    var thisNode = this;
-    Node.call( thisNode );
+    var self = this;
+    Node.call( self );
 
     var bodyNode = new BodyNode( meter, modelViewTransform );
-    var probeNode = new ProbeNode( meter.probe, modelViewTransform, solutionNode, stockSolutionNode, solventFluidNode, drainFluidNode );
-    var wireNode = new WireNode( meter.body, meter.probe, bodyNode, probeNode );
+    this.probeNode = new ProbeNode( meter.probe, modelViewTransform, solutionNode, stockSolutionNode, solventFluidNode, drainFluidNode );
+    var wireNode = new WireNode( meter.body, meter.probe, bodyNode, this.probeNode );
 
     // rendering order
-    thisNode.addChild( wireNode );
-    thisNode.addChild( bodyNode );
-    thisNode.addChild( probeNode );
+    self.addChild( wireNode );
+    self.addChild( bodyNode );
+    self.addChild( this.probeNode );
 
     var updateValue = function() {
-      if ( probeNode.isInSolution() ) {
+      if ( self.probeNode.isInSolution() ) {
         meter.value.set( solution.concentration.get() );
       }
-      else if ( probeNode.isInSolvent() ) {
+      else if ( self.probeNode.isInSolvent() ) {
         meter.value.set( 0 );
       }
-      else if ( probeNode.isInDrainFluid() ) {
+      else if ( self.probeNode.isInDrainFluid() ) {
         meter.value.set( solution.concentration.get() );
       }
-      else if ( probeNode.isInStockSolution() ) {
+      else if ( self.probeNode.isInStockSolution() ) {
         meter.value.set( dropper.solute.get().stockSolutionConcentration );
       }
       else {

diff --git a/js/concentration/view/ConcentrationView.js b/js/concentration/view/ConcentrationView.js
@@ -49,16 +49,16 @@ define( function( require ) {
     var saturatedIndicator = new SaturatedIndicator( model.solution );
 
     // Shaker
-    var shakerNode = new ShakerNode( model.shaker, modelViewTransform );
+    this.shakerNode = new ShakerNode( model.shaker, modelViewTransform );
 
     // Shaker particles are drawn using canvas. Specify bounds of the canvas (smaller for speed).
     var shakerParticlesNode = new ParticlesNode( model.shakerParticles, modelViewTransform, new Bounds2(
       modelViewTransform.modelToViewX( model.beaker.getLeft() ), thisView.layoutBounds.minY,
       modelViewTransform.modelToViewX( model.beaker.getRight() ), modelViewTransform.modelToViewY( model.beaker.location.y ) ) );
 
     // Dropper
-    var dropperNode = new BLLDropperNode( model.dropper, model.solution.solvent, model.solution.solute, modelViewTransform );
-    var stockSolutionNode = new StockSolutionNode( model.solution.solvent, model.solute, model.dropper, model.beaker, dropperNode.TIP_WIDTH - 1, modelViewTransform );
+    this.dropperNode = new BLLDropperNode( model.dropper, model.solution.solvent, model.solution.solute, modelViewTransform );
+    var stockSolutionNode = new StockSolutionNode( model.solution.solvent, model.solute, model.dropper, model.beaker, this.dropperNode.TIP_WIDTH - 1, modelViewTransform );
 
     // faucets
     this.solventFaucetNode = new BLLFaucetNode( model.solventFaucet, modelViewTransform );
@@ -69,7 +69,7 @@ define( function( require ) {
     var drainFluidNode = new FaucetFluidNode( model.drainFaucet, model.solution, DRAIN_FLUID_HEIGHT, modelViewTransform );
 
     // Concentration meter
-    var concentrationMeterNode = new ConcentrationMeterNode( model.concentrationMeter, model.solution, model.dropper,
+    this.concentrationMeterNode = new ConcentrationMeterNode( model.concentrationMeter, model.solution, model.dropper,
       solutionNode, stockSolutionNode, solventFluidNode, drainFluidNode, modelViewTransform );
 
     // Solute controls
@@ -100,13 +100,13 @@ define( function( require ) {
     thisView.addChild( precipitateNode );
     thisView.addChild( saturatedIndicator );
     thisView.addChild( shakerParticlesNode );
-    thisView.addChild( shakerNode );
-    thisView.addChild( dropperNode );
+    thisView.addChild( this.shakerNode );
+    thisView.addChild( this.dropperNode );
     thisView.addChild( this.evaporationControl );
     thisView.addChild( removeSoluteButton );
     thisView.addChild( this.resetAllButton );
     thisView.addChild( this.soluteControls );
-    thisView.addChild( concentrationMeterNode );
+    thisView.addChild( this.concentrationMeterNode );
     thisView.addChild( soluteListParent ); // last, so that combo box list is on top
 
     // Layout for things that don't have a location in the model.
@@ -118,7 +118,7 @@ define( function( require ) {
       saturatedIndicator.bottom = beakerNode.bottom - 30;
       saturatedIndicator.visible = saturatedIndicatorVisible;
       // upper right
-      this.soluteControls.right = concentrationMeterNode.right + 100;
+      this.soluteControls.right = this.concentrationMeterNode.right + 100;
       this.soluteControls.top = 20;
       // left-aligned below beaker
       this.evaporationControl.left = modelViewTransform.modelToViewPosition( model.beaker.location ).x - modelViewTransform.modelToViewDeltaX( model.beaker.size.width / 2 );

diff --git a/js/concentration/view/ShakerNode.js b/js/concentration/view/ShakerNode.js
@@ -102,10 +102,11 @@ define( function( require ) {
 
     // interactivity
     thisNode.cursor = 'pointer';
-    thisNode.addInputListener( new MovableDragHandler( shaker.locationProperty, {
+    this.movableDragHandler = new MovableDragHandler( shaker.locationProperty, {
       dragBounds: shaker.dragBounds,
       modelViewTransform: modelViewTransform
-    }) );
+    } );
+    thisNode.addInputListener( this.movableDragHandler );
     thisNode.addInputListener( {
       enter: function() {
         upArrowNode.visible = downArrowNode.visible = !shakerWasMoved;
@@ -116,5 +117,12 @@ define( function( require ) {
     } );
   }
 
-  return inherit( Node, ShakerNode );
+  return inherit( Node, ShakerNode, {
+
+    // Pass through componentID and componentType to the movableDragHandler, where the arch messages are reported.
+    set componentID( id ) {this.movableDragHandler.componentID = id;},
+    get componentID() {return this.movableDragHandler.componentID;},
+    set componentType( type ) {this.movableDragHandler.componentType = type;},
+    get componentType() {return this.movableDragHandler.componentType;}
+  } );
 } );