' ).append( this.$svg.clone() ).html();\r\n \r\n // also note:\r\n // var doc = document.implementation.createHTMLDocument(\"\");\r\n // doc.write(html);\r\n \r\n // // You must manually set the xmlns if you intend to immediately serialize the HTML\r\n // // document to a string as opposed to appending it to a in the DOM\r\n // doc.documentElement.setAttribute(\"xmlns\", doc.documentElement.namespaceURI);\r\n \r\n // // Get well-formed markup\r\n // html = (new XMLSerializer).serializeToString(doc);\r\n },\r\n \r\n // TODO: note for DOM we can do https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas\r\n renderToCanvas: function( canvas, context, delayCounts ) {\r\n // temporarily put the full transform on the containing group so the rendering is correct (CSS transforms can take this away)\r\n this.applyTransform( this.baseTrail.getTransform(), this.g );\r\n \r\n if ( window.canvg ) {\r\n delayCounts.increment();\r\n \r\n // TODO: if we are using CSS3 transforms, run that here\r\n canvg( canvas, this.getSVGString(), {\r\n ignoreMouse: true,\r\n ignoreAnimation: true,\r\n ignoreDimensions: true,\r\n ignoreClear: true,\r\n renderCallback: function() {\r\n delayCounts.decrement();\r\n }\r\n } );\r\n } else {\r\n // will not work on Internet Explorer 9/10\r\n \r\n // TODO: very much not convinced that this is better than setting src of image\r\n var DOMURL = window.URL || window.webkitURL || window;\r\n var img = new Image();\r\n var raw = this.getSVGString();\r\n console.log( raw );\r\n var svg = new Blob( [ raw ] , { type: \"image/svg+xml;charset=utf-8\" } );\r\n var url = DOMURL.createObjectURL( svg );\r\n delayCounts.increment();\r\n img.onload = function() {\r\n context.drawImage( img, 0, 0 );\r\n // TODO: this loading is delayed!!! ... figure out a solution to potentially delay?\r\n DOMURL.revokeObjectURL( url );\r\n delayCounts.decrement();\r\n };\r\n img.src = url;\r\n \r\n throw new Error( 'this implementation hits Chrome bugs, won\\'t work on IE9/10, etc. deprecated' );\r\n }\r\n \r\n // revert the transform damage that we did to our base group\r\n this.updateBaseTransform();\r\n },\r\n \r\n getName: function() {\r\n return 'svg';\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Events from Instances\r\n *----------------------------------------------------------------------------*/\r\n \r\n notifyVisibilityChange: function( instance ) {\r\n sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyVisibilityChange: ' + instance.trail.toString() );\r\n var group = this.getGroupFromInstance( instance );\r\n if ( group ) {\r\n this.updateGroupVisibility( instance.getNode(), group );\r\n } else if ( this.baseNode !== this.scene ) {\r\n // if we are using a CSS transform (basically)\r\n this.updateGroupVisibility( this.baseNode, this.getGroupFromInstance( this.baseTrail.getInstance() ) );\r\n }\r\n },\r\n \r\n notifyOpacityChange: function( instance ) {\r\n sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyOpacityChange: ' + instance.trail.toString() );\r\n var group = this.getGroupFromInstance( instance );\r\n if ( group ) {\r\n this.updateGroupOpacity( instance.getNode(), group );\r\n } else if ( this.baseNode !== this.scene ) {\r\n // if we are using a CSS transform (basically)\r\n this.updateGroupOpacity( this.baseNode, this.getGroupFromInstance( this.baseTrail.getInstance() ) );\r\n }\r\n },\r\n \r\n // only a painted trail under this layer\r\n notifyBeforeSelfChange: function( instance ) {\r\n // sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyBeforeSelfChange: ' + instance.trail.toString() );\r\n // no-op, we don't need paint changes\r\n },\r\n \r\n notifyBeforeSubtreeChange: function( instance ) {\r\n // sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyBeforeSubtreeChange: ' + instance.trail.toString() );\r\n // no-op, we don't need paint changes\r\n },\r\n \r\n // only a painted trail under this layer\r\n notifyDirtySelfPaint: function( instance ) {\r\n sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyDirtySelfPaint: ' + instance.trail.toString() );\r\n var fragment = this.getFragmentFromInstance( instance );\r\n \r\n if ( fragment ) {\r\n var node = instance.getNode();\r\n \r\n if ( node.updateSVGFragment ) {\r\n // TODO: performance: don't re-do all of the fragment here! intelligent updating?\r\n node.updateSVGFragment( fragment );\r\n }\r\n if ( node.updateSVGDefs ) {\r\n // TODO: performance: don't re-do all of the defs here! intelligent updating?\r\n node.updateSVGDefs( this.svg, this.defs );\r\n }\r\n }\r\n },\r\n \r\n notifyDirtySubtreePaint: function( instance ) {\r\n // TODO: performance: this caused a 50% increase for the fast-svg transform steps, what were we missing?\r\n if ( instance.layer === this ) {\r\n this.notifyDirtySelfPaint( instance );\r\n }\r\n },\r\n \r\n notifyTransformChange: function( instance ) {\r\n sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyTransformChange: ' + instance.trail.toString() );\r\n var node = instance.node;\r\n var trail = instance.trail;\r\n \r\n if ( trail.lastNode() === this.baseNode ) {\r\n // our trail points to the base node. handle this case as special\r\n this.markBaseTransformDirty();\r\n } else if ( _.contains( trail.nodes, this.baseNode ) ) { // TODO: performance: this linear scan looks slower than needed\r\n var group = this.idGroupMap[trail.getUniqueId()];\r\n \r\n // apply the transform to the group\r\n this.applyTransform( node.getTransform(), group );\r\n } else {\r\n // ancestor node changed a transform. rebuild the base transform\r\n this.markBaseTransformDirty();\r\n }\r\n },\r\n \r\n // only a painted trail under this layer (for now)\r\n notifyBoundsAccuracyChange: function( instance ) {\r\n // sceneryLayerLog && sceneryLayerLog( 'SVGLayer #' + this.id + ' notifyBoundsAccuracyChange: ' + instance.trail.toString() );\r\n // no-op, we don't care about bounds\r\n }\r\n \r\n } );\r\n \r\n return SVGLayer;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * An enumeration of different back-end technologies used for rendering. It also essentially\r\n * represents the API that nodes need to implement to be used with this specified back-end.\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/layers/Renderer',['require','SCENERY/scenery','SCENERY/layers/LayerType','SCENERY/layers/CanvasLayer','SCENERY/layers/DOMLayer','SCENERY/layers/SVGLayer'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n require( 'SCENERY/layers/LayerType' );\r\n require( 'SCENERY/layers/CanvasLayer' );\r\n require( 'SCENERY/layers/DOMLayer' );\r\n require( 'SCENERY/layers/SVGLayer' );\r\n \r\n // cached defaults\r\n var defaults = {};\r\n \r\n scenery.Renderer = function Renderer( layerConstructor, name, defaultOptions ) {\r\n this.layerConstructor = layerConstructor;\r\n this.name = name;\r\n this.defaultOptions = defaultOptions;\r\n \r\n this.defaultLayerType = this.createLayerType( {} ); // default options are handled in createLayerType\r\n };\r\n var Renderer = scenery.Renderer;\r\n \r\n Renderer.prototype = {\r\n constructor: Renderer,\r\n \r\n createLayerType: function( rendererOptions ) {\r\n return new scenery.LayerType( this.layerConstructor, this.name, this, _.extend( {}, this.defaultOptions, rendererOptions ) );\r\n }\r\n };\r\n \r\n Renderer.Canvas = new Renderer( scenery.CanvasLayer, 'canvas', {} );\r\n Renderer.DOM = new Renderer( scenery.DOMLayer, 'dom', {} );\r\n Renderer.SVG = new Renderer( scenery.SVGLayer, 'svg', {} );\r\n \r\n // add shortcuts for the default layer types\r\n scenery.CanvasDefaultLayerType = Renderer.Canvas.defaultLayerType;\r\n scenery.DOMDefaultLayerType = Renderer.DOM.defaultLayerType;\r\n scenery.SVGDefaultLayerType = Renderer.SVG.defaultLayerType;\r\n \r\n // and shortcuts so we can index in with shorthands like 'svg', 'dom', etc.\r\n Renderer.canvas = Renderer.Canvas;\r\n Renderer.dom = Renderer.DOM;\r\n Renderer.svg = Renderer.SVG;\r\n Renderer.webgl = Renderer.WebGL;\r\n \r\n return Renderer;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Images\r\n *\r\n * TODO: setImage / getImage and the whole toolchain that uses that\r\n * TODO: allow multiple DOM instances (create new HTMLImageElement elements)\r\n * TODO: SVG support\r\n * TODO: support rendering a Canvas to DOM (single instance)\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/nodes/Image',['require','PHET_CORE/inherit','DOT/Bounds2','SCENERY/scenery','SCENERY/nodes/Node','SCENERY/layers/Renderer','SCENERY/util/Util','SCENERY/util/Util'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var Bounds2 = require( 'DOT/Bounds2' );\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Node = require( 'SCENERY/nodes/Node' ); // Image inherits from Node\r\n var Renderer = require( 'SCENERY/layers/Renderer' ); // we need to specify the Renderer in the prototype\r\n var objectCreate = require( 'SCENERY/util/Util' ).objectCreate;\r\n require( 'SCENERY/util/Util' );\r\n \r\n /*\r\n * Canvas renderer supports the following as 'image':\r\n * URL (string) // works, but does NOT support bounds-based parameter object keys like 'left', 'centerX', etc.\r\n * // also necessary to force updateScene() after it has loaded\r\n * HTMLImageElement // works\r\n * HTMLVideoElement // not tested\r\n * HTMLCanvasElement // works, and forces the canvas renderer\r\n * CanvasRenderingContext2D // not tested, but bad luck in past\r\n * ImageBitmap // good luck creating this. currently API for window.createImageBitmap not implemented\r\n * SVG renderer supports the following as 'image':\r\n * URL (string)\r\n * HTMLImageElement\r\n */\r\n scenery.Image = function Image( image, options ) {\r\n sceneryAssert && sceneryAssert( image, \"image should be available\" );\r\n \r\n // allow not passing an options object\r\n options = options || {};\r\n \r\n // rely on the setImage call from the super constructor to do the setup\r\n if ( image ) {\r\n options.image = image;\r\n }\r\n \r\n var self = this;\r\n // allows us to invalidate our bounds whenever an image is loaded\r\n this.loadListener = function( event ) {\r\n self.invalidateImage();\r\n \r\n // don't leak memory!\r\n self._image.removeEventListener( 'load', self.loadListener );\r\n };\r\n \r\n Node.call( this, options );\r\n };\r\n var Image = scenery.Image;\r\n \r\n inherit( Node, Image, {\r\n allowsMultipleDOMInstances: false, // TODO: support multiple instances\r\n \r\n invalidateImage: function() {\r\n this.invalidateSelf( new Bounds2( 0, 0, this.getImageWidth(), this.getImageHeight() ) );\r\n },\r\n \r\n getImage: function() {\r\n return this._image;\r\n },\r\n \r\n setImage: function( image ) {\r\n var self = this;\r\n \r\n if ( this._image !== image && ( typeof image !== 'string' || !this._image || image !== this._image.src ) ) {\r\n // don't leak memory by referencing old images\r\n if ( this._image ) {\r\n this._image.removeEventListener( 'load', this.loadListener );\r\n }\r\n \r\n if ( typeof image === 'string' ) {\r\n // create an image with the assumed URL\r\n var src = image;\r\n image = document.createElement( 'img' );\r\n image.addEventListener( 'load', this.loadListener );\r\n image.src = src;\r\n } else if ( image instanceof HTMLImageElement ) {\r\n // only add a listener if we probably haven't loaded yet\r\n if ( !image.width || !image.height ) {\r\n image.addEventListener( 'load', this.loadListener );\r\n }\r\n }\r\n \r\n // swap supported renderers if necessary TODO: share this code dealing with compatible renderer changes\r\n if ( image instanceof HTMLCanvasElement ) {\r\n if ( !this.hasOwnProperty( '_supportedRenderers' ) ) {\r\n this._supportedRenderers = [ Renderer.Canvas ];\r\n this.markLayerRefreshNeeded();\r\n }\r\n } else {\r\n if ( this.hasOwnProperty( '_supportedRenderers' ) ) {\r\n delete this._supportedRenderers; // will leave prototype intact\r\n this.markLayerRefreshNeeded();\r\n }\r\n }\r\n \r\n this._image = image;\r\n this.invalidateImage(); // yes, if we aren't loaded yet this will give us 0x0 bounds\r\n }\r\n return this;\r\n },\r\n \r\n getImageWidth: function() {\r\n return this._image.width;\r\n },\r\n \r\n getImageHeight: function() {\r\n return this._image.height;\r\n },\r\n \r\n getImageURL: function() {\r\n return this._image.src;\r\n },\r\n \r\n // signal that we are actually rendering something\r\n isPainted: function() {\r\n return true;\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Canvas support\r\n *----------------------------------------------------------------------------*/\r\n \r\n // TODO: add SVG / DOM support\r\n paintCanvas: function( wrapper ) {\r\n wrapper.context.drawImage( this._image, 0, 0 );\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * WebGL support\r\n *----------------------------------------------------------------------------*/\r\n \r\n paintWebGL: function( state ) {\r\n throw new Error( 'paintWebGL:nimplemented' );\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * SVG support\r\n *----------------------------------------------------------------------------*/\r\n \r\n createSVGFragment: function( svg, defs, group ) {\r\n var element = document.createElementNS( 'http://www.w3.org/2000/svg', 'image' );\r\n element.setAttribute( 'x', 0 );\r\n element.setAttribute( 'y', 0 );\r\n return element;\r\n },\r\n \r\n updateSVGFragment: function( element ) {\r\n // like \r\n var xlinkns = 'http://www.w3.org/1999/xlink';\r\n \r\n element.setAttribute( 'width', this.getImageWidth() + 'px' );\r\n element.setAttribute( 'height', this.getImageHeight() + 'px' );\r\n element.setAttributeNS( xlinkns, 'xlink:href', this.getImageURL() );\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * DOM support\r\n *----------------------------------------------------------------------------*/\r\n \r\n getDOMElement: function() {\r\n this._image.style.display = 'block';\r\n this._image.style.position = 'absolute';\r\n this._image.style.left = '0';\r\n this._image.style.top = '0';\r\n return this._image;\r\n },\r\n \r\n updateDOMElement: function( image ) {\r\n if ( image.src !== this._image.src ) {\r\n image.src = this._image.src;\r\n }\r\n },\r\n \r\n updateCSSTransform: function( transform, element ) {\r\n // TODO: extract this out, it's completely shared!\r\n scenery.Util.applyCSSTransform( transform.getMatrix(), element );\r\n },\r\n \r\n set image( value ) { this.setImage( value ); },\r\n get image() { return this.getImage(); },\r\n \r\n getBasicConstructor: function( propLines ) {\r\n return 'new scenery.Image( \\'' + ( this._image.src ? this._image.src.replace( /'/g, '\\\\\\'' ) : 'other' ) + '\\', {' + propLines + '} )';\r\n }\r\n } );\r\n \r\n Image.prototype._mutatorKeys = [ 'image' ].concat( Node.prototype._mutatorKeys );\r\n \r\n Image.prototype._supportedRenderers = [ Renderer.Canvas, Renderer.SVG, Renderer.DOM ];\r\n \r\n // utility for others\r\n Image.createSVGImage = function( url, width, height ) {\r\n var xlinkns = 'http://www.w3.org/1999/xlink';\r\n var svgns = 'http://www.w3.org/2000/svg';\r\n \r\n var element = document.createElementNS( svgns, 'image' );\r\n element.setAttribute( 'x', 0 );\r\n element.setAttribute( 'y', 0 );\r\n element.setAttribute( 'width', width + 'px' );\r\n element.setAttribute( 'height', height + 'px' );\r\n element.setAttributeNS( xlinkns, 'xlink:href', url );\r\n \r\n return element;\r\n };\r\n \r\n return Image;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Mix-in for nodes that support a standard fill.\r\n *\r\n * TODO: pattern and gradient handling\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/nodes/Fillable',['require','SCENERY/scenery'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n scenery.Fillable = function Fillable( type ) {\r\n var proto = type.prototype;\r\n \r\n // this should be called in the constructor to initialize\r\n proto.initializeFillable = function() {\r\n this._fill = null;\r\n \r\n var that = this;\r\n this._fillListener = function() {\r\n that.invalidatePaint(); // TODO: move this to invalidateFill?\r\n that.invalidateFill();\r\n };\r\n };\r\n \r\n proto.hasFill = function() {\r\n return this._fill !== null;\r\n };\r\n \r\n proto.getFill = function() {\r\n return this._fill;\r\n };\r\n \r\n proto.setFill = function( fill ) {\r\n if ( this.getFill() !== fill ) {\r\n var hasInstances = this._instances.length > 0;\r\n \r\n if ( hasInstances && this._fill && this._fill.removeChangeListener ) {\r\n this._fill.removeChangeListener( this._fillListener );\r\n }\r\n \r\n this._fill = fill;\r\n \r\n if ( hasInstances && this._fill && this._fill.addChangeListener ) {\r\n this._fill.addChangeListener( this._fillListener );\r\n }\r\n \r\n this.invalidatePaint();\r\n \r\n this.invalidateFill();\r\n }\r\n return this;\r\n };\r\n \r\n var superFirstInstanceAdded = proto.firstInstanceAdded;\r\n proto.firstInstanceAdded = function() {\r\n if ( this._fill && this._fill.addChangeListener ) {\r\n this._fill.addChangeListener( this._fillListener );\r\n }\r\n \r\n if ( superFirstInstanceAdded ) {\r\n superFirstInstanceAdded.call( this );\r\n }\r\n };\r\n \r\n var superLastInstanceRemoved = proto.lastInstanceRemoved;\r\n proto.lastInstanceRemoved = function() {\r\n if ( this._fill && this._fill.removeChangeListener ) {\r\n this._fill.removeChangeListener( this._fillListener );\r\n }\r\n \r\n if ( superLastInstanceRemoved ) {\r\n superLastInstanceRemoved.call( this );\r\n }\r\n };\r\n \r\n proto.beforeCanvasFill = function( wrapper ) {\r\n wrapper.setFillStyle( this._fill );\r\n if ( this._fill.transformMatrix ) {\r\n wrapper.context.save();\r\n this._fill.transformMatrix.canvasAppendTransform( wrapper.context );\r\n }\r\n };\r\n \r\n proto.afterCanvasFill = function( wrapper ) {\r\n if ( this._fill.transformMatrix ) {\r\n wrapper.context.restore();\r\n }\r\n };\r\n \r\n proto.getSVGFillStyle = function() {\r\n var style = 'fill: ';\r\n if ( !this._fill ) {\r\n // no fill\r\n style += 'none;';\r\n } else if ( this._fill.toCSS ) {\r\n // Color object fill\r\n style += this._fill.toCSS() + ';';\r\n } else if ( this._fill.getSVGDefinition ) {\r\n // reference the SVG definition with a URL\r\n style += 'url(#fill' + this.getId() + ');';\r\n } else {\r\n // plain CSS color\r\n style += this._fill + ';';\r\n }\r\n return style;\r\n };\r\n \r\n proto.isFillDOMCompatible = function() {\r\n // make sure we're not a pattern or gradient\r\n return !this._fill || !this._fill.getSVGDefinition;\r\n };\r\n \r\n proto.getCSSFill = function() {\r\n sceneryAssert && sceneryAssert( this.isFillDOMCompatible() );\r\n \r\n // if it's a Color object, get the corresponding CSS\r\n // 'transparent' will make us invisible if the fill is null\r\n return this._fill ? ( this._fill.toCSS ? this._fill.toCSS() : this._fill ) : 'transparent';\r\n };\r\n \r\n proto.addSVGFillDef = function( svg, defs ) {\r\n var fill = this.getFill();\r\n var fillId = 'fill' + this.getId();\r\n \r\n // add new definitions if necessary\r\n if ( fill && fill.getSVGDefinition ) {\r\n defs.appendChild( fill.getSVGDefinition( fillId ) );\r\n }\r\n };\r\n \r\n proto.removeSVGFillDef = function( svg, defs ) {\r\n var fillId = 'fill' + this.getId();\r\n \r\n // wipe away any old definition\r\n var oldFillDef = svg.getElementById( fillId );\r\n if ( oldFillDef ) {\r\n defs.removeChild( oldFillDef );\r\n }\r\n };\r\n \r\n proto.appendFillablePropString = function( spaces, result ) {\r\n if ( this._fill ) {\r\n if ( result ) {\r\n result += ',\\n';\r\n }\r\n if ( typeof this._fill === 'string' ) {\r\n result += spaces + 'fill: \\'' + this._fill + '\\'';\r\n } else {\r\n result += spaces + 'fill: ' + this._fill.toString();\r\n }\r\n }\r\n \r\n return result;\r\n };\r\n \r\n // on mutation, set the fill parameter first\r\n proto._mutatorKeys = [ 'fill' ].concat( proto._mutatorKeys );\r\n \r\n Object.defineProperty( proto, 'fill', { set: proto.setFill, get: proto.getFill } );\r\n \r\n if ( !proto.invalidateFill ) {\r\n proto.invalidateFill = function() {\r\n // override if fill handling is necessary (TODO: mixins!)\r\n };\r\n }\r\n };\r\n var Fillable = scenery.Fillable;\r\n \r\n return Fillable;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Mix-in for nodes that support a standard stroke.\r\n *\r\n * TODO: miterLimit handling\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/nodes/Strokable',['require','SCENERY/scenery','KITE/util/LineStyles'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n var LineStyles = require( 'KITE/util/LineStyles' );\r\n \r\n scenery.Strokable = function Strokable( type ) {\r\n var proto = type.prototype;\r\n \r\n // this should be called in the constructor to initialize\r\n proto.initializeStrokable = function() {\r\n this._stroke = null;\r\n this._lineDrawingStyles = new LineStyles();\r\n \r\n var that = this;\r\n this._strokeListener = function() {\r\n that.invalidatePaint(); // TODO: move this to invalidateStroke?\r\n that.invalidateStroke();\r\n };\r\n };\r\n \r\n proto.hasStroke = function() {\r\n return this._stroke !== null;\r\n };\r\n \r\n // TODO: setting these properties looks like a good candidate for refactoring to lessen file size\r\n proto.getLineWidth = function() {\r\n return this._lineDrawingStyles.lineWidth;\r\n };\r\n \r\n proto.setLineWidth = function( lineWidth ) {\r\n if ( this.getLineWidth() !== lineWidth ) {\r\n this.markOldSelfPaint(); // since the previous line width may have been wider\r\n \r\n this._lineDrawingStyles.lineWidth = lineWidth;\r\n \r\n this.invalidateStroke();\r\n }\r\n return this;\r\n };\r\n \r\n proto.getLineCap = function() {\r\n return this._lineDrawingStyles.lineCap;\r\n };\r\n \r\n proto.setLineCap = function( lineCap ) {\r\n if ( this._lineDrawingStyles.lineCap !== lineCap ) {\r\n this.markOldSelfPaint();\r\n \r\n this._lineDrawingStyles.lineCap = lineCap;\r\n \r\n this.invalidateStroke();\r\n }\r\n return this;\r\n };\r\n \r\n proto.getLineJoin = function() {\r\n return this._lineDrawingStyles.lineJoin;\r\n };\r\n \r\n proto.setLineJoin = function( lineJoin ) {\r\n if ( this._lineDrawingStyles.lineJoin !== lineJoin ) {\r\n this.markOldSelfPaint();\r\n \r\n this._lineDrawingStyles.lineJoin = lineJoin;\r\n \r\n this.invalidateStroke();\r\n }\r\n return this;\r\n };\r\n \r\n proto.getLineDash = function() {\r\n return this._lineDrawingStyles.lineDash;\r\n };\r\n \r\n proto.setLineDash = function( lineDash ) {\r\n if ( this._lineDrawingStyles.lineDash !== lineDash ) {\r\n this.markOldSelfPaint();\r\n \r\n this._lineDrawingStyles.lineDash = lineDash || [];\r\n \r\n this.invalidateStroke();\r\n }\r\n return this;\r\n };\r\n \r\n proto.getLineDashOffset = function() {\r\n return this._lineDrawingStyles.lineDashOffset;\r\n };\r\n \r\n proto.setLineDashOffset = function( lineDashOffset ) {\r\n if ( this._lineDrawingStyles.lineDashOffset !== lineDashOffset ) {\r\n this.markOldSelfPaint();\r\n \r\n this._lineDrawingStyles.lineDashOffset = lineDashOffset;\r\n \r\n this.invalidateStroke();\r\n }\r\n return this;\r\n };\r\n \r\n proto.setLineStyles = function( lineStyles ) {\r\n // TODO: since we have been using lineStyles as mutable for now, lack of change check is good here?\r\n this.markOldSelfPaint();\r\n \r\n this._lineDrawingStyles = lineStyles;\r\n this.invalidateStroke();\r\n return this;\r\n };\r\n \r\n proto.getLineStyles = function() {\r\n return this._lineDrawingStyles;\r\n };\r\n \r\n proto.getStroke = function() {\r\n return this._stroke;\r\n };\r\n \r\n proto.setStroke = function( stroke ) {\r\n if ( this.getStroke() !== stroke ) {\r\n // since this can actually change the bounds, we need to handle a few things differently than the fill\r\n this.markOldSelfPaint();\r\n \r\n var hasInstances = this._instances.length > 0;\r\n \r\n if ( hasInstances && this._stroke && this._stroke.removeChangeListener ) {\r\n this._stroke.removeChangeListener( this._strokeListener );\r\n }\r\n \r\n this._stroke = stroke;\r\n \r\n if ( hasInstances && this._stroke && this._stroke.addChangeListener ) {\r\n this._stroke.addChangeListener( this._strokeListener );\r\n }\r\n \r\n this.invalidateStroke();\r\n }\r\n return this;\r\n };\r\n \r\n var superFirstInstanceAdded = proto.firstInstanceAdded;\r\n proto.firstInstanceAdded = function() {\r\n if ( this._stroke && this._stroke.addChangeListener ) {\r\n this._stroke.addChangeListener( this._strokeListener );\r\n }\r\n \r\n if ( superFirstInstanceAdded ) {\r\n superFirstInstanceAdded.call( this );\r\n }\r\n };\r\n \r\n var superLastInstanceRemoved = proto.lastInstanceRemoved;\r\n proto.lastInstanceRemoved = function() {\r\n if ( this._stroke && this._stroke.removeChangeListener ) {\r\n this._stroke.removeChangeListener( this._strokeListener );\r\n }\r\n \r\n if ( superLastInstanceRemoved ) {\r\n superLastInstanceRemoved.call( this );\r\n }\r\n };\r\n \r\n proto.beforeCanvasStroke = function( wrapper ) {\r\n // TODO: is there a better way of not calling so many things on each stroke?\r\n wrapper.setStrokeStyle( this._stroke );\r\n wrapper.setLineWidth( this.getLineWidth() );\r\n wrapper.setLineCap( this.getLineCap() );\r\n wrapper.setLineJoin( this.getLineJoin() );\r\n wrapper.setLineDash( this.getLineDash() );\r\n wrapper.setLineDashOffset( this.getLineDashOffset() );\r\n if ( this._stroke.transformMatrix ) {\r\n wrapper.context.save();\r\n this._stroke.transformMatrix.canvasAppendTransform( wrapper.context );\r\n }\r\n };\r\n \r\n proto.afterCanvasStroke = function( wrapper ) {\r\n if ( this._stroke.transformMatrix ) {\r\n wrapper.context.restore();\r\n }\r\n };\r\n \r\n proto.getSVGStrokeStyle = function() {\r\n if ( !this._stroke ) {\r\n // no stroke\r\n return 'stroke: none;';\r\n }\r\n \r\n var style = 'stroke: ';\r\n if ( this._stroke.toCSS ) {\r\n // Color object stroke\r\n style += this._stroke.toCSS() + ';';\r\n } else if ( this._stroke.getSVGDefinition ) {\r\n // reference the SVG definition with a URL\r\n style += 'url(#stroke' + this.getId() + ');';\r\n } else {\r\n // plain CSS color\r\n style += this._stroke + ';';\r\n }\r\n \r\n // TODO: don't include unnecessary directives? - is it worth any branching cost?\r\n style += 'stroke-width: ' + this.getLineWidth() + ';';\r\n style += 'stroke-linecap: ' + this.getLineCap() + ';';\r\n style += 'stroke-linejoin: ' + this.getLineJoin() + ';';\r\n if ( this.getLineDash().length ) {\r\n style += 'stroke-dasharray: ' + this.getLineDash().join( ',' ) + ';';\r\n style += 'stroke-dashoffset: ' + this.getLineDashOffset() + ';';\r\n }\r\n \r\n return style;\r\n };\r\n \r\n proto.addSVGStrokeDef = function( svg, defs ) {\r\n var stroke = this.getStroke();\r\n var strokeId = 'stroke' + this.getId();\r\n \r\n // add new definitions if necessary\r\n if ( stroke && stroke.getSVGDefinition ) {\r\n defs.appendChild( stroke.getSVGDefinition( strokeId ) );\r\n }\r\n };\r\n \r\n proto.removeSVGStrokeDef = function( svg, defs ) {\r\n var strokeId = 'stroke' + this.getId();\r\n \r\n // wipe away any old definition\r\n var oldStrokeDef = svg.getElementById( strokeId );\r\n if ( oldStrokeDef ) {\r\n defs.removeChild( oldStrokeDef );\r\n }\r\n };\r\n \r\n proto.appendStrokablePropString = function( spaces, result ) {\r\n var self = this;\r\n \r\n function addProp( key, value, nowrap ) {\r\n if ( result ) {\r\n result += ',\\n';\r\n }\r\n if ( !nowrap && typeof value === 'string' ) {\r\n result += spaces + key + ': \\'' + value + '\\'';\r\n } else {\r\n result += spaces + key + ': ' + value;\r\n }\r\n }\r\n \r\n if ( this._stroke ) {\r\n var defaultStyles = new LineStyles();\r\n if ( typeof this._stroke === 'string' ) {\r\n addProp( 'stroke', this._stroke );\r\n } else {\r\n addProp( 'stroke', this._stroke.toString(), true );\r\n }\r\n \r\n _.each( [ 'lineWidth', 'lineCap', 'lineJoin', 'lineDashOffset' ], function( prop ) {\r\n if ( self[prop] !== defaultStyles[prop] ) {\r\n addProp( prop, self[prop] );\r\n }\r\n } );\r\n \r\n if ( this.lineDash.length ) {\r\n addProp( 'lineDash', JSON.stringify( this.lineDash ), true );\r\n }\r\n }\r\n \r\n return result;\r\n };\r\n \r\n // on mutation, set the stroke parameters first since they may affect the bounds (and thus later operations)\r\n proto._mutatorKeys = [ 'stroke', 'lineWidth', 'lineCap', 'lineJoin', 'lineDash', 'lineDashOffset' ].concat( proto._mutatorKeys );\r\n \r\n // TODO: miterLimit support?\r\n Object.defineProperty( proto, 'stroke', { set: proto.setStroke, get: proto.getStroke } );\r\n Object.defineProperty( proto, 'lineWidth', { set: proto.setLineWidth, get: proto.getLineWidth } );\r\n Object.defineProperty( proto, 'lineCap', { set: proto.setLineCap, get: proto.getLineCap } );\r\n Object.defineProperty( proto, 'lineJoin', { set: proto.setLineJoin, get: proto.getLineJoin } );\r\n Object.defineProperty( proto, 'lineDash', { set: proto.setLineDash, get: proto.getLineDash } );\r\n Object.defineProperty( proto, 'lineDashOffset', { set: proto.setLineDashOffset, get: proto.getLineDashOffset } );\r\n \r\n if ( !proto.invalidateStroke ) {\r\n proto.invalidateStroke = function() {\r\n // override if stroke handling is necessary (TODO: mixins!)\r\n };\r\n }\r\n };\r\n var Strokable = scenery.Strokable;\r\n \r\n return Strokable;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * A Path draws a Shape with a specific type of fill and stroke.\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/nodes/Path',['require','PHET_CORE/inherit','KITE/Shape','SCENERY/scenery','SCENERY/nodes/Node','SCENERY/layers/Renderer','SCENERY/nodes/Fillable','SCENERY/nodes/Strokable','SCENERY/util/Util'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var Shape = require( 'KITE/Shape' );\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n var Node = require( 'SCENERY/nodes/Node' );\r\n var Renderer = require( 'SCENERY/layers/Renderer' );\r\n var Fillable = require( 'SCENERY/nodes/Fillable' );\r\n var Strokable = require( 'SCENERY/nodes/Strokable' );\r\n var objectCreate = require( 'SCENERY/util/Util' ).objectCreate;\r\n \r\n scenery.Path = function Path( shape, options ) {\r\n // TODO: consider directly passing in a shape object (or at least handling that case)\r\n this._shape = null;\r\n\r\n // ensure we have a parameter object\r\n options = options || {};\r\n \r\n this.initializeFillable();\r\n this.initializeStrokable();\r\n\r\n Node.call( this );\r\n this.setShape( shape );\r\n this.mutate( options );\r\n };\r\n var Path = scenery.Path;\r\n \r\n inherit( Node, Path, {\r\n // sets the shape drawn, or null to remove the shape\r\n setShape: function( shape ) {\r\n if ( this._shape !== shape ) {\r\n if ( typeof shape === 'string' ) {\r\n // be content with setShape always invalidating the shape?\r\n shape = new Shape( shape );\r\n }\r\n this._shape = shape;\r\n this.invalidateShape();\r\n }\r\n return this;\r\n },\r\n \r\n getShape: function() {\r\n return this._shape;\r\n },\r\n \r\n invalidateShape: function() {\r\n this.markOldSelfPaint();\r\n \r\n if ( this.hasShape() ) {\r\n this.invalidateSelf( this.computeShapeBounds() );\r\n this.invalidatePaint();\r\n }\r\n },\r\n \r\n // separated out, so that we can override this with a faster version in Rectangle. includes the Stroke, if any\r\n computeShapeBounds: function() {\r\n return this._stroke ? this._shape.computeBounds( this._lineDrawingStyles ) : this._shape.bounds;\r\n },\r\n \r\n // hook stroke mixin changes to invalidation\r\n invalidateStroke: function() {\r\n this.invalidateShape();\r\n },\r\n \r\n hasShape: function() {\r\n return this._shape;\r\n },\r\n \r\n paintCanvas: function( wrapper ) {\r\n var context = wrapper.context;\r\n \r\n if ( this.hasShape() ) {\r\n // TODO: fill/stroke delay optimizations?\r\n context.beginPath();\r\n this._shape.writeToContext( context );\r\n\r\n if ( this._fill ) {\r\n this.beforeCanvasFill( wrapper ); // defined in Fillable\r\n context.fill();\r\n this.afterCanvasFill( wrapper ); // defined in Fillable\r\n }\r\n if ( this._stroke ) {\r\n this.beforeCanvasStroke( wrapper ); // defined in Strokable\r\n context.stroke();\r\n this.afterCanvasStroke( wrapper ); // defined in Strokable\r\n }\r\n }\r\n },\r\n \r\n paintWebGL: function( state ) {\r\n throw new Error( 'Path.prototype.paintWebGL unimplemented' );\r\n },\r\n \r\n // svg element, the block, and the associated group for this node's transform\r\n createSVGFragment: function( svg, defs, group ) {\r\n return document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );\r\n },\r\n \r\n updateSVGFragment: function( path ) {\r\n var svgPath = this.hasShape() ? this._shape.getSVGPath() : \"\";\r\n \r\n // temporary workaround for https://bugs.webkit.org/show_bug.cgi?id=78980\r\n // and http://code.google.com/p/chromium/issues/detail?id=231626 where even removing\r\n // the attribute can cause this bug\r\n if ( !svgPath ) { svgPath = 'M0 0'; }\r\n \r\n if ( svgPath ) {\r\n // only set the SVG path if it's not the empty string\r\n path.setAttribute( 'd', svgPath );\r\n } else if ( path.hasAttribute( 'd' ) ) {\r\n path.removeAttribute( 'd' );\r\n }\r\n \r\n path.setAttribute( 'style', this.getSVGFillStyle() + this.getSVGStrokeStyle() );\r\n },\r\n \r\n // support patterns, gradients, and anything else we need to put in the block\r\n updateSVGDefs: function( svg, defs ) {\r\n // remove old definitions if they exist\r\n this.removeSVGDefs( svg, defs );\r\n \r\n // add new ones if applicable\r\n this.addSVGFillDef( svg, defs );\r\n this.addSVGStrokeDef( svg, defs );\r\n },\r\n \r\n // cleans up references created with udpateSVGDefs()\r\n removeSVGDefs: function( svg, defs ) {\r\n this.removeSVGFillDef( svg, defs );\r\n this.removeSVGStrokeDef( svg, defs );\r\n },\r\n \r\n isPainted: function() {\r\n return true;\r\n },\r\n \r\n // override for computation of whether a point is inside the self content\r\n // point is considered to be in the local coordinate frame\r\n containsPointSelf: function( point ) {\r\n if ( !this.hasShape() ) {\r\n return false;\r\n }\r\n \r\n var result = this._shape.containsPoint( point );\r\n \r\n // also include the stroked region in the hit area if applicable\r\n if ( !result && this._includeStrokeInHitRegion && this.hasStroke() ) {\r\n result = this._shape.getStrokedShape( this._lineDrawingStyles ).containsPoint( point );\r\n }\r\n return result;\r\n },\r\n \r\n // whether this node's self intersects the specified bounds, in the local coordinate frame\r\n intersectsBoundsSelf: function( bounds ) {\r\n // TODO: should a shape's stroke be included?\r\n return this.hasShape() ? this._shape.intersectsBounds( bounds ) : false;\r\n },\r\n \r\n set shape( value ) { this.setShape( value ); },\r\n get shape() { return this.getShape(); },\r\n \r\n getBasicConstructor: function( propLines ) {\r\n return 'new scenery.Path( ' + this._shape.toString() + ', {' + propLines + '} )';\r\n },\r\n \r\n getPropString: function( spaces, includeChildren ) {\r\n var result = Node.prototype.getPropString.call( this, spaces, includeChildren );\r\n result = this.appendFillablePropString( spaces, result );\r\n result = this.appendStrokablePropString( spaces, result );\r\n return result;\r\n }\r\n } );\r\n \r\n Path.prototype._mutatorKeys = [ 'shape' ].concat( Node.prototype._mutatorKeys );\r\n \r\n Path.prototype._supportedRenderers = [ Renderer.Canvas, Renderer.SVG ];\r\n \r\n // mix in fill/stroke handling code. for now, this is done after 'shape' is added to the mutatorKeys so that stroke parameters\r\n // get set first\r\n /* jshint -W064 */\r\n Fillable( Path );\r\n Strokable( Path );\r\n \r\n return Path;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado Boulder\r\n\r\n/**\r\n * HBox arranges the child nodes horizontally, and they can be centered, left or right justified.\r\n * Horizontal spacing can be set as a constant or a function which depends on the adjacent nodes.\r\n * TODO: add an option (not enabled by default) to update layout when children or children bounds change\r\n *\r\n * @author Sam Reid\r\n */\r\n\r\ndefine( 'SCENERY/nodes/HBox',['require','SCENERY/scenery','SCENERY/nodes/Node','SCENERY/util/Util'],function( require ) {\r\n 'use strict';\r\n\r\n var scenery = require( 'SCENERY/scenery' );\r\n var Node = require( 'SCENERY/nodes/Node' );\r\n var objectCreate = require( 'SCENERY/util/Util' ).objectCreate; // i.e. Object.create\r\n\r\n /**\r\n *\r\n * @param options Same as Node.constructor.options with the following additions:\r\n *\r\n * spacing: can be a number or a function. If a number, then it will be the vertical spacing between each object.\r\n * If a function, then the function will have the signature function(top,bottom){} which returns the spacing between adjacent pairs of items.\r\n * align: How to line up the items horizontally. One of 'center', 'top' or 'bottom'. Defaults to 'center'.\r\n *\r\n * @constructor\r\n */\r\n scenery.HBox = function HBox( options ) {\r\n // ensure we have a parameter object\r\n this.options = options = _.extend( {\r\n // defaults\r\n spacing: function() { return 0; },\r\n align: 'center'\r\n }, options );\r\n\r\n if ( typeof options.spacing === 'number' ) {\r\n var spacingConstant = options.spacing;\r\n options.spacing = function() { return spacingConstant; };\r\n }\r\n\r\n Node.call( this, options );\r\n this.updateLayout();\r\n\r\n //TODO: perhaps not all options must be passed to Node.call AND this.mutate. On 7/17/2013, layout problems occurred when using only mutate() or only Node.call(this,options)\r\n //See VBox.js\r\n if ( options ) {\r\n this.mutate( options );\r\n }\r\n };\r\n var HBox = scenery.HBox;\r\n\r\n HBox.prototype = objectCreate( Node.prototype );\r\n\r\n HBox.prototype.updateLayout = function() {\r\n var minY = _.min( _.map( this.children, function( child ) {return child.top;} ) );\r\n var maxY = _.max( _.map( this.children, function( child ) {return child.top + child.height;} ) );\r\n var centerY = (maxY + minY) / 2;\r\n\r\n //Start at x=0 in the coordinate frame of this node. Not possible to set this through the spacing option, instead just set it with the {y:number} option.\r\n var x = 0;\r\n for ( var i = 0; i < this.children.length; i++ ) {\r\n var child = this.children[i];\r\n child.left = x;\r\n\r\n //Set the position horizontally\r\n if ( this.options.align === 'top' ) {\r\n child.top = minY;\r\n }\r\n else if ( this.options.align === 'bottom' ) {\r\n child.bottom = maxY;\r\n }\r\n else {//default to center\r\n child.centerY = centerY;\r\n }\r\n\r\n //Move to the next vertical position.\r\n x += child.width + this.options.spacing( child, this.children[i + 1] );\r\n }\r\n };\r\n HBox.prototype.constructor = HBox;\r\n\r\n return HBox;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado Boulder\r\n\r\n/**\r\n * VBox arranges the child nodes vertically, and they can be centered, left or right justified.\r\n * Vertical spacing can be set as a constant or a function which depends on the adjacent nodes.\r\n * TODO: add an option (not enabled by default) to update layout when children or children bounds change\r\n *\r\n * @author Sam Reid\r\n */\r\n\r\ndefine( 'SCENERY/nodes/VBox',['require','SCENERY/scenery','SCENERY/nodes/Node','SCENERY/util/Util'],function( require ) {\r\n 'use strict';\r\n\r\n var scenery = require( 'SCENERY/scenery' );\r\n var Node = require( 'SCENERY/nodes/Node' );\r\n var objectCreate = require( 'SCENERY/util/Util' ).objectCreate; // i.e. Object.create\r\n\r\n /**\r\n *\r\n * @param options Same as Node.constructor.options with the following additions:\r\n *\r\n * spacing: can be a number or a function. If a number, then it will be the vertical spacing between each object.\r\n * If a function, then the function will have the signature function(top,bottom){} which returns the spacing between adjacent pairs of items.\r\n * align: How to line up the items horizontally. One of 'center', 'left' or 'right'. Defaults to 'center'.\r\n *\r\n * @constructor\r\n */\r\n scenery.VBox = function VBox( options ) {\r\n // ensure we have a parameter object\r\n this.options = options = _.extend( {\r\n // defaults\r\n spacing: function() { return 0; },\r\n align: 'center'\r\n }, options );\r\n\r\n if ( typeof options.spacing === 'number' ) {\r\n var spacingConstant = options.spacing;\r\n options.spacing = function() { return spacingConstant; };\r\n }\r\n\r\n Node.call( this, options );\r\n this.updateLayout();\r\n\r\n //TODO: perhaps not all options must be passed to Node.call AND this.mutate. On 7/17/2013, layout problems occurred when using only mutate() or only Node.call(this,options)\r\n //See HBox.js\r\n if ( options ) {\r\n this.mutate( options );\r\n }\r\n };\r\n var VBox = scenery.VBox;\r\n\r\n VBox.prototype = objectCreate( Node.prototype );\r\n\r\n VBox.prototype.updateLayout = function() {\r\n var minX = _.min( _.map( this.children, function( child ) {return child.left;} ) );\r\n var maxX = _.max( _.map( this.children, function( child ) {return child.left + child.width;} ) );\r\n var centerX = (maxX + minX) / 2;\r\n\r\n //Start at y=0 in the coordinate frame of this node. Not possible to set this through the spacing option, instead just set it with the {y:number} option.\r\n var y = 0;\r\n for ( var i = 0; i < this.children.length; i++ ) {\r\n var child = this.children[i];\r\n child.top = y;\r\n\r\n //Set the position horizontally\r\n if ( this.options.align === 'left' ) {\r\n child.left = minX;\r\n }\r\n else if ( this.options.align === 'right' ) {\r\n child.right = maxX;\r\n }\r\n else {//default to center\r\n child.centerX = centerX;\r\n }\r\n\r\n //Move to the next vertical position.\r\n y += child.height + this.options.spacing( child, this.children[i + 1] );\r\n }\r\n };\r\n VBox.prototype.constructor = VBox;\r\n\r\n return VBox;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado Boulder\r\n\r\n/**\r\n * Escaping of HTML content that will be placed in the body, inside an element as a node.\r\n *\r\n * This is NOT for escaping something in other HTML contexts, for example as an attribute value\r\n *\r\n * @author Jonathan Olson \r\n */\r\ndefine( 'PHET_CORE/escapeHTML',['require'],function( require ) {\r\n 'use strict';\r\n \r\n return function escapeHTML( str ) {\r\n // see https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet\r\n // HTML Entity Encoding\r\n return str.replace( /&/g, '&' )\r\n .replace( //g, '>' )\r\n .replace( /\\\"/g, '"' )\r\n .replace( /\\'/g, ''' )\r\n .replace( /\\//g, '/' );\r\n };\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Font handling for text drawing\r\n *\r\n * Examples:\r\n * new scenery.Font().font // \"10px sans-serif\" (the default)\r\n * new scenery.Font( { family: 'serif' } ).font // \"10px serif\"\r\n * new scenery.Font( { weight: 'bold' } ).font // \"bold 10px sans-serif\"\r\n * new scenery.Font( { size: 16 } ).font // \"16px sans-serif\"\r\n * var font = new scenery.Font( {\r\n * family: '\"Times New Roman\", serif',\r\n * style: 'italic',\r\n * lineHeight: 10\r\n * } );\r\n * font.font; // \"italic 10px/10 'Times New Roman', serif\"\r\n * font.family; // \"'Times New Roman', serif\"\r\n * font.weight; // 400 (the default)\r\n *\r\n * Useful specs:\r\n * http://www.w3.org/TR/css3-fonts/\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/util/Font',['require','SCENERY/scenery'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n // constants used for detection (since styles/variants/weights/stretches can be mixed in the preamble of the shorthand string)\r\n var styles = [ 'normal', 'italic', 'oblique' ];\r\n var variants = [ 'normal', 'small-caps' ];\r\n var weights = [ 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900' ];\r\n var stretches = [ 'normal', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded' ];\r\n \r\n // size constants used for detection\r\n var sizes = [ 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'larger', 'smaller' ];\r\n \r\n function castSize( size ) {\r\n if ( typeof size === 'number' ) {\r\n return size + 'px'; // add the pixels suffix by default for numbers\r\n } else {\r\n return size; // assume that it's a valid to-spec string\r\n }\r\n }\r\n \r\n scenery.Font = function Font( options ) {\r\n // options from http://www.w3.org/TR/css3-fonts/\r\n this._style = 'normal'; // normal | italic | oblique\r\n this._variant = 'normal'; // normal | small-caps\r\n this._weight = 'normal'; // normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900\r\n this._stretch = 'normal'; // normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded\r\n this._size = '10px'; // | | | -- unitless number interpreted as px. absolute suffixes: cm, mm, in, pt, pc, px. relative suffixes: em, ex, ch, rem, vw, vh, vmin, vmax.\r\n this._lineHeight = 'normal'; // normal | | | -- NOTE: Canvas spec forces line-height to normal\r\n this._family = 'sans-serif'; // comma-separated list of families, including generic families (serif, sans-serif, cursive, fantasy, monospace). ideally escape with double-quotes\r\n \r\n // font [ [ <‘font-style’> || || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar\r\n // = [normal | small-caps]\r\n \r\n var type = typeof options;\r\n if ( type === 'string' ) {\r\n // parse a somewhat proper CSS3 form (not guaranteed to handle it precisely the same as browsers yet)\r\n \r\n // split based on whitespace allowed by CSS spec (more restrictive than regular regexp whitespace)\r\n var tokens = _.filter( options.split( /[\\x09\\x0A\\x0C\\x0D\\x20]/ ), function( token ) { return token.length > 0; } );\r\n \r\n // pull tokens out until we reach something that doesn't match. that must be the font size (according to spec)\r\n for ( var i = 0; i < tokens.length; i++ ) {\r\n var token = tokens[i];\r\n if ( token === 'normal' ) {\r\n // nothing has to be done, everything already normal as default\r\n } else if ( _.contains( styles, token ) ) {\r\n sceneryAssert && sceneryAssert( this._style === 'normal', 'Style cannot be applied twice. Already set to \"' + this._style + '\", attempt to replace with \"' + token + '\"' );\r\n this._style = token;\r\n } else if ( _.contains( variants, token ) ) {\r\n sceneryAssert && sceneryAssert( this._variant === 'normal', 'Variant cannot be applied twice. Already set to \"' + this._variant + '\", attempt to replace with \"' + token + '\"' );\r\n this._variant = token;\r\n } else if ( _.contains( weights, token ) ) {\r\n sceneryAssert && sceneryAssert( this._weight === 'normal', 'Weight cannot be applied twice. Already set to \"' + this._weight + '\", attempt to replace with \"' + token + '\"' );\r\n this._weight = token;\r\n } else if ( _.contains( stretches, token ) ) {\r\n sceneryAssert && sceneryAssert( this._stretch === 'normal', 'Stretch cannot be applied twice. Already set to \"' + this._stretch + '\", attempt to replace with \"' + token + '\"' );\r\n this._stretch = token;\r\n } else {\r\n // not a style/variant/weight/stretch, must be a font size, possibly with an included line-height\r\n var subtokens = token.split( /\\// ); // extract font size from any line-height\r\n this._size = subtokens[0];\r\n if ( subtokens[1] ) {\r\n this._lineHeight = subtokens[1];\r\n }\r\n // all future tokens are guaranteed to be part of the font-family if it is given according to spec\r\n this._family = tokens.slice( i + 1 ).join( ' ' );\r\n break;\r\n }\r\n }\r\n } else if ( type === 'object' ) {\r\n if ( options.style !== undefined ) {\r\n this._style = options.style;\r\n }\r\n if ( options.variant !== undefined ) {\r\n this._variant = options.variant;\r\n }\r\n if ( options.weight !== undefined ) {\r\n this._weight = '' + options.weight; // cast it to a string explicitly\r\n }\r\n if ( options.stretch !== undefined ) {\r\n this._stretch = options.stretch;\r\n }\r\n if ( options.size !== undefined ) {\r\n this._size = castSize( options.size );\r\n }\r\n if ( options.lineHeight !== undefined ) {\r\n this._lineHeight = options.lineHeight;\r\n }\r\n if ( options.family !== undefined ) {\r\n this._family = options.family;\r\n }\r\n }\r\n \r\n // sanity checks to prevent errors in interpretation or in the font shorthand usage\r\n sceneryAssert && sceneryAssert( typeof this._style === 'string' &&\r\n _.contains( styles, this._style ),\r\n 'Font style must be one of \"normal\", \"italic\", or \"oblique\"' );\r\n sceneryAssert && sceneryAssert( typeof this._variant === 'string' &&\r\n _.contains( variants, this._variant ),\r\n 'Font variant must be \"normal\" or \"small-caps\"' );\r\n sceneryAssert && sceneryAssert( typeof this._weight === 'string' &&\r\n _.contains( weights, this._weight ),\r\n 'Font weight must be one of \"normal\", \"bold\", \"bolder\", \"lighter\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", or \"900\"' );\r\n sceneryAssert && sceneryAssert( typeof this._stretch === 'string' &&\r\n _.contains( stretches, this._stretch ),\r\n 'Font stretch must be one of \"normal\", \"ultra-condensed\", \"extra-condensed\", \"condensed\", \"semi-condensed\", \"semi-expanded\", \"expanded\", \"extra-expanded\", or \"ultra-expanded\"' );\r\n sceneryAssert && sceneryAssert( typeof this._size === 'string' &&\r\n !_.contains( [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ], this._size[this._size.length - 1] ),\r\n 'Font size must be either passed as a number (not a string, interpreted as px), or must contain a suffix for percentage, absolute or relative units, or an explicit size constant' );\r\n sceneryAssert && sceneryAssert( typeof this._lineHeight === 'string' );\r\n sceneryAssert && sceneryAssert( typeof this._family === 'string' );\r\n \r\n // initialize the shorthand font property (stored as _font)\r\n this._font = this.computeShorthand();\r\n \r\n phetAllocation && phetAllocation( 'Font' );\r\n };\r\n var Font = scenery.Font;\r\n \r\n Font.prototype = {\r\n constructor: Font,\r\n \r\n getFont: function() { return this._font; },\r\n getStyle: function() { return this._style; },\r\n getVariant: function() { return this._variant; },\r\n getWeight: function() { return this._weight; },\r\n getStretch: function() { return this._stretch; },\r\n getSize: function() { return this._size; },\r\n getLineHeight: function() { return this._lineHeight; },\r\n getFamily: function() { return this._family; },\r\n \r\n get font() { return this.getFont(); },\r\n get style() { return this.getStyle(); },\r\n get variant() { return this.getVariant(); },\r\n get weight() { return this.getWeight(); },\r\n get stretch() { return this.getStretch(); },\r\n get size() { return this.getSize(); },\r\n get lineHeight() { return this.getLineHeight(); },\r\n get family() { return this.getFamily(); },\r\n \r\n copy: function( options ) {\r\n return new Font( _.extend( {\r\n style: this._style,\r\n variant: this._variant,\r\n weight: this._weight,\r\n stretch: this._stretch,\r\n size: this._size,\r\n lineHeight: this._lineHeight,\r\n family: this._family\r\n }, options ) );\r\n },\r\n \r\n computeShorthand: function() {\r\n var ret = '';\r\n if ( this._style !== 'normal' ) { ret += this._style + ' '; }\r\n if ( this._variant !== 'normal' ) { ret += this._variant + ' '; }\r\n if ( this._weight !== 'normal' ) { ret += this._weight + ' '; }\r\n if ( this._stretch !== 'normal' ) { ret += this._stretch + ' '; }\r\n ret += this._size;\r\n if ( this._lineHeight !== 'normal' ) { ret += '/' + this._lineHeight; }\r\n ret += ' ' + this._family;\r\n return ret;\r\n },\r\n \r\n toCSS: function() {\r\n return this.getFont();\r\n }\r\n };\r\n \r\n Font.DEFAULT = new Font();\r\n \r\n return Font;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Text\r\n *\r\n * TODO: newlines (multiline)\r\n * TODO: htmlText support (and DOM renderer)\r\n * TODO: don't get bounds until the Text node is fully mutated?\r\n * TODO: remove some support for centering, since Scenery's Node already handles that better?\r\n *\r\n * Useful specs:\r\n * http://www.w3.org/TR/css3-text/\r\n * http://www.w3.org/TR/css3-fonts/\r\n * http://www.w3.org/TR/SVG/text.html\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/nodes/Text',['require','PHET_CORE/inherit','PHET_CORE/escapeHTML','DOT/Bounds2','DOT/Matrix3','SCENERY/scenery','SCENERY/nodes/Node','SCENERY/layers/Renderer','SCENERY/nodes/Fillable','SCENERY/nodes/Strokable','SCENERY/util/Util','SCENERY/util/Font','SCENERY/util/Util'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var escapeHTML = require( 'PHET_CORE/escapeHTML' );\r\n var Bounds2 = require( 'DOT/Bounds2' );\r\n var Matrix3 = require( 'DOT/Matrix3' );\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Node = require( 'SCENERY/nodes/Node' ); // inherits from Node\r\n var Renderer = require( 'SCENERY/layers/Renderer' );\r\n var Fillable = require( 'SCENERY/nodes/Fillable' );\r\n var Strokable = require( 'SCENERY/nodes/Strokable' );\r\n var objectCreate = require( 'SCENERY/util/Util' ).objectCreate; // i.e. Object.create\r\n require( 'SCENERY/util/Font' );\r\n require( 'SCENERY/util/Util' ); // for canvasAccurateBounds and CSS transforms\r\n \r\n // set up the container and text for testing text bounds quickly (using approximateSVGBounds)\r\n var svgTextSizeContainer = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );\r\n svgTextSizeContainer.setAttribute( 'width', '2' );\r\n svgTextSizeContainer.setAttribute( 'height', '2' );\r\n svgTextSizeContainer.setAttribute( 'style', 'display: hidden; pointer-events: none; position: absolute; left: -65535; right: -65535;' ); // so we don't flash it in a visible way to the user\r\n var svgTextSizeElement = document.createElementNS( 'http://www.w3.org/2000/svg', 'text' );\r\n svgTextSizeElement.appendChild( document.createTextNode( '' ) );\r\n svgTextSizeContainer.appendChild( svgTextSizeElement );\r\n \r\n // SVG bounds seems to be malfunctioning for Safari 5. Since we don't have a reproducible test machine for\r\n // fast iteration, we'll guess the user agent and use DOM bounds instead of SVG.\r\n // Hopefully the two contraints rule out any future Safari versions (fairly safe, but not impossible!)\r\n var useDOMAsFastBounds = window.navigator.userAgent.indexOf( 'like Gecko) Version/5' ) !== -1 &&\r\n window.navigator.userAgent.indexOf( 'Safari/' ) !== -1;\r\n \r\n var hybridTextNode; // a node that is used to measure SVG text top/height for hybrid caching purposes\r\n var initializingHybridTextNode = false;\r\n \r\n scenery.Text = function Text( text, options ) {\r\n this._text = ''; // filled in with mutator\r\n this._font = scenery.Font.DEFAULT; // default font, usually 10px sans-serif\r\n this._direction = 'ltr'; // ltr, rtl, inherit -- consider inherit deprecated, due to how we compute text bounds in an off-screen canvas\r\n this._boundsMethod = 'hybrid'; // fast (SVG/DOM, no canvas rendering allowed), fastCanvas (SVG/DOM, canvas rendering allowed without dirty regions),\r\n // accurate (Canvas accurate recursive), or hybrid (cache SVG height, use canvas measureText for width)\r\n \r\n // whether the text is rendered as HTML or not. if defined (in a subtype constructor), use that value instead\r\n this._isHTML = this._isHTML === undefined ? false : this._isHTML;\r\n \r\n // we will dynamically change renderers, so they are initialized per-instance instead of per-type\r\n this._supportedRenderers = [ Renderer.Canvas, Renderer.SVG, Renderer.DOM ];\r\n \r\n var thisFont = this;\r\n \r\n // ensure we have a parameter object\r\n options = options || {};\r\n \r\n // default to black filled text\r\n if ( options.fill === undefined ) {\r\n options.fill = '#000000';\r\n }\r\n \r\n if ( text !== undefined ) {\r\n // set the text parameter so that setText( text ) is effectively called in the mutator from the super call\r\n options.text = text;\r\n }\r\n \r\n this.initializeStrokable();\r\n \r\n Node.call( this, options );\r\n \r\n this.updateTextFlags();\r\n };\r\n var Text = scenery.Text;\r\n \r\n inherit( Node, Text, {\r\n domUpdateTransformOnRepaint: true, // since we have to integrate the baseline offset into the CSS transform, signal to DOMLayer\r\n \r\n setText: function( text ) {\r\n if ( text !== this._text ) {\r\n this._text = text;\r\n this.invalidateText();\r\n }\r\n return this;\r\n },\r\n \r\n getText: function() {\r\n return this._text;\r\n },\r\n \r\n setBoundsMethod: function( method ) {\r\n sceneryAssert && sceneryAssert( method === 'fast' || method === 'fastCanvas' || method === 'accurate' || method === 'hybrid', 'Unknown Text boundsMethod' );\r\n if ( method !== this._boundsMethod ) {\r\n this._boundsMethod = method;\r\n this.updateTextFlags();\r\n this.dispatchEvent( 'boundsAccuracy', { node: this } ); // TODO: consider standardizing this, or attaching listeners in a different manner?\r\n this.invalidateText();\r\n }\r\n return this;\r\n },\r\n \r\n getBoundsMethod: function() {\r\n return this._boundsMethod;\r\n },\r\n \r\n updateTextFlags: function() {\r\n var thisText = this;\r\n this.boundsInaccurate = this._boundsMethod !== 'accurate';\r\n \r\n var renderersChanged = false;\r\n function check( predicateValue, renderer ) {\r\n var inSupportedRenderers = _.contains( thisText._supportedRenderers, renderer );\r\n if ( predicateValue !== inSupportedRenderers ) {\r\n renderersChanged = true;\r\n if ( predicateValue ) {\r\n // add the renderer\r\n thisText._supportedRenderers.push( renderer );\r\n } else {\r\n // remove the renderer\r\n thisText._supportedRenderers.splice( _.indexOf( thisText._supportedRenderers, renderer ), 1 );\r\n if ( thisText.renderer === renderer ) {\r\n // our set renderer is incompatible. set to null to disable this. TODO: investigate rendering system to prevent overrides like this?\r\n thisText.renderer = null;\r\n \r\n // for now, error out\r\n throw new Error( 'The explicitly specified Text renderer: ' + renderer.name + ' is not supported by this operation (probably invalid stroke, fill, or boundsMethod)' );\r\n }\r\n }\r\n }\r\n }\r\n \r\n check( this._boundsMethod !== 'fast' && !this._isHTML, Renderer.Canvas );\r\n check( !this._isHTML, Renderer.SVG );\r\n check( !this.hasStroke() && this.isFillDOMCompatible(), Renderer.DOM );\r\n \r\n if ( this._supportedRenderers.length === 0 ) {\r\n throw new Error( 'No renderers are able to support this Text node (probably HTML text with a stroke or incompatible fill)' );\r\n }\r\n \r\n if ( renderersChanged ) {\r\n this.markLayerRefreshNeeded();\r\n }\r\n },\r\n \r\n invalidateText: function() {\r\n // investigate http://mudcu.be/journal/2011/01/html5-typographic-metrics/\r\n if ( this._isHTML || ( useDOMAsFastBounds && this._boundsMethod !== 'accurate' ) ) {\r\n this.invalidateSelf( this.approximateDOMBounds() );\r\n } else if ( this._boundsMethod === 'hybrid' ) {\r\n this.invalidateSelf( this.approximateHybridBounds() );\r\n } else if ( this._boundsMethod === 'fast' || this._boundsMethod === 'fastCanvas' ) {\r\n this.invalidateSelf( this.approximateSVGBounds() );\r\n } else {\r\n this.invalidateSelf( this.accurateCanvasBounds() );\r\n }\r\n \r\n // we may have changed renderers if parameters were changed!\r\n this.updateTextFlags();\r\n },\r\n \r\n // overrides from Strokable\r\n invalidateStroke: function() {\r\n // stroke can change both the bounds and renderer\r\n this.invalidateText();\r\n },\r\n \r\n // overrides from Fillable\r\n invalidateFill: function() {\r\n // fill type can change the renderer (gradient/fill not supported by DOM)\r\n this.invalidateText();\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Canvas support\r\n *----------------------------------------------------------------------------*/\r\n \r\n paintCanvas: function( wrapper ) {\r\n var context = wrapper.context;\r\n \r\n // extra parameters we need to set, but should avoid setting if we aren't drawing anything\r\n if ( this.hasFill() || this.hasStroke() ) {\r\n wrapper.setFont( this._font.getFont() );\r\n wrapper.setDirection( this._direction );\r\n }\r\n \r\n if ( this.hasFill() ) {\r\n this.beforeCanvasFill( wrapper ); // defined in Fillable\r\n context.fillText( this._text, 0, 0 );\r\n this.afterCanvasFill( wrapper ); // defined in Fillable\r\n }\r\n if ( this.hasStroke() ) {\r\n this.beforeCanvasStroke( wrapper ); // defined in Strokable\r\n context.strokeText( this._text, 0, 0 );\r\n this.afterCanvasStroke( wrapper ); // defined in Strokable\r\n }\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * WebGL support\r\n *----------------------------------------------------------------------------*/\r\n \r\n paintWebGL: function( state ) {\r\n throw new Error( 'Text.prototype.paintWebGL unimplemented' );\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * SVG support\r\n *----------------------------------------------------------------------------*/\r\n \r\n createSVGFragment: function( svg, defs, group ) {\r\n var element = document.createElementNS( 'http://www.w3.org/2000/svg', 'text' );\r\n element.appendChild( document.createTextNode( '' ) );\r\n return element;\r\n },\r\n \r\n updateSVGFragment: function( element ) {\r\n var isRTL = this._direction === 'rtl';\r\n \r\n // update the text-node's value\r\n element.lastChild.nodeValue = this._text;\r\n \r\n element.setAttribute( 'style', this.getSVGFillStyle() + this.getSVGStrokeStyle() );\r\n \r\n // element.setAttribute( 'text-anchor', 'start' ); // not needed right now (default is inherit)\r\n element.setAttribute( 'dominant-baseline', 'alphabetic' ); // to match Canvas right now\r\n element.setAttribute( 'direction', this._direction );\r\n \r\n // set all of the font attributes, since we can't use the combined one\r\n element.setAttribute( 'font-family', this._font.getFamily() );\r\n element.setAttribute( 'font-size', this._font.getSize() );\r\n element.setAttribute( 'font-style', this._font.getStyle() );\r\n element.setAttribute( 'font-weight', this._font.getWeight() );\r\n element.setAttribute( 'font-stretch', this._font.getStretch() );\r\n },\r\n \r\n // support patterns, gradients, and anything else we need to put in the block\r\n updateSVGDefs: function( svg, defs ) {\r\n // remove old definitions if they exist\r\n this.removeSVGDefs( svg, defs );\r\n \r\n // add new ones if applicable\r\n this.addSVGFillDef( svg, defs );\r\n this.addSVGStrokeDef( svg, defs );\r\n },\r\n \r\n // cleans up references created with udpateSVGDefs()\r\n removeSVGDefs: function( svg, defs ) {\r\n this.removeSVGFillDef( svg, defs );\r\n this.removeSVGStrokeDef( svg, defs );\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * DOM support\r\n *----------------------------------------------------------------------------*/\r\n \r\n allowsMultipleDOMInstances: true,\r\n \r\n getDOMElement: function() {\r\n var div = document.createElement( 'div' );\r\n \r\n // so they are absolutely positioned compared to the containing DOM layer (that is positioned).\r\n // otherwise, two adjacent HTMLText elements will 'flow' and be positioned incorrectly\r\n div.style.position = 'absolute';\r\n return div;\r\n },\r\n \r\n updateDOMElement: function( div ) {\r\n var $div = $( div );\r\n div.style.font = this.getFont();\r\n div.style.color = this.getCSSFill();\r\n $div.width( this.getSelfBounds().width );\r\n $div.height( this.getSelfBounds().height );\r\n $div.empty(); // remove all children, including previously-created text nodes\r\n div.appendChild( this.getDOMTextNode() );\r\n div.setAttribute( 'dir', this._direction );\r\n },\r\n \r\n updateCSSTransform: function( transform, element ) {\r\n // since the DOM origin of the text is at the upper-left, and our Scenery origin is at the lower-left, we need to\r\n // shift the text vertically, postmultiplied with the entire transform.\r\n var yOffset = this.getSelfBounds().minY;\r\n var matrix = transform.getMatrix().timesMatrix( Matrix3.translation( 0, yOffset ) );\r\n scenery.Util.applyCSSTransform( matrix, element );\r\n },\r\n \r\n // a DOM node (not a Scenery DOM node, but an actual DOM node) with the text\r\n getDOMTextNode: function() {\r\n if ( this._isHTML ) {\r\n var span = document.createElement( 'span' );\r\n span.innerHTML = this.text;\r\n return span;\r\n } else {\r\n return document.createTextNode( this.text );\r\n }\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Bounds\r\n *----------------------------------------------------------------------------*/\r\n \r\n accurateCanvasBounds: function() {\r\n var node = this;\r\n var svgBounds = this.approximateSVGBounds(); // this seems to be slower than expected, mostly due to Font getters\r\n\r\n //If svgBounds are zero, then return the zero bounds\r\n if (svgBounds.width===0 && svgBounds.height===0){\r\n return svgBounds;\r\n }\r\n return scenery.Util.canvasAccurateBounds( function( context ) {\r\n context.font = node.font;\r\n context.direction = node.direction;\r\n context.fillText( node.text, 0, 0 );\r\n }, {\r\n precision: 0.5,\r\n resolution: 128,\r\n initialScale: 32 / Math.max( Math.abs( svgBounds.minX ), Math.abs( svgBounds.minY ), Math.abs( svgBounds.maxX ), Math.abs( svgBounds.maxY ) )\r\n } );\r\n },\r\n \r\n approximateCanvasWidth: function() {\r\n var context = scenery.scratchContext;\r\n context.font = this.font;\r\n context.direction = this.direction;\r\n return context.measureText( this.text ).width;\r\n },\r\n \r\n approximateSVGBounds: function() {\r\n if ( !svgTextSizeContainer.parentNode ) {\r\n if ( document.body ) {\r\n document.body.appendChild( svgTextSizeContainer );\r\n } else {\r\n // TODO: better way to handle the hybridTextNode being added inside the HEAD? Requiring a body for proper operation might be a problem.\r\n if ( initializingHybridTextNode ) {\r\n // if this is almost assuredly the hybridTextNode, return nothing for now. TODO: better way of handling this! it's a hack!\r\n return Bounds2.NOTHING;\r\n } else {\r\n throw new Error( 'No document.body and trying to get approximate SVG bounds of a Text node' );\r\n }\r\n }\r\n }\r\n this.updateSVGFragment( svgTextSizeElement );\r\n var rect = svgTextSizeElement.getBBox();\r\n return new Bounds2( rect.x, rect.y, rect.x + rect.width, rect.y + rect.height );\r\n },\r\n \r\n approximateHybridBounds: function() {\r\n if ( !hybridTextNode ) {\r\n return Bounds2.NOTHING; // we are the hybridTextNode, ignore us\r\n }\r\n \r\n if ( this._font._cachedSVGBounds === undefined ) {\r\n hybridTextNode.setFont( this._font );\r\n this._font._cachedSVGBounds = hybridTextNode.getBounds();\r\n }\r\n \r\n var canvasWidth = this.approximateCanvasWidth();\r\n var verticalBounds = this._font._cachedSVGBounds;\r\n \r\n // it seems that SVG bounds generally have x=0, so we hard code that here\r\n return new Bounds2( 0, verticalBounds.minY, canvasWidth, verticalBounds.maxY );\r\n },\r\n \r\n approximateDOMBounds: function() {\r\n var maxHeight = 1024; // technically this will fail if the font is taller than this!\r\n var isRTL = this.direction === 'rtl';\r\n \r\n //

QuipTaQiy

\r\n \r\n var div = document.createElement( 'div' );\r\n $( div ).css( {\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n padding: '0 !important',\r\n margin: '0 !important',\r\n display: 'hidden'\r\n } );\r\n \r\n var span = document.createElement( 'span' );\r\n $( span ).css( 'font', this.getFont() );\r\n span.appendChild( this.getDOMTextNode() );\r\n span.setAttribute( 'direction', this._direction );\r\n \r\n var fakeImage = document.createElement( 'div' );\r\n $( fakeImage ).css( {\r\n 'vertical-align': 'baseline',\r\n display: 'inline-block',\r\n width: 0,\r\n height: maxHeight + 'px',\r\n margin: '0 !important',\r\n padding: '0 !important'\r\n } );\r\n \r\n div.appendChild( span );\r\n div.appendChild( fakeImage );\r\n \r\n document.body.appendChild( div );\r\n var rect = span.getBoundingClientRect();\r\n var divRect = div.getBoundingClientRect();\r\n // add 1 pixel to rect.right to prevent HTML text wrapping\r\n var result = new Bounds2( rect.left, rect.top - maxHeight, rect.right + 1, rect.bottom - maxHeight ).shifted( -divRect.left, -divRect.top );\r\n // console.log( 'result: ' + result );\r\n document.body.removeChild( div );\r\n \r\n var width = rect.right - rect.left;\r\n return result.shiftedX( isRTL ? -width : 0 ); // should we even swap here?\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Self setters / getters\r\n *----------------------------------------------------------------------------*/\r\n \r\n setFont: function( font ) {\r\n if ( this.font !== font ) {\r\n this._font = font instanceof scenery.Font ? font : new scenery.Font( font );\r\n this.invalidateText();\r\n }\r\n return this;\r\n },\r\n \r\n // NOTE: returns mutable copy for now, consider either immutable version, defensive copy, or note about invalidateText()\r\n getFont: function() {\r\n return this._font.getFont();\r\n },\r\n \r\n setDirection: function( direction ) {\r\n this._direction = direction;\r\n this.invalidateText();\r\n return this;\r\n },\r\n \r\n getDirection: function() {\r\n return this._direction;\r\n },\r\n \r\n isPainted: function() {\r\n return true;\r\n },\r\n \r\n getBasicConstructor: function( propLines ) {\r\n return 'new scenery.Text( \\'' + escapeHTML( this._text.replace( /'/g, '\\\\\\'' ) ) + '\\', {' + propLines + '} )';\r\n },\r\n \r\n getPropString: function( spaces, includeChildren ) {\r\n var result = Node.prototype.getPropString.call( this, spaces, includeChildren );\r\n result = this.appendFillablePropString( spaces, result );\r\n result = this.appendStrokablePropString( spaces, result );\r\n \r\n // TODO: if created again, deduplicate with Node's getPropString\r\n function addProp( key, value, nowrap ) {\r\n if ( result ) {\r\n result += ',\\n';\r\n }\r\n if ( !nowrap && typeof value === 'string' ) {\r\n result += spaces + key + ': \\'' + value + '\\'';\r\n } else {\r\n result += spaces + key + ': ' + value;\r\n }\r\n }\r\n \r\n if ( this.font !== new scenery.Font().getFont() ) {\r\n addProp( 'font', this.font.replace( /'/g, '\\\\\\'' ) );\r\n }\r\n \r\n if ( this._direction !== 'ltr' ) {\r\n addProp( 'direction', this._direction );\r\n }\r\n \r\n return result;\r\n }\r\n } );\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Font setters / getters\r\n *----------------------------------------------------------------------------*/\r\n \r\n function addFontForwarding( propertyName, fullCapitalized, shortUncapitalized ) {\r\n var getterName = 'get' + fullCapitalized;\r\n var setterName = 'set' + fullCapitalized;\r\n \r\n Text.prototype[getterName] = function() {\r\n // use the ES5 getter to retrieve the property. probably somewhat slow.\r\n return this._font[ shortUncapitalized ];\r\n };\r\n \r\n Text.prototype[setterName] = function( value ) {\r\n // create a full copy of our font instance\r\n var ob = {};\r\n ob[shortUncapitalized] = value;\r\n var newFont = this._font.copy( ob );\r\n \r\n // apply the new Font. this should call invalidateText() as normal\r\n this.setFont( newFont );\r\n return this;\r\n };\r\n \r\n Object.defineProperty( Text.prototype, propertyName, { set: Text.prototype[setterName], get: Text.prototype[getterName] } );\r\n }\r\n \r\n addFontForwarding( 'fontWeight', 'FontWeight', 'weight' );\r\n addFontForwarding( 'fontFamily', 'FontFamily', 'family' );\r\n addFontForwarding( 'fontStretch', 'FontStretch', 'stretch' );\r\n addFontForwarding( 'fontStyle', 'FontStyle', 'style' );\r\n addFontForwarding( 'fontSize', 'FontSize', 'size' );\r\n addFontForwarding( 'lineHeight', 'LineHeight', 'lineHeight' );\r\n \r\n Text.prototype._mutatorKeys = [ 'boundsMethod', 'text', 'font', 'fontWeight', 'fontFamily', 'fontStretch', 'fontStyle', 'fontSize', 'lineHeight',\r\n 'direction' ].concat( Node.prototype._mutatorKeys );\r\n \r\n Text.prototype._supportedRenderers = [ Renderer.Canvas, Renderer.SVG, Renderer.DOM ];\r\n Text.prototype._supportedRenderersWithFastBounds = [ Renderer.SVG, Renderer.DOM ]; // renderers for fast (SVG/DOM) bounds, since canvas dirty regions would present issues\r\n \r\n // font-specific ES5 setters and getters are defined using addFontForwarding above\r\n Object.defineProperty( Text.prototype, 'font', { set: Text.prototype.setFont, get: Text.prototype.getFont } );\r\n Object.defineProperty( Text.prototype, 'text', { set: Text.prototype.setText, get: Text.prototype.getText } );\r\n Object.defineProperty( Text.prototype, 'direction', { set: Text.prototype.setDirection, get: Text.prototype.getDirection } );\r\n Object.defineProperty( Text.prototype, 'boundsMethod', { set: Text.prototype.setBoundsMethod, get: Text.prototype.getBoundsMethod } );\r\n \r\n // mix in support for fills and strokes\r\n /* jshint -W064 */\r\n Fillable( Text );\r\n Strokable( Text );\r\n \r\n initializingHybridTextNode = true;\r\n hybridTextNode = new Text( 'm', { boundsMethod: 'fast' } );\r\n initializingHybridTextNode = false;\r\n\r\n return Text;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * DOM nodes. Currently lightweight handling\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/nodes/DOM',['require','PHET_CORE/inherit','PHET_CORE/escapeHTML','DOT/Bounds2','SCENERY/scenery','SCENERY/nodes/Node','SCENERY/layers/Renderer','SCENERY/util/Util','SCENERY/util/Util'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var escapeHTML = require( 'PHET_CORE/escapeHTML' );\r\n var Bounds2 = require( 'DOT/Bounds2' );\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Node = require( 'SCENERY/nodes/Node' ); // DOM inherits from Node\r\n var Renderer = require( 'SCENERY/layers/Renderer' );\r\n var objectCreate = require( 'SCENERY/util/Util' ).objectCreate;\r\n require( 'SCENERY/util/Util' );\r\n \r\n scenery.DOM = function DOM( element, options ) {\r\n options = options || {};\r\n \r\n this._interactive = false;\r\n \r\n // unwrap from jQuery if that is passed in, for consistency\r\n if ( element && element.jquery ) {\r\n element = element[0];\r\n }\r\n \r\n this._container = document.createElement( 'div' );\r\n this._$container = $( this._container );\r\n this._$container.css( 'position', 'absolute' );\r\n this._$container.css( 'left', 0 );\r\n this._$container.css( 'top', 0 );\r\n \r\n this.invalidateDOMLock = false;\r\n \r\n // so that the mutator will call setElement()\r\n options.element = element;\r\n \r\n // will set the element after initializing\r\n Node.call( this, options );\r\n };\r\n var DOM = scenery.DOM;\r\n \r\n inherit( Node, DOM, {\r\n // we use a single DOM instance, so this flag should indicate that we don't support duplicating it\r\n allowsMultipleDOMInstances: false,\r\n \r\n // needs to be attached to the DOM tree for this to work\r\n calculateDOMBounds: function() {\r\n // var boundingRect = this._element.getBoundingClientRect();\r\n // return new Bounds2( 0, 0, boundingRect.width, boundingRect.height );\r\n var $element = $( this._element );\r\n return new Bounds2( 0, 0, $element.width(), $element.height() );\r\n },\r\n \r\n createTemporaryContainer: function() {\r\n var temporaryContainer = document.createElement( 'div' );\r\n $( temporaryContainer ).css( {\r\n display: 'hidden',\r\n padding: '0 !important',\r\n margin: '0 !important',\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n width: 65535,\r\n height: 65535\r\n } );\r\n return temporaryContainer;\r\n },\r\n \r\n invalidateDOM: function() {\r\n // prevent this from being executed as a side-effect from inside one of its own calls\r\n if ( this.invalidateDOMLock ) {\r\n return;\r\n }\r\n this.invalidateDOMLock = true;\r\n \r\n // we will place ourselves in a temporary container to get our real desired bounds\r\n var temporaryContainer = this.createTemporaryContainer();\r\n \r\n // move to the temporary container\r\n this._container.removeChild( this._element );\r\n temporaryContainer.appendChild( this._element );\r\n document.body.appendChild( temporaryContainer );\r\n \r\n // bounds computation and resize our container to fit precisely\r\n var selfBounds = this.calculateDOMBounds();\r\n this.invalidateSelf( selfBounds );\r\n this._$container.width( selfBounds.getWidth() );\r\n this._$container.height( selfBounds.getHeight() );\r\n \r\n // move back to the main container\r\n document.body.removeChild( temporaryContainer );\r\n temporaryContainer.removeChild( this._element );\r\n this._container.appendChild( this._element );\r\n \r\n this.invalidateDOMLock = false;\r\n },\r\n \r\n getDOMElement: function() {\r\n return this._container;\r\n },\r\n \r\n updateDOMElement: function( container ) {\r\n // nothing needed, since we are just displaying a single DOM element\r\n },\r\n \r\n updateCSSTransform: function( transform, element ) {\r\n // faster to use our jQuery reference instead of wrapping element\r\n scenery.Util.applyCSSTransform( transform.getMatrix(), this._container );\r\n },\r\n \r\n isPainted: function() {\r\n return true;\r\n },\r\n \r\n setElement: function( element ) {\r\n if ( this._element !== element ) {\r\n if ( this._element ) {\r\n this._container.removeChild( this._element );\r\n }\r\n \r\n this._element = element;\r\n this._$element = $( element );\r\n \r\n this._container.appendChild( this._element );\r\n \r\n // TODO: bounds issue, since this will probably set to empty bounds and thus a repaint may not draw over it\r\n this.invalidateDOM(); \r\n }\r\n\r\n return this; // allow chaining\r\n },\r\n \r\n getElement: function() {\r\n return this._element;\r\n },\r\n \r\n setInteractive: function( interactive ) {\r\n if ( this._interactive !== interactive ) {\r\n this._interactive = interactive;\r\n \r\n // TODO: anything needed here?\r\n }\r\n },\r\n \r\n isInteractive: function() {\r\n return this._interactive;\r\n },\r\n \r\n set element( value ) { this.setElement( value ); },\r\n get element() { return this.getElement(); },\r\n \r\n set interactive( value ) { this.setInteractive( value ); },\r\n get interactive() { return this.isInteractive(); },\r\n \r\n getBasicConstructor: function( propLines ) {\r\n return 'new scenery.DOM( $( \\'' + escapeHTML( this._container.innerHTML.replace( /'/g, '\\\\\\'' ) ) + '\\' ), {' + propLines + '} )';\r\n },\r\n \r\n getPropString: function( spaces, includeChildren ) {\r\n var result = Node.prototype.getPropString.call( this, spaces, includeChildren );\r\n if ( this.interactive ) {\r\n if ( result ) {\r\n result += ',\\n';\r\n }\r\n result += spaces + 'interactive: true';\r\n }\r\n return result;\r\n }\r\n } );\r\n \r\n DOM.prototype._mutatorKeys = [ 'element', 'interactive' ].concat( Node.prototype._mutatorKeys );\r\n \r\n DOM.prototype._supportedRenderers = [ Renderer.DOM ];\r\n \r\n return DOM;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado Boulder\r\n\r\n/**\r\n * Creates an array of results from an iterator that takes a callback.\r\n *\r\n * For instance, if calling a function f( g ) will call g( 1 ), g( 2 ), and g( 3 ),\r\n * collect( function( callback ) { f( callback ); } );\r\n * will return [1,2,3].\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'PHET_CORE/collect',['require'],function( require ) {\r\n 'use strict';\r\n \r\n return function collect( iterate ) {\r\n var result = [];\r\n iterate( function( ob ) {\r\n result.push( ob );\r\n } );\r\n return result;\r\n };\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Accessibility peer, which is added to the dom for focus and keyboard navigation.\r\n *\r\n * @author Sam Reid\r\n */\r\n\r\ndefine( 'SCENERY/util/AccessibilityPeer',['require','PHET_CORE/inherit','SCENERY/scenery'],function( require ) {\r\n 'use strict';\r\n\r\n var inherit = require( 'PHET_CORE/inherit' );\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var AccessibilityPeer = scenery.AccessibilityPeer = function AccessibilityPeer( instance, element, options ) {\r\n var peer = this;\r\n \r\n options = options || {};\r\n\r\n //Defaulting to 0 would mean using the document order, which can easily be incorrect for a PhET simulation.\r\n //For any of the nodes to use a nonzero tabindex, they must all use a nonzero tabindex, see #40\r\n options.tabIndex = options.tabIndex || 1;\r\n \r\n // TODO: if element is a DOM element, verify that no other accessibility peer is using it! (add a flag, and remove on disposal)\r\n this.element = ( typeof element === 'string' ) ? $( element )[0] : element;\r\n\r\n if ( options.label ) {\r\n this.peerElement = document.createElement( 'div' );\r\n this.element.id = 'peer-' + instance.trail.getUniqueId();\r\n var label = document.createElement('label');\r\n label.appendChild(document.createTextNode(options.label));\r\n label.setAttribute('for',this.element.id);\r\n this.peerElement.appendChild(label);\r\n this.peerElement.appendChild(this.element);\r\n } else{\r\n this.peerElement = this.element;\r\n }\r\n\r\n this.instance = instance;\r\n this.trail = instance.trail;\r\n \r\n this.element.setAttribute( 'tabindex', options.tabIndex );\r\n this.element.style.position = 'absolute';\r\n \r\n // TODO: batch these also if the Scene is batching events\r\n var scene = instance.getScene();\r\n this.clickListener = function PeerClickListener( event ) {\r\n sceneryAccessibilityLog && sceneryAccessibilityLog( 'peer click on ' + instance.toString() + ': ' + instance.getNode().constructor.name );\r\n if ( options.click ) { options.click( event ); }\r\n };\r\n this.focusListener = function PeerFocusListener( event ) {\r\n sceneryAccessibilityLog && sceneryAccessibilityLog( 'peer focused: ' + instance.toString() + ': ' + instance.getNode().constructor.name );\r\n scene.focusPeer( peer );\r\n };\r\n this.blurListener = function PeerBlurListener( event ) {\r\n sceneryAccessibilityLog && sceneryAccessibilityLog( 'peer blurred: ' + instance.toString() + ': ' + instance.getNode().constructor.name );\r\n scene.blurPeer( peer );\r\n };\r\n this.element.addEventListener( 'click', this.clickListener );\r\n this.element.addEventListener( 'focus', this.focusListener );\r\n this.element.addEventListener( 'blur', this.blurListener );\r\n\r\n this.keepPeerBoundsInSync = true;\r\n if ( this.keepPeerBoundsInSync ) {\r\n this.boundsSyncListener = this.syncBounds.bind( this );\r\n\r\n instance.getNode().addEventListener( 'bounds', this.boundsSyncListener );\r\n this.syncBounds();\r\n\r\n //When the scene resizes, update the peer bounds\r\n instance.getScene().addEventListener( 'resize', this.boundsSyncListener );\r\n\r\n //Initial layout\r\n window.setTimeout( this.syncBounds.bind( this ), 30 );\r\n }\r\n };\r\n\r\n AccessibilityPeer.prototype = {\r\n constructor: AccessibilityPeer,\r\n \r\n dispose: function() {\r\n this.element.removeEventListener( 'click', this.clickListener );\r\n this.element.removeEventListener( 'focus', this.focusListener );\r\n this.element.removeEventListener( 'blur', this.blurListener );\r\n \r\n // don't leak memory\r\n if ( this.keepPeerBoundsInSync ) {\r\n this.instance.getNode().removeEventListener( 'bounds', this.boundsSyncListener );\r\n this.instance.getScene().removeEventListener( 'resize', this.boundsSyncListener );\r\n }\r\n },\r\n \r\n getGlobalBounds: function() {\r\n return this.trail.parentToGlobalBounds( this.trail.lastNode().getBounds() ).roundedOut();\r\n },\r\n \r\n syncBounds: function() {\r\n var globalBounds = this.getGlobalBounds();\r\n this.element.style.left = globalBounds.x + 'px';\r\n this.element.style.top = globalBounds.y + 'px';\r\n this.element.style.width = globalBounds.width + 'px';\r\n this.element.style.height = globalBounds.height + 'px';\r\n }\r\n };\r\n \r\n return AccessibilityPeer;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Live region is used with accessibility to read out changes in model state.\r\n * Should conform to the Axon property interface to make it easy to interchange.\r\n *\r\n * @author Sam Reid\r\n */\r\n\r\ndefine( 'SCENERY/util/LiveRegion',['require','PHET_CORE/inherit','PHET_CORE/escapeHTML','SCENERY/scenery'],function( require ) {\r\n 'use strict';\r\n\r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var escapeHTML = require( 'PHET_CORE/escapeHTML' );\r\n\r\n var scenery = require( 'SCENERY/scenery' );\r\n\r\n var LiveRegion = scenery.LiveRegion = function LiveRegion( instance, property, options ) {\r\n var liveRegion = this;\r\n this.property = property;\r\n options = options || {};\r\n\r\n //Defaulting to 0 would mean using the document order, which can easily be incorrect for a PhET simulation.\r\n //For any of the nodes to use a nonzero tabindex, they must all use a nonzero tabindex, see #40\r\n options.tabIndex = options.tabIndex || 1;\r\n\r\n // TODO: if element is a DOM element, verify that no other accessibility liveRegion is using it! (add a flag, and remove on disposal)\r\n// this.element = '

';\r\n this.element = document.createElement( 'div' );\r\n this.element.setAttribute( 'aria-live', 'polite' );\r\n this.element.setAttribute( 'role', 'region' );\r\n this.textNode = document.createTextNode( '' );\r\n this.element.appendChild( this.textNode );\r\n\r\n //Just setting the text causes NVDA to read deltas, you have to replace the node to have it read the text\r\n this.listener = function( newText ) {\r\n liveRegion.element.removeChild( liveRegion.textNode );\r\n liveRegion.textNode = document.createTextNode( newText );\r\n liveRegion.element.appendChild( liveRegion.textNode );\r\n };\r\n property.link( this.listener );\r\n };\r\n\r\n LiveRegion.prototype = {\r\n constructor: scenery.LiveRegion,\r\n dispose: function() { this.property.unlink( this.listener ); }\r\n };\r\n\r\n return LiveRegion;\r\n} );","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * An Instance of a Node in the expanded tree form.\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/util/Instance',['require','SCENERY/scenery','SCENERY/util/AccessibilityPeer','SCENERY/util/LiveRegion'],function( require ) {\r\n \"use strict\";\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n require( 'SCENERY/util/AccessibilityPeer' );\r\n require( 'SCENERY/util/LiveRegion' );\r\n \r\n var accessibility = window.has && window.has( 'scenery.accessibility' );\r\n \r\n // layer should be null if the trail isn't to a painted node\r\n scenery.Instance = function Instance( trail, layer, parent ) {\r\n this.trail = trail; // trail may be assumed to be stale, for performance reasons\r\n this.layer = layer;\r\n this.oldLayer = layer; // used during stitching\r\n \r\n // assertion not enabled, since at the start we don't specify a layer (it will be constructed later)\r\n // sceneryAssert && sceneryAssert( trail.lastNode().isPainted() === ( layer !== null ), 'Has a layer iff is painted' );\r\n \r\n // TODO: SVG layer might want to put data (group/fragment) references here (indexed by layer ID)\r\n this.data = {};\r\n \r\n // TODO: ensure that we can track this? otherwise remove it for memory and speed\r\n this.parent = parent;\r\n this.children = [];\r\n \r\n this.peers = []; // list of AccessibilityPeer instances attached to this trail\r\n this.liveRegions = []; // list of LiveRegion instances attached to this trail\r\n \r\n // TODO: track these? should significantly accelerate subtree-changing operations\r\n this.startAffectedLayer = null;\r\n this.endAffectedLayer = null;\r\n \r\n trail.setImmutable(); // make sure our Trail doesn't change from under us\r\n \r\n if ( accessibility ) {\r\n this.addPeers();\r\n this.addLiveRegions();\r\n }\r\n \r\n phetAllocation && phetAllocation( 'Instance' );\r\n };\r\n var Instance = scenery.Instance;\r\n \r\n Instance.prototype = {\r\n constructor: Instance,\r\n \r\n getScene: function() {\r\n return this.trail.rootNode();\r\n },\r\n get scene() { return this.getScene(); },\r\n \r\n getNode: function() {\r\n return this.trail.lastNode();\r\n },\r\n get node() { return this.getNode(); },\r\n \r\n changeLayer: function( newLayer ) {\r\n // NOTE: DO NOT change _layerTrails somehow in this function. we don't make a defensive copy of that array during stitching!\r\n if ( newLayer !== this.layer ) {\r\n sceneryLayerLog && sceneryLayerLog( 'changing instance ' + this.trail.toString() + ' to layer ' + ( newLayer ? '#' + newLayer.id : 'null' ) );\r\n this.layer && ( this.layer._instanceCount -= 1 );\r\n this.layer = newLayer;\r\n this.layer && ( this.layer._instanceCount += 1 );\r\n }\r\n },\r\n \r\n updateLayer: function() {\r\n if ( this.layer !== this.oldLayer ) {\r\n // we may have stale indices\r\n this.reindex();\r\n \r\n if ( sceneryLayerLog ) {\r\n if ( this.oldLayer && this.layer ) {\r\n sceneryLayerLog( 'moving instance ' + this.trail.toString() + ' from layer #' + this.oldLayer.id + ' to layer #' + this.layer.id );\r\n } else if ( this.layer ) {\r\n sceneryLayerLog( 'adding instance ' + this.trail.toString() + ' to layer #' + this.layer.id );\r\n } else {\r\n sceneryLayerLog( 'remove instance ' + this.trail.toString() + ' from layer #' + this.oldLayer.id );\r\n }\r\n }\r\n if ( this.oldLayer ) {\r\n this.oldLayer.removeInstance( this );\r\n }\r\n if ( this.layer ) {\r\n this.layer.addInstance( this );\r\n }\r\n this.oldLayer = this.layer;\r\n }\r\n },\r\n \r\n createChild: function( childNode, index ) {\r\n var childTrail = this.trail.copy().addDescendant( childNode );\r\n var childInstance = new scenery.Instance( childTrail, null, this );\r\n sceneryLayerLog && sceneryLayerLog( 'Instance.createChild: ' + childInstance.toString() );\r\n this.insertInstance( index, childInstance );\r\n childInstance.getNode().addInstance( childInstance );\r\n \r\n return childInstance;\r\n },\r\n \r\n addInstance: function( instance ) {\r\n sceneryAssert && sceneryAssert( instance, 'Instance.addInstance cannot have falsy parameter' );\r\n this.children.push( instance );\r\n },\r\n \r\n insertInstance: function( index, instance ) {\r\n sceneryAssert && sceneryAssert( instance, 'Instance.insert cannot have falsy instance parameter' );\r\n sceneryAssert && sceneryAssert( index >= 0 && index <= this.children.length, 'Instance.insert has bad index ' + index + ' for length ' + this.children.length );\r\n this.children.splice( index, 0, instance );\r\n },\r\n \r\n removeInstance: function( index ) {\r\n sceneryAssert && sceneryAssert( typeof index === 'number' );\r\n this.children.splice( index, 1 );\r\n },\r\n \r\n reindex: function() {\r\n this.trail.reindex();\r\n },\r\n \r\n // TODO: rename, so that it indicates that it removes the instance from the node\r\n dispose: function() {\r\n if ( this.layer ) {\r\n this.changeLayer( null );\r\n this.updateLayer();\r\n }\r\n this.parent = null;\r\n this.children.length = 0;\r\n this.getNode().removeInstance( this );\r\n \r\n if ( accessibility ) {\r\n this.removePeers();\r\n this.removeLiveRegions();\r\n }\r\n },\r\n \r\n equals: function( other ) {\r\n sceneryAssert && sceneryAssert( ( this === other ) === this.trail.equals( other.trail ), 'We assume a 1-1 mapping from trails to instances' );\r\n return this === other;\r\n },\r\n \r\n // standard -1,0,1 comparison with another instance, as a total ordering from the render order\r\n compare: function( other ) {\r\n return this.trail.compare( other.trail );\r\n },\r\n \r\n getLayerString: function() {\r\n return this.layer ? ( this.layer.getName() + '#' + this.layer.getId() ) : '-';\r\n },\r\n \r\n getTrailString: function() {\r\n return this.trail.toString();\r\n },\r\n \r\n toString: function() {\r\n return '{' + this.getTrailString() + ', ' + this.getLayerString() + '}';\r\n },\r\n \r\n getAffectedLayers: function() {\r\n // TODO: optimize this using pre-recorded versions?\r\n this.reindex();\r\n return this.getScene().affectedLayers( this.trail );\r\n },\r\n \r\n addPeers: function() {\r\n var node = this.getNode();\r\n var scene = this.getScene();\r\n \r\n var len = node._peers.length;\r\n if ( len ) {\r\n for ( var i = 0; i < len; i++ ) {\r\n var desc = node._peers[i];\r\n var peer = new scenery.AccessibilityPeer( this, desc.element, desc.options );\r\n scene.addPeer( peer );\r\n this.peers.push( peer );\r\n }\r\n }\r\n },\r\n \r\n removePeers: function() {\r\n var scene = this.getScene();\r\n \r\n var i = this.peers.length;\r\n while ( i-- ) {\r\n var peer = this.peers[i];\r\n scene.removePeer( peer );\r\n peer.dispose();\r\n }\r\n \r\n this.peers.length = 0; // clear this.peers\r\n },\r\n\r\n addLiveRegions: function() {\r\n var thisInstance = this;\r\n var node = this.getNode();\r\n var scene = this.getScene();\r\n\r\n if ( node._liveRegions.length ) {\r\n _.each( node._liveRegions, function( item ) {\r\n var liveRegion = new scenery.LiveRegion( thisInstance, item.property, item.options );\r\n scene.addLiveRegion( liveRegion );\r\n thisInstance.liveRegions.push( liveRegion );\r\n } );\r\n }\r\n },\r\n\r\n removeLiveRegions: function() {\r\n var scene = this.getScene();\r\n\r\n _.each( this.liveRegions, function( liveRegion ) {\r\n scene.removeLiveRegion( liveRegion );\r\n liveRegion.dispose();\r\n } );\r\n \r\n this.peers.length = 0; // clear this.peers\r\n },\r\n \r\n /*---------------------------------------------------------------------------*\r\n * Events from the Node\r\n *----------------------------------------------------------------------------*/\r\n \r\n notifyVisibilityChange: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyVisibilityChange: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n \r\n var affectedLayers = this.getAffectedLayers();\r\n var i = affectedLayers.length;\r\n while ( i-- ) {\r\n affectedLayers[i].notifyVisibilityChange( this );\r\n }\r\n },\r\n \r\n notifyOpacityChange: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyOpacityChange: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n \r\n var affectedLayers = this.getAffectedLayers();\r\n var i = affectedLayers.length;\r\n while ( i-- ) {\r\n affectedLayers[i].notifyOpacityChange( this );\r\n }\r\n },\r\n \r\n notifyBeforeSelfChange: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyBeforeSelfChange: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n // TODO: Canvas will only need to be notified of these once in-between scene updates\r\n // TODO: walk up the \"tree\" to see if any ancestors did this (in which case we don't need to)\r\n // e.g. this.oldPaint = true, etc.\r\n this.layer.notifyBeforeSelfChange( this );\r\n },\r\n \r\n notifyBeforeSubtreeChange: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyBeforeSubtreeChange: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n \r\n var affectedLayers = this.getAffectedLayers();\r\n var i = affectedLayers.length;\r\n while ( i-- ) {\r\n affectedLayers[i].notifyBeforeSubtreeChange( this );\r\n }\r\n },\r\n \r\n notifyDirtySelfPaint: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyDirtySelfPaint: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n sceneryAssert && sceneryAssert( this.getNode().isPainted(), 'Instance needs to be painted for notifyDirtySelfPaint' );\r\n this.layer.notifyDirtySelfPaint( this );\r\n },\r\n \r\n // TODO: consider special post-transform type?\r\n notifyDirtySubtreePaint: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyDirtySubtreePaint: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n \r\n var affectedLayers = this.getAffectedLayers();\r\n var i = affectedLayers.length;\r\n while ( i-- ) {\r\n affectedLayers[i].notifyDirtySubtreePaint( this );\r\n }\r\n },\r\n \r\n notifyDirtySubtreeBounds: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyDirtySubtreeBounds: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n \r\n var affectedLayers = this.getAffectedLayers();\r\n var i = affectedLayers.length;\r\n while ( i-- ) {\r\n affectedLayers[i].notifyDirtySubtreeBounds( this );\r\n }\r\n },\r\n \r\n notifyTransformChange: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyTransformChange: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n \r\n var affectedLayers = this.getAffectedLayers();\r\n var i = affectedLayers.length;\r\n while ( i-- ) {\r\n affectedLayers[i].notifyTransformChange( this );\r\n }\r\n },\r\n \r\n notifyBoundsAccuracyChange: function() {\r\n sceneryEventLog && sceneryEventLog( 'notifyBoundsAccuracyChange: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n this.layer.notifyBoundsAccuracyChange( this );\r\n },\r\n \r\n notifyStitch: function( match ) {\r\n sceneryEventLog && sceneryEventLog( 'notifyStitch: ' + this.trail.toString() + ' match:' + match + ', ' + this.getLayerString() );\r\n this.getScene().stitch( match );\r\n },\r\n \r\n markForLayerRefresh: function() {\r\n sceneryEventLog && sceneryEventLog( 'markForLayerRefresh: ' + this.trail.toString() + ', ' + this.getLayerString() );\r\n this.getScene().markSceneForLayerRefresh( this );\r\n },\r\n \r\n markForInsertion: function( child, index ) {\r\n sceneryEventLog && sceneryEventLog( 'markForInsertion: ' + this.trail.toString() + ' child:' + child.id + ', index: ' + index + ', ' + this.getLayerString() );\r\n \r\n this.reindex();\r\n this.getScene().markSceneForInsertion( this, child, index );\r\n },\r\n \r\n markForRemoval: function( child, index ) {\r\n sceneryEventLog && sceneryEventLog( 'markForRemoval: ' + this.trail.toString() + ' child:' + child.id + ', index: ' + index + ', ' + this.getLayerString() );\r\n \r\n this.reindex();\r\n this.getScene().markSceneForRemoval( this, child, index );\r\n }\r\n };\r\n \r\n return Instance;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * An interval between two Trails. A trail being null means either 'from the start' or 'to the end', depending\r\n * on whether it is the first or second parameter to the constructor.\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/util/RenderInterval',['require','SCENERY/scenery','SCENERY/util/Trail'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n require( 'SCENERY/util/Trail' );\r\n \r\n // start and end are of type {Trail} or null (indicates all the way to the start / end)\r\n scenery.RenderInterval = function RenderInterval( start, end ) {\r\n sceneryAssert && sceneryAssert( !start || !end || start.compare( end ) <= 0, 'RenderInterval parameters must not be out of order' );\r\n \r\n this.start = start;\r\n this.end = end;\r\n };\r\n var RenderInterval = scenery.RenderInterval;\r\n \r\n // assumes the intervals are disjoint, so we can just compare the start instance\r\n RenderInterval.compareDisjoint = function( x, y ) {\r\n // if they are both falsy, they should be the same\r\n if ( !x.start && !y.start ) { return 0; }\r\n \r\n // otherwise, since we are comparing the starts, null would signify 'before anything'\r\n if ( !x.start || !y.start ) { return x.start ? 1 : -1; }\r\n \r\n // otherwise our standard comparison\r\n return x.start.compare( y.start );\r\n };\r\n \r\n RenderInterval.prototype = {\r\n constructor: RenderInterval,\r\n \r\n reindex: function() {\r\n this.start && this.start.reindex();\r\n this.end && this.end.reindex();\r\n },\r\n \r\n isValidExclusive: function() {\r\n // like construction, but with strict inequality\r\n return !this.start || !this.end || this.start.compare( this.end ) < 0;\r\n },\r\n \r\n /*\r\n * Whether the union of this and the specified interval doesn't include any additional trails, when\r\n * both are treated as exclusive endpoints (exclusive between a and b). We also make the assumption\r\n * that a !== b || a === null for either interval, since otherwise it is not well defined.\r\n */\r\n exclusiveUnionable: function( interval ) {\r\n sceneryAssert && sceneryAssert ( this.isValidExclusive(), 'exclusiveUnionable requires exclusive intervals' );\r\n sceneryAssert && sceneryAssert ( interval.isValidExclusive(), 'exclusiveUnionable requires exclusive intervals' );\r\n return ( !this.start || !interval.end || this.start.compare( interval.end ) === -1 ) &&\r\n ( !this.end || !interval.start || this.end.compare( interval.start ) === 1 );\r\n },\r\n \r\n exclusiveContains: function( trail ) {\r\n sceneryAssert && sceneryAssert( trail );\r\n return ( !this.start || this.start.compare( trail ) < 0 ) && ( !this.end || this.end.compare( trail ) > 0 );\r\n },\r\n \r\n union: function( interval ) {\r\n // falsy checks since if a or b is null, we want that bound to be null\r\n var thisA = ( !this.start || ( interval.start && this.start.compare( interval.start ) === -1 ) );\r\n var thisB = ( !this.end || ( interval.end && this.end.compare( interval.end ) === 1 ) );\r\n \r\n return new RenderInterval(\r\n thisA ? this.start : interval.start,\r\n thisB ? this.end : interval.end\r\n );\r\n },\r\n \r\n toString: function() {\r\n return '[' + ( this.start ? this.start.toString() : this.start ) + ',' + ( this.end ? this.end.toString() : this.end ) + ']';\r\n }\r\n };\r\n \r\n return RenderInterval;\r\n} );\r\n\r\n\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/*\r\n * A pointer is an abstraction that includes a mouse and touch points (and possibly keys).\r\n *\r\n * TODO: add state tracking (dragging/panning/etc.) to pointer for convenience\r\n * TODO: consider an 'active' flag?\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/input/Pointer',['require','SCENERY/scenery'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n scenery.Pointer = function Pointer() {\r\n this.listeners = [];\r\n \r\n phetAllocation && phetAllocation( 'Pointer' );\r\n };\r\n var Pointer = scenery.Pointer;\r\n \r\n Pointer.prototype = {\r\n constructor: Pointer,\r\n \r\n addInputListener: function( listener ) {\r\n sceneryAssert && sceneryAssert( !_.contains( this.listeners, listener ) );\r\n \r\n this.listeners.push( listener );\r\n },\r\n \r\n removeInputListener: function( listener ) {\r\n var index = _.indexOf( this.listeners, listener );\r\n sceneryAssert && sceneryAssert( index !== -1 );\r\n \r\n this.listeners.splice( index, 1 );\r\n }\r\n };\r\n \r\n return Pointer;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Tracks the mouse state\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/input/Mouse',['require','PHET_CORE/inherit','SCENERY/scenery','SCENERY/input/Pointer'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Pointer = require( 'SCENERY/input/Pointer' ); // inherits from Pointer\r\n \r\n scenery.Mouse = function Mouse() {\r\n Pointer.call( this );\r\n \r\n this.point = null;\r\n \r\n this.leftDown = false;\r\n this.middleDown = false;\r\n this.rightDown = false;\r\n \r\n this.isMouse = true;\r\n \r\n this.trail = null;\r\n \r\n this.type = 'mouse';\r\n };\r\n var Mouse = scenery.Mouse;\r\n \r\n inherit( Pointer, Mouse, {\r\n down: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n switch( event.button ) {\r\n case 0: this.leftDown = true; break;\r\n case 1: this.middleDown = true; break;\r\n case 2: this.rightDown = true; break;\r\n }\r\n },\r\n \r\n up: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n switch( event.button ) {\r\n case 0: this.leftDown = false; break;\r\n case 1: this.middleDown = false; break;\r\n case 2: this.rightDown = false; break;\r\n }\r\n },\r\n \r\n move: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n over: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n out: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n // TODO: how to handle the mouse out-of-bounds\r\n this.point = null;\r\n },\r\n \r\n toString: function() {\r\n return 'Mouse';\r\n }\r\n } );\r\n \r\n return Mouse;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Tracks a single touch point\r\n *\r\n * IE guidelines for Touch-friendly sites: http://blogs.msdn.com/b/ie/archive/2012/04/20/guidelines-for-building-touch-friendly-sites.aspx\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/input/Touch',['require','PHET_CORE/inherit','SCENERY/scenery','SCENERY/input/Pointer'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Pointer = require( 'SCENERY/input/Pointer' ); // extends Pointer\r\n \r\n scenery.Touch = function Touch( id, point, event ) {\r\n Pointer.call( this );\r\n \r\n this.id = id;\r\n this.point = point;\r\n this.isTouch = true;\r\n this.trail = null;\r\n \r\n this.type = 'touch';\r\n };\r\n var Touch = scenery.Touch;\r\n \r\n inherit( Pointer, Touch, {\r\n move: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n end: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n cancel: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n toString: function() {\r\n return 'Touch#' + this.id;\r\n }\r\n } );\r\n \r\n return Touch;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Tracks a stylus ('pen') or something with tilt and pressure information\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/input/Pen',['require','PHET_CORE/inherit','SCENERY/scenery','SCENERY/input/Pointer'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Pointer = require( 'SCENERY/input/Pointer' ); // extends Pointer\r\n \r\n scenery.Pen = function Pen( id, point, event ) {\r\n Pointer.call( this );\r\n \r\n this.id = id;\r\n this.point = point;\r\n this.isPen = true;\r\n this.trail = null;\r\n \r\n this.type = 'pen';\r\n };\r\n var Pen = scenery.Pen;\r\n \r\n inherit( Pointer, Pen, {\r\n move: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n end: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n cancel: function( point, event ) {\r\n // if ( this.point ) { this.point.freeToPool(); }\r\n this.point = point;\r\n },\r\n \r\n toString: function() {\r\n return 'Pen#' + this.id;\r\n }\r\n } );\r\n \r\n return Pen;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * Tracks a single key-press\r\n *\r\n * TODO: general key-press implementation\r\n * TODO: consider separate handling for keys in general.\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/input/Key',['require','PHET_CORE/inherit','SCENERY/scenery','SCENERY/input/Pointer'],function( require ) {\r\n 'use strict';\r\n \r\n var inherit = require( 'PHET_CORE/inherit' );\r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n var Pointer = require( 'SCENERY/input/Pointer' ); // Inherits from Pointer\r\n \r\n scenery.Key = function Key( event ) {\r\n Pointer.call( this );\r\n \r\n this.event = event; // event.keyCode event.charCode\r\n this.isKey = true; // compared to isMouse/isPen/isTouch\r\n this.trail = null;\r\n this.type = 'key';\r\n };\r\n var Key = scenery.Key;\r\n \r\n inherit( Pointer, Key, {\r\n \r\n } );\r\n \r\n return Key;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/*\r\n * An event in Scenery that has similar event-handling characteristics to DOM events.\r\n * The original DOM event (if any) is available as event.domEvent.\r\n *\r\n * Multiple events can be triggered by a single domEvent, so don't assume it is unique.\r\n *\r\n * @author Jonathan Olson \r\n */\r\n \r\ndefine( 'SCENERY/input/Event',['require','SCENERY/scenery'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n scenery.Event = function Event( args ) {\r\n // ensure that all of the required args are supplied\r\n sceneryAssert && sceneryAssert( args.trail &&\r\n args.type &&\r\n args.pointer &&\r\n args.target, 'Missing required scenery.Event argument' );\r\n \r\n this.handled = false;\r\n this.aborted = false;\r\n \r\n // {Trail} path to the leaf-most node, ordered list, from root to leaf\r\n this.trail = args.trail;\r\n \r\n // {String} what event was triggered on the listener\r\n this.type = args.type;\r\n \r\n // {Pointer}\r\n this.pointer = args.pointer;\r\n \r\n // raw DOM InputEvent (TouchEvent, PointerEvent, MouseEvent,...)\r\n this.domEvent = args.domEvent;\r\n \r\n // {Node} whatever node you attached the listener to, or null when firing events on a Pointer\r\n this.currentTarget = args.currentTarget;\r\n \r\n // {Node} leaf-most node in trail\r\n this.target = args.target;\r\n \r\n // TODO: add extended information based on an event here?\r\n };\r\n var Event = scenery.Event;\r\n \r\n Event.prototype = {\r\n constructor: Event,\r\n \r\n // like DOM Event.stopPropagation(), but named differently to indicate it doesn't fire that behavior on the underlying DOM event\r\n handle: function() {\r\n this.handled = true;\r\n },\r\n \r\n // like DOM Event.stopImmediatePropagation(), but named differently to indicate it doesn't fire that behavior on the underlying DOM event\r\n abort: function() {\r\n this.handled = true;\r\n this.aborted = true;\r\n }\r\n };\r\n \r\n return Event;\r\n} );\r\n","\n// Copyright 2002-2013, University of Colorado\r\n\r\n/**\r\n * API for handling mouse / touch / keyboard events.\r\n *\r\n * A 'pointer' is an abstract way of describing either the mouse, a single touch point, or a key being pressed.\r\n * touch points and key presses go away after being released, whereas the mouse 'pointer' is persistent.\r\n *\r\n * Events will be called on listeners with a single event object. Supported event types are:\r\n * 'up', 'down', 'out', 'over', 'enter', 'exit', 'move', and 'cancel'. Scenery also supports more specific event\r\n * types that constrain the type of pointer, so 'mouse' + type, 'touch' + type and 'pen' + type will fire\r\n * on each listener before the generic event would be fined. E.g. for mouse movement, listener.mousemove will be\r\n * fired before listener.move.\r\n *\r\n * DOM Level 3 events spec: http://www.w3.org/TR/DOM-Level-3-Events/\r\n * Touch events spec: http://www.w3.org/TR/touch-events/\r\n * Pointer events spec draft: https://dvcs.w3.org/hg/pointerevents/raw-file/tip/pointerEvents.html\r\n *\r\n * @author Jonathan Olson \r\n */\r\n\r\ndefine( 'SCENERY/input/Input',['require','SCENERY/scenery','SCENERY/util/Trail','SCENERY/input/Mouse','SCENERY/input/Touch','SCENERY/input/Pen','SCENERY/input/Key','SCENERY/input/Event'],function( require ) {\r\n 'use strict';\r\n \r\n var scenery = require( 'SCENERY/scenery' );\r\n \r\n require( 'SCENERY/util/Trail' );\r\n require( 'SCENERY/input/Mouse' );\r\n require( 'SCENERY/input/Touch' );\r\n require( 'SCENERY/input/Pen' );\r\n require( 'SCENERY/input/Key' );\r\n require( 'SCENERY/input/Event' );\r\n \r\n // listenerTarget is the DOM node (window/document/element) to which DOM event listeners will be attached\r\n scenery.Input = function Input( scene, listenerTarget, batchDOMEvents ) {\r\n this.scene = scene;\r\n this.listenerTarget = listenerTarget;\r\n this.batchDOMEvents = batchDOMEvents;\r\n \r\n this.batchedCallbacks = []; // cleared every frame\r\n\r\n //Pointer for mouse, only created lazily on first mouse event, so no mouse is allocated on tablets\r\n this.mouse = null;\r\n\r\n this.pointers = [];\r\n \r\n this.listenerReferences = [];\r\n \r\n this.eventLog = []; // written when recording event input. can be overwritten to the empty array to reset. Strings relative to this class (prefix \"scene.input.\")\r\n this.logEvents = false; // can be set to true to cause Scenery to record all input calls to eventLog\r\n\r\n this.pointerAddedListeners = [];\r\n };\r\n var Input = scenery.Input;\r\n \r\n Input.prototype = {\r\n constructor: Input,\r\n\r\n addPointer: function( pointer ) {\r\n this.pointers.push( pointer );\r\n\r\n //Callback for showing pointer events. Optimized for performance.\r\n if ( this.pointerAddedListeners.length ) {\r\n for ( var i = 0; i < this.pointerAddedListeners.length; i++ ) {\r\n this.pointerAddedListeners[i]( pointer );\r\n }\r\n }\r\n },\r\n\r\n addPointerAddedListener:function(listener){\r\n this.pointerAddedListeners.push(listener);\r\n },\r\n\r\n removePointerAddedListener:function(listener){\r\n var index = this.pointerAddedListeners.indexOf( listener );\r\n if ( index !== -1 ) {\r\n this.pointerAddedListeners.splice( index, index + 1 );\r\n }\r\n },\r\n \r\n removePointer: function( pointer ) {\r\n // sanity check version, will remove all instances\r\n for ( var i = this.pointers.length - 1; i >= 0; i-- ) {\r\n if ( this.pointers[i] === pointer ) {\r\n this.pointers.splice( i, 1 );\r\n }\r\n }\r\n },\r\n \r\n findTouchById: function( id ) {\r\n var i = this.pointers.length;\r\n while ( i-- ) {\r\n var pointer = this.pointers[i];\r\n if ( pointer.id === id ) {\r\n return pointer;\r\n }\r\n }\r\n return undefined;\r\n },\r\n \r\n findKeyByEvent: function( event ) {\r\n sceneryAssert && sceneryAssert( event.keyCode && event.charCode, 'Assumes the KeyboardEvent has keyCode and charCode properties' );\r\n var result = _.find( this.pointers, function( pointer ) {\r\n // TODO: also check location (if that exists), so we don't mix up left and right shift, etc.\r\n return pointer.keyCode === event.keyCode && pointer.charCode === event.charCode;\r\n } );\r\n // sceneryAssert && sceneryAssert( result, 'No key found for the combination of key:' + event.key + ' and location:' + event.location );\r\n return result;\r\n },\r\n\r\n //Init the mouse on the first mouse event (if any!)\r\n initMouse: function() {\r\n this.mouse = new scenery.Mouse();\r\n this.addPointer( this.mouse );\r\n },\r\n \r\n mouseDown: function( point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'mouseDown(' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n if ( !this.mouse ) { this.initMouse(); }\r\n this.mouse.down( point, event );\r\n this.downEvent( this.mouse, event );\r\n },\r\n \r\n mouseUp: function( point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'mouseUp(' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n if ( !this.mouse ) { this.initMouse(); }\r\n this.mouse.up( point, event );\r\n this.upEvent( this.mouse, event );\r\n },\r\n \r\n mouseUpImmediate: function( point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'mouseUpImmediate(' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n if ( !this.mouse ) { this.initMouse(); }\r\n this.upImmediateEvent( this.mouse, event );\r\n },\r\n \r\n mouseMove: function( point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'mouseMove(' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n if ( !this.mouse ) { this.initMouse(); }\r\n this.mouse.move( point, event );\r\n this.moveEvent( this.mouse, event );\r\n },\r\n \r\n mouseOver: function( point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'mouseOver(' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n if ( !this.mouse ) { this.initMouse(); }\r\n this.mouse.over( point, event );\r\n // TODO: how to handle mouse-over (and log it)\r\n },\r\n \r\n mouseOut: function( point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'mouseOut(' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n if ( !this.mouse ) { this.initMouse(); }\r\n this.mouse.out( point, event );\r\n // TODO: how to handle mouse-out (and log it)\r\n },\r\n \r\n keyDown: function( event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'keyDown(' + Input.serializeDomEvent( event ) + ');' ); }\r\n var key = new scenery.Key( event );\r\n this.addPointer( key );\r\n \r\n var trail = this.scene.getTrailFromKeyboardFocus();\r\n this.dispatchEvent( trail, 'keyDown', key, event, true );\r\n },\r\n \r\n keyUp: function( event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'keyUp(' + Input.serializeDomEvent( event ) + ');' ); }\r\n var key = this.findKeyByEvent( event );\r\n if ( key ) {\r\n this.removePointer( key );\r\n \r\n var trail = this.scene.getTrailFromKeyboardFocus();\r\n this.dispatchEvent( trail, 'keyUp', key, event, true );\r\n }\r\n },\r\n \r\n keyPress: function( event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'keyPress(' + Input.serializeDomEvent( event ) + ');' ); }\r\n // NOTE: do we even need keyPress?\r\n },\r\n \r\n // called for each touch point\r\n touchStart: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'touchStart(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var touch = new scenery.Touch( id, point, event );\r\n this.addPointer( touch );\r\n this.downEvent( touch, event );\r\n },\r\n \r\n touchEnd: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'touchEnd(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var touch = this.findTouchById( id );\r\n if ( touch ) {\r\n touch.end( point, event );\r\n this.removePointer( touch );\r\n this.upEvent( touch, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Touch not found for touchEnd: ' + id );\r\n }\r\n },\r\n \r\n touchEndImmediate: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'touchEndImmediate(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var touch = this.findTouchById( id );\r\n if ( touch ) {\r\n this.upImmediateEvent( touch, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Touch not found for touchEndImmediate: ' + id );\r\n }\r\n },\r\n \r\n touchMove: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'touchMove(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var touch = this.findTouchById( id );\r\n if ( touch ) {\r\n touch.move( point, event );\r\n this.moveEvent( touch, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Touch not found for touchMove: ' + id );\r\n }\r\n },\r\n \r\n touchCancel: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'touchCancel(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var touch = this.findTouchById( id );\r\n if ( touch ) {\r\n touch.cancel( point, event );\r\n this.removePointer( touch );\r\n this.cancelEvent( touch, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Touch not found for touchCancel: ' + id );\r\n }\r\n },\r\n \r\n // called for each touch point\r\n penStart: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'penStart(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var pen = new scenery.Pen( id, point, event );\r\n this.addPointer( pen );\r\n this.downEvent( pen, event );\r\n },\r\n \r\n penEnd: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'penEnd(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var pen = this.findTouchById( id );\r\n if ( pen ) {\r\n pen.end( point, event );\r\n this.removePointer( pen );\r\n this.upEvent( pen, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Pen not found for penEnd: ' + id );\r\n }\r\n },\r\n \r\n penEndImmediate: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'penEndImmediate(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var pen = this.findTouchById( id );\r\n if ( pen ) {\r\n this.upImmediateEvent( pen, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Pen not found for penEndImmediate: ' + id );\r\n }\r\n },\r\n \r\n penMove: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'penMove(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var pen = this.findTouchById( id );\r\n if ( pen ) {\r\n pen.move( point, event );\r\n this.moveEvent( pen, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Pen not found for penMove: ' + id );\r\n }\r\n },\r\n \r\n penCancel: function( id, point, event ) {\r\n if ( this.logEvents ) { this.eventLog.push( 'penCancel(\\'' + id + '\\',' + Input.serializeVector2( point ) + ',' + Input.serializeDomEvent( event ) + ');' ); }\r\n var pen = this.findTouchById( id );\r\n if ( pen ) {\r\n pen.cancel( point, event );\r\n this.removePointer( pen );\r\n this.cancelEvent( pen, event );\r\n } else {\r\n sceneryAssert && sceneryAssert( false, 'Pen not found for penCancel: ' + id );\r\n }\r\n },\r\n \r\n pointerDown: function( id, type, point, event ) {\r\n switch ( type ) {\r\n case 'mouse':\r\n this.mouseDown( point, event );\r\n break;\r\n case 'touch':\r\n this.touchStart( id, point, event );\r\n break;\r\n case 'pen':\r\n this.penStart( id, point, event );\r\n break;\r\n default:\r\n if ( console.log ) {\r\n console.log( 'Unknown pointer type: ' + type );\r\n }\r\n }\r\n },\r\n \r\n pointerUp: function( id, type, point, event ) {\r\n switch ( type ) {\r\n case 'mouse':\r\n this.mouseUp( point, event );\r\n break;\r\n case 'touch':\r\n this.touchEnd( id, point, event );\r\n break;\r\n case 'pen':\r\n this.penEnd( id, point, event );\r\n break;\r\n default:\r\n if ( console.log ) {\r\n console.log( 'Unknown pointer type: ' + type );\r\n }\r\n }\r\n },\r\n \r\n pointerUpImmediate: function( id, type, point, event ) {\r\n switch ( type ) {\r\n case 'mouse':\r\n this.mouseUpImmediate( point, event );\r\n break;\r\n case 'touch':\r\n this.touchEndImmediate( id, point, event );\r\n break;\r\n case 'pen':\r\n this.penEndImmediate( id, point, event );\r\n break;\r\n default:\r\n if ( console.log ) {\r\n console.log( 'Unknown pointer type: ' + type );\r\n }\r\n }\r\n },\r\n \r\n pointerCancel: function( id, type, point, event ) {\r\n switch ( type ) {\r\n case 'mouse':\r\n if ( console && console.log ) {\r\n console.log( 'WARNING: Pointer mouse cancel was received' );\r\n }\r\n break;\r\n case 'touch':\r\n this.touchCancel( id, point, event );\r\n break;\r\n case 'pen':\r\n this.penCancel( id, point, event );\r\n break;\r\n default:\r\n if ( console.log ) {\r\n console.log( 'Unknown pointer type: ' + type );\r\n }\r\n }\r\n },\r\n \r\n pointerMove: function( id, type, point, event ) {\r\n switch ( type ) {\r\n case 'mouse':\r\n this.mouseMove( point, event );\r\n break;\r\n case 'touch':\r\n this.touchMove( id, point, event );\r\n break;\r\n case 'pen':\r\n this.penMove( id, point, event );\r\n break;\r\n default:\r\n if ( console.log ) {\r\n console.log( 'Unknown pointer type: ' + type );\r\n }\r\n }\r\n },\r\n \r\n pointerOver: function( id, type, point, event ) {\r\n \r\n },\r\n \r\n pointerOut: function( id, type, point, event ) {\r\n \r\n },\r\n \r\n pointerEnter: function( id, type, point, event ) {\r\n \r\n },\r\n \r\n pointerLeave: function( id, type, point, event ) {\r\n \r\n },\r\n \r\n upEvent: function( pointer, event ) {\r\n var trail = this.scene.trailUnderPointer( pointer ) || new scenery.Trail( this.scene );\r\n \r\n this.dispatchEvent( trail, 'up', pointer, event, true );\r\n \r\n // touch pointers are transient, so fire exit/out to the trail afterwards\r\n if ( pointer.isTouch ) {\r\n this.exitEvents( pointer, event, trail, 0, true );\r\n }\r\n \r\n pointer.trail = trail;\r\n },\r\n \r\n upImmediateEvent: function( pointer, event ) {\r\n var trail = this.scene.trailUnderPointer( pointer ) || new scenery.Trail( this.scene );\r\n \r\n this.dispatchEvent( trail, 'upImmediate', pointer, event, true );\r\n },\r\n \r\n downEvent: function( pointer, event ) {\r\n var trail = this.scene.trailUnderPointer( pointer ) || new scenery.Trail( this.scene );\r\n \r\n // touch pointers are transient, so fire enter/over to the trail first\r\n if ( pointer.isTouch ) {\r\n this.enterEvents( pointer, event, trail, 0, true );\r\n }\r\n \r\n this.dispatchEvent( trail, 'down', pointer, event, true );\r\n \r\n pointer.trail = trail;\r\n },\r\n \r\n moveEvent: function( pointer, event ) {\r\n this.branchChangeEvents( pointer, event, true );\r\n },\r\n \r\n cancelEvent: function( pointer, event ) {\r\n var trail = this.scene.trailUnderPointer( pointer ) || new scenery.Trail( this.scene );\r\n \r\n this.dispatchEvent( trail, 'cancel', pointer, event, true );\r\n \r\n // touch pointers are transient, so fire exit/out to the trail afterwards\r\n if ( pointer.isTouch ) {\r\n this.exitEvents( pointer, event, trail, 0, true );\r\n }\r\n \r\n pointer.trail = trail;\r\n },\r\n \r\n branchChangeEvents: function( pointer, event, isMove ) {\r\n var trail = this.scene.trailUnderPointer( pointer ) || new scenery.Trail( this.scene );\r\n var oldTrail = pointer.trail || new scenery.Trail( this.scene ); // TODO: consider a static trail reference\r\n \r\n var lastNodeChanged = oldTrail.lastNode() !== trail.lastNode();\r\n if ( !lastNodeChanged && !isMove ) {\r\n // bail out if nothing needs to be done\r\n return;\r\n }\r\n \r\n var branchIndex;\r\n \r\n for ( branchIndex = 0; branchIndex < Math.min( trail.length, oldTrail.length ); branchIndex++ ) {\r\n if ( trail.nodes[branchIndex] !== oldTrail.nodes[branchIndex] ) {\r\n break;\r\n }\r\n }\r\n \r\n // event order matches http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order\r\n if ( isMove ) {\r\n this.dispatchEvent( trail, 'move', pointer, event, true );\r\n }\r\n \r\n // we want to approximately mimic http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order\r\n // TODO: if a node gets moved down 1 depth, it may see both an exit and enter?\r\n this.exitEvents( pointer, event, oldTrail, branchIndex, lastNodeChanged );\r\n this.enterEvents( pointer, event, trail, branchIndex, lastNodeChanged );\r\n \r\n pointer.trail = trail;\r\n },\r\n \r\n enterEvents: function( pointer, event, trail, branchIndex, lastNodeChanged ) {\r\n if ( trail.length > branchIndex ) {\r\n for ( var newIndex = trail.length - 1; newIndex >= branchIndex; newIndex-- ) {\r\n this.dispatchEvent( trail.slice( 0, newIndex + 1 ), 'enter', pointer, event, false );\r\n }\r\n }\r\n \r\n if ( lastNodeChanged ) {\r\n this.dispatchEvent( trail, 'over', pointer, event, true );\r\n }\r\n },\r\n \r\n exitEvents: function( pointer, event, trail, branchIndex, lastNodeChanged ) {\r\n if ( lastNodeChanged ) {\r\n this.dispatchEvent( trail, 'out', pointer, event, true );\r\n }\r\n \r\n if ( trail.length > branchIndex ) {\r\n for ( var oldIndex = branchIndex; oldIndex < trail.length; oldIndex++ ) {\r\n this.dispatchEvent( trail.slice( 0, oldIndex + 1 ), 'exit', pointer, event, false );\r\n }\r\n }\r\n },\r\n \r\n validatePointers: function() {\r\n var that = this;\r\n \r\n var i = this.pointers.length;\r\n while ( i-- ) {\r\n var pointer = this.pointers[i];\r\n if ( pointer.point ) {\r\n that.branchChangeEvents( pointer, null, false );\r\n }\r\n }\r\n },\r\n \r\n dispatchEvent: function( trail, type, pointer, event, bubbles ) {\r\n sceneryEventLog && sceneryEventLog( 'Input: ' + type + ' on ' + trail.toString() + ' for pointer ' + pointer.toString() );\r\n if ( !trail ) {\r\n try {\r\n throw new Error( 'falsy trail for dispatchEvent' );\r\n } catch ( e ) {\r\n console.log( e.stack );\r\n throw e;\r\n }\r\n }\r\n \r\n // TODO: is there a way to make this event immutable?\r\n var inputEvent = new scenery.Event( {\r\n trail: trail, // {Trail} path to the leaf-most node, ordered list, from root to leaf\r\n type: type, // {String} what event was triggered on the listener\r\n pointer: pointer, // {Pointer}\r\n domEvent: event, // raw DOM InputEvent (TouchEvent, PointerEvent, MouseEvent,...)\r\n currentTarget: null, // {Node} whatever node you attached the listener to, null when passed to a Pointer,\r\n target: trail.lastNode() // {Node} leaf-most node in trail\r\n } );\r\n \r\n // first run through the pointer's listeners to see if one of them will handle the event\r\n this.dispatchToPointer( type, pointer, inputEvent );\r\n \r\n // if not yet handled, run through the trail in order to see if one of them will handle the event\r\n // at the base of the trail should be the scene node, so the scene will be notified last\r\n this.dispatchToTargets( trail, pointer, type, inputEvent, bubbles );\r\n \r\n // TODO: better interactivity handling?\r\n if ( !trail.lastNode().interactive && !pointer.isKey && event && event.preventDefault ) {\r\n event.preventDefault();\r\n }\r\n },\r\n \r\n // TODO: reduce code sharing between here and dispatchToTargets!\r\n dispatchToPointer: function( type, pointer, inputEvent ) {\r\n if ( inputEvent.aborted || inputEvent.handled ) {\r\n return;\r\n }\r\n \r\n var specificType = pointer.type + type; // e.g. mouseup, touchup, keyup\r\n \r\n var pointerListeners = pointer.listeners.slice( 0 ); // defensive copy\r\n for ( var i = 0; i < pointerListeners.length; i++ ) {\r\n var listener = pointerListeners[i];\r\n \r\n // if a listener returns true, don't handle any more\r\n var aborted = false;\r\n \r\n if ( !aborted && listener[specificType] ) {\r\n listener[specificType]( inputEvent );\r\n aborted = inputEvent.aborted;\r\n }\r\n if ( !aborted && listener[type] ) {\r\n listener[type]( inputEvent );\r\n aborted = inputEvent.aborted;\r\n }\r\n \r\n // bail out if the event is aborted, so no other listeners are triggered\r\n if ( aborted ) {\r\n return;\r\n }\r\n }\r\n },\r\n \r\n dispatchToTargets: function( trail, pointer, type, inputEvent, bubbles ) {\r\n if ( inputEvent.aborted || inputEvent.handled ) {\r\n return;\r\n }\r\n \r\n var specificType = pointer.type + type; // e.g. mouseup, touchup, keyup\r\n \r\n for ( var i = trail.length - 1; i >= 0; bubbles ? i-- : i = -1 ) {\r\n var target = trail.nodes[i];\r\n inputEvent.currentTarget = target;\r\n \r\n var listeners = target.getInputListeners();\r\n \r\n for ( var k = 0; k < listeners.length; k++ ) {\r\n var listener = listeners[k];\r\n \r\n // if a listener returns true, don't handle any more\r\n var aborted = false;\r\n \r\n if ( !aborted && listener[specificType] ) {\r\n listener[specificType]( inputEvent );\r\n aborted = inputEvent.aborted;\r\n }\r\n if ( !aborted && listener[type] ) {\r\n listener[type]( inputEvent );\r\n aborted = inputEvent.aborted;\r\n }\r\n \r\n // bail out if the event is aborted, so no other listeners are triggered\r\n if ( aborted ) {\r\n return;\r\n }\r\n }\r\n \r\n // if the input event was handled, don't follow the trail down another level\r\n if ( inputEvent.handled ) {\r\n return;\r\n }\r\n }\r\n },\r\n \r\n addListener: function( type, callback, useCapture ) {\r\n var input = this;\r\n \r\n //Cancel propagation of mouse events but not key events. Key Events need to propagate for tab navigability\r\n var usePreventDefault = type !== 'keydown' && type !== 'keyup' && type !== 'keypress';\r\n \r\n if ( this.batchDOMEvents ) {\r\n var batchedCallback = function batchedEvent( domEvent ) {\r\n sceneryEventLog && sceneryEventLog( 'Batching event for ' + type );\r\n \r\n if ( usePreventDefault ) {\r\n domEvent.preventDefault(); // TODO: should we batch the events in a different place so we don't preventDefault on something bad?\r\n }\r\n input.batchedCallbacks.push( function batchedEventCallback() {\r\n // process whether anything under the pointers changed before running additional input events\r\n input.validatePointers();\r\n if ( input.logEvents ) { input.eventLog.push( 'validatePointers();' ); }\r\n \r\n callback( domEvent );\r\n } );\r\n };\r\n this.listenerTarget.addEventListener( type, batchedCallback, useCapture );\r\n this.listenerReferences.push( { type: type, callback: batchedCallback, useCapture: useCapture } );\r\n } else {\r\n this.listenerTarget.addEventListener( type, callback, useCapture );\r\n this.listenerReferences.push( { type: type, callback: function synchronousEvent( domEvent ) {\r\n sceneryEventLog && sceneryEventLog( 'Running event for ' + type );\r\n \r\n