client: split layouts from graph-view

2 files changed, 179 insertions, 167 deletions

diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index 9b700a6d..6ddf4a8d 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -25,8 +25,8 @@
  * which resulted in overly complex (read: undefined/buggy) code.
  */
 
-define(['d3',  'Bacon', 'consts', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view', 'view/bubble', 'model/types'],
-function(d3 ,   Bacon         ,  consts,   util ,  selection      ,  view_helpers,  model_diff  ,  view,        view_bubble,   model_types) {
+define(['d3',  'Bacon', 'consts', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view', 'view/bubble', 'model/types', 'view/layouts'],
+function(d3 ,   Bacon,   consts,   util ,  selection      ,  view_helpers,  model_diff  ,  view,        view_bubble,   model_types,        layouts) {
 
 "use strict"
 
@@ -711,7 +711,8 @@ function GraphView(spec) {
     }
 
     function force__load_graph() {
-        layout.nodes(graph.nodes().filter(node__is_shown))
+        layout
+             .nodes(graph.nodes().filter(node__is_shown))
              .links(graph.links().filter(link__is_shown));
     }
 
@@ -1142,170 +1143,10 @@ function GraphView(spec) {
                     nodes.length + ' nodes');
     }
 
-    function layout__d3_force() {
-        return d3.layout.force()
-                  .distance(240)
-                  .gravity(0.12)
-                  .charge(-1800)
-                  .linkDistance(function (link, i) {
-                    var d_src = graph.degree(link.__src),
-                        d_dst = graph.degree(link.__dst),
-                        ret = (d_src + d_dst) * 10 + 10;
-                    return ret;
-                  });
-    }
-
-    function layout__cola() {
-        return cola.d3adaptor()
-                  //.linkDistance(120)
-                  .avoidOverlaps(true);
-        /*
-                  .linkDistance(function (link, i) {
-                    var d_src = graph.degree(link.__src),
-                        d_dst = graph.degree(link.__dst),
-                        ret = (d_src + d_dst) * 10 + 10;
-                    return ret;
-                  })
-                  */
-    }
-
-    function layout__empty() {
-        var donothing = function () { return ret; },
-            ret = {
-                resume: donothing,
-                stop: donothing,
-                nodes: donothing,
-                links: donothing,
-                alpha: donothing,
-                start: donothing,
-                size: donothing,
-                on: donothing,
-            };
-        return ret;
-    }
-
-    function layout__sync(layer) {
-        var layout = {
-                _nodes: undefined,
-                _links: undefined,
-                _tick: function () {
-                    console.log('tick not set');
-                },
-                _end: function () {
-                    console.log('end not set');
-                },
-                wh: [1, 1] // width + height
-            },
-            bound_layer = layer.bind(layout);
-        
-        layout.resume = function () {
-            layout.start();
-            return layout;
-        };
-        layout.stop = function () {
-            return layout;
-        };
-        layout.start = function () {
-            bound_layer();
-            layout._tick();
-            layout._end();
-            return layout;
-        }
-        layout.alpha = layout.start;
-        layout.nodes = function (_nodes) {
-            layout._nodes = _nodes;
-            return layout;
-        }
-        layout.links = function (_links) {
-            layout._links = _links;
-            return layout;
-        }
-        layout.on = function (on_type, func) {
-            switch (on_type) {
-                case 'tick':
-                    layout._tick = func;
-                    break;
-                case 'end':
-                    layout._end = func;
-                    break;
-            };
-            return layout;
-        }
-        layout.size = function (_wh) {
-            layout.wh = _wh;
-            return layout;
-        }
-        return layout;
-    }
-
-    function layout__concentric() {
-        return layout__sync(function () {
-            var bytype = _.sortBy(_.groupBy(this._nodes, 'type'), "length"),
-                types = _.keys(bytype),
-                i,
-                r,
-                nodes,
-                count,
-                j,
-                node,
-                angle,
-                ring_radius = Math.max(50, (Math.min.apply(null, this.wh) - 50) / (types.length + 1));
-
-            for (i = 0; i < types.length ; ++i) {
-                r = (i + 1) * ring_radius;
-                nodes = bytype[types[i]];
-                count = nodes.length;
-
-                for (j = 0 ; j < count; ++j) {
-                    node = nodes[j];
-                    angle = j * Math.PI * 2 / count;
-
-                    node.x = node.px = cx + r * Math.cos(angle);
-                    node.y = node.py = cy + r * Math.sin(angle);
-                }
-            }
-        });
-    };
-
-    function layout__grid() {
-        return layout__sync(function () {
-            var nodes = this._nodes,
-                count = nodes.length,
-                line = Math.floor(Math.sqrt(count)) + 1,
-                rows = Math.ceil(count / line),
-                wspace = this.wh[0] / (line + 2),
-                hspace = this.wh[1] / (rows + 1);
-
-            for (var i = 0 ; i < nodes.length ; ++i) {
-                var node = nodes[i];
-                node.x = node.px = ((i % line) + 1) * wspace;
-                node.y = node.py = (Math.floor(i / line) + 1) * hspace;
-            }
-        });
-    };
-
-    var layouts = [
-        {
-            name: 'Force',
-            create: layout__d3_force,
-            clazz: 'btn_layout_d3_force'
-        },
-        {
-            name: 'Ring',
-            create: layout__concentric,
-            clazz: 'btn_layout_concentric'
-        },
-        {
-            name: 'Grid',
-            create: layout__grid,
-            clazz: 'btn_layout_grid'
-        },
-        ];
-
     function set_layout_toolbar(selector) {
         var root = $(selector);
 
-        layouts.forEach(function (layout_data) {
+        layouts.layouts.forEach(function (layout_data) {
             var button = $('<div></div>');
             button.html(layout_data.name);
             button.addClass(layout_data.clazz);
@@ -1321,7 +1162,7 @@ function GraphView(spec) {
         if (layout !== undefined) {
             layout.stop();
         }
-        layout = layout_creator()
+        layout = layout_creator(graph)
             .size([w, h])
             .on("tick", pushRedraw)
             .on("end", record_position_to_local_storage)
@@ -1330,11 +1171,11 @@ function GraphView(spec) {
             .start();
     }
 
+    set_layout(temporary ? layouts.empty : layouts.layouts[0].create);
     if (!temporary) {
         set_layout_toolbar('#layout-bar');
     }
-    //layout = force_enabled ?  layout__cola() : layout__empty();
-    set_layout(temporary ? layout__empty : layouts[0].create);
+
     zoom_property.onValue(function (val) {
         zoomInProgress = val;
     });
diff --git a/src/client/view/layouts.js b/src/client/view/layouts.js
new file mode 100644
index 00000000..25d605bf
--- /dev/null
+++ b/src/client/view/layouts.js
@@ -0,0 +1,171 @@
+define(['jquery', 'd3', 'rz_core'],
+function($,        d3,   rz_core) {
+    function layout__d3_force(graph) {
+        return d3.layout.force()
+                  .distance(240)
+                  .gravity(0.12)
+                  .charge(-1800)
+                  .linkDistance(function (link, i) {
+                    var d_src = graph.degree(link.__src),
+                        d_dst = graph.degree(link.__dst),
+                        ret = (d_src + d_dst) * 10 + 10;
+                    return ret;
+                  });
+    }
+
+    function layout__cola(graph) {
+        return cola.d3adaptor()
+                  //.linkDistance(120)
+                  .avoidOverlaps(true);
+        /*
+                  .linkDistance(function (link, i) {
+                    var d_src = graph.degree(link.__src),
+                        d_dst = graph.degree(link.__dst),
+                        ret = (d_src + d_dst) * 10 + 10;
+                    return ret;
+                  })
+                  */
+    }
+
+    function layout__empty(graph) {
+        var donothing = function () { return ret; },
+            ret = {
+                resume: donothing,
+                stop: donothing,
+                nodes: donothing,
+                links: donothing,
+                alpha: donothing,
+                start: donothing,
+                size: donothing,
+                on: donothing,
+            };
+        return ret;
+    }
+
+    function layout__sync(layer) {
+        var layout = {
+                _nodes: undefined,
+                _links: undefined,
+                _tick: function () {
+                    console.log('tick not set');
+                },
+                _end: function () {
+                    console.log('end not set');
+                },
+                wh: [1, 1] // width + height
+            },
+            bound_layer = layer.bind(layout);
+        
+        layout.resume = function () {
+            layout.start();
+            return layout;
+        };
+        layout.stop = function () {
+            return layout;
+        };
+        layout.start = function () {
+            bound_layer();
+            layout._tick();
+            layout._end();
+            return layout;
+        }
+        layout.alpha = layout.start;
+        layout.nodes = function (_nodes) {
+            layout._nodes = _nodes;
+            return layout;
+        }
+        layout.links = function (_links) {
+            layout._links = _links;
+            return layout;
+        }
+        layout.on = function (on_type, func) {
+            switch (on_type) {
+                case 'tick':
+                    layout._tick = func;
+                    break;
+                case 'end':
+                    layout._end = func;
+                    break;
+            };
+            return layout;
+        }
+        layout.size = function (_wh) {
+            layout.wh = _wh;
+            return layout;
+        }
+        return layout;
+    }
+
+    function layout__concentric() {
+        var cx = $(document.body).innerWidth() / 2,
+            cy = $(document.body).innerHeight() / 2;
+
+        return layout__sync(function () {
+            var bytype = _.sortBy(_.groupBy(this._nodes, 'type'), "length"),
+                types = _.keys(bytype),
+                i,
+                r,
+                nodes,
+                count,
+                j,
+                node,
+                angle,
+                ring_radius = Math.max(50, (Math.min.apply(null, this.wh) - 50) / (types.length + 1));
+
+            for (i = 0; i < types.length ; ++i) {
+                r = (i + 1) * ring_radius;
+                nodes = bytype[types[i]];
+                count = nodes.length;
+
+                for (j = 0 ; j < count; ++j) {
+                    node = nodes[j];
+                    angle = j * Math.PI * 2 / count;
+
+                    node.x = node.px = cx + r * Math.cos(angle);
+                    node.y = node.py = cy + r * Math.sin(angle);
+                }
+            }
+        });
+    };
+
+    function layout__grid() {
+        return layout__sync(function () {
+            var nodes = this._nodes,
+                count = nodes.length,
+                line = Math.floor(Math.sqrt(count)) + 1,
+                rows = Math.ceil(count / line),
+                wspace = this.wh[0] / (line + 2),
+                hspace = this.wh[1] / (rows + 1);
+
+            for (var i = 0 ; i < nodes.length ; ++i) {
+                var node = nodes[i];
+                node.x = node.px = ((i % line) + 1) * wspace;
+                node.y = node.py = (Math.floor(i / line) + 1) * hspace;
+            }
+        });
+    };
+
+    var layouts = [
+        {
+            name: 'Force',
+            create: layout__d3_force,
+            clazz: 'btn_layout_d3_force'
+        },
+        {
+            name: 'Ring',
+            create: layout__concentric,
+            clazz: 'btn_layout_concentric'
+        },
+        /*
+        {
+            name: 'Grid',
+            create: layout__grid,
+            clazz: 'btn_layout_grid'
+        },
+        */
+        ];
+    return {
+        layouts: layouts,
+        empty: layout__empty
+    };
+});