client: add merge button, does nothing, enabled for two or more selected nodes

5 files changed, 46 insertions, 2 deletions

diff --git a/res/client/css/partials/input-bar.scss b/res/client/css/partials/input-bar.scss
index 05c7abd2..568c703b 100644
--- a/res/client/css/partials/input-bar.scss
+++ b/res/client/css/partials/input-bar.scss
@@ -42,6 +42,12 @@
   }
 }
 
+#merge-tool {
+  position: absolute;
+  top: 160px;
+  left: 24px;
+}
+
 #textanalyser.ui-autocomplete-input {
   font-family: $base-font-family;
   color: $mid-grey;
diff --git a/res/client/css/style.css b/res/client/css/style.css
index aef50fc7..ae58ef0e 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -535,6 +535,11 @@ body.debug .debug-ui-right {
   #input-container__graph-input:focus {
     width: 80%; }
 
+#merge-tool {
+  position: absolute;
+  top: 160px;
+  left: 24px; }
+
 #textanalyser.ui-autocomplete-input {
   font-family: "Source_Regular", sans-serif;
   color: #919095; }
diff --git a/res/templates/index.html b/res/templates/index.html
index 27129a4c..d4353d17 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -65,6 +65,9 @@ var rz_config = { // set as a global variable
           <button id="btn_add"></button>
         <div id="input-suggestion" class="suggestion" style="display: none"></div>
       </div>
+      <div class='merge-tool' id='merge-tool'>
+        <button id="btn_merge" style="display: none">merge nodes</button>
+      </div>
     </div>
     <div class="info-container">
       <div class="edge_info" style="display:none">Title: <span id="edgetitle"></span><br/>
diff --git a/src/client/main.js b/src/client/main.js
index 42d22aff..e4b5b099 100644
--- a/src/client/main.js
+++ b/src/client/main.js
@@ -60,6 +60,7 @@ function(textanalysis_ui,   textanalysis,   buttons,   history,   drag_n_drop,
         model_core.init(rz_config);
         textanalysis.init(rz_core.main_graph);
         search.init();
+        selection.setup_merge_button(rz_core.main_graph);
         $.feedback({ajaxURL: rz_config.feedback_url});
     }
 
diff --git a/src/client/view/selection.js b/src/client/view/selection.js
index f5d4c895..42823aed 100644
--- a/src/client/view/selection.js
+++ b/src/client/view/selection.js
@@ -1,6 +1,18 @@
 define(['rz_core', 'Bacon', 'underscore'],
 function(rz_core,   Bacon, _) {
 
+function Selection() {
+}
+
+function new_selection(nodes, root_nodes)
+{
+    var ret = new Selection();
+
+    ret.nodes = nodes;
+    ret.root_nodes = root_nodes;
+    return ret;
+}
+
 function get_main_graph()
 {
     // circular dependency on rz_core, so require.js cannot solve it.
@@ -62,7 +74,7 @@ function updateSelectedNodesBus(new_selected_nodes)
             d[v.id] = v;
             return d;
         }, {});
-    selectionChangedBus.push(selected_nodes);
+    selectionChangedBus.push(new_selection(selected_nodes, root_nodes));
 }
 
 function byVisitors(node_selector, link_selector) {
@@ -149,7 +161,8 @@ var inner_update = function(nodes)
     connectedComponent(nodes);
 }
 
-var update = function(nodes, append) {
+var update = function(nodes, append)
+{
     var new_nodes = append ? _.union(root_nodes, nodes) : nodes;
     var not_same = !arr_compare(new_nodes, root_nodes);
 
@@ -158,6 +171,20 @@ var update = function(nodes, append) {
     }
 }
 
+var setup_merge_button = function(main_graph)
+{
+    var merge_btn = $('#btn_merge');
+    merge_btn.asEventStream('click').onValue(main_graph.mergeNodes);
+    selectionChangedBus.map(function (selection) { return selection.root_nodes.length > 1; })
+        .onValue(function (visible) {
+            if (visible) {
+                merge_btn.show();
+            } else {
+                merge_btn.hide();
+            }
+        });
+}
+
 return {
     byVisitors: byVisitors,
     connectedComponent: connectedComponent,
@@ -168,6 +195,8 @@ return {
     node_selected: node_selected,
     link_selected: link_selected,
     selectionChangedBus: selectionChangedBus,
+    setup_merge_button: setup_merge_button,
+
     __get_root_nodes: function() { return root_nodes; },
     __get_selected_nodes: function() { return selected_nodes; },
 };