Mercurial > kallithea
changeset 4346:65f1d42383de
graph: fade color towards the merged one
author | Aras Pranckevicius <aras@unity3d.com> |
---|---|
date | Mon, 23 Dec 2013 11:09:32 +0200 |
parents | 2da0dc09895a |
children | 493f5f62be18 |
files | kallithea/public/js/graph.js |
diffstat | 1 files changed, 23 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/public/js/graph.js Tue Dec 10 19:30:37 2013 +0100 +++ b/kallithea/public/js/graph.js Mon Dec 23 11:09:32 2013 +0200 @@ -36,8 +36,8 @@ this.cur = [0, 0]; this.line_width = 2.0; this.dot_radius = 3.5; - - this.setColor = function(color, bg, fg) { + + this.calcColor = function(color, bg, fg) { color %= colors.length; var red = (colors[color][0] * fg) || bg; var green = (colors[color][1] * fg) || bg; @@ -46,6 +46,11 @@ green = Math.round(green * 255); blue = Math.round(blue * 255); var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; + return s; + } + + this.setColor = function(color, bg, fg) { + var s = this.calcColor(color, bg, fg); this.ctx.strokeStyle = s; this.ctx.fillStyle = s; } @@ -91,11 +96,24 @@ start = line[0]; end = line[1]; color = line[2]; - - this.setColor(color, 0.0, 0.65); - x = base_x - box_size * start; + + // if this is a merge of differently + // colored line, make it a gradient towards + // the merged color + if (color != node[1] && start == node[0]) + { + var gradient = this.ctx.createLinearGradient(x,rowY,x,nextY); + gradient.addColorStop(0,this.calcColor(node[1], 0.0, 0.65)); + gradient.addColorStop(1,this.calcColor(color, 0.0, 0.65)); + this.ctx.strokeStyle = gradient; + this.ctx.fillStyle = gradient; + } + else + { + this.setColor(color, 0.0, 0.65); + } this.ctx.lineWidth=this.line_width; this.ctx.beginPath();