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