TrajectoryNode.js #1

function TrajectoryNode(parentElementId, streamNode, streamUtilities)
{
	var mStreamUtilities = streamUtilities;
	var mChanges = new Array();
	var mChangeNumCanvas;
	
	this.addChange = function(change)
	{
		for(var i = 0; i < mChanges.length; i++ )
			if( mChanges[i].Change == change.Change )
				return;

		mChanges.push(change);
	}
	
	this.draw = function()
	{
		var changeList = mChanges[0];
		
		var num = changeList.Change;
		
		//add a plus sign there is more than one changelist on this stream node
		if( mChanges.length > 1 )
			num += ' +';
		
		var color = streamNode.highlightColor;
		
		if( streamNode.selected )
			color = streamNode.selectionColor;

		mChangeNumCanvas = document.createElement( "canvas" );
		mChangeNumCanvas.style.position = "absolute";
		document.getElementById( parentElementId).appendChild( mChangeNumCanvas );
		
		mChangeNumCanvas.height = 20;
		var strokeWidth = 4;
		
		var xNudge = 0;
		var arrowPoint = streamNode.getBadgePoint();
		
		var top = arrowPoint.y + strokeWidth/2;

		//console.log('*** cl: ' + num + ' top: ' + top );
		mChangeNumCanvas.style.top = top - strokeWidth;

		var numContext = mChangeNumCanvas.getContext( '2d' );

		mChangeNumCanvas.width = mStreamUtilities.GetTextWidth(num, numContext) + strokeWidth*4;
		mChangeNumCanvas.style.left = arrowPoint.x;
		
		mChangeNumCanvas.onclick = function(evt)
		{
			var x = mChangeNumCanvas.offsetLeft + mChangeNumCanvas.width;
			var y = mChangeNumCanvas.offsetTop + mChangeNumCanvas.height;
			
			if(mChanges.length > 1)
				mStreamUtilities.showChangeSelector(mChanges, x, y, mStreamUtilities);
			else
			{
				if( $( "#changeSelector" ).dialog( "isOpen" ) )
					$( "#changeSelector" ).dialog( "close" );
		
				mStreamUtilities.showChangeDetails(mChanges[0], x, y);
			}
		}

		//mChangeNumCanvas.style.background = 'red';
		mChangeNumCanvas.style.zIndex = 1;
		
		var l = strokeWidth/4;
		var t = strokeWidth/4;
		var w = mChangeNumCanvas.width - (strokeWidth/2);
		var h = mChangeNumCanvas.height - (strokeWidth/2);
		var d = h / 3;
		
		
		//draw a rounded rectangle
		numContext.beginPath();
		numContext.lineTo(l,t+h-d);//start at lower left corner - the radius
		numContext.quadraticCurveTo(l,t+h,l+d,t+h);//curve around to bottom 
		numContext.lineTo(l+w-d,t+h);//draw bottom line
		numContext.quadraticCurveTo(l+w,t+h,l+w,t+h-d);//curve around to right side
		numContext.lineTo(l+w,t+d);//draw right side
		numContext.quadraticCurveTo(l+w,t,l+w-d,t);//curve around to top
		numContext.lineTo(l+d,t);//draw top
		numContext.quadraticCurveTo(l,t,l,t+d);//curve around to left 
		numContext.closePath();//draws the left side
				
		numContext.save();
		numContext.fillStyle = color.rgba;
		numContext.fill();
		numContext.restore();

		numContext.save();
		numContext.strokeStyle = 'gainsboro';
		numContext.strokeWidth = d;
		numContext.stroke();
		numContext.restore();
		
		numContext.save();
		//numContext.strokeStyle = 'white';
		numContext.fillStyle = 'white';
		numContext.font = "normal " + mChangeNumCanvas.height * 0.5 + "px sans-serif";
		numContext.textBaseline = "middle";
		numContext.fillText(num, strokeWidth * 2, mChangeNumCanvas.height/2 - mChangeNumCanvas.height * 0.02);
		numContext.restore();
	}
	

	
	this.close = function()
	{
		if( mChangeNumCanvas )
			mChangeNumCanvas.parentElement.removeChild(mChangeNumCanvas);
	}
}