split code up into smaller functions

1 files changed, 105 insertions, 95 deletions

diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js
index 6fdac68..259de9f 100644
--- a/html/js/git-deps-graph.js
+++ b/html/js/git-deps-graph.js
@@ -10,7 +10,7 @@ var d3cola = cola.d3adaptor()
     .avoidOverlaps(true)
     .size([WIDTH, HEIGHT]);
 
-var svg, fg;
+var svg, fg, node, path;
 
 jQuery(function () {
     draw_graph();
@@ -55,112 +55,122 @@ function draw_graph () {
             .attr('d', 'M0,-5L10,0L0,5')
             .attr('fill', '#000');
 
-        var path = fg.selectAll(".link")
+        path = fg.selectAll(".link")
             .data(graph.links)
           .enter().append('svg:path')
             .attr('class', 'link');
 
-        var node = fg.selectAll(".node")
-                .data(graph.nodes)
-                .enter().append("g")
-                .attr("class", "node")
-                .call(d3cola.drag);
-
-        // Initialize tooltip
-        var tip = d3.tip().attr('class', 'd3-tip').html(tip_html);
-        fg.call(tip);
-        // Hide tooltip when we start dragging
-        d3cola.drag().on('dragstart', tip.hide);
-
-        var rect = node.append("rect")
-            .attr("rx", 5).attr("ry", 5);
-
-        var label = node.append("text")
-            .text(function (d) { return d.name; })
-            .each(function (d) {
-                var b = this.getBBox();
-                // Calculate width/height of rectangle from text bounding box.
-                d.rect_width  = b.width  + 2 * PADDING;
-                d.rect_height = b.height + 2 * PADDING;
-                // Now set the node width/height as used by cola for
-                // positioning.  This has to include the margin
-                // outside the rectangle.
-                d.width  = d.rect_width  + 2 * MARGIN;
-                d.height = d.rect_height + 2 * MARGIN;
-            });
-        // label.append("title")
-        //     .text(function (d) { return d.name; });
-
-        rect.attr('width',  function (d, i) { return d.rect_width;  })
-            .attr('height', function (d, i) { return d.rect_height; })
-            .on('mouseover', tip.show)
-            .on('mouseout',  tip.hide);
-
-        // Centre label
-        label
-            .attr("x", function (d) { return d.rect_width  / 2; })
-            .attr("y", function (d) { return d.rect_height / 2; })
-            .on('mouseover', tip.show)
-            .on('mouseout',  tip.hide);
-
-        d3cola.start(10,20,20);
-
-        d3cola.on("tick", function () {
-            node.each(function (d) {
-                // cola sets the bounds property which is a Rectangle
-                // representing the space which other nodes should not
-                // overlap.  The innerBounds property seems to tell
-                // cola the Rectangle which is the visible part of the
-                // node, minus any blank margin.
-                d.innerBounds = d.bounds.inflate(-MARGIN);
-            });
-
-            node.attr("transform", function (d) {
-                return "translate(" +
-                    d.innerBounds.x + "," +
-                    d.innerBounds.y + ")";
-            });
-
-            path.each(function (d) {
-                if (isIE()) this.parentNode.insertBefore(this, this);
-            });
-            path.attr("d", function (d) {
-                // Undocumented: https://github.com/tgdwyer/WebCola/issues/52
-                cola.vpsc.makeEdgeBetween(
-                    d,
-                    d.source.innerBounds,
-                    d.target.innerBounds,
-                    // This value is related to but not equal to the
-                    // distance of arrow tip from object it points at:
-                    5
-                );
-                var lineData = [
-                    { x: d.sourceIntersection.x, y: d.sourceIntersection.y },
-                    { x: d.arrowStart.x, y: d.arrowStart.y }
-                ];
-                return lineFunction(lineData);
-            });
-        });
+        node = fg.selectAll(".node")
+            .data(graph.nodes)
+          .enter().append("g")
+            .attr("class", "node")
+            .call(d3cola.drag);
 
-        // d3cola.on("end", routeEdges);
-
-        // turn on overlap avoidance after first convergence
-        // d3cola.on("end", function () {
-        //    if (!d3cola.avoidOverlaps()) {
-        //        graph.nodes.forEach(function (v) {
-        //            v.width = v.height = 10;
-        //        });
-        //        d3cola.avoidOverlaps(true);
-        //        d3cola.start();
-        //    }
-        // });
+        draw_nodes(fg, node);
     });
 }
 
+function draw_nodes (fg, node) {
+    // Initialize tooltip
+    var tip = d3.tip().attr('class', 'd3-tip').html(tip_html);
+    fg.call(tip);
+    // Hide tooltip when we start dragging
+    d3cola.drag().on('dragstart', tip.hide);
+
+    var rect = node.append("rect")
+        .attr("rx", 5).attr("ry", 5);
+
+    var label = node.append("text")
+        .text(function (d) { return d.name; })
+        .each(function (d) {
+            var b = this.getBBox();
+            // Calculate width/height of rectangle from text bounding box.
+            d.rect_width  = b.width  + 2 * PADDING;
+            d.rect_height = b.height + 2 * PADDING;
+            // Now set the node width/height as used by cola for
+            // positioning.  This has to include the margin
+            // outside the rectangle.
+            d.width  = d.rect_width  + 2 * MARGIN;
+            d.height = d.rect_height + 2 * MARGIN;
+        });
+    // label.append("title")
+    //     .text(function (d) { return d.name; });
+
+    position_nodes(rect, label, tip);
+}
+
+function position_nodes (rect, label, tip) {
+    rect.attr('width',  function (d, i) { return d.rect_width;  })
+        .attr('height', function (d, i) { return d.rect_height; })
+        .on('mouseover', tip.show)
+        .on('mouseout',  tip.hide);
+
+    // Centre label
+    label
+        .attr("x", function (d) { return d.rect_width  / 2; })
+        .attr("y", function (d) { return d.rect_height / 2; })
+        .on('mouseover', tip.show)
+        .on('mouseout',  tip.hide);
+
+    d3cola.start(10,20,20);
+
+    d3cola.on("tick", tick_handler);
+
+    // d3cola.on("end", routeEdges);
+
+    // turn on overlap avoidance after first convergence
+    // d3cola.on("end", function () {
+    //    if (!d3cola.avoidOverlaps()) {
+    //        graph.nodes.forEach(function (v) {
+    //            v.width = v.height = 10;
+    //        });
+    //        d3cola.avoidOverlaps(true);
+    //        d3cola.start();
+    //    }
+    // });
+}
+
 function tip_html (d) {
     return d.describe || d.sha;
 }
 
+function tick_handler () {
+    node.each(function (d) {
+        // cola sets the bounds property which is a Rectangle
+        // representing the space which other nodes should not
+        // overlap.  The innerBounds property seems to tell
+        // cola the Rectangle which is the visible part of the
+        // node, minus any blank margin.
+        d.innerBounds = d.bounds.inflate(-MARGIN);
+    });
+
+    node.attr("transform", function (d) {
+        return "translate(" +
+            d.innerBounds.x + "," +
+            d.innerBounds.y + ")";
+    });
+
+    path.each(function (d) {
+        if (isIE()) this.parentNode.insertBefore(this, this);
+    });
+    path.attr("d", function (d) {
+        // Undocumented: https://github.com/tgdwyer/WebCola/issues/52
+        cola.vpsc.makeEdgeBetween(
+            d,
+            d.source.innerBounds,
+            d.target.innerBounds,
+            // This value is related to but not equal to the
+            // distance of arrow tip from object it points at:
+            5
+        );
+        var lineData = [
+            { x: d.sourceIntersection.x, y: d.sourceIntersection.y },
+            { x: d.arrowStart.x, y: d.arrowStart.y }
+        ];
+        return lineFunction(lineData);
+    });
+}
+
 var lineFunction = d3.svg.line()
     .x(function (d) { return d.x; })
     .y(function (d) { return d.y; })