NodeList.js #1

function NodeList(streamUtilities)
{
	var mStreamUtilities = streamUtilities;
	var arrowHeight = 12;
	var arrowWidth = 10;
	var mWidth = 0;
	var mHeight = 0;
	var mX = 0;
	var mY = 0;
	var mNodes;

    var backgroundCanvas=document.createElement( "canvas" );
	backgroundCanvas.style.position = "absolute";
    document.getElementById( "streamGraph" ).appendChild( backgroundCanvas );

	backgroundCanvas.style.background = mStreamUtilities.GetGradientFill('rgba(30,144,255,.1)', backgroundCanvas.getContext( '2d' ), backgroundCanvas);
	var MaxHeight = 72;
	backgroundCanvas.width = 0;
	backgroundCanvas.height = MaxHeight;
	

	
    var upArrowCanvas=document.createElement( "canvas" );
	upArrowCanvas.style.position = "absolute";
    document.getElementById( "streamGraph" ).appendChild( upArrowCanvas );
	$(upArrowCanvas).click(moveDown);

    var downArrowCanvas=document.createElement( "canvas" );
	downArrowCanvas.style.position = "absolute";
    document.getElementById( "streamGraph" ).appendChild( downArrowCanvas );
	$(downArrowCanvas).click(moveUp);
	

	
	function aboveView(y)
	{
		return y < parseInt(backgroundCanvas.style.top);
	}
	
	function belowView(y)
	{
		return y >= parseInt(backgroundCanvas.style.top) + backgroundCanvas.height;
	}
	
	function withinView(y)
	{
		if( y >= parseInt(backgroundCanvas.style.top) && y < parseInt(backgroundCanvas.style.top) + backgroundCanvas.height )
			return true;

		return false;
	}
	
	function drawArrow(enable, pointUp, canvas)
	{
		mStreamUtilities.clearCanvas(canvas);
		
		var context = canvas.getContext( '2d' );
		var x = 0;
		var y = 0;
		var width = canvas.width;
		var height = canvas.height;

		context.beginPath();
		
		if( pointUp )
		{
			context.moveTo(x + width/2, y);
			context.lineTo(x + width, y + height);
			context.lineTo(x, y + height);
			context.lineTo(x + width/2, y);
		}else
		{
			context.moveTo(x, y);
			context.lineTo(x + width, y);
			context.lineTo(x + width/2, y + height);
			context.lineTo(x, y);
		}
		
		context.closePath();
		
		var color;
		var strokeColor;
		
		if( enable )
		{
			color = 'dodgerblue';
			strokeColor = 'cornflowerblue';
		}
		else
		{
			color = 'lightgray';
			strokeColor = 'gray';
		}
			
		var linearGradient = mStreamUtilities.GetGradientFill(color, context, canvas);
		
		context.fillStyle = linearGradient;
		context.fill();
		context.strokeStyle = strokeColor;
		context.stroke();
	}
	
	function enableMoveDown()
	{
		var enable = false;

		for( var i = 0; i < mNodes.length; i++ )
		{
			if( aboveView(mNodes[i].top) )
			{
				enable = true;
				continue;
			}
		}
		
		return enable;
	}
	
	function enableMoveUp()
	{
		var enable = false;
		for( var i = 0; i < mNodes.length; i++ )
		{
			if( belowView(mNodes[i].top) )
			{
				enable = true;
				continue;
			}
		}
		
		return enable;
	}
	
	function drawArrows()
	{
		drawArrow(enableMoveDown(), true, upArrowCanvas);
		drawArrow(enableMoveUp(), false, downArrowCanvas);
	}
	
	function moveDown()
	{
		//don't do anything if there are no nodes above the view
		if( !enableMoveDown() )
			return;
		
		for( var i = 0; i < mNodes.length; i++ )
		{
			var node = mNodes[i];
			var y = node.top + node.height;
		
			if( withinView(y))
				node.moveDown(true);
			else
				node.moveDown(false);
		}
		
		drawArrows();
	}
	
	function moveUp()
	{
		//don't do anything if there are no nodes below the view
		if( !enableMoveUp() )
			return;
		
		
		for( var i = 0; i < mNodes.length; i++ )
		{
			var node = mNodes[i];
			var y = node.top - node.height;
		
			if( withinView(y))
				node.moveUp(true);
			else
				node.moveUp(false);
		}
		
		drawArrows();
	}
	
	this.draw = function()
	{
		if( mNodes )
			for( var i = 0; i < mNodes.length; i++ )
				mNodes[i].draw();
	}

	function setNodesPosition(x, y, nodes)
	{
		var yAccumulator = 0;
		
		if( nodes )
		{
			for( var i = 0; i < nodes.length; i++ )
			{
				//console.log('setting node positions');
				nodes[i].position(x, y + yAccumulator);
				
				yAccumulator += nodes[i].height;

				if( yAccumulator > MaxHeight )
					nodes[i].hide();
				else
					nodes[i].show();

			}
		}
		
		//console.log('yAccumulator: ' + yAccumulator + ' MaxHeight: ' + MaxHeight);
		if( yAccumulator > MaxHeight )
		{
			//console.log('showing ' + backgroundCanvas.height);
			$(upArrowCanvas).show();
			$(downArrowCanvas).show();
			
			drawArrow(false, true, upArrowCanvas);
			drawArrow(true, false, downArrowCanvas);
			//draw();
		}
		else
		{
			//console.log('hiding');
			$(upArrowCanvas).hide();
			$(downArrowCanvas).hide();
		}
		
		//draw();
	}
	
	this.position = function(x, y)
	{
		mX = x;
		mY = y;

		backgroundCanvas.style.left = x;
		backgroundCanvas.style.top = y;

		upArrowCanvas.style.left = x + backgroundCanvas.width + 2;
		upArrowCanvas.style.top = y;

		downArrowCanvas.style.left = x + backgroundCanvas.width + 2;
		downArrowCanvas.style.top = y + (MaxHeight - arrowHeight);

		setNodesPosition(x, y, mNodes);
	}
	
	this.nodes = function(nodes)
	{
		if( mNodes )
		{
			for( var i = 0; i < mNodes.length; i++ )
			{
				mNodes[i].clear();
				mNodes[i] = null;
			}
		}
				
		mNodes = nodes;
		
		mHeight = 0;
		mWidth = 0;
		
		if( nodes )
		{
			for( var i = 0; i < nodes.length; i++ )
			{
				var w = nodes[i].width();
				//console.log( 'ws: ' + nodes[i].workspace.Client + ' width: ' + w);
	
				if( w > mWidth )
					mWidth = w;
					
				mHeight += nodes[i].height;
			}
		}
		
		backgroundCanvas.width = mWidth;
		//backgroundCanvas.height = mHeight;
		
		upArrowCanvas.width = arrowWidth;
		upArrowCanvas.height = arrowHeight;
		//upArrowCanvas.style.background = 'red';
		
		downArrowCanvas.width = arrowWidth;
		downArrowCanvas.height = arrowHeight;
		//downArrowCanvas.style.background = 'blue';
	}
	
	this.width = function()
	{
		return mWidth + arrowWidth;
	}
	
	this.count = function()
	{
		if( mNodes )
			return mNodes.length;
			
		return 0;
	}
}