Skip to content
Snippets Groups Projects
Commit 197f9abe authored by Sato Hiroyuki's avatar Sato Hiroyuki
Browse files

Covert to coffee.

parent b8f070f0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/assets/javascripts/branch-graph.js.coffee
+ 254
− 379
View file @ 197f9abe
!function(){ class BranchGraph
constructor: (@element, @options) ->
@preparedCommits = {}
@mtime = 0
@mspace = 0
@parents = {}
@colors = ["#000"]
@load()
   
var BranchGraph = function(element, options){ load: ->
this.element = element; $.ajax
this.options = options; url: @options.url
method: "get"
this.preparedCommits = {}; dataType: "json"
this.mtime = 0; success: $.proxy((data) ->
this.mspace = 0; $(".loading", @element).hide()
this.parents = {}; @prepareData data.days, data.commits
this.colors = ["#000"]; @buildGraph()
, this)
this.load();
};
BranchGraph.prototype.load = function(){
$.ajax({
url: this.options.url,
method: 'get',
dataType: 'json',
success: $.proxy(function(data){
$('.loading', this.element).hide();
this.prepareData(data.days, data.commits);
this.buildGraph();
}, this)
});
};
BranchGraph.prototype.prepareData = function(days, commits){
this.days = days;
this.dayCount = days.length;
this.commits = commits;
this.commitCount = commits.length;
this.collectParents();
this.mtime += 4;
this.mspace += 10;
for (var i = 0; i < this.commitCount; i++) {
if (this.commits[i].id in this.parents) {
this.commits[i].isParent = true;
}
this.preparedCommits[this.commits[i].id] = this.commits[i];
}
this.collectColors();
};
BranchGraph.prototype.collectParents = function(){
for (var i = 0; i < this.commitCount; i++) {
for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) {
this.parents[this.commits[i].parents[j][0]] = true;
}
this.mtime = Math.max(this.mtime, this.commits[i].time);
this.mspace = Math.max(this.mspace, this.commits[i].space);
}
};
BranchGraph.prototype.collectColors = function(){
for (var k = 0; k < this.mspace; k++) {
this.colors.push(Raphael.getColor(.8));
// Skipping a few colors in the spectrum to get more contrast between colors
Raphael.getColor();Raphael.getColor();
}
};
   
BranchGraph.prototype.buildGraph = function(){ prepareData: (@days, @commits) ->
var graphWidth = $(this.element).width() @collectParents()
, ch = this.mspace * 20 + 100 @mtime += 4
, cw = Math.max(graphWidth, this.mtime * 20 + 260) @mspace += 10
, r = Raphael(this.element.get(0), cw, ch)
, top = r.set() for c in @commits
, cuday = 0 c.isParent = true if c.id of @parents
, cumonth = "" @preparedCommits[c.id] = c
, offsetX = 20
, offsetY = 60 @collectColors()
, barWidth = Math.max(graphWidth, this.dayCount * 20 + 320)
, scrollLeft = cw; collectParents: ->
for c in @commits
this.raphael = r; @mtime = Math.max(@mtime, c.time)
@mspace = Math.max(@mspace, c.space)
r.rect(0, 0, barWidth, 20).attr({fill: "#222"}); for p in c.parents
r.rect(0, 20, barWidth, 20).attr({fill: "#444"}); @parents[p[0]] = true
for (mm = 0; mm < this.dayCount; mm++) { collectColors: ->
if(this.days[mm] != null){ k = 0
if(cuday != this.days[mm][0]){ while k < @mspace
// Dates @colors.push Raphael.getColor(.8)
r.text(offsetX + mm * 20, 31, this.days[mm][0]).attr({ # Skipping a few colors in the spectrum to get more contrast between colors
font: "12px Monaco, monospace", Raphael.getColor()
Raphael.getColor()
k++
buildGraph: ->
graphWidth = $(@element).width()
ch = @mspace * 20 + 100
cw = Math.max(graphWidth, @mtime * 20 + 260)
r = Raphael(@element.get(0), cw, ch)
top = r.set()
cuday = 0
cumonth = ""
offsetX = 20
offsetY = 60
barWidth = Math.max(graphWidth, @days.length * 20 + 320)
scrollLeft = cw
@raphael = r
r.rect(0, 0, barWidth, 20).attr fill: "#222"
r.rect(0, 20, barWidth, 20).attr fill: "#444"
for day, mm in @days
if cuday isnt day[0]
# Dates
r.text(offsetX + mm * 20, 31, day[0])
.attr(
font: "12px Monaco, monospace"
fill: "#DDD" fill: "#DDD"
}); )
cuday = this.days[mm][0]; cuday = day[0]
}
if(cumonth != this.days[mm][1]){ if cumonth isnt day[1]
// Months # Months
r.text(offsetX + mm * 20, 11, this.days[mm][1]).attr({ r.text(offsetX + mm * 20, 11, day[1])
font: "12px Monaco, monospace", .attr(
font: "12px Monaco, monospace"
fill: "#EEE" fill: "#EEE"
}); )
cumonth = this.days[mm][1]; cumonth = day[1]
}
} for commit in @commits
} x = offsetX + 20 * commit.time
y = offsetY + 10 * commit.space
for (i = 0; i < this.commitCount; i++) { # Draw dot
var x = offsetX + 20 * this.commits[i].time r.circle(x, y, 3).attr(
, y = offsetY + 10 * this.commits[i].space fill: @colors[commit.space]
, c
, ps;
// Draw dot
r.circle(x, y, 3).attr({
fill: this.colors[this.commits[i].space],
stroke: "none" stroke: "none"
}); )
// Draw lines # Draw lines
for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) { for parent in commit.parents
c = this.preparedCommits[this.commits[i].parents[j][0]]; parentCommit = @preparedCommits[parent[0]]
ps = this.commits[i].parents[j][1]; parentX = offsetX + 20 * parentCommit.time
var cx = offsetX + 20 * c.time parentY1 = offsetY + 10 * parentCommit.space
, cy = offsetY + 10 * c.space parentY2 = offsetY + 10 * parent[1]
, psy = offsetY + 10 * ps; if parentCommit.space is commit.space and parentCommit.space is parent[1]
if (c.space == this.commits[i].space && c.space == ps) { r.path(["M", x, y, "L", parentX, parentY1]).attr(
r.path([ stroke: @colors[parentCommit.space]
"M", x, y,
"L", cx, cy
]).attr({
stroke: this.colors[c.space],
"stroke-width": 2 "stroke-width": 2
}); )
else if parentCommit.space < commit.space
if y is parentY2
r.path(["M", x - 5, y, "l-5,-2,0,4,5,-2", "L", x - 10, y, "L", x - 15, parentY2, "L", parentX + 5, parentY2, "L", parentX, parentY1]).attr(
stroke: @colors[commit.space]
"stroke-width": 2
)
else
r.path(["M", x - 3, y - 6, "l-4,-3,4,-2,0,5", "L", x - 5, y - 10, "L", x - 10, parentY2, "L", parentX + 5, parentY2, "L", parentX, parentY1]).attr(
stroke: @colors[commit.space]
"stroke-width": 2
)
   
} else if (c.space < this.commits[i].space) { else
if (y == psy) { r.path(["M", x - 3, y + 6, "l-4,3,4,2,0,-5", "L", x - 5, y + 10, "L", x - 10, parentY2, "L", parentX + 5, parentY2, "L", parentX, parentY1]).attr(
r.path([ stroke: @colors[parentCommit.space]
"M", x - 5, y,
"l-5,-2,0,4,5,-2",
"L", x - 10, y,
"L", x - 15, psy,
"L", cx + 5, psy,
"L", cx, cy])
.attr({
stroke: this.colors[this.commits[i].space],
"stroke-width": 2
});
} else {
r.path([
"M", x - 3, y - 6,
"l-4,-3,4,-2,0,5",
"L", x - 5, y - 10,
"L", x - 10, psy,
"L", cx + 5, psy,
"L", cx, cy])
.attr({
stroke: this.colors[this.commits[i].space],
"stroke-width": 2
});
}
} else {
r.path([
"M", x - 3, y + 6,
"l-4,3,4,2,0,-5",
"L", x - 5, y + 10,
"L", x - 10, psy,
"L", cx + 5, psy,
"L", cx, cy])
.attr({
stroke: this.colors[c.space],
"stroke-width": 2 "stroke-width": 2
}); )
}
}
if (this.commits[i].refs) {
this.appendLabel(x, y, this.commits[i].refs);
}
// mark commit and displayed in the center
if (this.commits[i].id == this.options.commit_id) {
r.path([
'M', x, y - 5,
'L', x + 4, y - 15,
'L', x - 4, y - 15,
'Z'
]).attr({
"fill": "#000",
"fill-opacity": .7,
"stroke": "none"
});
scrollLeft = x - graphWidth / 2;
}
   
this.appendAnchor(top, this.commits[i], x, y); @appendLabel x, y, commit.refs if commit.refs
}
top.toFront(); # Mark commit and displayed in the center
this.element.scrollLeft(scrollLeft); if commit.id is @options.commit_id
this.bindEvents(); r.path(["M", x, y - 5, "L", x + 4, y - 15, "L", x - 4, y - 15, "Z"]).attr(
}; fill: "#000"
"fill-opacity": .7
BranchGraph.prototype.bindEvents = function(){ stroke: "none"
var drag = {} )
, element = this.element;
scrollLeft = x - graphWidth / 2
var dragger = function(event){
element.scrollLeft(drag.sl - (event.clientX - drag.x)); @appendAnchor top, commit, x, y
element.scrollTop(drag.st - (event.clientY - drag.y));
}; top.toFront()
@element.scrollLeft scrollLeft
element.on({ @bindEvents()
mousedown: function (event) {
drag = { bindEvents: ->
x: event.clientX, drag = {}
y: event.clientY, element = @element
st: element.scrollTop(), dragger = (event) ->
sl: element.scrollLeft() element.scrollLeft drag.sl - (event.clientX - drag.x)
}; element.scrollTop drag.st - (event.clientY - drag.y)
$(window).on('mousemove', dragger);
} element.on mousedown: (event) ->
}); drag =
$(window).on({ x: event.clientX
mouseup: function(){ y: event.clientY
//bars.animate({opacity: 0}, 300); st: element.scrollTop()
$(window).off('mousemove', dragger); sl: element.scrollLeft()
}, $(window).on "mousemove", dragger
keydown: function(event){
if(event.keyCode == 37){ $(window).on
// left mouseup: ->
element.scrollLeft( element.scrollLeft() - 50); $(window).off "mousemove", dragger
} keydown: (event) ->
if(event.keyCode == 38){ # left
// top element.scrollLeft element.scrollLeft() - 50 if event.keyCode is 37
element.scrollTop( element.scrollTop() - 50); # top
} element.scrollTop element.scrollTop() - 50 if event.keyCode is 38
if(event.keyCode == 39){ # right
// right element.scrollLeft element.scrollLeft() + 50 if event.keyCode is 39
element.scrollLeft( element.scrollLeft() + 50); # bottom
} element.scrollTop element.scrollTop() + 50 if event.keyCode is 40
if(event.keyCode == 40){
// bottom appendLabel: (x, y, refs) ->
element.scrollTop( element.scrollTop() + 50); r = @raphael
} shortrefs = refs
} # Truncate if longer than 15 chars
}); shortrefs = shortrefs.substr(0, 15) + "…" if shortrefs.length > 17
}; text = r.text(x + 5, y + 8 + 10, shortrefs).attr(
font: "10px Monaco, monospace"
BranchGraph.prototype.appendLabel = function(x, y, refs){ fill: "#FFF"
var r = this.raphael
, shortrefs = refs
, text, textbox, rect;
if (shortrefs.length > 17){
// Truncate if longer than 15 chars
shortrefs = shortrefs.substr(0,15) + "…";
}
text = r.text(x+5, y+8 + 10, shortrefs).attr({
font: "10px Monaco, monospace",
fill: "#FFF",
title: refs 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": .7
stroke: "none"
)
triangle = r.path(["M", x, y + 5, "L", x + 4, y + 15, "L", x - 4, y + 15, "Z"]).attr(
fill: "#000"
"fill-opacity": .7
stroke: "none"
)
# Rotate and reposition rectangle over text
rect.transform ["r", 90, x, y, "t", 15, -9]
# Set text to front
text.toFront()
   
textbox = text.getBBox(); appendAnchor: (top, commit, x, y) ->
text.transform([ r = @raphael
't', textbox.height/-4, textbox.width/2 + 5, options = @options
'r90' anchor = r.circle(x, y, 10).attr(
]); fill: "#000"
opacity: 0
// 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": .7,
"stroke": "none"
});
triangle = r.path([
'M', x, y + 5,
'L', x + 4, y + 15,
'L', x - 4, y + 15,
'Z'
]).attr({
"fill": "#000",
"fill-opacity": .7,
"stroke": "none"
});
// Rotate and reposition rectangle over text
rect.transform([
'r', 90, x, y,
't', 15, -9
]);
// Set text to front
text.toFront();
};
BranchGraph.prototype.appendAnchor = function(top, commit, x, y) {
var r = this.raphael
, options = this.options
, anchor;
anchor = r.circle(x, y, 10).attr({
fill: "#000",
opacity: 0,
cursor: "pointer" cursor: "pointer"
}) ).click(->
.click(function(){ window.open options.commit_url.replace("%s", commit.id), "_blank"
window.open(options.commit_url.replace('%s', commit.id), '_blank'); ).hover(->
}) @tooltip = r.commitTooltip(x, y + 5, commit)
.hover(function(){ top.push @tooltip.insertBefore(this)
this.tooltip = r.commitTooltip(x, y + 5, commit); , ->
top.push(this.tooltip.insertBefore(this)); @tooltip and @tooltip.remove() and delete @tooltip
}, function(){ )
this.tooltip && this.tooltip.remove() && delete this.tooltip; top.push anchor
});
top.push(anchor); Raphael::commitTooltip = (x, y, commit) ->
}; icon = undefined
nameText = undefined
this.BranchGraph = BranchGraph; idText = undefined
messageText = undefined
}(this); boxWidth = 300
Raphael.fn.commitTooltip = function(x, y, commit){ boxHeight = 200
var icon, nameText, idText, messageText icon = @image(commit.author.icon, x, y, 20, 20)
, boxWidth = 300 nameText = @text(x + 25, y + 10, commit.author.name)
, boxHeight = 200; idText = @text(x, y + 35, commit.id)
messageText = @text(x, y + 50, commit.message)
icon = this.image(commit.author.icon, x, y, 20, 20); textSet = @set(icon, nameText, idText, messageText).attr(
nameText = this.text(x + 25, y + 10, commit.author.name); "text-anchor": "start"
idText = this.text(x, y + 35, commit.id); font: "12px Monaco, monospace"
messageText = this.text(x, y + 50, commit.message); )
nameText.attr(
textSet = this.set(icon, nameText, idText, messageText).attr({ font: "14px Arial"
"text-anchor": "start",
"font": "12px Monaco, monospace"
});
nameText.attr({
"font": "14px Arial",
"font-weight": "bold" "font-weight": "bold"
}); )
idText.attr({
"fill": "#AAA"
});
textWrap(messageText, boxWidth - 50);
   
var rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({ idText.attr fill: "#AAA"
"fill": "#FFF", @textWrap messageText, boxWidth - 50
"stroke": "#000", rect = @rect(x - 10, y - 10, boxWidth, 100, 4).attr(
"stroke-linecap": "round", fill: "#FFF"
stroke: "#000"
"stroke-linecap": "round"
"stroke-width": 2 "stroke-width": 2
}); )
var tooltip = this.set(rect, textSet); tooltip = @set(rect, textSet)
rect.attr(
height: tooltip.getBBox().height + 10
width: tooltip.getBBox().width + 10
)
tooltip.transform ["t", 20, 20]
tooltip
   
rect.attr({ Raphael::textWrap = (t, width) ->
"height" : tooltip.getBBox().height + 10, content = t.attr("text")
"width" : tooltip.getBBox().width + 10 abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
}); t.attr text: abc
letterWidth = t.getBBox().width / abc.length
tooltip.transform([ t.attr text: content
't', 20, 20 words = content.split(" ")
]); x = 0
s = []
return tooltip;
};
   
function textWrap(t, width) { for word in words
var content = t.attr("text"); if x + (word.length * letterWidth) > width
var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; s.push "\n"
t.attr({ x = 0
"text" : abc x += word.length * letterWidth
}); s.push word + " "
var letterWidth = t.getBBox().width / abc.length;
t.attr({
"text" : content
});
   
var words = content.split(" "); t.attr text: s.join("")
var x = 0, s = []; b = t.getBBox()
for ( var i = 0; i < words.length; i++) { h = Math.abs(b.y2) - Math.abs(b.y) + 1
t.attr y: b.y + h
   
var l = words[i].length; @BranchGraph = BranchGraph
if (x + (l * letterWidth) > width) {
s.push("\n");
x = 0;
}
x += l * letterWidth;
s.push(words[i] + " ");
}
t.attr({
"text" : s.join("")
});
var b = t.getBBox()
, h = Math.abs(b.y2) - Math.abs(b.y) + 1;
t.attr({
"y": b.y + h
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment