Show More
@@ -1,141 +1,143 b'' | |||||
1 | // branch_renderer.js - Rendering of branch DAGs on the client side |
|
1 | // branch_renderer.js - Rendering of branch DAGs on the client side | |
2 | // |
|
2 | // | |
3 | // Copyright 2010 Marcin Kuzminski <marcin AT python-works DOT com> |
|
3 | // Copyright 2010 Marcin Kuzminski <marcin AT python-works DOT com> | |
4 | // Copyright 2008 Jesper Noehr <jesper AT noehr DOT org> |
|
4 | // Copyright 2008 Jesper Noehr <jesper AT noehr DOT org> | |
5 | // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl> |
|
5 | // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl> | |
6 | // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de> |
|
6 | // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de> | |
7 | // |
|
7 | // | |
8 | // derived from code written by Scott James Remnant <scott@ubuntu.com> |
|
8 | // derived from code written by Scott James Remnant <scott@ubuntu.com> | |
9 | // Copyright 2005 Canonical Ltd. |
|
9 | // Copyright 2005 Canonical Ltd. | |
10 | // |
|
10 | // | |
11 | // This software may be used and distributed according to the terms |
|
11 | // This software may be used and distributed according to the terms | |
12 | // of the GNU General Public License, incorporated herein by reference. |
|
12 | // of the GNU General Public License, incorporated herein by reference. | |
13 |
|
13 | |||
14 | var colors = [ |
|
14 | var colors = [ | |
15 | [ 1.0, 0.0, 0.0 ], |
|
15 | [ 1.0, 0.0, 0.0 ], | |
16 | [ 1.0, 1.0, 0.0 ], |
|
16 | [ 1.0, 1.0, 0.0 ], | |
17 | [ 0.0, 1.0, 0.0 ], |
|
17 | [ 0.0, 1.0, 0.0 ], | |
18 | [ 0.0, 1.0, 1.0 ], |
|
18 | [ 0.0, 1.0, 1.0 ], | |
19 | [ 0.0, 0.0, 1.0 ], |
|
19 | [ 0.0, 0.0, 1.0 ], | |
20 | [ 1.0, 0.0, 1.0 ], |
|
20 | [ 1.0, 0.0, 1.0 ], | |
21 | [ 1.0, 1.0, 0.0 ], |
|
21 | [ 1.0, 1.0, 0.0 ], | |
22 | [ 0.0, 0.0, 0.0 ] |
|
22 | [ 0.0, 0.0, 0.0 ] | |
23 | ]; |
|
23 | ]; | |
24 |
|
24 | |||
25 | function BranchRenderer() { |
|
25 | function BranchRenderer() { | |
26 |
|
26 | |||
27 | this.canvas = document.getElementById("graph_canvas"); |
|
27 | this.canvas = document.getElementById("graph_canvas"); | |
28 |
|
28 | |||
29 | if (navigator.userAgent.indexOf('MSIE') >= 0) |
|
29 | if (navigator.userAgent.indexOf('MSIE') >= 0) | |
30 | this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); |
|
30 | this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); | |
31 | this.ctx = this.canvas.getContext('2d'); |
|
31 | this.ctx = this.canvas.getContext('2d'); | |
32 | this.ctx.strokeStyle = 'rgb(0, 0, 0)'; |
|
32 | this.ctx.strokeStyle = 'rgb(0, 0, 0)'; | |
33 | this.ctx.fillStyle = 'rgb(0, 0, 0)'; |
|
33 | this.ctx.fillStyle = 'rgb(0, 0, 0)'; | |
34 | this.cur = [0, 0]; |
|
34 | this.cur = [0, 0]; | |
35 | this.max_column = 1; |
|
35 | this.max_column = 1; | |
36 | this.line_width = 2.5; |
|
36 | this.line_width = 2.5; | |
37 | this.dot_radius = 5.5; |
|
37 | this.dot_radius = 5.5; | |
38 | this.bg = [0, 4]; |
|
38 | this.bg = [0, 4]; | |
39 | this.cell = [2, 0]; |
|
39 | this.cell = [2, 0]; | |
40 | this.revlink = ''; |
|
40 | this.revlink = ''; | |
41 |
|
41 | |||
42 | this.scale = function(height) { |
|
42 | this.scale = function(height) { | |
43 | this.box_size = Math.floor(height/1.2); |
|
43 | this.box_size = Math.floor(height/1.2); | |
44 | this.cell_height = this.box_size; |
|
44 | this.cell_height = this.box_size; | |
45 | this.bg_height = height; |
|
45 | this.bg_height = height; | |
46 | } |
|
46 | } | |
47 |
|
47 | |||
48 | this.setColor = function(color, bg, fg) { |
|
48 | this.setColor = function(color, bg, fg) { | |
49 | color %= colors.length; |
|
49 | color %= colors.length; | |
50 | var red = (colors[color][0] * fg) || bg; |
|
50 | var red = (colors[color][0] * fg) || bg; | |
51 | var green = (colors[color][1] * fg) || bg; |
|
51 | var green = (colors[color][1] * fg) || bg; | |
52 | var blue = (colors[color][2] * fg) || bg; |
|
52 | var blue = (colors[color][2] * fg) || bg; | |
53 | red = Math.round(red * 255); |
|
53 | red = Math.round(red * 255); | |
54 | green = Math.round(green * 255); |
|
54 | green = Math.round(green * 255); | |
55 | blue = Math.round(blue * 255); |
|
55 | blue = Math.round(blue * 255); | |
56 | var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; |
|
56 | var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; | |
57 | this.ctx.strokeStyle = s; |
|
57 | this.ctx.strokeStyle = s; | |
58 | this.ctx.fillStyle = s; |
|
58 | this.ctx.fillStyle = s; | |
59 | } |
|
59 | } | |
60 |
|
60 | |||
61 | this.render = function(data,pad) { |
|
61 | this.render = function(data,pad) { | |
62 | var idx = 1; |
|
62 | var idx = 1; | |
63 | var rela = document.getElementById('graph'); |
|
63 | var rela = document.getElementById('graph'); | |
64 | var pad = pad; |
|
64 | var pad = pad; | |
65 | var scale = 22; |
|
65 | var scale = 22; | |
66 |
|
66 | |||
67 | for (var i in data) { |
|
67 | for (var i in data) { | |
68 | this.scale(scale); |
|
68 | this.scale(scale); | |
69 |
|
69 | |||
70 | var row = document.getElementById("chg_"+idx); |
|
70 | var row = document.getElementById("chg_"+idx); | |
|
71 | if (row == null) | |||
|
72 | continue; | |||
71 | var next = document.getElementById("chg_"+(idx+1)); |
|
73 | var next = document.getElementById("chg_"+(idx+1)); | |
72 | var extra = 0; |
|
74 | var extra = 0; | |
73 |
|
75 | |||
74 | this.cell[1] += row.clientWidth; |
|
76 | this.cell[1] += row.clientWidth; | |
75 | this.bg[1] += this.bg_height; |
|
77 | this.bg[1] += this.bg_height; | |
76 |
|
78 | |||
77 | cur = data[i]; |
|
79 | cur = data[i]; | |
78 | nodeid = cur[0]; |
|
80 | nodeid = cur[0]; | |
79 | node = cur[1]; |
|
81 | node = cur[1]; | |
80 | in_l = cur[2]; |
|
82 | in_l = cur[2]; | |
81 |
|
83 | |||
82 | var rowY = row.offsetTop + row.offsetHeight/2 - rela.offsetTop; |
|
84 | var rowY = row.offsetTop + row.offsetHeight/2 - rela.offsetTop; | |
83 | var nextY = (next == null) ? rowY + row.offsetHeight/2 : next.offsetTop + next.offsetHeight/2 - rela.offsetTop; |
|
85 | var nextY = (next == null) ? rowY + row.offsetHeight/2 : next.offsetTop + next.offsetHeight/2 - rela.offsetTop; | |
84 |
|
86 | |||
85 | for (var j in in_l) { |
|
87 | for (var j in in_l) { | |
86 |
|
88 | |||
87 | line = in_l[j]; |
|
89 | line = in_l[j]; | |
88 | start = line[0]; |
|
90 | start = line[0]; | |
89 | end = line[1]; |
|
91 | end = line[1]; | |
90 | color = line[2]; |
|
92 | color = line[2]; | |
91 |
|
93 | |||
92 | if (start > this.max_column) { |
|
94 | if (start > this.max_column) { | |
93 | this.max_column = start; |
|
95 | this.max_column = start; | |
94 | } |
|
96 | } | |
95 |
|
97 | |||
96 | if (end > this.max_column) { |
|
98 | if (end > this.max_column) { | |
97 | this.max_column = end; |
|
99 | this.max_column = end; | |
98 | } |
|
100 | } | |
99 |
|
101 | |||
100 | this.setColor(color, 0.0, 0.65); |
|
102 | this.setColor(color, 0.0, 0.65); | |
101 |
|
103 | |||
102 |
|
104 | |||
103 | x = pad-((this.cell[0] + this.box_size * start - 1) + this.bg_height-2); |
|
105 | x = pad-((this.cell[0] + this.box_size * start - 1) + this.bg_height-2); | |
104 |
|
106 | |||
105 | this.ctx.lineWidth=this.line_width; |
|
107 | this.ctx.lineWidth=this.line_width; | |
106 | this.ctx.beginPath(); |
|
108 | this.ctx.beginPath(); | |
107 | this.ctx.moveTo(x, rowY); |
|
109 | this.ctx.moveTo(x, rowY); | |
108 |
|
110 | |||
109 |
|
111 | |||
110 | if (start == end) |
|
112 | if (start == end) | |
111 | { |
|
113 | { | |
112 | x = pad-((1 + this.box_size * end) + this.bg_height-2); |
|
114 | x = pad-((1 + this.box_size * end) + this.bg_height-2); | |
113 | this.ctx.lineTo(x,nextY+extra,3); |
|
115 | this.ctx.lineTo(x,nextY+extra,3); | |
114 | } |
|
116 | } | |
115 | else |
|
117 | else | |
116 | { |
|
118 | { | |
117 | var x2 = pad-((1 + this.box_size * end) + this.bg_height-2); |
|
119 | var x2 = pad-((1 + this.box_size * end) + this.bg_height-2); | |
118 | var ymid = (rowY+nextY) / 2; |
|
120 | var ymid = (rowY+nextY) / 2; | |
119 | this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,nextY); |
|
121 | this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,nextY); | |
120 | } |
|
122 | } | |
121 | this.ctx.stroke(); |
|
123 | this.ctx.stroke(); | |
122 | } |
|
124 | } | |
123 |
|
125 | |||
124 | column = node[0] |
|
126 | column = node[0] | |
125 | color = node[1] |
|
127 | color = node[1] | |
126 |
|
128 | |||
127 | radius = this.dot_radius; |
|
129 | radius = this.dot_radius; | |
128 |
|
130 | |||
129 | x = pad-(Math.round(this.cell[0] * scale/2 * column + radius) + 15 - (column*4)); |
|
131 | x = pad-(Math.round(this.cell[0] * scale/2 * column + radius) + 15 - (column*4)); | |
130 |
|
132 | |||
131 | this.ctx.beginPath(); |
|
133 | this.ctx.beginPath(); | |
132 | this.setColor(color, 0.25, 0.75); |
|
134 | this.setColor(color, 0.25, 0.75); | |
133 | this.ctx.arc(x, rowY, radius, 0, Math.PI * 2, true); |
|
135 | this.ctx.arc(x, rowY, radius, 0, Math.PI * 2, true); | |
134 | this.ctx.fill(); |
|
136 | this.ctx.fill(); | |
135 |
|
137 | |||
136 | idx++; |
|
138 | idx++; | |
137 | } |
|
139 | } | |
138 |
|
140 | |||
139 | } |
|
141 | } | |
140 |
|
142 | |||
141 | } |
|
143 | } |
General Comments 0
You need to be logged in to leave comments.
Login now