refactor BranchGraph class

app/assets/javascripts/network/branch_graph.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, new-cap, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
 
-import Raphael from 'raphael/raphael';
+import Raphael from './raphael';
 
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
-  this.BranchGraph = (function() {
+export default (function() {
   function BranchGraph(element1, options1) {
     this.element = element1;
     this.options = options1;
-      this.scrollTop = bind(this.scrollTop, this);
-      this.scrollBottom = bind(this.scrollBottom, this);
-      this.scrollRight = bind(this.scrollRight, this);
-      this.scrollLeft = bind(this.scrollLeft, this);
-      this.scrollUp = bind(this.scrollUp, this);
-      this.scrollDown = bind(this.scrollDown, this);
+    this.scrollTop = this.scrollTop.bind(this);
+    this.scrollBottom = this.scrollBottom.bind(this);
+    this.scrollRight = this.scrollRight.bind(this);
+    this.scrollLeft = this.scrollLeft.bind(this);
+    this.scrollUp = this.scrollUp.bind(this);
+    this.scrollDown = this.scrollDown.bind(this);
     this.preparedCommits = {};
     this.mtime = 0;
     this.mspace = 0;
@@ -347,79 +344,4 @@ import Raphael from 'raphael/raphael';
   };
 
   return BranchGraph;
-  })();
-
-  Raphael.prototype.commitTooltip = function(x, y, commit) {
-    var boxHeight, boxWidth, icon, idText, messageText, nameText, rect, textSet, tooltip;
-    boxWidth = 300;
-    boxHeight = 200;
-    icon = this.image(gon.relative_url_root + 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.replace(/\r?\n/g, " \n "));
-    textSet = this.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"
-    });
-    messageText.node.style["white-space"] = "pre";
-    this.textWrap(messageText, boxWidth - 50);
-    rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
-      fill: "#FFF",
-      stroke: "#000",
-      "stroke-linecap": "round",
-      "stroke-width": 2
-    });
-    tooltip = this.set(rect, textSet);
-    rect.attr({
-      height: tooltip.getBBox().height + 10,
-      width: tooltip.getBBox().width + 10
-    });
-    tooltip.transform(["t", 20, 20]);
-    return tooltip;
-  };
-
-  Raphael.prototype.textWrap = function(t, width) {
-    var abc, b, content, h, j, len, letterWidth, s, word, words, x;
-    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 = [];
-    for (j = 0, len = words.length; j < len; j += 1) {
-      word = words[j];
-      if (x + (word.length * letterWidth) > width) {
-        s.push("\n");
-        x = 0;
-      }
-      if (word === "\n") {
-        s.push("\n");
-        x = 0;
-      } else {
-        s.push(word + " ");
-        x += word.length * letterWidth;
-      }
-    }
-    t.attr({
-      text: s.join("").trim()
-    });
-    b = t.getBBox();
-    h = Math.abs(b.y2) + 1;
-    return t.attr({
-      y: h
-    });
-  };
-}).call(window);
+})();

app/assets/javascripts/network/network.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */
-/* global BranchGraph */
+
+import BranchGraph from './branch_graph';
 
 (function() {
   this.Network = (function() {

app/assets/javascripts/network/network_bundle.js

@@ -2,7 +2,6 @@
 /* global Network */
 /* global ShortcutsNetwork */
 
-require('./branch_graph');
 require('./network');
 
 (function() {

app/assets/javascripts/network/raphael.js

+import Raphael from 'raphael/raphael';
+
+Raphael.prototype.commitTooltip = function commitTooltip(x, y, commit) {
+  const boxWidth = 300;
+  const icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20);
+  const nameText = this.text(x + 25, y + 10, commit.author.name);
+  const idText = this.text(x, y + 35, commit.id);
+  const messageText = this.text(x, y + 50, commit.message.replace(/\r?\n/g, ' \n '));
+  const textSet = this.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',
+  });
+  messageText.node.style['white-space'] = 'pre';
+  this.textWrap(messageText, boxWidth - 50);
+  const rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
+    fill: '#FFF',
+    stroke: '#000',
+    'stroke-linecap': 'round',
+    'stroke-width': 2,
+  });
+  const tooltip = this.set(rect, textSet);
+  rect.attr({
+    height: tooltip.getBBox().height + 10,
+    width: tooltip.getBBox().width + 10,
+  });
+  tooltip.transform(['t', 20, 20]);
+  return tooltip;
+};
+
+Raphael.prototype.textWrap = function testWrap(t, width) {
+  const content = t.attr('text');
+  const abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  t.attr({
+    text: abc,
+  });
+  const letterWidth = t.getBBox().width / abc.length;
+  t.attr({
+    text: content,
+  });
+  const words = content.split(' ');
+  let x = 0;
+  const s = [];
+  for (let j = 0, len = words.length; j < len; j += 1) {
+    const word = words[j];
+    if (x + (word.length * letterWidth) > width) {
+      s.push('\n');
+      x = 0;
+    }
+    if (word === '\n') {
+      s.push('\n');
+      x = 0;
+    } else {
+      s.push(`${word} `);
+      x += word.length * letterWidth;
+    }
+  }
+  t.attr({
+    text: s.join('').trim(),
+  });
+  const b = t.getBBox();
+  const h = Math.abs(b.y2) + 1;
+  return t.attr({
+    y: h,
+  });
+};
+
+export default Raphael;