Show More
@@ -2528,7 +2528,7 b' h3.files_location {' | |||||
2528 |
|
2528 | |||
2529 | #graph_nodes { |
|
2529 | #graph_nodes { | |
2530 | float: left; |
|
2530 | float: left; | |
2531 |
margin-right: |
|
2531 | margin-right: 0px; | |
2532 | margin-top: 0px; |
|
2532 | margin-top: 0px; | |
2533 | } |
|
2533 | } | |
2534 |
|
2534 |
@@ -48,11 +48,16 b' function BranchRenderer() {' | |||||
48 | this.ctx.fillStyle = s; |
|
48 | this.ctx.fillStyle = s; | |
49 | } |
|
49 | } | |
50 |
|
50 | |||
51 | this.render = function(data,canvasWidth) { |
|
51 | this.render = function(data,canvasWidth,lineCount) { | |
52 | var idx = 1; |
|
52 | var idx = 1; | |
53 | var rela = document.getElementById('graph'); |
|
53 | var rela = document.getElementById('graph'); | |
54 |
|
54 | |||
55 | var box_size = 18; |
|
55 | if (lineCount == 0) | |
|
56 | lineCount = 1; | |||
|
57 | ||||
|
58 | var edge_pad = this.dot_radius + 2; | |||
|
59 | var box_size = Math.min(18, Math.floor((canvasWidth - edge_pad*2)/(lineCount))); | |||
|
60 | var base_x = canvasWidth - edge_pad; | |||
56 |
|
61 | |||
57 | for (var i in data) { |
|
62 | for (var i in data) { | |
58 |
|
63 | |||
@@ -72,14 +77,14 b' function BranchRenderer() {' | |||||
72 | for (var j in in_l) { |
|
77 | for (var j in in_l) { | |
73 |
|
78 | |||
74 | line = in_l[j]; |
|
79 | line = in_l[j]; | |
75 |
start = line[0] |
|
80 | start = line[0]; | |
76 |
end = line[1] |
|
81 | end = line[1]; | |
77 | color = line[2]; |
|
82 | color = line[2]; | |
78 |
|
83 | |||
79 | this.setColor(color, 0.0, 0.65); |
|
84 | this.setColor(color, 0.0, 0.65); | |
80 |
|
85 | |||
81 |
|
86 | |||
82 |
x = |
|
87 | x = base_x - box_size * start; | |
83 |
|
88 | |||
84 | this.ctx.lineWidth=this.line_width; |
|
89 | this.ctx.lineWidth=this.line_width; | |
85 | this.ctx.beginPath(); |
|
90 | this.ctx.beginPath(); | |
@@ -91,19 +96,19 b' function BranchRenderer() {' | |||||
91 | } |
|
96 | } | |
92 | else |
|
97 | else | |
93 | { |
|
98 | { | |
94 |
var x2 = |
|
99 | var x2 = base_x - box_size * end; | |
95 | var ymid = (rowY+nextY) / 2; |
|
100 | var ymid = (rowY+nextY) / 2; | |
96 | this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,nextY); |
|
101 | this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,nextY); | |
97 | } |
|
102 | } | |
98 | this.ctx.stroke(); |
|
103 | this.ctx.stroke(); | |
99 | } |
|
104 | } | |
100 |
|
105 | |||
101 |
column = node[0] |
|
106 | column = node[0]; | |
102 | color = node[1]; |
|
107 | color = node[1]; | |
103 |
|
108 | |||
104 | radius = this.dot_radius; |
|
109 | radius = this.dot_radius; | |
105 |
|
110 | |||
106 |
x = |
|
111 | x = base_x - box_size * column; | |
107 |
|
112 | |||
108 | this.ctx.beginPath(); |
|
113 | this.ctx.beginPath(); | |
109 | this.setColor(color, 0.25, 0.75); |
|
114 | this.setColor(color, 0.25, 0.75); |
@@ -193,11 +193,11 b'' | |||||
193 | YUD.setStyle(e.currentTarget,'display','none'); |
|
193 | YUD.setStyle(e.currentTarget,'display','none'); | |
194 | YUD.setStyle(elem,'height','auto'); |
|
194 | YUD.setStyle(elem,'height','auto'); | |
195 |
|
195 | |||
196 |
//redraw the graph, |
|
196 | //redraw the graph, line_count and jsdata are global vars | |
197 |
set_canvas( |
|
197 | set_canvas(100); | |
198 |
|
198 | |||
199 | var r = new BranchRenderer(); |
|
199 | var r = new BranchRenderer(); | |
200 |
r.render(jsdata, |
|
200 | r.render(jsdata,100,line_count); | |
201 |
|
201 | |||
202 | }) |
|
202 | }) | |
203 |
|
203 | |||
@@ -223,31 +223,32 b'' | |||||
223 |
|
223 | |||
224 | }); |
|
224 | }); | |
225 |
|
225 | |||
226 |
function set_canvas( |
|
226 | function set_canvas(width) { | |
227 | var c = document.getElementById('graph_nodes'); |
|
227 | var c = document.getElementById('graph_nodes'); | |
228 | var t = document.getElementById('graph_content'); |
|
228 | var t = document.getElementById('graph_content'); | |
229 | canvas = document.getElementById('graph_canvas'); |
|
229 | canvas = document.getElementById('graph_canvas'); | |
230 | var div_h = t.clientHeight; |
|
230 | var div_h = t.clientHeight; | |
231 | c.style.height=div_h+'px'; |
|
231 | c.style.height=div_h+'px'; | |
232 | canvas.setAttribute('height',div_h); |
|
232 | canvas.setAttribute('height',div_h); | |
233 |
c.style.height= |
|
233 | c.style.height=width+'px'; | |
234 |
canvas.setAttribute('width', |
|
234 | canvas.setAttribute('width',width); | |
235 | }; |
|
235 | }; | |
236 | var heads = 1; |
|
236 | var heads = 1; | |
237 |
var |
|
237 | var line_count = 0; | |
238 | var jsdata = ${c.jsdata|n}; |
|
238 | var jsdata = ${c.jsdata|n}; | |
239 |
|
239 | |||
240 |
for( |
|
240 | for (var i=0;i<jsdata.length;i++) { | |
241 | var m = Math.max.apply(Math, jsdata[i][1]); |
|
241 | var in_l = jsdata[i][2]; | |
242 | if (m>max_heads){ |
|
242 | for (var j in in_l) { | |
243 | max_heads = m; |
|
243 | var m = in_l[j][1]; | |
|
244 | if (m > line_count) | |||
|
245 | line_count = m; | |||
244 | } |
|
246 | } | |
245 | } |
|
247 | } | |
246 | var max_w = Math.max(100,max_heads*25); |
|
248 | set_canvas(100); | |
247 | set_canvas(max_w); |
|
|||
248 |
|
249 | |||
249 | var r = new BranchRenderer(); |
|
250 | var r = new BranchRenderer(); | |
250 |
r.render(jsdata, |
|
251 | r.render(jsdata,100,line_count); | |
251 |
|
252 | |||
252 | }); |
|
253 | }); | |
253 | </script> |
|
254 | </script> |
General Comments 0
You need to be logged in to leave comments.
Login now