diff --git a/js/friction/view/magnifier/MagnifierNode.js b/js/friction/view/magnifier/MagnifierNode.js index bd563556..15c5d1da 100644 --- a/js/friction/view/magnifier/MagnifierNode.js +++ b/js/friction/view/magnifier/MagnifierNode.js @@ -51,6 +51,11 @@ define( function( require ) { lineWidth: 2 }; + var WIDTH = 690; + var HEIGHT = 300; + var ROUND = 30; + var SCALE = 0.05; + /** * @param {FrictionModel} model * @param {number} targetX - x position of the MagnifierTargetNode rectangle @@ -62,57 +67,52 @@ define( function( require ) { function MagnifierNode( model, targetX, targetY, title, options ) { Node.call( this, options ); - // main params - // TODO: eliminate this - this.param = { - width: 690, - height: 300, - round: 30, - scale: 0.05, - topAtoms: { - atoms: model.atoms.top, - x: 50, - - // {Node} - target: null - }, - bottomAtoms: { - atoms: model.atoms.bottom, - x: 50, - - // {Node} - target: null - } + // @private + this.topAtoms = { + atoms: model.atoms.top, + x: 50, + y: HEIGHT / 3 - model.atoms.distance, + + // {Node} + target: null + }; + + // @private + this.bottomAtoms = { + atoms: model.atoms.bottom, + x: 50, + y: 2 * HEIGHT / 3, + + // {Node} + target: null }; - this.param.topAtoms.y = this.param.height / 3 - model.atoms.distance; - this.param.bottomAtoms.y = 2 * this.param.height / 3; // add container for clipping this.container = new Node(); this.addChild( this.container ); - // add container where the individual atoms will be placed - // TODO: visibility annotations + // @private - container where the individual atoms will be placed this.bottomAtomsLayer = new Node(); + + // @private - container where the individual atoms will be placed this.topAtomsLayer = new Node(); // arrow icon var arrowIcon = new Node(); arrowIcon.addChild( new ArrowNode( INTER_ARROW_SPACING / 2, 0, ARROW_LENGTH, 0, ARROW_OPTIONS ) ); arrowIcon.addChild( new ArrowNode( -INTER_ARROW_SPACING / 2, 0, -ARROW_LENGTH, 0, ARROW_OPTIONS ) ); - arrowIcon.mutate( { centerX: this.param.width / 2, centerY: this.param.topAtoms.y / 2 } ); + arrowIcon.mutate( { centerX: WIDTH / 2, centerY: this.topAtoms.y / 2 } ); - // add bottom book - // TODO: visibility annotation + // @private - add bottom book this.bottomBookBackground = new Node( { children: [ new Rectangle( 3, - 2 * this.param.height / 3 - 2, - this.param.width - 6, - this.param.height / 3, + 2 * HEIGHT / 3 - 2, + WIDTH - 6, + HEIGHT / 3, 0, - this.param.round - 3, + ROUND - 3, { fill: FrictionConstants.BOTTOM_BOOK_COLOR } ) ] @@ -120,23 +120,22 @@ define( function( require ) { this.addRowCircles( model, this.bottomBookBackground, { color: FrictionConstants.BOTTOM_BOOK_COLOR, x: -model.atoms.distanceX / 2, - y: 2 * this.param.height / 3 - 2, - width: this.param.width + y: 2 * HEIGHT / 3 - 2, + width: WIDTH } ); - this.param.bottomAtoms.target = this.bottomAtomsLayer; + this.bottomAtoms.target = this.bottomAtomsLayer; this.container.addChild( this.bottomBookBackground ); - // add top book - // TODO: visibility annotation + // @private - add top book this.topBookBackground = new Node(); // init drag for background var background = new Rectangle( - -1.125 * this.param.width, - -this.param.height, 3.25 * this.param.width, - 4 * this.param.height / 3 - model.atoms.distance, - this.param.round, - this.param.round, { + -1.125 * WIDTH, + -HEIGHT, 3.25 * WIDTH, + 4 * HEIGHT / 3 - model.atoms.distance, + ROUND, + ROUND, { fill: FrictionConstants.TOP_BOOK_COLOR, cursor: 'pointer' } ); @@ -145,9 +144,9 @@ define( function( require ) { // init drag for drag area var dragArea = new Rectangle( - 0.055 * this.param.width, - 0.175 * this.param.height, - 0.875 * this.param.width, + 0.055 * WIDTH, + 0.175 * HEIGHT, + 0.875 * WIDTH, model.atoms.distanceY * 6, { fill: null, cursor: 'pointer', @@ -190,11 +189,11 @@ define( function( require ) { this.addRowCircles( model, this.topBookBackground, { color: FrictionConstants.TOP_BOOK_COLOR, - x: -this.param.width, - y: this.param.height / 3 - model.atoms.distance, - width: 3 * this.param.width + x: -WIDTH, + y: HEIGHT / 3 - model.atoms.distance, + width: 3 * WIDTH } ); - this.param.topAtoms.target = this.topAtomsLayer; + this.topAtoms.target = this.topAtomsLayer; // a11y - add the focus highlight on top of the row circles this.topBookBackground.addChild( focusHighlightPath ); @@ -205,30 +204,31 @@ define( function( require ) { var topPadding = 500; var sidePadding = 800; var bottomPadding = 60; - var rightX = this.param.width + sidePadding; + var rightX = WIDTH + sidePadding; var leftX = -sidePadding; var topY = -topPadding; - var bottomY = this.param.height + bottomPadding; - var innerLowX = this.param.round; - var innerHighX = this.param.width - this.param.round; - var innerLowY = this.param.round; - var innerHighY = this.param.height - this.param.round; + var bottomY = HEIGHT + bottomPadding; + var innerLowX = ROUND; + var innerHighX = WIDTH - ROUND; + var innerLowY = ROUND; + var innerHighY = HEIGHT - ROUND; this.addChild( new Path( new Shape().moveTo( rightX, topY ) - .lineTo( leftX, topY ) - .lineTo( leftX, bottomY ) - .lineTo( rightX, bottomY ) - .lineTo( rightX, topY ) - .lineTo( innerHighX, innerLowY - this.param.round ) - .arc( innerHighX, innerLowY, this.param.round, -Math.PI / 2, 0, false ) - .arc( innerHighX, innerHighY, this.param.round, 0, Math.PI / 2, false ) - .arc( innerLowX, innerHighY, this.param.round, Math.PI / 2, Math.PI, false ) - .arc( innerLowX, innerLowY, this.param.round, Math.PI, Math.PI * 3 / 2, false ) - .lineTo( innerHighX, innerLowY - this.param.round ) - .close(), - { fill: 'white' } ) ); + .lineTo( leftX, topY ) + .lineTo( leftX, bottomY ) + .lineTo( rightX, bottomY ) + .lineTo( rightX, topY ) + .lineTo( innerHighX, innerLowY - ROUND ) + .arc( innerHighX, innerLowY, ROUND, -Math.PI / 2, 0, false ) + .arc( innerHighX, innerHighY, ROUND, 0, Math.PI / 2, false ) + .arc( innerLowX, innerHighY, ROUND, Math.PI / 2, Math.PI, false ) + .arc( innerLowX, innerLowY, ROUND, Math.PI, Math.PI * 3 / 2, false ) + .lineTo( innerHighX, innerLowY - ROUND ) + .close(), { + fill: 'white' + } ) ); // add the containing border rectangle - this.addChild( new Rectangle( 0, 0, this.param.width, this.param.height, this.param.round, this.param.round, { + this.addChild( new Rectangle( 0, 0, WIDTH, HEIGHT, ROUND, ROUND, { stroke: 'black', lineWidth: 5 } ) ); @@ -237,23 +237,22 @@ define( function( require ) { var magnifierTargetNode = new MagnifierTargetNode( targetX, targetY, - this.param.width * this.param.scale, - this.param.height * this.param.scale, - this.param.round * this.param.scale, - new Vector2( this.param.round, this.param.height ), - new Vector2( this.param.width - this.param.round, this.param.height ) + WIDTH * SCALE, + HEIGHT * SCALE, + ROUND * SCALE, + new Vector2( ROUND, HEIGHT ), + new Vector2( WIDTH - ROUND, HEIGHT ) ); this.addChild( magnifierTargetNode ); // add the arrow at the end this.container.addChild( arrowIcon ); - // Add the canvas where the atoms will be rendered. NOTE: For better performance (particularly on iPad), we are + // @private - Add the canvas where the atoms will be rendered. NOTE: For better performance (particularly on iPad), we are // using CanvasNode to render the atoms instead of individual nodes. All atoms are displayed there, even though we // still create AtomNode view instances. - // TODO: visibility annotation this.atomCanvasNode = new AtomCanvasNode( { - canvasBounds: new Bounds2( 0, 0, this.param.width, this.param.height ) + canvasBounds: new Bounds2( 0, 0, WIDTH, HEIGHT ) } ); this.container.addChild( this.atomCanvasNode ); @@ -294,8 +293,8 @@ define( function( require ) { */ addAtoms: function( model ) { var self = this; - var topAtoms = this.param.topAtoms; - var bottomAtoms = this.param.bottomAtoms; + var topAtoms = this.topAtoms; + var bottomAtoms = this.bottomAtoms; var dx = model.atoms.distanceX; var dy = model.atoms.distanceY; @@ -330,17 +329,13 @@ define( function( require ) { }; // add top atoms - var x0 = topAtoms.x; - var y0 = topAtoms.y; topAtoms.atoms.layers.forEach( function( layer, i ) { - addLayer( topAtoms.target, layer, y0 + dy * i, x0, topAtoms.atoms.color ); + addLayer( topAtoms.target, layer, topAtoms.y + dy * i, topAtoms.x, topAtoms.atoms.color ); } ); // add bottom atoms - y0 = self.param.bottomAtoms.y; - x0 = self.param.bottomAtoms.x; bottomAtoms.atoms.layers.forEach( function( layer, i ) { - addLayer( bottomAtoms.target, layer, y0 + dy * i, x0, bottomAtoms.atoms.color ); + addLayer( bottomAtoms.target, layer, self.bottomAtoms.y + dy * i, self.bottomAtoms.x, bottomAtoms.atoms.color ); } ); },