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