##// END OF EJS Templates
graph: optimize rendering by appending all nodes at once
Augie Fackler -
r6728:84294e37 default
parent child Browse files
Show More
@@ -1,114 +1,110 b''
1 {header}
1 {header}
2 <title>{repo|escape}: revision graph</title>
2 <title>{repo|escape}: revision graph</title>
3 <link rel="alternate" type="application/atom+xml"
3 <link rel="alternate" type="application/atom+xml"
4 href="{url}atom-log" title="Atom feed for {repo|escape}: log">
4 href="{url}atom-log" title="Atom feed for {repo|escape}: log">
5 <link rel="alternate" type="application/rss+xml"
5 <link rel="alternate" type="application/rss+xml"
6 href="{url}rss-log" title="RSS feed for {repo|escape}: log">
6 href="{url}rss-log" title="RSS feed for {repo|escape}: log">
7 <!--[if IE]><script type="text/javascript" src="{staticurl}excanvas.js"></script><![endif]-->
7 <!--[if IE]><script type="text/javascript" src="{staticurl}excanvas.js"></script><![endif]-->
8 </head>
8 </head>
9 <body>
9 <body>
10
10
11 <div class="container">
11 <div class="container">
12 <div class="menu">
12 <div class="menu">
13 <div class="logo">
13 <div class="logo">
14 <a href="http://www.selenic.com/mercurial/">
14 <a href="http://www.selenic.com/mercurial/">
15 <img src="{staticurl}hglogo.png" width=75 height=90 border=0 alt="mercurial"></a>
15 <img src="{staticurl}hglogo.png" width=75 height=90 border=0 alt="mercurial"></a>
16 </div>
16 </div>
17 <ul>
17 <ul>
18 <li><a href="{url}shortlog{sessionvars%urlparameter}">log</a></li>
18 <li><a href="{url}shortlog{sessionvars%urlparameter}">log</a></li>
19 <li class="active">graph</li>
19 <li class="active">graph</li>
20 <li><a href="{url}tags{sessionvars%urlparameter}">tags</a></li>
20 <li><a href="{url}tags{sessionvars%urlparameter}">tags</a></li>
21 </ul>
21 </ul>
22 <ul>
22 <ul>
23 <li><a href="{url}rev/{node|short}{sessionvars%urlparameter}">changeset</a></li>
23 <li><a href="{url}rev/{node|short}{sessionvars%urlparameter}">changeset</a></li>
24 <li><a href="{url}file/{node|short}{path|urlescape}{sessionvars%urlparameter}">browse</a></li>
24 <li><a href="{url}file/{node|short}{path|urlescape}{sessionvars%urlparameter}">browse</a></li>
25 </ul>
25 </ul>
26 </div>
26 </div>
27
27
28 <div class="main">
28 <div class="main">
29 <h2>{repo|escape}</h2>
29 <h2>{repo|escape}</h2>
30 <h3>graph</h3>
30 <h3>graph</h3>
31
31
32 <form class="search" action="{url}log">
32 <form class="search" action="{url}log">
33 {sessionvars%hiddenformentry}
33 {sessionvars%hiddenformentry}
34 <p><input name="rev" id="search1" type="text" size="30"></p>
34 <p><input name="rev" id="search1" type="text" size="30"></p>
35 </form>
35 </form>
36
36
37 <div class="navigate">
37 <div class="navigate">
38 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
38 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
39 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
39 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
40 | {changenav%navgraphentry}
40 | {changenav%navgraphentry}
41 </div>
41 </div>
42
42
43 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
43 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
44
44
45 <div id="wrapper">
45 <div id="wrapper">
46 <ul id="nodebgs"></ul>
46 <ul id="nodebgs"></ul>
47 <canvas id="graph" width="224" height="{canvasheight}"></canvas>
47 <canvas id="graph" width="224" height="{canvasheight}"></canvas>
48 <ul id="graphnodes"></ul>
48 <ul id="graphnodes"></ul>
49 </div>
49 </div>
50
50
51 <script type="text/javascript" src="{staticurl}graph.js"></script>
51 <script type="text/javascript" src="{staticurl}graph.js"></script>
52 <script>
52 <script>
53
53
54 document.getElementById('noscript').style.visibility = 'hidden';
54 document.getElementById('noscript').style.visibility = 'hidden';
55
55
56 data = {jsdata|json};
56 data = {jsdata|json};
57 graph = new Graph();
57 graph = new Graph();
58 graph.scale({bg_height});
58 graph.scale({bg_height});
59
59
60 graph.edge = function(x0, y0, x1, y1, color) {
60 graph.edge = function(x0, y0, x1, y1, color) {
61
61
62 this.setColor(color, 0.0, 0.65);
62 this.setColor(color, 0.0, 0.65);
63 this.ctx.beginPath();
63 this.ctx.beginPath();
64 this.ctx.moveTo(x0, y0);
64 this.ctx.moveTo(x0, y0);
65 this.ctx.lineTo(x1, y1);
65 this.ctx.lineTo(x1, y1);
66 this.ctx.stroke();
66 this.ctx.stroke();
67
67
68 }
68 }
69
69
70 var nodes = document.getElementById('graphnodes');
71 var nodebgs = document.getElementById('nodebgs');
72
73 var revlink = '<li style="_STYLE"><span class="desc">';
70 var revlink = '<li style="_STYLE"><span class="desc">';
74 revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
71 revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
75 revlink += '</span><span class="tag">_TAGS</span>';
72 revlink += '</span><span class="tag">_TAGS</span>';
76 revlink += '<span class="info">_DATE ago, by _USER</span></li>';
73 revlink += '<span class="info">_DATE ago, by _USER</span></li>';
77
74
78 graph.vertex = function(x, y, color, parity, cur) {
75 graph.vertex = function(x, y, color, parity, cur) {
79
76
80 this.ctx.beginPath();
77 this.ctx.beginPath();
81 color = this.setColor(color, 0.25, 0.75);
78 color = this.setColor(color, 0.25, 0.75);
82 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
79 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
83 this.ctx.fill();
80 this.ctx.fill();
84
81
85 var bg = '<li class="bg parity' + parity + '"></li>';
82 var bg = '<li class="bg parity' + parity + '"></li>';
86 nodebgs.innerHTML += bg;
87
88 var left = (this.columns + 1) * this.bg_height;
83 var left = (this.columns + 1) * this.bg_height;
89 var nstyle = 'padding-left: ' + left + 'px;';
84 var nstyle = 'padding-left: ' + left + 'px;';
90 var item = revlink.replace(/_STYLE/, nstyle);
85 var item = revlink.replace(/_STYLE/, nstyle);
91 item = item.replace(/_PARITY/, 'parity' + parity);
86 item = item.replace(/_PARITY/, 'parity' + parity);
92 item = item.replace(/_NODEID/, cur[0]);
87 item = item.replace(/_NODEID/, cur[0]);
93 item = item.replace(/_NODEID/, cur[0]);
88 item = item.replace(/_NODEID/, cur[0]);
94 item = item.replace(/_DESC/, cur[3]);
89 item = item.replace(/_DESC/, cur[3]);
95 item = item.replace(/_USER/, cur[4]);
90 item = item.replace(/_USER/, cur[4]);
96 item = item.replace(/_DATE/, cur[5]);
91 item = item.replace(/_DATE/, cur[5]);
97 item = item.replace(/_TAGS/, cur[7].join('&nbsp; '));
92 item = item.replace(/_TAGS/, cur[7].join('&nbsp; '));
98 nodes.innerHTML += item;
93
94 return [bg, item];
99
95
100 }
96 }
101
97
102 graph.render(data);
98 graph.render(data);
103 </script>
99 </script>
104
100
105 <div class="navigate">
101 <div class="navigate">
106 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
102 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
107 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
103 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
108 | {changenav%navgraphentry}
104 | {changenav%navgraphentry}
109 </div>
105 </div>
110
106
111 </div>
107 </div>
112 </div>
108 </div>
113
109
114 {footer}
110 {footer}
@@ -1,123 +1,118 b''
1 #header#
1 #header#
2 <title>#repo|escape#: Graph</title>
2 <title>#repo|escape#: Graph</title>
3 <link rel="alternate" type="application/atom+xml"
3 <link rel="alternate" type="application/atom+xml"
4 href="{url}atom-log" title="Atom feed for #repo|escape#"/>
4 href="{url}atom-log" title="Atom feed for #repo|escape#"/>
5 <link rel="alternate" type="application/rss+xml"
5 <link rel="alternate" type="application/rss+xml"
6 href="{url}rss-log" title="RSS feed for #repo|escape#"/>
6 href="{url}rss-log" title="RSS feed for #repo|escape#"/>
7 </head>
7 </head>
8 <body>
8 <body>
9
9
10 <div class="page_header">
10 <div class="page_header">
11 <a href="http://www.selenic.com/mercurial/" title="Mercurial" style="float: right;">Mercurial</a><a href="{url}summary{sessionvars%urlparameter}">#repo|escape#</a> / graph
11 <a href="http://www.selenic.com/mercurial/" title="Mercurial" style="float: right;">Mercurial</a><a href="{url}summary{sessionvars%urlparameter}">#repo|escape#</a> / graph
12 </div>
12 </div>
13
13
14 <form action="{url}log">
14 <form action="{url}log">
15 {sessionvars%hiddenformentry}
15 {sessionvars%hiddenformentry}
16 <div class="search">
16 <div class="search">
17 <input type="text" name="rev" />
17 <input type="text" name="rev" />
18 </div>
18 </div>
19 </form>
19 </form>
20 <div class="page_nav">
20 <div class="page_nav">
21 <a href="{url}summary{sessionvars%urlparameter}">summary</a> |
21 <a href="{url}summary{sessionvars%urlparameter}">summary</a> |
22 <a href="{url}shortlog{sessionvars%urlparameter}">shortlog</a> |
22 <a href="{url}shortlog{sessionvars%urlparameter}">shortlog</a> |
23 <a href="{url}log/#rev#{sessionvars%urlparameter}">changelog</a> |
23 <a href="{url}log/#rev#{sessionvars%urlparameter}">changelog</a> |
24 graph |
24 graph |
25 <a href="{url}tags{sessionvars%urlparameter}">tags</a> |
25 <a href="{url}tags{sessionvars%urlparameter}">tags</a> |
26 <a href="{url}file/#node|short#{sessionvars%urlparameter}">files</a>
26 <a href="{url}file/#node|short#{sessionvars%urlparameter}">files</a>
27 <br/>
27 <br/>
28 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
28 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
29 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
29 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
30 | #changenav%navgraphentry#<br/>
30 | #changenav%navgraphentry#<br/>
31 </div>
31 </div>
32
32
33 <div class="title">&nbsp;</div>
33 <div class="title">&nbsp;</div>
34
34
35 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
35 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
36
36
37 <div id="wrapper">
37 <div id="wrapper">
38 <ul id="nodebgs"></ul>
38 <ul id="nodebgs"></ul>
39 <canvas id="graph" width="224" height="#canvasheight#"></canvas>
39 <canvas id="graph" width="224" height="#canvasheight#"></canvas>
40 <ul id="graphnodes"></ul>
40 <ul id="graphnodes"></ul>
41 </div>
41 </div>
42
42
43 <script type="text/javascript" src="#staticurl#graph.js"></script>
43 <script type="text/javascript" src="#staticurl#graph.js"></script>
44 <script>
44 <script>
45
45
46 document.getElementById('noscript').style.visibility = 'hidden';
46 document.getElementById('noscript').style.visibility = 'hidden';
47
47
48 data = {jsdata|json};
48 data = {jsdata|json};
49 graph = new Graph();
49 graph = new Graph();
50 graph.scale({bg_height});
50 graph.scale({bg_height});
51
51
52 graph.edge = function(x0, y0, x1, y1, color) {
52 graph.edge = function(x0, y0, x1, y1, color) {
53
53
54 this.setColor(color, 0.0, 0.65);
54 this.setColor(color, 0.0, 0.65);
55 this.ctx.beginPath();
55 this.ctx.beginPath();
56 this.ctx.moveTo(x0, y0);
56 this.ctx.moveTo(x0, y0);
57 this.ctx.lineTo(x1, y1);
57 this.ctx.lineTo(x1, y1);
58 this.ctx.stroke();
58 this.ctx.stroke();
59
59
60 }
60 }
61
61
62 var nodes = document.getElementById('graphnodes');
63 var nodebgs = document.getElementById('nodebgs');
64
65 var revlink = '<li style="_STYLE"><span class="desc">';
62 var revlink = '<li style="_STYLE"><span class="desc">';
66 revlink += '<a class="list" href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID"><b>_DESC</b></a>';
63 revlink += '<a class="list" href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID"><b>_DESC</b></a>';
67 revlink += '</span> _TAGS';
64 revlink += '</span> _TAGS';
68 revlink += '<span class="info">_DATE ago, by _USER</span></li>';
65 revlink += '<span class="info">_DATE ago, by _USER</span></li>';
69
66
70 graph.vertex = function(x, y, color, parity, cur) {
67 graph.vertex = function(x, y, color, parity, cur) {
71
68
72 this.ctx.beginPath();
69 this.ctx.beginPath();
73 color = this.setColor(color, 0.25, 0.75);
70 color = this.setColor(color, 0.25, 0.75);
74 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
71 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
75 this.ctx.fill();
72 this.ctx.fill();
76
73
77 var bg = '<li class="bg parity' + parity + '"></li>';
74 var bg = '<li class="bg parity' + parity + '"></li>';
78 nodebgs.innerHTML += bg;
79
80 var left = (this.columns + 1) * this.bg_height;
75 var left = (this.columns + 1) * this.bg_height;
81 var nstyle = 'padding-left: ' + left + 'px;';
76 var nstyle = 'padding-left: ' + left + 'px;';
82 var item = revlink.replace(/_STYLE/, nstyle);
77 var item = revlink.replace(/_STYLE/, nstyle);
83 item = item.replace(/_PARITY/, 'parity' + parity);
78 item = item.replace(/_PARITY/, 'parity' + parity);
84 item = item.replace(/_NODEID/, cur[0]);
79 item = item.replace(/_NODEID/, cur[0]);
85 item = item.replace(/_NODEID/, cur[0]);
80 item = item.replace(/_NODEID/, cur[0]);
86 item = item.replace(/_DESC/, cur[3]);
81 item = item.replace(/_DESC/, cur[3]);
87 item = item.replace(/_USER/, cur[4]);
82 item = item.replace(/_USER/, cur[4]);
88 item = item.replace(/_DATE/, cur[5]);
83 item = item.replace(/_DATE/, cur[5]);
89
84
90 var tagspan = '';
85 var tagspan = '';
91 if (cur[7].length || (cur[6][0] != 'default' || cur[6][1])) {
86 if (cur[7].length || (cur[6][0] != 'default' || cur[6][1])) {
92 tagspan = '<span class="logtags">';
87 tagspan = '<span class="logtags">';
93 if (cur[6][1]) {
88 if (cur[6][1]) {
94 tagspan += '<span class="branchtag" title="' + cur[6][0] + '">';
89 tagspan += '<span class="branchtag" title="' + cur[6][0] + '">';
95 tagspan += cur[6][0] + '</span> ';
90 tagspan += cur[6][0] + '</span> ';
96 } else if (!cur[6][1] && cur[6][0] != 'default') {
91 } else if (!cur[6][1] && cur[6][0] != 'default') {
97 tagspan += '<span class="inbranchtag" title="' + cur[6][0] + '">';
92 tagspan += '<span class="inbranchtag" title="' + cur[6][0] + '">';
98 tagspan += cur[6][0] + '</span> ';
93 tagspan += cur[6][0] + '</span> ';
99 }
94 }
100 if (cur[7].length) {
95 if (cur[7].length) {
101 for (var t in cur[7]) {
96 for (var t in cur[7]) {
102 var tag = cur[7][t];
97 var tag = cur[7][t];
103 tagspan += '<span class="tagtag">' + tag + '</span> ';
98 tagspan += '<span class="tagtag">' + tag + '</span> ';
104 }
99 }
105 }
100 }
106 tagspan += '</span>';
101 tagspan += '</span>';
107 }
102 }
108
103
109 item = item.replace(/_TAGS/, tagspan);
104 item = item.replace(/_TAGS/, tagspan);
110 nodes.innerHTML += item;
105 return [bg, item];
111
106
112 }
107 }
113
108
114 graph.render(data);
109 graph.render(data);
115 </script>
110 </script>
116
111
117 <div class="page_nav">
112 <div class="page_nav">
118 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
113 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountless}">less</a>
119 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
114 <a href="{url}graph/{uprev}{sessionvars%urlparameter}?revcount={revcountmore}">more</a>
120 | {changenav%navgraphentry}
115 | {changenav%navgraphentry}
121 </div>
116 </div>
122
117
123 #footer#
118 #footer#
@@ -1,97 +1,93 b''
1 #header#
1 #header#
2 <title>#repo|escape#: graph</title>
2 <title>#repo|escape#: graph</title>
3 <link rel="alternate" type="application/atom+xml"
3 <link rel="alternate" type="application/atom+xml"
4 href="#url#atom-tags" title="Atom feed for #repo|escape#: tags">
4 href="#url#atom-tags" title="Atom feed for #repo|escape#: tags">
5 <link rel="alternate" type="application/rss+xml"
5 <link rel="alternate" type="application/rss+xml"
6 href="#url#rss-tags" title="RSS feed for #repo|escape#: tags">
6 href="#url#rss-tags" title="RSS feed for #repo|escape#: tags">
7 </head>
7 </head>
8 <body>
8 <body>
9
9
10 <div class="buttons">
10 <div class="buttons">
11 <a href="#url#log{sessionvars%urlparameter}">changelog</a>
11 <a href="#url#log{sessionvars%urlparameter}">changelog</a>
12 <a href="#url#shortlog{sessionvars%urlparameter}">shortlog</a>
12 <a href="#url#shortlog{sessionvars%urlparameter}">shortlog</a>
13 <a href="#url#tags{sessionvars%urlparameter}">tags</a>
13 <a href="#url#tags{sessionvars%urlparameter}">tags</a>
14 <a href="#url#file/#node|short#/{sessionvars%urlparameter}">files</a>
14 <a href="#url#file/#node|short#/{sessionvars%urlparameter}">files</a>
15 </div>
15 </div>
16
16
17 <h2>graph</h2>
17 <h2>graph</h2>
18
18
19 <form action="#url#log">
19 <form action="#url#log">
20 {sessionvars%hiddenformentry}
20 {sessionvars%hiddenformentry}
21 <p>
21 <p>
22 <label for="search1">search:</label>
22 <label for="search1">search:</label>
23 <input name="rev" id="search1" type="text" size="30">
23 <input name="rev" id="search1" type="text" size="30">
24 navigate: <small class="navigate">#changenav%navgraphentry#</small>
24 navigate: <small class="navigate">#changenav%navgraphentry#</small>
25 </p>
25 </p>
26 </form>
26 </form>
27
27
28 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
28 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
29
29
30 <div id="wrapper">
30 <div id="wrapper">
31 <ul id="nodebgs"></ul>
31 <ul id="nodebgs"></ul>
32 <canvas id="graph" width="224" height="#canvasheight#"></canvas>
32 <canvas id="graph" width="224" height="#canvasheight#"></canvas>
33 <ul id="graphnodes"></ul>
33 <ul id="graphnodes"></ul>
34 </div>
34 </div>
35
35
36 <script type="text/javascript" src="#staticurl#graph.js"></script>
36 <script type="text/javascript" src="#staticurl#graph.js"></script>
37 <script>
37 <script>
38
38
39 document.getElementById('noscript').style.visibility = 'hidden';
39 document.getElementById('noscript').style.visibility = 'hidden';
40
40
41 data = {jsdata|json};
41 data = {jsdata|json};
42 graph = new Graph();
42 graph = new Graph();
43 graph.scale({bg_height});
43 graph.scale({bg_height});
44
44
45 graph.edge = function(x0, y0, x1, y1, color) {
45 graph.edge = function(x0, y0, x1, y1, color) {
46
46
47 this.setColor(color, 0.0, 0.65);
47 this.setColor(color, 0.0, 0.65);
48 this.ctx.beginPath();
48 this.ctx.beginPath();
49 this.ctx.moveTo(x0, y0);
49 this.ctx.moveTo(x0, y0);
50 this.ctx.lineTo(x1, y1);
50 this.ctx.lineTo(x1, y1);
51 this.ctx.stroke();
51 this.ctx.stroke();
52
52
53 }
53 }
54
54
55 var nodes = document.getElementById('graphnodes');
56 var nodebgs = document.getElementById('nodebgs');
57
58 var revlink = '<li style="_STYLE"><span class="desc">';
55 var revlink = '<li style="_STYLE"><span class="desc">';
59 revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
56 revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
60 revlink += '</span><span class="info">_DATE ago, by _USER</span></li>';
57 revlink += '</span><span class="info">_DATE ago, by _USER</span></li>';
61
58
62 graph.vertex = function(x, y, color, parity, cur) {
59 graph.vertex = function(x, y, color, parity, cur) {
63
60
64 this.ctx.beginPath();
61 this.ctx.beginPath();
65 color = this.setColor(color, 0.25, 0.75);
62 color = this.setColor(color, 0.25, 0.75);
66 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
63 this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
67 this.ctx.fill();
64 this.ctx.fill();
68
65
69 var bg = '<li class="bg parity' + parity + '"></li>';
66 var bg = '<li class="bg parity' + parity + '"></li>';
70 nodebgs.innerHTML += bg;
71
72 var left = (this.columns + 1) * this.bg_height;
67 var left = (this.columns + 1) * this.bg_height;
73 var nstyle = 'padding-left: ' + left + 'px;';
68 var nstyle = 'padding-left: ' + left + 'px;';
74 var item = revlink.replace(/_STYLE/, nstyle);
69 var item = revlink.replace(/_STYLE/, nstyle);
75 item = item.replace(/_PARITY/, 'parity' + parity);
70 item = item.replace(/_PARITY/, 'parity' + parity);
76 item = item.replace(/_NODEID/, cur[0]);
71 item = item.replace(/_NODEID/, cur[0]);
77 item = item.replace(/_NODEID/, cur[0]);
72 item = item.replace(/_NODEID/, cur[0]);
78 item = item.replace(/_DESC/, cur[3]);
73 item = item.replace(/_DESC/, cur[3]);
79 item = item.replace(/_USER/, cur[4]);
74 item = item.replace(/_USER/, cur[4]);
80 item = item.replace(/_DATE/, cur[5]);
75 item = item.replace(/_DATE/, cur[5]);
81 nodes.innerHTML += item;
76
77 return [bg, item];
82
78
83 }
79 }
84
80
85 graph.render(data);
81 graph.render(data);
86 </script>
82 </script>
87
83
88 <form action="#url#log">
84 <form action="#url#log">
89 {sessionvars%hiddenformentry}
85 {sessionvars%hiddenformentry}
90 <p>
86 <p>
91 <label for="search1">search:</label>
87 <label for="search1">search:</label>
92 <input name="rev" id="search1" type="text" size="30">
88 <input name="rev" id="search1" type="text" size="30">
93 navigate: <small class="navigate">#changenav%navgraphentry#</small>
89 navigate: <small class="navigate">#changenav%navgraphentry#</small>
94 </p>
90 </p>
95 </form>
91 </form>
96
92
97 #footer#
93 #footer#
@@ -1,129 +1,137 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 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
3 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
4 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
4 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
5 //
5 //
6 // derived from code written by Scott James Remnant <scott@ubuntu.com>
6 // derived from code written by Scott James Remnant <scott@ubuntu.com>
7 // Copyright 2005 Canonical Ltd.
7 // Copyright 2005 Canonical Ltd.
8 //
8 //
9 // This software may be used and distributed according to the terms
9 // This software may be used and distributed according to the terms
10 // of the GNU General Public License, incorporated herein by reference.
10 // of the GNU General Public License, incorporated herein by reference.
11
11
12 var colors = [
12 var colors = [
13 [ 1.0, 0.0, 0.0 ],
13 [ 1.0, 0.0, 0.0 ],
14 [ 1.0, 1.0, 0.0 ],
14 [ 1.0, 1.0, 0.0 ],
15 [ 0.0, 1.0, 0.0 ],
15 [ 0.0, 1.0, 0.0 ],
16 [ 0.0, 1.0, 1.0 ],
16 [ 0.0, 1.0, 1.0 ],
17 [ 0.0, 0.0, 1.0 ],
17 [ 0.0, 0.0, 1.0 ],
18 [ 1.0, 0.0, 1.0 ]
18 [ 1.0, 0.0, 1.0 ]
19 ];
19 ];
20
20
21 function Graph() {
21 function Graph() {
22
22
23 this.canvas = document.getElementById('graph');
23 this.canvas = document.getElementById('graph');
24 if (navigator.userAgent.indexOf('MSIE') >= 0) this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
24 if (navigator.userAgent.indexOf('MSIE') >= 0) this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
25 this.ctx = this.canvas.getContext('2d');
25 this.ctx = this.canvas.getContext('2d');
26 this.ctx.strokeStyle = 'rgb(0, 0, 0)';
26 this.ctx.strokeStyle = 'rgb(0, 0, 0)';
27 this.ctx.fillStyle = 'rgb(0, 0, 0)';
27 this.ctx.fillStyle = 'rgb(0, 0, 0)';
28 this.cur = [0, 0];
28 this.cur = [0, 0];
29 this.line_width = 3;
29 this.line_width = 3;
30 this.bg = [0, 4];
30 this.bg = [0, 4];
31 this.cell = [2, 0];
31 this.cell = [2, 0];
32 this.columns = 0;
32 this.columns = 0;
33 this.revlink = '';
33 this.revlink = '';
34
34
35 this.scale = function(height) {
35 this.scale = function(height) {
36 this.bg_height = height;
36 this.bg_height = height;
37 this.box_size = Math.floor(this.bg_height / 1.2);
37 this.box_size = Math.floor(this.bg_height / 1.2);
38 this.cell_height = this.box_size;
38 this.cell_height = this.box_size;
39 }
39 }
40
40
41 function colorPart(num) {
41 function colorPart(num) {
42 num *= 255
42 num *= 255
43 num = num < 0 ? 0 : num;
43 num = num < 0 ? 0 : num;
44 num = num > 255 ? 255 : num;
44 num = num > 255 ? 255 : num;
45 var digits = Math.round(num).toString(16);
45 var digits = Math.round(num).toString(16);
46 if (num < 16) {
46 if (num < 16) {
47 return '0' + digits;
47 return '0' + digits;
48 } else {
48 } else {
49 return digits;
49 return digits;
50 }
50 }
51 }
51 }
52
52
53 this.setColor = function(color, bg, fg) {
53 this.setColor = function(color, bg, fg) {
54
54
55 // Set the colour.
55 // Set the colour.
56 //
56 //
57 // Picks a distinct colour based on an internal wheel; the bg
57 // Picks a distinct colour based on an internal wheel; the bg
58 // parameter provides the value that should be assigned to the 'zero'
58 // parameter provides the value that should be assigned to the 'zero'
59 // colours and the fg parameter provides the multiplier that should be
59 // colours and the fg parameter provides the multiplier that should be
60 // applied to the foreground colours.
60 // applied to the foreground colours.
61
61
62 color %= colors.length;
62 color %= colors.length;
63 var red = (colors[color][0] * fg) || bg;
63 var red = (colors[color][0] * fg) || bg;
64 var green = (colors[color][1] * fg) || bg;
64 var green = (colors[color][1] * fg) || bg;
65 var blue = (colors[color][2] * fg) || bg;
65 var blue = (colors[color][2] * fg) || bg;
66 red = Math.round(red * 255);
66 red = Math.round(red * 255);
67 green = Math.round(green * 255);
67 green = Math.round(green * 255);
68 blue = Math.round(blue * 255);
68 blue = Math.round(blue * 255);
69 var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
69 var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
70 this.ctx.strokeStyle = s;
70 this.ctx.strokeStyle = s;
71 this.ctx.fillStyle = s;
71 this.ctx.fillStyle = s;
72 return s;
72 return s;
73
73
74 }
74 }
75
75
76 this.render = function(data) {
76 this.render = function(data) {
77
77
78 var backgrounds = '';
79 var nodedata = '';
80
78 for (var i in data) {
81 for (var i in data) {
79
82
80 var parity = i % 2;
83 var parity = i % 2;
81 this.cell[1] += this.bg_height;
84 this.cell[1] += this.bg_height;
82 this.bg[1] += this.bg_height;
85 this.bg[1] += this.bg_height;
83
86
84 var cur = data[i];
87 var cur = data[i];
85 var node = cur[1];
88 var node = cur[1];
86 var edges = cur[2];
89 var edges = cur[2];
87 var fold = false;
90 var fold = false;
88
91
89 for (var j in edges) {
92 for (var j in edges) {
90
93
91 line = edges[j];
94 line = edges[j];
92 start = line[0];
95 start = line[0];
93 end = line[1];
96 end = line[1];
94 color = line[2];
97 color = line[2];
95
98
96 if (end > this.columns || start > this.columns) {
99 if (end > this.columns || start > this.columns) {
97 this.columns += 1;
100 this.columns += 1;
98 }
101 }
99
102
100 if (start == this.columns && start > end) {
103 if (start == this.columns && start > end) {
101 var fold = true;
104 var fold = true;
102 }
105 }
103
106
104 x0 = this.cell[0] + this.box_size * start + this.box_size / 2;
107 x0 = this.cell[0] + this.box_size * start + this.box_size / 2;
105 y0 = this.bg[1] - this.bg_height / 2;
108 y0 = this.bg[1] - this.bg_height / 2;
106 x1 = this.cell[0] + this.box_size * end + this.box_size / 2;
109 x1 = this.cell[0] + this.box_size * end + this.box_size / 2;
107 y1 = this.bg[1] + this.bg_height / 2;
110 y1 = this.bg[1] + this.bg_height / 2;
108
111
109 this.edge(x0, y0, x1, y1, color);
112 this.edge(x0, y0, x1, y1, color);
110
113
111 }
114 }
112
115
113 // Draw the revision node in the right column
116 // Draw the revision node in the right column
114
117
115 column = node[0]
118 column = node[0]
116 color = node[1]
119 color = node[1]
117
120
118 radius = this.box_size / 8;
121 radius = this.box_size / 8;
119 x = this.cell[0] + this.box_size * column + this.box_size / 2;
122 x = this.cell[0] + this.box_size * column + this.box_size / 2;
120 y = this.bg[1] - this.bg_height / 2;
123 y = this.bg[1] - this.bg_height / 2;
121 this.vertex(x, y, color, parity, cur);
124 var add = this.vertex(x, y, color, parity, cur);
125 backgrounds += add[0];
126 nodedata += add[1];
122
127
123 if (fold) this.columns -= 1;
128 if (fold) this.columns -= 1;
124
129
125 }
130 }
126
131
132 document.getElementById('nodebgs').innerHTML += backgrounds;
133 document.getElementById('graphnodes').innerHTML += nodedata;
134
127 }
135 }
128
136
129 }
137 }
General Comments 0
You need to be logged in to leave comments. Login now