Download as
Browse Code »

Commit 7367f1cfd8f3cd134a0de4d9121c67ec8fd1f477

Authored by Dmitriy Zaporozhets
2 parents dc3590d6 197f9abe
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Merge pull request #3192 from hiroponz/convert-to-coffee 

Convert branch-graph.js to branch-graph.js.coffee
Showing 2 changed files with 273 additions and 398 deletions   Show diff stats
app/assets/javascripts/branch-graph.js
View file @dc3590d
... ... @@ -1,398 +0,0 @@
1   -!function(){
2   -
3   - var BranchGraph = function(element, options){
4   - this.element = element;
5   - this.options = options;
6   -
7   - this.preparedCommits = {};
8   - this.mtime = 0;
9   - this.mspace = 0;
10   - this.parents = {};
11   - this.colors = ["#000"];
12   -
13   - this.load();
14   - };
15   -
16   - BranchGraph.prototype.load = function(){
17   - $.ajax({
18   - url: this.options.url,
19   - method: 'get',
20   - dataType: 'json',
21   - success: $.proxy(function(data){
22   - $('.loading', this.element).hide();
23   - this.prepareData(data.days, data.commits);
24   - this.buildGraph();
25   - }, this)
26   - });
27   - };
28   -
29   - BranchGraph.prototype.prepareData = function(days, commits){
30   - this.days = days;
31   - this.dayCount = days.length;
32   - this.commits = commits;
33   - this.commitCount = commits.length;
34   -
35   - this.collectParents();
36   -
37   - this.mtime += 4;
38   - this.mspace += 10;
39   - for (var i = 0; i < this.commitCount; i++) {
40   - if (this.commits[i].id in this.parents) {
41   - this.commits[i].isParent = true;
42   - }
43   - this.preparedCommits[this.commits[i].id] = this.commits[i];
44   - }
45   - this.collectColors();
46   - };
47   -
48   - BranchGraph.prototype.collectParents = function(){
49   - for (var i = 0; i < this.commitCount; i++) {
50   - for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) {
51   - this.parents[this.commits[i].parents[j][0]] = true;
52   - }
53   - this.mtime = Math.max(this.mtime, this.commits[i].time);
54   - this.mspace = Math.max(this.mspace, this.commits[i].space);
55   - }
56   - };
57   -
58   - BranchGraph.prototype.collectColors = function(){
59   - for (var k = 0; k < this.mspace; k++) {
60   - this.colors.push(Raphael.getColor(.8));
61   - // Skipping a few colors in the spectrum to get more contrast between colors
62   - Raphael.getColor();Raphael.getColor();
63   - }
64   - };
65   -
66   - BranchGraph.prototype.buildGraph = function(){
67   - var graphWidth = $(this.element).width()
68   - , ch = this.mspace * 20 + 100
69   - , cw = Math.max(graphWidth, this.mtime * 20 + 260)
70   - , r = Raphael(this.element.get(0), cw, ch)
71   - , top = r.set()
72   - , cuday = 0
73   - , cumonth = ""
74   - , offsetX = 20
75   - , offsetY = 60
76   - , barWidth = Math.max(graphWidth, this.dayCount * 20 + 320)
77   - , scrollLeft = cw;
78   -
79   - this.raphael = r;
80   -
81   - r.rect(0, 0, barWidth, 20).attr({fill: "#222"});
82   - r.rect(0, 20, barWidth, 20).attr({fill: "#444"});
83   -
84   - for (mm = 0; mm < this.dayCount; mm++) {
85   - if(this.days[mm] != null){
86   - if(cuday != this.days[mm][0]){
87   - // Dates
88   - r.text(offsetX + mm * 20, 31, this.days[mm][0]).attr({
89   - font: "12px Monaco, monospace",
90   - fill: "#DDD"
91   - });
92   - cuday = this.days[mm][0];
93   - }
94   - if(cumonth != this.days[mm][1]){
95   - // Months
96   - r.text(offsetX + mm * 20, 11, this.days[mm][1]).attr({
97   - font: "12px Monaco, monospace",
98   - fill: "#EEE"
99   - });
100   - cumonth = this.days[mm][1];
101   - }
102   - }
103   - }
104   -
105   - for (i = 0; i < this.commitCount; i++) {
106   - var x = offsetX + 20 * this.commits[i].time
107   - , y = offsetY + 10 * this.commits[i].space
108   - , c
109   - , ps;
110   -
111   - // Draw dot
112   - r.circle(x, y, 3).attr({
113   - fill: this.colors[this.commits[i].space],
114   - stroke: "none"
115   - });
116   -
117   - // Draw lines
118   - for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) {
119   - c = this.preparedCommits[this.commits[i].parents[j][0]];
120   - ps = this.commits[i].parents[j][1];
121   - var cx = offsetX + 20 * c.time
122   - , cy = offsetY + 10 * c.space
123   - , psy = offsetY + 10 * ps;
124   - if (c.space == this.commits[i].space && c.space == ps) {
125   - r.path([
126   - "M", x, y,
127   - "L", cx, cy
128   - ]).attr({
129   - stroke: this.colors[c.space],
130   - "stroke-width": 2
131   - });
132   -
133   - } else if (c.space < this.commits[i].space) {
134   - if (y == psy) {
135   - r.path([
136   - "M", x - 5, y,
137   - "l-5,-2,0,4,5,-2",
138   - "L", x - 10, y,
139   - "L", x - 15, psy,
140   - "L", cx + 5, psy,
141   - "L", cx, cy])
142   - .attr({
143   - stroke: this.colors[this.commits[i].space],
144   - "stroke-width": 2
145   - });
146   - } else {
147   - r.path([
148   - "M", x - 3, y - 6,
149   - "l-4,-3,4,-2,0,5",
150   - "L", x - 5, y - 10,
151   - "L", x - 10, psy,
152   - "L", cx + 5, psy,
153   - "L", cx, cy])
154   - .attr({
155   - stroke: this.colors[this.commits[i].space],
156   - "stroke-width": 2
157   - });
158   - }
159   - } else {
160   - r.path([
161   - "M", x - 3, y + 6,
162   - "l-4,3,4,2,0,-5",
163   - "L", x - 5, y + 10,
164   - "L", x - 10, psy,
165   - "L", cx + 5, psy,
166   - "L", cx, cy])
167   - .attr({
168   - stroke: this.colors[c.space],
169   - "stroke-width": 2
170   - });
171   - }
172   - }
173   -
174   - if (this.commits[i].refs) {
175   - this.appendLabel(x, y, this.commits[i].refs);
176   - }
177   -
178   - // mark commit and displayed in the center
179   - if (this.commits[i].id == this.options.commit_id) {
180   - r.path([
181   - 'M', x, y - 5,
182   - 'L', x + 4, y - 15,
183   - 'L', x - 4, y - 15,
184   - 'Z'
185   - ]).attr({
186   - "fill": "#000",
187   - "fill-opacity": .7,
188   - "stroke": "none"
189   - });
190   - scrollLeft = x - graphWidth / 2;
191   - }
192   -
193   - this.appendAnchor(top, this.commits[i], x, y);
194   - }
195   - top.toFront();
196   - this.element.scrollLeft(scrollLeft);
197   - this.bindEvents();
198   - };
199   -
200   - BranchGraph.prototype.bindEvents = function(){
201   - var drag = {}
202   - , element = this.element;
203   -
204   - var dragger = function(event){
205   - element.scrollLeft(drag.sl - (event.clientX - drag.x));
206   - element.scrollTop(drag.st - (event.clientY - drag.y));
207   - };
208   -
209   - element.on({
210   - mousedown: function (event) {
211   - drag = {
212   - x: event.clientX,
213   - y: event.clientY,
214   - st: element.scrollTop(),
215   - sl: element.scrollLeft()
216   - };
217   - $(window).on('mousemove', dragger);
218   - }
219   - });
220   - $(window).on({
221   - mouseup: function(){
222   - //bars.animate({opacity: 0}, 300);
223   - $(window).off('mousemove', dragger);
224   - },
225   - keydown: function(event){
226   - if(event.keyCode == 37){
227   - // left
228   - element.scrollLeft( element.scrollLeft() - 50);
229   - }
230   - if(event.keyCode == 38){
231   - // top
232   - element.scrollTop( element.scrollTop() - 50);
233   - }
234   - if(event.keyCode == 39){
235   - // right
236   - element.scrollLeft( element.scrollLeft() + 50);
237   - }
238   - if(event.keyCode == 40){
239   - // bottom
240   - element.scrollTop( element.scrollTop() + 50);
241   - }
242   - }
243   - });
244   - };
245   -
246   - BranchGraph.prototype.appendLabel = function(x, y, refs){
247   - var r = this.raphael
248   - , shortrefs = refs
249   - , text, textbox, rect;
250   -
251   - if (shortrefs.length > 17){
252   - // Truncate if longer than 15 chars
253   - shortrefs = shortrefs.substr(0,15) + "…";
254   - }
255   -
256   - text = r.text(x+5, y+8 + 10, shortrefs).attr({
257   - font: "10px Monaco, monospace",
258   - fill: "#FFF",
259   - title: refs
260   - });
261   -
262   - textbox = text.getBBox();
263   - text.transform([
264   - 't', textbox.height/-4, textbox.width/2 + 5,
265   - 'r90'
266   - ]);
267   -
268   - // Create rectangle based on the size of the textbox
269   - rect = r.rect(x, y, textbox.width + 15, textbox.height + 5, 4).attr({
270   - "fill": "#000",
271   - "fill-opacity": .7,
272   - "stroke": "none"
273   - });
274   -
275   - triangle = r.path([
276   - 'M', x, y + 5,
277   - 'L', x + 4, y + 15,
278   - 'L', x - 4, y + 15,
279   - 'Z'
280   - ]).attr({
281   - "fill": "#000",
282   - "fill-opacity": .7,
283   - "stroke": "none"
284   - });
285   -
286   - // Rotate and reposition rectangle over text
287   - rect.transform([
288   - 'r', 90, x, y,
289   - 't', 15, -9
290   - ]);
291   -
292   - // Set text to front
293   - text.toFront();
294   - };
295   -
296   - BranchGraph.prototype.appendAnchor = function(top, commit, x, y) {
297   - var r = this.raphael
298   - , options = this.options
299   - , anchor;
300   - anchor = r.circle(x, y, 10).attr({
301   - fill: "#000",
302   - opacity: 0,
303   - cursor: "pointer"
304   - })
305   - .click(function(){
306   - window.open(options.commit_url.replace('%s', commit.id), '_blank');
307   - })
308   - .hover(function(){
309   - this.tooltip = r.commitTooltip(x, y + 5, commit);
310   - top.push(this.tooltip.insertBefore(this));
311   - }, function(){
312   - this.tooltip && this.tooltip.remove() && delete this.tooltip;
313   - });
314   - top.push(anchor);
315   - };
316   -
317   - this.BranchGraph = BranchGraph;
318   -
319   -}(this);
320   -Raphael.fn.commitTooltip = function(x, y, commit){
321   - var icon, nameText, idText, messageText
322   - , boxWidth = 300
323   - , boxHeight = 200;
324   -
325   - icon = this.image(commit.author.icon, x, y, 20, 20);
326   - nameText = this.text(x + 25, y + 10, commit.author.name);
327   - idText = this.text(x, y + 35, commit.id);
328   - messageText = this.text(x, y + 50, commit.message);
329   -
330   - textSet = this.set(icon, nameText, idText, messageText).attr({
331   - "text-anchor": "start",
332   - "font": "12px Monaco, monospace"
333   - });
334   -
335   - nameText.attr({
336   - "font": "14px Arial",
337   - "font-weight": "bold"
338   - });
339   -
340   - idText.attr({
341   - "fill": "#AAA"
342   - });
343   -
344   - textWrap(messageText, boxWidth - 50);
345   -
346   - var rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
347   - "fill": "#FFF",
348   - "stroke": "#000",
349   - "stroke-linecap": "round",
350   - "stroke-width": 2
351   - });
352   - var tooltip = this.set(rect, textSet);
353   -
354   - rect.attr({
355   - "height" : tooltip.getBBox().height + 10,
356   - "width" : tooltip.getBBox().width + 10
357   - });
358   -
359   - tooltip.transform([
360   - 't', 20, 20
361   - ]);
362   -
363   - return tooltip;
364   -};
365   -
366   -function textWrap(t, width) {
367   - var content = t.attr("text");
368   - var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
369   - t.attr({
370   - "text" : abc
371   - });
372   - var letterWidth = t.getBBox().width / abc.length;
373   -
374   - t.attr({
375   - "text" : content
376   - });
377   -
378   - var words = content.split(" ");
379   - var x = 0, s = [];
380   - for ( var i = 0; i < words.length; i++) {
381   -
382   - var l = words[i].length;
383   - if (x + (l * letterWidth) > width) {
384   - s.push("\n");
385   - x = 0;
386   - }
387   - x += l * letterWidth;
388   - s.push(words[i] + " ");
389   - }
390   - t.attr({
391   - "text" : s.join("")
392   - });
393   - var b = t.getBBox()
394   - , h = Math.abs(b.y2) - Math.abs(b.y) + 1;
395   - t.attr({
396   - "y": b.y + h
397   - });
398   -}
app/assets/javascripts/branch-graph.js.coffee 0 → 100644
  Diff comments   View file @7367f1c
... ... @@ -0,0 +1,273 @@
  1 +class BranchGraph
  2 + constructor: (@element, @options) ->
  3 + @preparedCommits = {}
  4 + @mtime = 0
  5 + @mspace = 0
  6 + @parents = {}
  7 + @colors = ["#000"]
  8 + @load()
  9 +
  10 + load: ->
  11 + $.ajax
  12 + url: @options.url
  13 + method: "get"
  14 + dataType: "json"
  15 + success: $.proxy((data) ->
  16 + $(".loading", @element).hide()
  17 + @prepareData data.days, data.commits
  18 + @buildGraph()
  19 + , this)
  20 +
  21 + prepareData: (@days, @commits) ->
  22 + @collectParents()
  23 + @mtime += 4
  24 + @mspace += 10
  25 +
  26 + for c in @commits
  27 + c.isParent = true if c.id of @parents
  28 + @preparedCommits[c.id] = c
  29 +
  30 + @collectColors()
  31 +
  32 + collectParents: ->
  33 + for c in @commits
  34 + @mtime = Math.max(@mtime, c.time)
  35 + @mspace = Math.max(@mspace, c.space)
  36 + for p in c.parents
  37 + @parents[p[0]] = true
  38 +
  39 + collectColors: ->
  40 + k = 0
  41 + while k < @mspace
  42 + @colors.push Raphael.getColor(.8)
  43 + # Skipping a few colors in the spectrum to get more contrast between colors
  44 + Raphael.getColor()
  45 + Raphael.getColor()
  46 + k++
  47 +
  48 + buildGraph: ->
  49 + graphWidth = $(@element).width()
  50 + ch = @mspace * 20 + 100
  51 + cw = Math.max(graphWidth, @mtime * 20 + 260)
  52 + r = Raphael(@element.get(0), cw, ch)
  53 + top = r.set()
  54 + cuday = 0
  55 + cumonth = ""
  56 + offsetX = 20
  57 + offsetY = 60
  58 + barWidth = Math.max(graphWidth, @days.length * 20 + 320)
  59 + scrollLeft = cw
  60 + @raphael = r
  61 + r.rect(0, 0, barWidth, 20).attr fill: "#222"
  62 + r.rect(0, 20, barWidth, 20).attr fill: "#444"
  63 +
  64 + for day, mm in @days
  65 + if cuday isnt day[0]
  66 + # Dates
  67 + r.text(offsetX + mm * 20, 31, day[0])
  68 + .attr(
  69 + font: "12px Monaco, monospace"
  70 + fill: "#DDD"
  71 + )
  72 + cuday = day[0]
  73 +
  74 + if cumonth isnt day[1]
  75 + # Months
  76 + r.text(offsetX + mm * 20, 11, day[1])
  77 + .attr(
  78 + font: "12px Monaco, monospace"
  79 + fill: "#EEE"
  80 + )
  81 + cumonth = day[1]
  82 +
  83 + for commit in @commits
  84 + x = offsetX + 20 * commit.time
  85 + y = offsetY + 10 * commit.space
  86 + # Draw dot
  87 + r.circle(x, y, 3).attr(
  88 + fill: @colors[commit.space]
  89 + stroke: "none"
  90 + )
  91 +
  92 + # Draw lines
  93 + for parent in commit.parents
  94 + parentCommit = @preparedCommits[parent[0]]
  95 + parentX = offsetX + 20 * parentCommit.time
  96 + parentY1 = offsetY + 10 * parentCommit.space
  97 + parentY2 = offsetY + 10 * parent[1]
  98 + if parentCommit.space is commit.space and parentCommit.space is parent[1]
  99 + r.path(["M", x, y, "L", parentX, parentY1]).attr(
  100 + stroke: @colors[parentCommit.space]
  101 + "stroke-width": 2
  102 + )
  103 +
  104 + else if parentCommit.space < commit.space
  105 + if y is parentY2
  106 + 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(
  107 + stroke: @colors[commit.space]
  108 + "stroke-width": 2
  109 + )
  110 +
  111 + else
  112 + 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(
  113 + stroke: @colors[commit.space]
  114 + "stroke-width": 2
  115 + )
  116 +
  117 + else
  118 + 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(
  119 + stroke: @colors[parentCommit.space]
  120 + "stroke-width": 2
  121 + )
  122 +
  123 + @appendLabel x, y, commit.refs if commit.refs
  124 +
  125 + # Mark commit and displayed in the center
  126 + if commit.id is @options.commit_id
  127 + r.path(["M", x, y - 5, "L", x + 4, y - 15, "L", x - 4, y - 15, "Z"]).attr(
  128 + fill: "#000"
  129 + "fill-opacity": .7
  130 + stroke: "none"
  131 + )
  132 +
  133 + scrollLeft = x - graphWidth / 2
  134 +
  135 + @appendAnchor top, commit, x, y
  136 +
  137 + top.toFront()
  138 + @element.scrollLeft scrollLeft
  139 + @bindEvents()
  140 +
  141 + bindEvents: ->
  142 + drag = {}
  143 + element = @element
  144 + dragger = (event) ->
  145 + element.scrollLeft drag.sl - (event.clientX - drag.x)
  146 + element.scrollTop drag.st - (event.clientY - drag.y)
  147 +
  148 + element.on mousedown: (event) ->
  149 + drag =
  150 + x: event.clientX
  151 + y: event.clientY
  152 + st: element.scrollTop()
  153 + sl: element.scrollLeft()
  154 + $(window).on "mousemove", dragger
  155 +
  156 + $(window).on
  157 + mouseup: ->
  158 + $(window).off "mousemove", dragger
  159 + keydown: (event) ->
  160 + # left
  161 + element.scrollLeft element.scrollLeft() - 50 if event.keyCode is 37
  162 + # top
  163 + element.scrollTop element.scrollTop() - 50 if event.keyCode is 38
  164 + # right
  165 + element.scrollLeft element.scrollLeft() + 50 if event.keyCode is 39
  166 + # bottom
  167 + element.scrollTop element.scrollTop() + 50 if event.keyCode is 40
  168 +
  169 + appendLabel: (x, y, refs) ->
  170 + r = @raphael
  171 + shortrefs = refs
  172 + # Truncate if longer than 15 chars
  173 + shortrefs = shortrefs.substr(0, 15) + "…" if shortrefs.length > 17
  174 + text = r.text(x + 5, y + 8 + 10, shortrefs).attr(
  175 + font: "10px Monaco, monospace"
  176 + fill: "#FFF"
  177 + title: refs
  178 + )
  179 + textbox = text.getBBox()
  180 + text.transform ["t", textbox.height / -4, textbox.width / 2 + 5, "r90"]
  181 + # Create rectangle based on the size of the textbox
  182 + rect = r.rect(x, y, textbox.width + 15, textbox.height + 5, 4).attr(
  183 + fill: "#000"
  184 + "fill-opacity": .7
  185 + stroke: "none"
  186 + )
  187 + triangle = r.path(["M", x, y + 5, "L", x + 4, y + 15, "L", x - 4, y + 15, "Z"]).attr(
  188 + fill: "#000"
  189 + "fill-opacity": .7
  190 + stroke: "none"
  191 + )
  192 + # Rotate and reposition rectangle over text
  193 + rect.transform ["r", 90, x, y, "t", 15, -9]
  194 + # Set text to front
  195 + text.toFront()
  196 +
  197 + appendAnchor: (top, commit, x, y) ->
  198 + r = @raphael
  199 + options = @options
  200 + anchor = r.circle(x, y, 10).attr(
  201 + fill: "#000"
  202 + opacity: 0
  203 + cursor: "pointer"
  204 + ).click(->
  205 + window.open options.commit_url.replace("%s", commit.id), "_blank"
  206 + ).hover(->
  207 + @tooltip = r.commitTooltip(x, y + 5, commit)
  208 + top.push @tooltip.insertBefore(this)
  209 + , ->
  210 + @tooltip and @tooltip.remove() and delete @tooltip
  211 + )
  212 + top.push anchor
  213 +
  214 +Raphael::commitTooltip = (x, y, commit) ->
  215 + icon = undefined
  216 + nameText = undefined
  217 + idText = undefined
  218 + messageText = undefined
  219 + boxWidth = 300
  220 + boxHeight = 200
  221 + icon = @image(commit.author.icon, x, y, 20, 20)
  222 + nameText = @text(x + 25, y + 10, commit.author.name)
  223 + idText = @text(x, y + 35, commit.id)
  224 + messageText = @text(x, y + 50, commit.message)
  225 + textSet = @set(icon, nameText, idText, messageText).attr(
  226 + "text-anchor": "start"
  227 + font: "12px Monaco, monospace"
  228 + )
  229 + nameText.attr(
  230 + font: "14px Arial"
  231 + "font-weight": "bold"
  232 + )
  233 +
  234 + idText.attr fill: "#AAA"
  235 + @textWrap messageText, boxWidth - 50
  236 + rect = @rect(x - 10, y - 10, boxWidth, 100, 4).attr(
  237 + fill: "#FFF"
  238 + stroke: "#000"
  239 + "stroke-linecap": "round"
  240 + "stroke-width": 2
  241 + )
  242 + tooltip = @set(rect, textSet)
  243 + rect.attr(
  244 + height: tooltip.getBBox().height + 10
  245 + width: tooltip.getBBox().width + 10
  246 + )
  247 +
  248 + tooltip.transform ["t", 20, 20]
  249 + tooltip
  250 +
  251 +Raphael::textWrap = (t, width) ->
  252 + content = t.attr("text")
  253 + abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
  254 + t.attr text: abc
  255 + letterWidth = t.getBBox().width / abc.length
  256 + t.attr text: content
  257 + words = content.split(" ")
  258 + x = 0
  259 + s = []
  260 +
  261 + for word in words
  262 + if x + (word.length * letterWidth) > width
  263 + s.push "\n"
  264 + x = 0
  265 + x += word.length * letterWidth
  266 + s.push word + " "
  267 +
  268 + t.attr text: s.join("")
  269 + b = t.getBBox()
  270 + h = Math.abs(b.y2) - Math.abs(b.y) + 1
  271 + t.attr y: b.y + h
  272 +
  273 +@BranchGraph = BranchGraph
... ...