Mercurial > kallithea
comparison pylons_app/public/js/graph.js @ 288:ab1afe7444f3
Initial graph release.
author | Marcin Kuzminski <marcin@python-works.com> |
---|---|
date | Wed, 23 Jun 2010 00:18:10 +0200 |
parents | a86c8de926b4 |
children | 1dbe02063123 |
comparison
equal
deleted
inserted
replaced
287:5827c739b0bd | 288:ab1afe7444f3 |
---|---|
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 2008 Jesper Noehr <jesper AT noehr DOT org> | |
3 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl> | 4 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl> |
4 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de> | 5 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de> |
5 // | 6 // |
6 // derived from code written by Scott James Remnant <scott@ubuntu.com> | 7 // derived from code written by Scott James Remnant <scott@ubuntu.com> |
7 // Copyright 2005 Canonical Ltd. | 8 // Copyright 2005 Canonical Ltd. |
13 [ 1.0, 0.0, 0.0 ], | 14 [ 1.0, 0.0, 0.0 ], |
14 [ 1.0, 1.0, 0.0 ], | 15 [ 1.0, 1.0, 0.0 ], |
15 [ 0.0, 1.0, 0.0 ], | 16 [ 0.0, 1.0, 0.0 ], |
16 [ 0.0, 1.0, 1.0 ], | 17 [ 0.0, 1.0, 1.0 ], |
17 [ 0.0, 0.0, 1.0 ], | 18 [ 0.0, 0.0, 1.0 ], |
18 [ 1.0, 0.0, 1.0 ] | 19 [ 1.0, 0.0, 1.0 ], |
20 [ 1.0, 1.0, 0.0 ], | |
21 [ 0.0, 0.0, 0.0 ] | |
19 ]; | 22 ]; |
20 | 23 |
21 function Graph() { | 24 function BranchRenderer() { |
22 | 25 |
23 this.canvas = document.getElementById('graph'); | 26 this.canvas = document.getElementById("graph_canvas"); |
24 if (navigator.userAgent.indexOf('MSIE') >= 0) this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); | 27 |
28 //if ($.browser.msie) | |
29 // this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); | |
25 this.ctx = this.canvas.getContext('2d'); | 30 this.ctx = this.canvas.getContext('2d'); |
26 this.ctx.strokeStyle = 'rgb(0, 0, 0)'; | 31 this.ctx.strokeStyle = 'rgb(0, 0, 0)'; |
27 this.ctx.fillStyle = 'rgb(0, 0, 0)'; | 32 this.ctx.fillStyle = 'rgb(0, 0, 0)'; |
28 this.cur = [0, 0]; | 33 this.cur = [0, 0]; |
34 this.max_column = 1; | |
29 this.line_width = 3; | 35 this.line_width = 3; |
30 this.bg = [0, 4]; | 36 this.bg = [0, 4]; |
31 this.cell = [2, 0]; | 37 this.cell = [2, 0]; |
32 this.columns = 0; | |
33 this.revlink = ''; | 38 this.revlink = ''; |
34 | 39 |
35 this.scale = function(height) { | 40 this.scale = function(height) { |
41 this.box_size = Math.floor(height/1.2); | |
42 this.cell_height = this.box_size; | |
36 this.bg_height = height; | 43 this.bg_height = height; |
37 this.box_size = Math.floor(this.bg_height / 1.2); | |
38 this.cell_height = this.box_size; | |
39 } | 44 } |
40 | 45 |
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) { | 46 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; | 47 color %= colors.length; |
63 var red = (colors[color][0] * fg) || bg; | 48 var red = (colors[color][0] * fg) || bg; |
64 var green = (colors[color][1] * fg) || bg; | 49 var green = (colors[color][1] * fg) || bg; |
65 var blue = (colors[color][2] * fg) || bg; | 50 var blue = (colors[color][2] * fg) || bg; |
66 red = Math.round(red * 255); | 51 red = Math.round(red * 255); |
67 green = Math.round(green * 255); | 52 green = Math.round(green * 255); |
68 blue = Math.round(blue * 255); | 53 blue = Math.round(blue * 255); |
69 var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; | 54 var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; |
70 this.ctx.strokeStyle = s; | 55 this.ctx.strokeStyle = s; |
71 this.ctx.fillStyle = s; | 56 this.ctx.fillStyle = s; |
72 return s; | |
73 | |
74 } | 57 } |
75 | 58 |
76 this.render = function(data) { | 59 this.render = function(data) { |
77 | 60 var idx = 1; |
78 var backgrounds = ''; | 61 var rela = document.getElementById('graph'); |
79 var nodedata = ''; | 62 var pad = 160; |
63 var scale = 20; | |
80 | 64 |
81 for (var i in data) { | 65 for (var i in data) { |
66 this.scale(scale); | |
67 var row = document.getElementById("chg_"+idx); | |
68 var next = document.getElementById("chg_"+idx+1); | |
69 var extra = 0; | |
82 | 70 |
83 var parity = i % 2; | 71 //skip this since i don't have DATE in my app |
84 this.cell[1] += this.bg_height; | 72 //if (next.is('.changesets-date')) { |
73 // extra = next.outerHeight(); | |
74 //} | |
75 | |
76 | |
77 this.cell[1] += row.clientWidth; | |
85 this.bg[1] += this.bg_height; | 78 this.bg[1] += this.bg_height; |
86 | 79 |
87 var cur = data[i]; | 80 cur = data[i]; |
88 var node = cur[1]; | 81 nodeid = cur[0]; |
89 var edges = cur[2]; | 82 node = cur[1]; |
90 var fold = false; | 83 in_l = cur[2]; |
91 | 84 |
92 for (var j in edges) { | 85 for (var j in in_l) { |
93 | 86 |
94 line = edges[j]; | 87 line = in_l[j]; |
95 start = line[0]; | 88 start = line[0]; |
96 end = line[1]; | 89 end = line[1]; |
97 color = line[2]; | 90 color = line[2]; |
98 | 91 |
99 if (end > this.columns || start > this.columns) { | 92 if (start > this.max_column) { |
100 this.columns += 1; | 93 this.max_column = start; |
101 } | 94 } |
102 | 95 |
103 if (start == this.columns && start > end) { | 96 if (end > this.max_column) { |
104 var fold = true; | 97 this.max_column = end; |
105 } | 98 } |
106 | 99 |
107 x0 = this.cell[0] + this.box_size * start + this.box_size / 2; | 100 this.setColor(color, 0.0, 0.65); |
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 | 101 |
112 this.edge(x0, y0, x1, y1, color); | |
113 | 102 |
103 y = row.offsetTop-rela.offsetTop+4; | |
104 x = pad-((this.cell[0] + this.box_size * start - 1) + this.bg_height-2); | |
105 this.ctx.beginPath(); | |
106 this.ctx.moveTo(x, y); | |
107 | |
108 y += row.clientHeight; | |
109 x = pad-((1 + this.box_size * end) + this.bg_height-2); | |
110 this.ctx.lineTo(x,y+extra); | |
111 this.ctx.stroke(); | |
114 } | 112 } |
115 | |
116 // Draw the revision node in the right column | |
117 | 113 |
118 column = node[0] | 114 column = node[0] |
119 color = node[1] | 115 color = node[1] |
120 | 116 |
121 radius = this.box_size / 8; | 117 radius = 4; |
122 x = this.cell[0] + this.box_size * column + this.box_size / 2; | 118 y = row.offsetTop-rela.offsetTop+4; |
123 y = this.bg[1] - this.bg_height / 2; | 119 x = pad-(Math.round(this.cell[0] * scale/2 * column + radius) + 15 - (column*4)); |
124 var add = this.vertex(x, y, color, parity, cur); | 120 |
125 backgrounds += add[0]; | 121 this.ctx.beginPath(); |
126 nodedata += add[1]; | 122 this.setColor(color, 0.25, 0.75); |
123 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true); | |
124 this.ctx.fill(); | |
127 | 125 |
128 if (fold) this.columns -= 1; | 126 idx++; |
129 | |
130 } | 127 } |
131 | 128 |
132 document.getElementById('nodebgs').innerHTML += backgrounds; | |
133 document.getElementById('graphnodes').innerHTML += nodedata; | |
134 | |
135 } | 129 } |
136 | 130 |
137 } | 131 } |