From e1282d507f1a0321c4f25815470b0fa05265e6dd Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 7 Dec 2012 19:06:46 +0100 Subject: [PATCH] BranchGraph now loads async Centralized keyboard and drag events for BranchGraph --- app/assets/javascripts/projects.js.coffee | 7 -- app/controllers/projects_controller.rb | 14 ++- app/views/projects/graph.html.haml | 8 +- lib/gitlab/graph/commit.rb | 2 +- lib/gitlab/graph/json_builder.rb | 17 ++- vendor/assets/javascripts/branch-graph.js | 168 +++++++++++++++++------------- 6 files changed, 122 insertions(+), 94 deletions(-) diff --git a/app/assets/javascripts/projects.js.coffee b/app/assets/javascripts/projects.js.coffee index 1808f0578..d03a487c4 100644 --- a/app/assets/javascripts/projects.js.coffee +++ b/app/assets/javascripts/projects.js.coffee @@ -18,10 +18,3 @@ $ -> # Ref switcher $('.project-refs-select').on 'change', -> $(@).parents('form').submit() - -class @GraphNav - @init: -> - $('.graph svg').css 'position', 'relative' - $('body').bind 'keyup', (e) -> - $('.graph svg').animate(left: '+=400') if e.keyCode is 37 # left - $('.graph svg').animate(left: '-=400') if e.keyCode is 39 # right diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb index 272a6e954..b6213001a 100644 --- a/app/controllers/projects_controller.rb +++ b/app/controllers/projects_controller.rb @@ -83,9 +83,19 @@ class ProjectsController < ProjectResourceController end def graph - graph = Gitlab::Graph::JsonBuilder.new(project) + + respond_to do |format| + format.html + format.json do + graph = Gitlab::Graph::JsonBuilder.new(project) + #@days_json, @commits_json = graph.days_json, graph.commits_json + render :text => graph.to_json + end + end + + - @days_json, @commits_json = graph.days_json, graph.commits_json + end def destroy diff --git a/app/views/projects/graph.html.haml b/app/views/projects/graph.html.haml index edc3c2de8..eb7049211 100644 --- a/app/views/projects/graph.html.haml +++ b/app/views/projects/graph.html.haml @@ -4,12 +4,10 @@ %h4 %small You can move around the graph by using the arrow keys. #holder.graph + .loading :javascript - var commits = #{@commits_json} - , days = #{@days_json}; - var branch_graph = new BranchGraph(days, commits); + var branch_graph; $(function(){ - branch_graph.buildGraph($("#holder")[0]); - GraphNav.init(); + branch_graph = new BranchGraph($("#holder"), '#{url_for :controller => 'projects', :action => 'graph'}'); }); diff --git a/lib/gitlab/graph/commit.rb b/lib/gitlab/graph/commit.rb index af8d7828c..3d82c3443 100644 --- a/lib/gitlab/graph/commit.rb +++ b/lib/gitlab/graph/commit.rb @@ -28,7 +28,7 @@ module Gitlab h[:refs] = refs.collect{|r|r.name}.join(" ") unless refs.nil? h[:id] = sha h[:date] = date - h[:message] = escape_once(message) + h[:message] = message h[:login] = author.email h end diff --git a/lib/gitlab/graph/json_builder.rb b/lib/gitlab/graph/json_builder.rb index c2c3fa662..e60176449 100644 --- a/lib/gitlab/graph/json_builder.rb +++ b/lib/gitlab/graph/json_builder.rb @@ -17,16 +17,15 @@ module Gitlab @commits = collect_commits @days = index_commits end - - def days_json - @days_json = @days.compact.map { |d| [d.day, d.strftime("%b")] }.to_json - end - - def commits_json - @commits_json = @commits.map(&:to_graph_hash).to_json + + def to_json + { + days: @days.compact.map { |d| [d.day, d.strftime("%b")] }, + commits: @commits.map(&:to_graph_hash) + }.to_json end - - protected + + protected # Get commits from repository # diff --git a/vendor/assets/javascripts/branch-graph.js b/vendor/assets/javascripts/branch-graph.js index 8bd8aa024..c25bf938a 100644 --- a/vendor/assets/javascripts/branch-graph.js +++ b/vendor/assets/javascripts/branch-graph.js @@ -1,22 +1,34 @@ !function(){ - var BranchGraph = function(days, commits){ + var BranchGraph = function(element, url){ + this.element = element; + this.url = url; - this.days = days || {}; - this.commits = commits || {}; this.comms = {}; - this.pixelsX = []; - this.pixelsY = []; this.mtime = 0; this.mspace = 0; this.parents = {}; - this.ii = 0; this.colors = ["#000"]; - this.prepareData(); + this.load(); }; - BranchGraph.prototype.prepareData = function(){ + BranchGraph.prototype.load = function(){ + $.ajax({ + url: this.url, + method: 'get', + dataType: 'json', + success: $.proxy(function(data){ + $('.loading', this.element).hide(); + this.prepareData(data.days, data.commits); + this.buildGraph(this.element.get(0)); + }, this) + }); + }, + + BranchGraph.prototype.prepareData = function(days, commits){ + this.days = days; + this.commits = commits; ii = this.commits.length; for (var i = 0; i < ii; i++) { for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) { @@ -25,8 +37,8 @@ this.mtime = Math.max(this.mtime, this.commits[i].time); this.mspace = Math.max(this.mspace, this.commits[i].space); } - this.mtime = this.mtime + 4; - this.mspace = this.mspace + 10; + this.mtime += 4; + this.mspace += 10; for (i = 0; i < ii; i++) { if (this.commits[i].id in this.parents) { this.commits[i].isParent = true; @@ -41,10 +53,13 @@ BranchGraph.prototype.buildGraph = function(holder){ var ch = this.mspace * 20 + 20 , cw = this.mtime * 20 + 20 - , r = Raphael("holder", cw, ch) + , r = Raphael(holder, cw, ch) , top = r.set() , cuday = 0 - , cumonth = ""; + , cumonth = "" + , r; + + this.raphael = r; r.rect(0, 0, this.days.length * 20 + 80, 30).attr({fill: "#222"}); r.rect(0, 30, this.days.length * 20 + 80, 20).attr({fill: "#444"}); @@ -116,66 +131,79 @@ } } } - (function (c, x, y) { - top.push(r.circle(x, y, 10).attr({ - fill: "#000", - opacity: 0, - cursor: "pointer" - }) - .click(function(){ - location.href = location.href.replace("graph", "commits/" + c.id); - }) - .hover(function () { - // Create empty node to convert entities to character - var m = $('
').html(c.message).text() - , s = r.text(100, 100, c.author + "\n \n" + c.id + "\n \n" + m).attr({ - fill: "#fff" - }); - this.popup = r.popupit(x, y + 5, s, 0); - top.push(this.popup.insertBefore(this)); - }, function () { - this.popup && this.popup.remove() && delete this.popup; - })); - }(this.commits[i], x, y)); - - top.toFront(); - var hw = holder.offsetWidth - , hh = holder.offsetHeight - , v = r.rect(hw - 8, 0, 4, Math.pow(hh, 2) / ch, 2).attr({ - fill: "#000", - opacity: 0 - }) - , h = r.rect(0, hh - 8, Math.pow(hw, 2) / cw, 4, 2).attr({ - fill: "#000", - opacity: 0 - }) - , bars = r.set(v, h) - , drag - , dragger = function (event) { - if (drag) { - event = event || window.event; - holder.scrollLeft = drag.sl - (event.clientX - drag.x); - holder.scrollTop = drag.st - (event.clientY - drag.y); - } - }; - holder.onmousedown = function (event) { - event = event || window.event; - drag = { - x: event.clientX, - y: event.clientY, - st: holder.scrollTop, - sl: holder.scrollLeft - }; - document.onmousemove = dragger; - bars.animate({opacity: .5}, 300); + this.appendAnchor(top, this.commits[i], x, y); + } + top.toFront(); + var hw = holder.offsetWidth + , hh = holder.offsetHeight + , v = r.rect(hw - 8, 0, 4, Math.pow(hh, 2) / ch, 2).attr({ + fill: "#000", + opacity: 0 + }) + , h = r.rect(0, hh - 8, Math.pow(hw, 2) / cw, 4, 2).attr({ + fill: "#000", + opacity: 0 + }) + , bars = r.set(v, h) + , drag + , dragger = function (event) { + if (drag) { + event = event || window.event; + holder.scrollLeft = drag.sl - (event.clientX - drag.x); + holder.scrollTop = drag.st - (event.clientY - drag.y); + } }; - document.onmouseup = function () { - drag = false; - document.onmousemove = null; - bars.animate({opacity: 0}, 300); + holder.onmousedown = function (event) { + event = event || window.event; + drag = { + x: event.clientX, + y: event.clientY, + st: holder.scrollTop, + sl: holder.scrollLeft }; - holder.scrollLeft = cw; - } + document.onmousemove = dragger; + bars.animate({opacity: .5}, 300); + }; + document.onmouseup = function () { + drag = false; + document.onmousemove = null; + bars.animate({opacity: 0}, 300); + }; + + $(window).on('keydown', function(event){ + if(event.keyCode == 37){ + holder.scrollLeft -= 50; + } + if(event.keyCode == 39){ + // right + holder.scrollLeft += 50; + } + }); + + + holder.scrollLeft = cw; + }; + + BranchGraph.prototype.appendAnchor = function(top, c, x, y) { + var r = this.raphael; + top.push(r.circle(x, y, 10).attr({ + fill: "#000", + opacity: 0, + cursor: "pointer" + }) + .click(function(){ + location.href = location.href.replace("graph", "commits/" + c.id); + }) + .hover(function () { + // Create empty node to convert entities to character + var s = r.text(100, 100, c.author + "\n \n" + c.id + "\n \n" + c.message).attr({ + fill: "#fff" + }); + this.popup = r.popupit(x, y + 5, s, 0); + top.push(this.popup.insertBefore(this)); + }, function () { + this.popup && this.popup.remove() && delete this.popup; + })); }; this.BranchGraph = BranchGraph; -- 2.11.0