graphonline/script/features/draw_graph/model/BaseVertexDrawer.js

/**
 * Graph drawer.
 */

// Test graph: http://localhost/?graph=IEktYqMyJaYYyLufZZcst_test

function BaseVertexDrawer(context)
{ 
  this.context = context;
}

BaseVertexDrawer.prototype.Draw = function(baseGraph, graphStyle)
{
  this.SetupStyle(graphStyle);
  this.DrawShape(baseGraph);

  if (this.currentStyle.lineWidth != 0)
  	this.context.stroke();

  this.context.fill();

  var shapeSize = GetSizeForShape(graphStyle.shape, baseGraph.model.diameter + graphStyle.lineWidth);
  
  if (graphStyle.commonTextPosition == CommonTextCenter)
  {
  	this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor, 
						graphStyle.fillStyle, true, true, graphStyle.mainTextFontSize);  
  	// Top text
  	this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - graphStyle.mainTextFontSize / 2.2)), baseGraph.upText, 
						graphStyle.upTextColor, graphStyle.strokeStyle, false, false,
						graphStyle.mainTextFontSize + TopTextFontSizeDelta);
  }
  else if (graphStyle.commonTextPosition == CommonTextUp)
  {
	this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - graphStyle.mainTextFontSize / 2.2)), baseGraph.mainText, 
						graphStyle.mainTextColor, graphStyle.fillStyle, true, false,
						graphStyle.mainTextFontSize);  
	// Top text
	this.DrawCenterText(baseGraph.position.add(new Point(0, shapeSize / 2.0 + graphStyle.mainTextFontSize / 1.7)), baseGraph.upText, 
						graphStyle.upTextColor, graphStyle.strokeStyle, false, false, 
						graphStyle.mainTextFontSize + TopTextFontSizeDelta);
  }
/*	
  // Bottom text
  this.DrawCenterText(baseGraph.position.add(new Point(0, + baseGraph.model.diameter / 2.0 + 7.0)), 
	"Text 2", graphStyle.fillStyle, false, 12.0);
*/
}

BaseVertexDrawer.prototype.SetupStyle = function(style)
{
  this.currentStyle = style;
  this.context.lineWidth   = style.lineWidth;
  this.context.strokeStyle = style.strokeStyle;
  this.context.fillStyle   = style.fillStyle;
}

BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
{
  this.context.beginPath();
  if (this.currentStyle.shape == VertexCircleShape)
  {
  	this.context.arc(baseGraph.position.x, baseGraph.position.y, baseGraph.model.diameter / 2.0, 0, 2 * Math.PI);
  }
  else
  {
	var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter, 
		{style:  this.currentStyle, text: baseGraph.mainText});

	this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);

	var context = this.context;

	points.forEach(function(point) {
		context.lineTo(baseGraph.position.x + point.x, baseGraph.position.y + point.y);
	  });
  }

  this.context.closePath();
}

BaseVertexDrawer.prototype.DrawText = function(position, text, color, outlineColor, outline, font)
{
	this.context.fillStyle = color;
	this.context.font = font;
    this.context.lineWidth = 4;
    this.context.strokeStyle = outlineColor;

    if (outline)
    {
        this.context.save();
        this.context.lineJoin = 'round';
        this.context.strokeText(text, position.x, position.y);
        this.context.restore();
    }
    
    this.context.fillText(text, position.x, position.y);
}

BaseVertexDrawer.prototype.DrawCenterText = function(position, text, 
	color, outlineColor, bold, outline, size)
{
	this.context.textBaseline="middle";
	this.context.font = (bold ? "bold " : "") + size + DefaultFont;
	var textWidth  = this.context.measureText(text).width;	
	this.DrawText(new Point(position.x - textWidth / 2, position.y), text, color, outlineColor, outline, this.context.font);
}