Mercurial > kallithea
diff pylons_app/public/js/graph.js @ 288:ab1afe7444f3
Initial graph release.
author | Marcin Kuzminski <marcin@python-works.com> |
---|---|
date | Wed, 23 Jun 2010 00:18:10 +0200 |
parents | a86c8de926b4 |
children | 1dbe02063123 |
line wrap: on
line diff
--- a/pylons_app/public/js/graph.js Tue Jun 22 22:32:19 2010 +0200 +++ b/pylons_app/public/js/graph.js Wed Jun 23 00:18:10 2010 +0200 @@ -1,5 +1,6 @@ // branch_renderer.js - Rendering of branch DAGs on the client side // +// 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> // @@ -15,50 +16,34 @@ [ 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, 0.0, 1.0 ], + [ 1.0, 1.0, 0.0 ], + [ 0.0, 0.0, 0.0 ] ]; -function Graph() { +function BranchRenderer() { - this.canvas = document.getElementById('graph'); - if (navigator.userAgent.indexOf('MSIE') >= 0) this.canvas = window.G_vmlCanvasManager.initElement(this.canvas); + this.canvas = document.getElementById("graph_canvas"); + + //if ($.browser.msie) + // 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 = 3; this.bg = [0, 4]; this.cell = [2, 0]; - this.columns = 0; this.revlink = ''; this.scale = function(height) { + this.box_size = Math.floor(height/1.2); + this.cell_height = this.box_size; this.bg_height = height; - this.box_size = Math.floor(this.bg_height / 1.2); - this.cell_height = this.box_size; } - function colorPart(num) { - num *= 255 - num = num < 0 ? 0 : num; - num = num > 255 ? 255 : num; - var digits = Math.round(num).toString(16); - if (num < 16) { - return '0' + digits; - } else { - return digits; - } - } - this.setColor = function(color, bg, fg) { - - // Set the colour. - // - // Picks a distinct colour based on an internal wheel; the bg - // parameter provides the value that should be assigned to the 'zero' - // colours and the fg parameter provides the multiplier that should be - // applied to the foreground colours. - color %= colors.length; var red = (colors[color][0] * fg) || bg; var green = (colors[color][1] * fg) || bg; @@ -69,69 +54,78 @@ var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; this.ctx.strokeStyle = s; this.ctx.fillStyle = s; - return s; - } this.render = function(data) { - - var backgrounds = ''; - var nodedata = ''; + var idx = 1; + var rela = document.getElementById('graph'); + var pad = 160; + var scale = 20; for (var i in data) { + this.scale(scale); + var row = document.getElementById("chg_"+idx); + var next = document.getElementById("chg_"+idx+1); + var extra = 0; - var parity = i % 2; - this.cell[1] += this.bg_height; + //skip this since i don't have DATE in my app + //if (next.is('.changesets-date')) { + // extra = next.outerHeight(); + //} + + + this.cell[1] += row.clientWidth; this.bg[1] += this.bg_height; - var cur = data[i]; - var node = cur[1]; - var edges = cur[2]; - var fold = false; + cur = data[i]; + nodeid = cur[0]; + node = cur[1]; + in_l = cur[2]; - for (var j in edges) { + for (var j in in_l) { - line = edges[j]; + line = in_l[j]; start = line[0]; end = line[1]; color = line[2]; - if (end > this.columns || start > this.columns) { - this.columns += 1; + if (start > this.max_column) { + this.max_column = start; } - if (start == this.columns && start > end) { - var fold = true; + if (end > this.max_column) { + this.max_column = end; } - x0 = this.cell[0] + this.box_size * start + this.box_size / 2; - y0 = this.bg[1] - this.bg_height / 2; - x1 = this.cell[0] + this.box_size * end + this.box_size / 2; - y1 = this.bg[1] + this.bg_height / 2; + this.setColor(color, 0.0, 0.65); + - this.edge(x0, y0, x1, y1, color); + y = row.offsetTop-rela.offsetTop+4; + x = pad-((this.cell[0] + this.box_size * start - 1) + this.bg_height-2); + this.ctx.beginPath(); + this.ctx.moveTo(x, y); + y += row.clientHeight; + x = pad-((1 + this.box_size * end) + this.bg_height-2); + this.ctx.lineTo(x,y+extra); + this.ctx.stroke(); } - // Draw the revision node in the right column - column = node[0] color = node[1] - radius = this.box_size / 8; - x = this.cell[0] + this.box_size * column + this.box_size / 2; - y = this.bg[1] - this.bg_height / 2; - var add = this.vertex(x, y, color, parity, cur); - backgrounds += add[0]; - nodedata += add[1]; + radius = 4; + y = row.offsetTop-rela.offsetTop+4; + x = pad-(Math.round(this.cell[0] * scale/2 * column + radius) + 15 - (column*4)); + + this.ctx.beginPath(); + this.setColor(color, 0.25, 0.75); + this.ctx.arc(x, y, radius, 0, Math.PI * 2, true); + this.ctx.fill(); - if (fold) this.columns -= 1; - + idx++; } - - document.getElementById('nodebgs').innerHTML += backgrounds; - document.getElementById('graphnodes').innerHTML += nodedata; - + } }