graph.js
135 lines
| 3.3 KiB
| application/javascript
|
JavascriptLexer
r547 | // branch_renderer.js - Rendering of branch DAGs on the client side | |||
// | ||||
// Copyright 2010 Marcin Kuzminski <marcin AT python-works DOT com> | ||||
// Copyright 2008 Jesper Noehr <jesper AT noehr DOT org> | ||||
// Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl> | ||||
// Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de> | ||||
// | ||||
// derived from code written by Scott James Remnant <scott@ubuntu.com> | ||||
// Copyright 2005 Canonical Ltd. | ||||
// | ||||
// This software may be used and distributed according to the terms | ||||
// of the GNU General Public License, incorporated herein by reference. | ||||
var colors = [ | ||||
[ 1.0, 0.0, 0.0 ], | ||||
[ 1.0, 1.0, 0.0 ], | ||||
[ 0.0, 1.0, 0.0 ], | ||||
[ 0.0, 1.0, 1.0 ], | ||||
[ 0.0, 0.0, 1.0 ], | ||||
[ 1.0, 0.0, 1.0 ], | ||||
[ 1.0, 1.0, 0.0 ], | ||||
[ 0.0, 0.0, 0.0 ] | ||||
]; | ||||
function BranchRenderer() { | ||||
this.canvas = document.getElementById("graph_canvas"); | ||||
if (navigator.userAgent.indexOf('MSIE') >= 0) | ||||
this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); | ||||
this.ctx = this.canvas.getContext('2d'); | ||||
this.ctx.strokeStyle = 'rgb(0, 0, 0)'; | ||||
this.ctx.fillStyle = 'rgb(0, 0, 0)'; | ||||
this.cur = [0, 0]; | ||||
this.max_column = 1; | ||||
this.line_width = 2.5; | ||||
this.dot_radius = 5.5; | ||||
this.scale = function(height) { | ||||
this.box_size = Math.floor(height/1.2); | ||||
} | ||||
this.setColor = function(color, bg, fg) { | ||||
color %= colors.length; | ||||
var red = (colors[color][0] * fg) || bg; | ||||
var green = (colors[color][1] * fg) || bg; | ||||
var blue = (colors[color][2] * fg) || bg; | ||||
red = Math.round(red * 255); | ||||
green = Math.round(green * 255); | ||||
blue = Math.round(blue * 255); | ||||
var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; | ||||
this.ctx.strokeStyle = s; | ||||
this.ctx.fillStyle = s; | ||||
} | ||||
|
r2921 | this.render = function(data,width) { | ||
r547 | var idx = 1; | |||
var rela = document.getElementById('graph'); | ||||
|
r2921 | var pad = width; | ||
r547 | var scale = 22; | |||
r1865 | ||||
r547 | for (var i in data) { | |||
this.scale(scale); | ||||
r1865 | ||||
r547 | var row = document.getElementById("chg_"+idx); | |||
|
r1880 | if (row == null) | ||
continue; | ||||
|
r1873 | var next = document.getElementById("chg_"+(idx+1)); | ||
r547 | var extra = 0; | |||
cur = data[i]; | ||||
nodeid = cur[0]; | ||||
node = cur[1]; | ||||
in_l = cur[2]; | ||||
r1865 | ||||
|
r1873 | var rowY = row.offsetTop + row.offsetHeight/2 - rela.offsetTop; | ||
var nextY = (next == null) ? rowY + row.offsetHeight/2 : next.offsetTop + next.offsetHeight/2 - rela.offsetTop; | ||||
r1865 | ||||
r547 | for (var j in in_l) { | |||
line = in_l[j]; | ||||
start = line[0]; | ||||
end = line[1]; | ||||
color = line[2]; | ||||
if (start > this.max_column) { | ||||
this.max_column = start; | ||||
} | ||||
if (end > this.max_column) { | ||||
this.max_column = end; | ||||
} | ||||
this.setColor(color, 0.0, 0.65); | ||||
|
r1877 | |||
r547 | ||||
|
r2921 | x = pad-(this.box_size * start - 1 + scale); | ||
r1464 | ||||
r547 | this.ctx.lineWidth=this.line_width; | |||
this.ctx.beginPath(); | ||||
|
r1873 | this.ctx.moveTo(x, rowY); | ||
r1464 | ||||
r1655 | ||||
|
r1863 | if (start == end) | ||
{ | ||||
|
r2921 | x = pad-((1 + this.box_size * end) + scale-2); | ||
|
r1873 | this.ctx.lineTo(x,nextY+extra,3); | ||
|
r1863 | } | ||
else | ||||
{ | ||||
|
r2921 | var x2 = pad-((1 + this.box_size * end) + scale-2); | ||
|
r1873 | var ymid = (rowY+nextY) / 2; | ||
this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,nextY); | ||||
|
r1863 | } | ||
r547 | this.ctx.stroke(); | |||
} | ||||
column = node[0] | ||||
color = node[1] | ||||
radius = this.dot_radius; | ||||
|
r1877 | |||
|
r2921 | x = pad-(Math.round(scale * column + radius) + 15 - (column*4)); | ||
r547 | ||||
this.ctx.beginPath(); | ||||
this.setColor(color, 0.25, 0.75); | ||||
|
r1873 | this.ctx.arc(x, rowY, radius, 0, Math.PI * 2, true); | ||
r547 | this.ctx.fill(); | |||
idx++; | ||||
} | ||||
} | ||||
} | ||||