Skip to content

Commit

Permalink
Cleanup in MagnifierNode, see #64
Browse files Browse the repository at this point in the history
  • Loading branch information
@samreid
samreid committed Feb 14, 2018
1 parent a7df83d commit 260173e
Showing 1 changed file with 79 additions and 84 deletions.
163 changes: 79 additions & 84 deletions js/friction/view/magnifier/MagnifierNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -62,81 +67,75 @@ 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 }
)
]
} );
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'
} );
Expand All @@ -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',
Expand Down Expand Up @@ -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 );
Expand All @@ -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
} ) );
Expand All @@ -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 );

Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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 );
} );
},

Expand Down

0 comments on commit 260173e

Please sign in to comment.