Redraw revision graph on window resize (#10206).

git-svn-id: svn+ssh://rubyforge.org/var/svn/redmine/trunk@8866 e93f8b46-1217-0410-a6f0-8f06a7374b81
This commit is contained in:
Etienne Massip 2012-02-13 20:20:18 +00:00
parent cccfed7006
commit c5317a14ac
2 changed files with 30 additions and 18 deletions

View File

@ -2,11 +2,16 @@
<%= javascript_include_tag 'revision_graph.js' %> <%= javascript_include_tag 'revision_graph.js' %>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
Event.observe(window, 'load', function(){
revisionGraph( ['load', 'resize'].each(function(window_event) {
document.getElementById('holder'),
<%= commits.to_json.html_safe %>, Event.observe(window, window_event, function(){
<%= space %>);
drawRevisionGraph(
document.getElementById('holder'),
<%= commits.to_json.html_safe %>,
<%= space %>);
});
}); });
</script> </script>

View File

@ -1,5 +1,6 @@
var revisionGraph = null;
function revisionGraph(holder, commits_hash, graph_space) { function drawRevisionGraph(holder, commits_hash, graph_space) {
var XSTEP = 20, var XSTEP = 20,
CIRCLE_INROW_OFFSET = 10; CIRCLE_INROW_OFFSET = 10;
@ -11,22 +12,28 @@ function revisionGraph(holder, commits_hash, graph_space) {
var commit_table_rows = $$('table.changesets tr.changeset'); var commit_table_rows = $$('table.changesets tr.changeset');
// create graph
if(revisionGraph != null)
revisionGraph.clear();
else
revisionGraph = Raphael(holder);
var top = revisionGraph.set();
// init dimensions // init dimensions
var graph_offset = $(holder).getLayout().get('top'), var graph_offset = $(holder).getLayout().get('top'),
graph_width = (graph_space + 1) * XSTEP, graph_width = (graph_space + 1) * XSTEP,
graph_height = commit_table_rows[max_rdmid].getLayout().get('top') + commit_table_rows[max_rdmid].getLayout().get('height') - graph_offset; graph_height = commit_table_rows[max_rdmid].getLayout().get('top') + commit_table_rows[max_rdmid].getLayout().get('height') - graph_offset;
revisionGraph.setSize(graph_width, graph_height);
// init colors // init colors
var colors = []; var colors = [];
for (var k = 0; k < graph_space + 1; k++) { Raphael.getColor.reset();
for (var k = 0; k <= graph_space; k++) {
colors.push(Raphael.getColor()); colors.push(Raphael.getColor());
} }
// create graph
var graph = Raphael(holder, graph_width, graph_height),
top = graph.set();
var parent_commit; var parent_commit;
var x, y, parent_x, parent_y; var x, y, parent_x, parent_y;
var path, longrefs, shortrefs, label, labelBBox; var path, longrefs, shortrefs, label, labelBBox;
@ -36,14 +43,14 @@ function revisionGraph(holder, commits_hash, graph_space) {
y = commit_table_rows[max_rdmid - commit.rdmid].getLayout().get('top') - graph_offset + CIRCLE_INROW_OFFSET; y = commit_table_rows[max_rdmid - commit.rdmid].getLayout().get('top') - graph_offset + CIRCLE_INROW_OFFSET;
x = XSTEP / 2 + XSTEP * commit.space; x = XSTEP / 2 + XSTEP * commit.space;
graph.circle(x, y, 3).attr({fill: colors[commit.space], stroke: 'none'}); revisionGraph.circle(x, y, 3).attr({fill: colors[commit.space], stroke: 'none'});
// title // title
if (commit.refs != null && commit.refs != '') { if (commit.refs != null && commit.refs != '') {
longrefs = commit.refs; longrefs = commit.refs;
shortrefs = longrefs.length > 15 ? longrefs.substr(0, 13) + '...' : longrefs; shortrefs = longrefs.length > 15 ? longrefs.substr(0, 13) + '...' : longrefs;
label = graph.text(x + 5, y + 5, shortrefs) label = revisionGraph.text(x + 5, y + 5, shortrefs)
.attr({ .attr({
font: '12px Fontin-Sans, Arial', font: '12px Fontin-Sans, Arial',
fill: '#666', fill: '#666',
@ -65,26 +72,26 @@ function revisionGraph(holder, commits_hash, graph_space) {
if (parent_commit.space == commit.space) { if (parent_commit.space == commit.space) {
// vertical path // vertical path
path = graph.path([ path = revisionGraph.path([
'M', x, y, 'M', x, y,
'V', parent_y]); 'V', parent_y]);
} else { } else {
// path to a commit in a different branch (Bezier curve) // path to a commit in a different branch (Bezier curve)
path = graph.path([ path = revisionGraph.path([
'M', x, y, 'M', x, y,
'C', x, y, x, y + (parent_y - y) / 2, x + (parent_x - x) / 2, y + (parent_y - y) / 2, 'C', x, y, x, y + (parent_y - y) / 2, x + (parent_x - x) / 2, y + (parent_y - y) / 2,
'C', x + (parent_x - x) / 2, y + (parent_y - y) / 2, parent_x, parent_y-(parent_y-y)/2, parent_x, parent_y]); 'C', x + (parent_x - x) / 2, y + (parent_y - y) / 2, parent_x, parent_y-(parent_y-y)/2, parent_x, parent_y]);
} }
} else { } else {
// vertical path ending at the bottom of the graph // vertical path ending at the bottom of the revisionGraph
path = graph.path([ path = revisionGraph.path([
'M', x, y, 'M', x, y,
'V', graph_height]); 'V', graph_height]);
} }
path.attr({stroke: colors[commit.space], "stroke-width": 1.5}); path.attr({stroke: colors[commit.space], "stroke-width": 1.5});
}); });
top.push(graph.circle(x, y, 10) top.push(revisionGraph.circle(x, y, 10)
.attr({ .attr({
fill: '#000', fill: '#000',
opacity: 0, opacity: 0,