6691
|
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 for (var i in data) {
|
|
79
|
|
80 var parity = i % 2;
|
|
81 this.cell[1] += this.bg_height;
|
|
82 this.bg[1] += this.bg_height;
|
|
83
|
|
84 var cur = data[i];
|
|
85 var node = cur[1];
|
|
86 var edges = cur[2];
|
|
87 var fold = false;
|
|
88
|
|
89 for (var j in edges) {
|
|
90
|
|
91 line = edges[j];
|
|
92 start = line[0];
|
|
93 end = line[1];
|
|
94 color = line[2];
|
|
95
|
|
96 if (end > this.columns) {
|
|
97 this.columns += 1;
|
|
98 } else if (start == this.columns && start > end) {
|
|
99 var fold = true;
|
|
100 }
|
|
101
|
|
102 x0 = this.cell[0] + this.box_size * start + this.box_size / 2;
|
|
103 y0 = this.bg[1] - this.bg_height / 2;
|
|
104 x1 = this.cell[0] + this.box_size * end + this.box_size / 2;
|
|
105 y1 = this.bg[1] + this.bg_height / 2;
|
|
106
|
|
107 this.edge(x0, y0, x1, y1, color);
|
|
108
|
|
109 }
|
|
110
|
|
111 // Draw the revision node in the right column
|
|
112
|
|
113 column = node[0]
|
|
114 color = node[1]
|
|
115
|
|
116 radius = this.box_size / 8;
|
|
117 x = this.cell[0] + this.box_size * column + this.box_size / 2;
|
|
118 y = this.bg[1] - this.bg_height / 2;
|
|
119 this.vertex(x, y, color, parity, cur);
|
|
120
|
|
121 if (fold) this.columns -= 1;
|
|
122
|
|
123 }
|
|
124
|
|
125 }
|
|
126
|
|
127 }
|