From 197f9abedfd689ba46bd12fa219e43f30996e23a Mon Sep 17 00:00:00 2001 From: Sato Hiroyuki Date: Mon, 11 Mar 2013 17:52:27 +0900 Subject: [PATCH] Covert to coffee. --- app/assets/javascripts/branch-graph.js.coffee | 633 +++++++----------- 1 file changed, 254 insertions(+), 379 deletions(-) diff --git a/app/assets/javascripts/branch-graph.js.coffee b/app/assets/javascripts/branch-graph.js.coffee index 525b17954b0..6e4d693109e 100644 --- a/app/assets/javascripts/branch-graph.js.coffee +++ b/app/assets/javascripts/branch-graph.js.coffee @@ -1,398 +1,273 @@ -!function(){ +class BranchGraph + constructor: (@element, @options) -> + @preparedCommits = {} + @mtime = 0 + @mspace = 0 + @parents = {} + @colors = ["#000"] + @load() - var BranchGraph = function(element, options){ - this.element = element; - this.options = options; - - this.preparedCommits = {}; - this.mtime = 0; - this.mspace = 0; - this.parents = {}; - this.colors = ["#000"]; - - 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(); - } - }; + load: -> + $.ajax + url: @options.url + method: "get" + dataType: "json" + success: $.proxy((data) -> + $(".loading", @element).hide() + @prepareData data.days, data.commits + @buildGraph() + , this) - BranchGraph.prototype.buildGraph = function(){ - var graphWidth = $(this.element).width() - , ch = this.mspace * 20 + 100 - , cw = Math.max(graphWidth, this.mtime * 20 + 260) - , r = Raphael(this.element.get(0), cw, ch) - , top = r.set() - , cuday = 0 - , cumonth = "" - , offsetX = 20 - , offsetY = 60 - , barWidth = Math.max(graphWidth, this.dayCount * 20 + 320) - , scrollLeft = cw; - - this.raphael = r; - - r.rect(0, 0, barWidth, 20).attr({fill: "#222"}); - r.rect(0, 20, barWidth, 20).attr({fill: "#444"}); - - for (mm = 0; mm < this.dayCount; mm++) { - if(this.days[mm] != null){ - if(cuday != this.days[mm][0]){ - // Dates - r.text(offsetX + mm * 20, 31, this.days[mm][0]).attr({ - font: "12px Monaco, monospace", + prepareData: (@days, @commits) -> + @collectParents() + @mtime += 4 + @mspace += 10 + + for c in @commits + c.isParent = true if c.id of @parents + @preparedCommits[c.id] = c + + @collectColors() + + collectParents: -> + for c in @commits + @mtime = Math.max(@mtime, c.time) + @mspace = Math.max(@mspace, c.space) + for p in c.parents + @parents[p[0]] = true + + collectColors: -> + k = 0 + while k < @mspace + @colors.push Raphael.getColor(.8) + # Skipping a few colors in the spectrum to get more contrast between colors + 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" - }); - cuday = this.days[mm][0]; - } - if(cumonth != this.days[mm][1]){ - // Months - r.text(offsetX + mm * 20, 11, this.days[mm][1]).attr({ - font: "12px Monaco, monospace", + ) + cuday = day[0] + + if cumonth isnt day[1] + # Months + r.text(offsetX + mm * 20, 11, day[1]) + .attr( + font: "12px Monaco, monospace" fill: "#EEE" - }); - cumonth = this.days[mm][1]; - } - } - } - - for (i = 0; i < this.commitCount; i++) { - var x = offsetX + 20 * this.commits[i].time - , y = offsetY + 10 * this.commits[i].space - , c - , ps; - - // Draw dot - r.circle(x, y, 3).attr({ - fill: this.colors[this.commits[i].space], + ) + cumonth = day[1] + + for commit in @commits + x = offsetX + 20 * commit.time + y = offsetY + 10 * commit.space + # Draw dot + r.circle(x, y, 3).attr( + fill: @colors[commit.space] stroke: "none" - }); - - // Draw lines - for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) { - c = this.preparedCommits[this.commits[i].parents[j][0]]; - ps = this.commits[i].parents[j][1]; - var cx = offsetX + 20 * c.time - , cy = offsetY + 10 * c.space - , psy = offsetY + 10 * ps; - if (c.space == this.commits[i].space && c.space == ps) { - r.path([ - "M", x, y, - "L", cx, cy - ]).attr({ - stroke: this.colors[c.space], + ) + + # Draw lines + for parent in commit.parents + parentCommit = @preparedCommits[parent[0]] + parentX = offsetX + 20 * parentCommit.time + parentY1 = offsetY + 10 * parentCommit.space + parentY2 = offsetY + 10 * parent[1] + if parentCommit.space is commit.space and parentCommit.space is parent[1] + r.path(["M", x, y, "L", parentX, parentY1]).attr( + stroke: @colors[parentCommit.space] "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) { - if (y == psy) { - r.path([ - "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], + 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[parentCommit.space] "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); - } - top.toFront(); - this.element.scrollLeft(scrollLeft); - this.bindEvents(); - }; - - BranchGraph.prototype.bindEvents = function(){ - var drag = {} - , element = this.element; - - var dragger = function(event){ - element.scrollLeft(drag.sl - (event.clientX - drag.x)); - element.scrollTop(drag.st - (event.clientY - drag.y)); - }; - - element.on({ - mousedown: function (event) { - drag = { - x: event.clientX, - y: event.clientY, - st: element.scrollTop(), - sl: element.scrollLeft() - }; - $(window).on('mousemove', dragger); - } - }); - $(window).on({ - mouseup: function(){ - //bars.animate({opacity: 0}, 300); - $(window).off('mousemove', dragger); - }, - keydown: function(event){ - if(event.keyCode == 37){ - // left - element.scrollLeft( element.scrollLeft() - 50); - } - if(event.keyCode == 38){ - // top - element.scrollTop( element.scrollTop() - 50); - } - if(event.keyCode == 39){ - // right - element.scrollLeft( element.scrollLeft() + 50); - } - if(event.keyCode == 40){ - // bottom - element.scrollTop( element.scrollTop() + 50); - } - } - }); - }; - - BranchGraph.prototype.appendLabel = function(x, y, refs){ - 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", + @appendLabel x, y, commit.refs if commit.refs + + # Mark commit and displayed in the center + if commit.id is @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 + + @appendAnchor top, commit, x, y + + top.toFront() + @element.scrollLeft scrollLeft + @bindEvents() + + bindEvents: -> + drag = {} + element = @element + dragger = (event) -> + element.scrollLeft drag.sl - (event.clientX - drag.x) + element.scrollTop drag.st - (event.clientY - drag.y) + + element.on mousedown: (event) -> + drag = + x: event.clientX + y: event.clientY + st: element.scrollTop() + sl: element.scrollLeft() + $(window).on "mousemove", dragger + + $(window).on + mouseup: -> + $(window).off "mousemove", dragger + keydown: (event) -> + # left + element.scrollLeft element.scrollLeft() - 50 if event.keyCode is 37 + # top + element.scrollTop element.scrollTop() - 50 if event.keyCode is 38 + # right + element.scrollLeft element.scrollLeft() + 50 if event.keyCode is 39 + # bottom + element.scrollTop element.scrollTop() + 50 if event.keyCode is 40 + + appendLabel: (x, y, refs) -> + 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" + 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": .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(); - 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(); - }; - - 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, + appendAnchor: (top, commit, x, y) -> + r = @raphael + options = @options + anchor = r.circle(x, y, 10).attr( + fill: "#000" + opacity: 0 cursor: "pointer" - }) - .click(function(){ - window.open(options.commit_url.replace('%s', commit.id), '_blank'); - }) - .hover(function(){ - this.tooltip = r.commitTooltip(x, y + 5, commit); - top.push(this.tooltip.insertBefore(this)); - }, function(){ - this.tooltip && this.tooltip.remove() && delete this.tooltip; - }); - top.push(anchor); - }; - - this.BranchGraph = BranchGraph; - -}(this); -Raphael.fn.commitTooltip = function(x, y, commit){ - var icon, nameText, idText, messageText - , boxWidth = 300 - , boxHeight = 200; - - icon = this.image(commit.author.icon, x, y, 20, 20); - nameText = this.text(x + 25, y + 10, commit.author.name); - idText = this.text(x, y + 35, commit.id); - messageText = this.text(x, y + 50, commit.message); - - textSet = this.set(icon, nameText, idText, messageText).attr({ - "text-anchor": "start", - "font": "12px Monaco, monospace" - }); - - nameText.attr({ - "font": "14px Arial", + ).click(-> + window.open options.commit_url.replace("%s", commit.id), "_blank" + ).hover(-> + @tooltip = r.commitTooltip(x, y + 5, commit) + top.push @tooltip.insertBefore(this) + , -> + @tooltip and @tooltip.remove() and delete @tooltip + ) + top.push anchor + +Raphael::commitTooltip = (x, y, commit) -> + icon = undefined + nameText = undefined + idText = undefined + messageText = undefined + boxWidth = 300 + boxHeight = 200 + icon = @image(commit.author.icon, x, y, 20, 20) + nameText = @text(x + 25, y + 10, commit.author.name) + idText = @text(x, y + 35, commit.id) + messageText = @text(x, y + 50, commit.message) + textSet = @set(icon, nameText, idText, messageText).attr( + "text-anchor": "start" + font: "12px Monaco, monospace" + ) + nameText.attr( + font: "14px Arial" "font-weight": "bold" - }); - - idText.attr({ - "fill": "#AAA" - }); - - textWrap(messageText, boxWidth - 50); + ) - var rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({ - "fill": "#FFF", - "stroke": "#000", - "stroke-linecap": "round", + idText.attr fill: "#AAA" + @textWrap messageText, boxWidth - 50 + rect = @rect(x - 10, y - 10, boxWidth, 100, 4).attr( + fill: "#FFF" + stroke: "#000" + "stroke-linecap": "round" "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({ - "height" : tooltip.getBBox().height + 10, - "width" : tooltip.getBBox().width + 10 - }); - - tooltip.transform([ - 't', 20, 20 - ]); - - return tooltip; -}; +Raphael::textWrap = (t, width) -> + content = t.attr("text") + abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" + t.attr text: abc + letterWidth = t.getBBox().width / abc.length + t.attr text: content + words = content.split(" ") + x = 0 + s = [] -function textWrap(t, width) { - var content = t.attr("text"); - var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; - t.attr({ - "text" : abc - }); - var letterWidth = t.getBBox().width / abc.length; - - t.attr({ - "text" : content - }); + for word in words + if x + (word.length * letterWidth) > width + s.push "\n" + x = 0 + x += word.length * letterWidth + s.push word + " " - var words = content.split(" "); - var x = 0, s = []; - for ( var i = 0; i < words.length; i++) { + t.attr text: s.join("") + b = t.getBBox() + h = Math.abs(b.y2) - Math.abs(b.y) + 1 + t.attr y: b.y + h - var l = words[i].length; - 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 - }); -} +@BranchGraph = BranchGraph -- GitLab