diff options
Diffstat (limited to 'src/client/view/graph_view.js')
| -rw-r--r-- | src/client/view/graph_view.js | 175 |
1 files changed, 8 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; }); |