diff --git a/js/concentration/view/BLLDropperNode.js b/js/concentration/view/BLLDropperNode.js index 3d77017f..fe7065fe 100644 --- 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 index db55f7ed..74d9bb00 100644 --- 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 index 344fab2b..cc711b09 100644 --- a/js/concentration/view/ConcentrationView.js +++ b/js/concentration/view/ConcentrationView.js @@ -49,7 +49,7 @@ 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( @@ -57,8 +57,8 @@ define( function( require ) { 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 index 9835b900..24320cb6 100644 --- 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;} + } ); } );