updated raphael

better labels

3 files changed, 52 insertions, 20 deletions

diff --git a/Gemfile b/Gemfile
index 4defcec325f..814e5ea918b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -108,7 +108,7 @@ group :assets do
   gem "jquery-rails",     "2.1.3"
   gem "jquery-ui-rails",  "2.0.2"
   gem "modernizr",        "2.6.2"
-  gem "raphael-rails",    "1.5.2"
+  gem "raphael-rails",    git: "https://github.com/koenpunt/raphael-rails.git"
   gem 'bootstrap-sass',   "2.2.1.1"
   gem "font-awesome-sass-rails", "~> 2.0.0"
   gem "gemoji", "~> 1.2.1", require: 'emoji/railtie'
diff --git a/Gemfile.lock b/Gemfile.lock
index 4b08c3141b4..aa3d5125ef6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -71,6 +71,12 @@ GIT
       http_parser.rb (~> 0.5.3)
       multi_json (~> 1.0)
 
+GIT
+  remote: https://github.com/koenpunt/raphael-rails.git
+  revision: cb2c92a040b9b941a5f1aa1ea866cc26e944fe58
+  specs:
+    raphael-rails (2.1.0)
+
 GEM
   remote: http://rubygems.org/
   specs:
@@ -344,7 +350,6 @@ GEM
       thor (>= 0.14.6, < 2.0)
     raindrops (0.10.0)
     rake (10.0.1)
-    raphael-rails (1.5.2)
     rb-fsevent (0.9.2)
     rb-inotify (0.8.8)
       ffi (>= 0.5.0)
@@ -512,7 +517,7 @@ DEPENDENCIES
   rack-mini-profiler
   rails (= 3.2.9)
   rails-dev-tweaks
-  raphael-rails (= 1.5.2)
+  raphael-rails!
   rb-fsevent
   rb-inotify
   redcarpet (~> 2.2.2)
diff --git a/vendor/assets/javascripts/branch-graph.js b/vendor/assets/javascripts/branch-graph.js
index 456c3ff6c1c..ed85bdfdadd 100644
--- a/vendor/assets/javascripts/branch-graph.js
+++ b/vendor/assets/javascripts/branch-graph.js
@@ -108,22 +108,10 @@
         fill: this.colors[this.commits[i].space], 
         stroke: "none"
       });
-      if (this.commits[i].refs != null && this.commits[i].refs != "") {
-        var longrefs = this.commits[i].refs
-          , shortrefs = this.commits[i].refs;
-        if (shortrefs.length > 15){
-          shortrefs = shortrefs.substr(0,13) + "...";
-        }
-        var t = r.text(x+5, y+8, shortrefs).attr({
-          font: "12px Monaco, Arial", 
-          fill: "#666",
-          title: longrefs, 
-          cursor: "pointer", 
-          rotation: "90"
-        });
-
-        var textbox = t.getBBox();
-        t.translate(textbox.height/-4, textbox.width/2);
+      
+      
+      if (this.commits[i].refs) {
+        this.appendLabel(x, y, this.commits[i].refs);
       }
       var c;
       for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) {
@@ -208,6 +196,45 @@
     });
   };
   
+  BranchGraph.prototype.appendLabel = function(x, y, refs){
+    var r = this.raphael
+      , shortrefs = refs
+      , text, textbox, rect;
+    
+    if (shortrefs.length > 15){
+      // Truncate if longer than 15 chars
+      shortrefs = shortrefs.substr(0,13) + "...";
+    }
+    
+    text = r.text(x+5, y+8, shortrefs).attr({
+      font: "12px Monaco, Arial", 
+      fill: "#FFF",
+      title: refs
+    });
+
+    textbox = text.getBBox();
+    text.transform([
+      't', textbox.height/-4, textbox.width/2 + 5,
+      'r90'
+    ]);
+    
+    // Create rectangle based on the size of the textbox
+    rect = r.rect(x, y, textbox.width + 15, textbox.height + 5, 4).attr({
+      fill: "#000",
+      "fill-opacity": .5,
+      stroke: "none"
+    });
+    
+    // Rotate and reposition rectangle over text
+    rect.transform([
+      'r', 90, x, y,
+      't', 5, -10
+    ]);
+    
+    // Set text to front
+    text.toFront();
+  };
+  
   BranchGraph.prototype.appendAnchor = function(top, c, x, y) {
     var r = this.raphael
       , options = this.options
@@ -252,6 +279,6 @@ Raphael.fn.tooltip = function (x, y, set, dir, size) {
           "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,
           "l", -mmax(w - size, 0), 0, "z"].join(",")
     , 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];
-  set.translate(xy.x - w - bb.x, xy.y - h - bb.y);
+  set.transform(['t', xy.x - w - bb.x, xy.y - h - bb.y]);
   return this.set(this.path(p).attr({fill: "#234", stroke: "none"}).insertBefore(set.node ? set : set[0]), set);
 };