kallithea Changeset - 65f1d42383de

Changeset - 65f1d42383de

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

Aras Pranckevicius - 12 years ago 2013-12-23 10:09:32
aras@unity3d.com

graph: fade color towards the merged one

1 file changed with 22 insertions and 4 deletions:

kallithea/public/js/graph.js

0 comments (0 inline, 0 general)

kallithea/public/js/graph.js

➞

Show inline comments

@@ @@ -28,33 +28,38 @@ function BranchRenderer(canvas_id, conte @@
 	var t = document.getElementById(content_id);
 	this.canvas.setAttribute('height',t.clientHeight);
 	if (!document.createElement("canvas").getContext)
 		this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
 	this.ctx = this.canvas.getContext('2d');
 	this.ctx.strokeStyle = 'rgb(0, 0, 0)';
 	this.ctx.fillStyle = 'rgb(0, 0, 0)';
 	this.cur = [0, 0];
 	this.line_width = 2.0;
 	this.dot_radius = 3.5;
-	this.setColor = function(color, bg, fg) {
+	this.calcColor = function(color, bg, fg) {
 		color %= colors.length;
 		var red = (colors[color][0] * fg) || bg;
 		var green = (colors[color][1] * fg) || bg;
 		var blue = (colors[color][2] * fg) || bg;
 		red = Math.round(red * 255);
 		green = Math.round(green * 255);
 		blue = Math.round(blue * 255);
 		var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
 		return s;
+	}
 	this.setColor = function(color, bg, fg) {
 		var s = this.calcColor(color, bg, fg);
 		this.ctx.strokeStyle = s;
 		this.ctx.fillStyle = s;
+	}
 	this.render = function(data,canvasWidth) {
 		var idx = 1;
 		var rela = this.canvas;
 		this.canvas.setAttribute('width',canvasWidth);
 		var lineCount = 1;
 		for (var i=0;i<data.length;i++) {
@@ @@ -83,28 +88,41 @@ function BranchRenderer(canvas_id, conte @@
 			in_l = cur[1];
 			var rowY = row.offsetTop + row.offsetHeight/2 - rela.offsetTop;
 			var nextY = (next == null) ? rowY + row.offsetHeight/2 : next.offsetTop + next.offsetHeight/2 - rela.offsetTop;
 			for (var j in in_l) {
 				line = in_l[j];
 				start = line[0];
 				end = line[1];
 				color = line[2];
-				this.setColor(color, 0.0, 0.65);
+				x = base_x - box_size * start;
 				x = base_x - box_size * start;
 				// if this is a merge of differently
 				// colored line, make it a gradient towards
 				// the merged color
 				if (color != node[1] && start == node[0])
+				{
 					var gradient = this.ctx.createLinearGradient(x,rowY,x,nextY);
 					gradient.addColorStop(0,this.calcColor(node[1], 0.0, 0.65));
 					gradient.addColorStop(1,this.calcColor(color, 0.0, 0.65));
 					this.ctx.strokeStyle = gradient;
 					this.ctx.fillStyle = gradient;
+				}
 				else
+				{
 					this.setColor(color, 0.0, 0.65);
+				}
 				this.ctx.lineWidth=this.line_width;
 				this.ctx.beginPath();
 				this.ctx.moveTo(x, rowY);
 				if (start == end)
+				{
 					this.ctx.lineTo(x,nextY+extra,3);
+				}
 				else
+				{
 					var x2 = base_x - box_size * end;

0 comments (0 inline, 0 general)