From 417df6a137b2a2f2b35bc1ad4f46356214bb0e4c Mon Sep 17 00:00:00 2001 From: Alon Levy Date: Wed, 1 Apr 2015 19:55:38 +0300 Subject: client: split layouts from graph-view --- src/client/view/graph_view.js | 175 ++---------------------------------------- src/client/view/layouts.js | 171 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 179 insertions(+), 167 deletions(-) create mode 100644 src/client/view/layouts.js (limited to 'src/client') 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 = $('
'); 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 + }; +}); -- cgit v1.3.1