1 // branch_renderer.js - Rendering of branch DAGs on the client side

     2 //

     3 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>

     4 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>

     5 //

     6 // derived from code written by Scott James Remnant <scott@ubuntu.com>

     7 // Copyright 2005 Canonical Ltd.

     8 //

     9 // This software may be used and distributed according to the terms

    10 // of the GNU General Public License, incorporated herein by reference.

    11 

    12 var colors = [

    13 	[ 1.0, 0.0, 0.0 ],

    14 	[ 1.0, 1.0, 0.0 ],

    15 	[ 0.0, 1.0, 0.0 ],

    16 	[ 0.0, 1.0, 1.0 ],

    17 	[ 0.0, 0.0, 1.0 ],

    18 	[ 1.0, 0.0, 1.0 ]

    19 ];

    20 

    21 function Graph() {

    22 	

    23 	this.canvas = document.getElementById('graph');

    24 	if (navigator.userAgent.indexOf('MSIE') >= 0) this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);

    25 	this.ctx = this.canvas.getContext('2d');

    26 	this.ctx.strokeStyle = 'rgb(0, 0, 0)';

    27 	this.ctx.fillStyle = 'rgb(0, 0, 0)';

    28 	this.cur = [0, 0];

    29 	this.line_width = 3;

    30 	this.bg = [0, 4];

    31 	this.cell = [2, 0];

    32 	this.columns = 0;

    33 	this.revlink = '';

    34 	

    35 	this.scale = function(height) {

    36 		this.bg_height = height;

    37 		this.box_size = Math.floor(this.bg_height / 1.2);

    38 		this.cell_height = this.box_size;

    39 	}

    40 	

    41 	function colorPart(num) {

    42 		num *= 255

    43 		num = num < 0 ? 0 : num;

    44 		num = num > 255 ? 255 : num;

    45 		var digits = Math.round(num).toString(16);

    46 		if (num < 16) {

    47 			return '0' + digits;

    48 		} else {

    49 			return digits;

    50 		}

    51 	}

    52 

    53 	this.setColor = function(color, bg, fg) {

    54 		

    55 		// Set the colour.

    56 		//

    57 		// Picks a distinct colour based on an internal wheel; the bg

    58 		// parameter provides the value that should be assigned to the 'zero'

    59 		// colours and the fg parameter provides the multiplier that should be

    60 		// applied to the foreground colours.

    61 		

    62 		color %= colors.length;

    63 		var red = (colors[color][0] * fg) || bg;

    64 		var green = (colors[color][1] * fg) || bg;

    65 		var blue = (colors[color][2] * fg) || bg;

    66 		red = Math.round(red * 255);

    67 		green = Math.round(green * 255);

    68 		blue = Math.round(blue * 255);

    69 		var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

    70 		this.ctx.strokeStyle = s;

    71 		this.ctx.fillStyle = s;

    72 		return s;

    73 		

    74 	}

    75 

    76 	this.render = function(data) {

    77 		

    78 		var backgrounds = '';

    79 		var nodedata = '';

    80 		

    81 		for (var i in data) {

    82 			

    83 			var parity = i % 2;

    84 			this.cell[1] += this.bg_height;

    85 			this.bg[1] += this.bg_height;

    86 			

    87 			var cur = data[i];

    88 			var node = cur[1];

    89 			var edges = cur[2];

    90 			var fold = false;

    91 			

    92 			for (var j in edges) {

    93 				

    94 				line = edges[j];

    95 				start = line[0];

    96 				end = line[1];

    97 				color = line[2];

    98 

    99 				if (end > this.columns || start > this.columns) {

   100 					this.columns += 1;

   101 				}

   102 				

   103 				if (start == this.columns && start > end) {

   104 					var fold = true;

   105 				}

   106 				

   107 				x0 = this.cell[0] + this.box_size * start + this.box_size / 2;

   108 				y0 = this.bg[1] - this.bg_height / 2;

   109 				x1 = this.cell[0] + this.box_size * end + this.box_size / 2;

   110 				y1 = this.bg[1] + this.bg_height / 2;

   111 				

   112 				this.edge(x0, y0, x1, y1, color);

   113 				

   114 			}

   115 			

   116 			// Draw the revision node in the right column

   117 			

   118 			column = node[0]

   119 			color = node[1]

   120 			

   121 			radius = this.box_size / 8;

   122 			x = this.cell[0] + this.box_size * column + this.box_size / 2;

   123 			y = this.bg[1] - this.bg_height / 2;

   124 			var add = this.vertex(x, y, color, parity, cur);

   125 			backgrounds += add[0];

   126 			nodedata += add[1];

   127 			

   128 			if (fold) this.columns -= 1;

   129 			

   130 		}

   131 		

   132 		document.getElementById('nodebgs').innerHTML += backgrounds;

   133 		document.getElementById('graphnodes').innerHTML += nodedata;

   134 		

   135 	}

   136 

   137 }