Commit f04597d91864ed9af1444b1caef05b5498bd6c88

Authored by Koen Punt
1 parent e6c0673e

updated raphael

better labels
@@ -108,7 +108,7 @@ group :assets do @@ -108,7 +108,7 @@ group :assets do
108 gem "jquery-rails", "2.1.3" 108 gem "jquery-rails", "2.1.3"
109 gem "jquery-ui-rails", "2.0.2" 109 gem "jquery-ui-rails", "2.0.2"
110 gem "modernizr", "2.6.2" 110 gem "modernizr", "2.6.2"
111 - gem "raphael-rails", "1.5.2" 111 + gem "raphael-rails", git: "https://github.com/koenpunt/raphael-rails.git"
112 gem 'bootstrap-sass', "2.2.1.1" 112 gem 'bootstrap-sass', "2.2.1.1"
113 gem "font-awesome-sass-rails", "~> 2.0.0" 113 gem "font-awesome-sass-rails", "~> 2.0.0"
114 gem "gemoji", "~> 1.2.1", require: 'emoji/railtie' 114 gem "gemoji", "~> 1.2.1", require: 'emoji/railtie'
@@ -71,6 +71,12 @@ GIT @@ -71,6 +71,12 @@ GIT
71 http_parser.rb (~> 0.5.3) 71 http_parser.rb (~> 0.5.3)
72 multi_json (~> 1.0) 72 multi_json (~> 1.0)
73 73
  74 +GIT
  75 + remote: https://github.com/koenpunt/raphael-rails.git
  76 + revision: cb2c92a040b9b941a5f1aa1ea866cc26e944fe58
  77 + specs:
  78 + raphael-rails (2.1.0)
  79 +
74 GEM 80 GEM
75 remote: http://rubygems.org/ 81 remote: http://rubygems.org/
76 specs: 82 specs:
@@ -344,7 +350,6 @@ GEM @@ -344,7 +350,6 @@ GEM
344 thor (>= 0.14.6, < 2.0) 350 thor (>= 0.14.6, < 2.0)
345 raindrops (0.10.0) 351 raindrops (0.10.0)
346 rake (10.0.1) 352 rake (10.0.1)
347 - raphael-rails (1.5.2)  
348 rb-fsevent (0.9.2) 353 rb-fsevent (0.9.2)
349 rb-inotify (0.8.8) 354 rb-inotify (0.8.8)
350 ffi (>= 0.5.0) 355 ffi (>= 0.5.0)
@@ -512,7 +517,7 @@ DEPENDENCIES @@ -512,7 +517,7 @@ DEPENDENCIES
512 rack-mini-profiler 517 rack-mini-profiler
513 rails (= 3.2.9) 518 rails (= 3.2.9)
514 rails-dev-tweaks 519 rails-dev-tweaks
515 - raphael-rails (= 1.5.2) 520 + raphael-rails!
516 rb-fsevent 521 rb-fsevent
517 rb-inotify 522 rb-inotify
518 redcarpet (~> 2.2.2) 523 redcarpet (~> 2.2.2)
vendor/assets/javascripts/branch-graph.js
@@ -108,22 +108,10 @@ @@ -108,22 +108,10 @@
108 fill: this.colors[this.commits[i].space], 108 fill: this.colors[this.commits[i].space],
109 stroke: "none" 109 stroke: "none"
110 }); 110 });
111 - if (this.commits[i].refs != null && this.commits[i].refs != "") {  
112 - var longrefs = this.commits[i].refs  
113 - , shortrefs = this.commits[i].refs;  
114 - if (shortrefs.length > 15){  
115 - shortrefs = shortrefs.substr(0,13) + "...";  
116 - }  
117 - var t = r.text(x+5, y+8, shortrefs).attr({  
118 - font: "12px Monaco, Arial",  
119 - fill: "#666",  
120 - title: longrefs,  
121 - cursor: "pointer",  
122 - rotation: "90"  
123 - });  
124 -  
125 - var textbox = t.getBBox();  
126 - t.translate(textbox.height/-4, textbox.width/2); 111 +
  112 +
  113 + if (this.commits[i].refs) {
  114 + this.appendLabel(x, y, this.commits[i].refs);
127 } 115 }
128 var c; 116 var c;
129 for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) { 117 for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) {
@@ -208,6 +196,45 @@ @@ -208,6 +196,45 @@
208 }); 196 });
209 }; 197 };
210 198
  199 + BranchGraph.prototype.appendLabel = function(x, y, refs){
  200 + var r = this.raphael
  201 + , shortrefs = refs
  202 + , text, textbox, rect;
  203 +
  204 + if (shortrefs.length > 15){
  205 + // Truncate if longer than 15 chars
  206 + shortrefs = shortrefs.substr(0,13) + "...";
  207 + }
  208 +
  209 + text = r.text(x+5, y+8, shortrefs).attr({
  210 + font: "12px Monaco, Arial",
  211 + fill: "#FFF",
  212 + title: refs
  213 + });
  214 +
  215 + textbox = text.getBBox();
  216 + text.transform([
  217 + 't', textbox.height/-4, textbox.width/2 + 5,
  218 + 'r90'
  219 + ]);
  220 +
  221 + // Create rectangle based on the size of the textbox
  222 + rect = r.rect(x, y, textbox.width + 15, textbox.height + 5, 4).attr({
  223 + fill: "#000",
  224 + "fill-opacity": .5,
  225 + stroke: "none"
  226 + });
  227 +
  228 + // Rotate and reposition rectangle over text
  229 + rect.transform([
  230 + 'r', 90, x, y,
  231 + 't', 5, -10
  232 + ]);
  233 +
  234 + // Set text to front
  235 + text.toFront();
  236 + };
  237 +
211 BranchGraph.prototype.appendAnchor = function(top, c, x, y) { 238 BranchGraph.prototype.appendAnchor = function(top, c, x, y) {
212 var r = this.raphael 239 var r = this.raphael
213 , options = this.options 240 , options = this.options
@@ -252,6 +279,6 @@ Raphael.fn.tooltip = function (x, y, set, dir, size) { @@ -252,6 +279,6 @@ Raphael.fn.tooltip = function (x, y, set, dir, size) {
252 "l", 0, mmax(h - size, 0), (dir == 1) * size, size, (dir == 1) * -size, size, 0, mmax(h - size, 0), "a", size, size, 0, 0, 1, -size, size, 279 "l", 0, mmax(h - size, 0), (dir == 1) * size, size, (dir == 1) * -size, size, 0, mmax(h - size, 0), "a", size, size, 0, 0, 1, -size, size,
253 "l", -mmax(w - size, 0), 0, "z"].join(",") 280 "l", -mmax(w - size, 0), 0, "z"].join(",")
254 , xy = [{x: x, y: y + size * 2 + h}, {x: x - size * 2 - w, y: y}, {x: x, y: y - size * 2 - h}, {x: x + size * 2 + w, y: y}][dir]; 281 , xy = [{x: x, y: y + size * 2 + h}, {x: x - size * 2 - w, y: y}, {x: x, y: y - size * 2 - h}, {x: x + size * 2 + w, y: y}][dir];
255 - set.translate(xy.x - w - bb.x, xy.y - h - bb.y); 282 + set.transform(['t', xy.x - w - bb.x, xy.y - h - bb.y]);
256 return this.set(this.path(p).attr({fill: "#234", stroke: "none"}).insertBefore(set.node ? set : set[0]), set); 283 return this.set(this.path(p).attr({fill: "#234", stroke: "none"}).insertBefore(set.node ? set : set[0]), set);
257 }; 284 };