UI for editing and creating groups

elements/noflo-context.html

@@ -18,8 +18,8 @@
       search: '',
       editor: null,
       graphs: [],
-      edges: [],
       nodes: [],
+      edges: [],
       runtimes: [],
       component: '',
       enteredView: function () {
@@ -133,10 +133,13 @@
           this.nodeMenu.type = 'node-menu';
           this.nodeMenu.appendChild(menu);
           this.nodeMenu.addTo(this.contextBar);
+          this.nodeMenu.dialog = menu;
           this.nodeMenu.addEventListener('newgraph', function (event) {
             this.project.graphs.push(event.detail);
             this.fire('newgraph', event.detail);
           }.bind(this));
+        } else {
+          this.nodeMenu.dialog.nodes = this.nodes;
         }
 
         this.nodes.forEach(function (node) {

elements/noflo-edge-menu.html

@@ -78,10 +78,9 @@
   </style>
   <template>
     <header>
-      <h1>{{ edges.length}} <template if="{{ edges.length > 1 }}">Edges</template><template if="{{ edges.length == 1 }}">Edge</template></h1>    
+      <h1 on-click="{{ clear }}">{{ edges.length}} <template if="{{ edges.length > 1 }}">Edges</template><template if="{{ edges.length == 1 }}">Edge</template></h1>    
     </header>
     <ul class="toolbar toolbar2right">
-      <li><button class="blue-button" on-click="{{ clear }}"><!--i class="fa fa-check"  --></i>Deselect</button></li>
     </ul>
     <ul class="routes">
       <template repeat="{{ route in routes }}">

elements/noflo-group-inspector.html

@@ -0,0 +1,81 @@
+<polymer-element name="noflo-group-inspector" attributes="graph group groupdescription nodes" class="modal-content">
+  <template>
+    <h1>
+      <template if="{{ group }}">
+      {{ group }}
+      </template>
+      <template if="{{ !group }}">
+      New
+      </template>
+      group containing {{ nodes.length }} nodes
+    </h1>
+    <form>
+      <label>
+        Group name
+        <input type="text" value="{{ name }}" placeholder="processing" required>
+      </label>
+      <label>
+        Group description
+        <input type="text" value="{{ description }}" placeholder="The nodes that process things" required>
+      </label>
+      <div class="toolbar">
+        <button on-click="{{ send }}">
+          <template if="{{ group }}">
+          Rename
+          </template>
+          <template if="{{ !group }}">
+          Create
+          </template>
+        </button>
+        <a on-click="{{ close }}">Cancel</a>
+      </div>
+    </form>
+  </template>
+  <script>
+    Polymer('noflo-group-inspector', {
+      name: '',
+      description: '',
+      graph: null,
+      nodes: [],
+      group: '',
+      groupdescription: '',
+      enteredView: function () {
+        document.getElementById('container').classList.add('blur');
+        this.name =  this.group;
+        this.description =  this.groupdescription;
+      },
+      leftView: function () {
+        document.getElementById('container').classList.remove('blur');
+      },
+      send: function (event) {
+        if (event) {
+          event.preventDefault();
+        }
+        if (!this.name) {
+          return;
+        }
+        if (this.group) {
+          if (this.name !== this.group) {
+            this.graph.renameGroup(this.group, this.name);
+          }
+          if (this.description !== this.groupdescription) {
+            this.graph.setGroupMetadata(this.group, {
+              description: this.description
+            });
+          }
+        } else {
+        this.graph.addGroup(this.name, this.nodes, {
+          description: this.description
+        });
+        }
+        this.close();
+      },
+      close: function () {
+        if (!this.parentNode) {
+          return;
+        }
+        this.parentNode.removeChild(this);
+      }
+    });
+  </script>
+</polymer-element>

elements/noflo-node-menu.html

@@ -1,11 +1,12 @@
 <link rel="import" href="noflo-new-graph.html">
+<link rel="import" href="noflo-group-inspector.html">
 <polymer-element name="noflo-node-menu" attributes="graph nodes" class="sticky-head the-card-content">
   <template>
     <header>
-      <h1>{{ nodes.length}} <template if="{{ nodes.length > 1 }}">Nodes</template><template if="{{ nodes.length == 1 }}">Node</template></h1>
+      <h1 on-click="{{ clear }}">{{ nodes.length}} <template if="{{ nodes.length > 1 }}">Nodes</template><template if="{{ nodes.length == 1 }}">Node</template></h1>
     </header>
     <ul class="toolbar toolbar2right">
-      <li><button class="blue-button" on-click="{{ clear }}"><!--i class="fa fa-check"></i-->Deselect</button></li>
+      <li><button class="blue-button" on-click="{{ group }}">Group</button></li>
       <li><button class="blue-button" on-click="{{ subgraph }}">Subgraph</button></li>
     </ul>
   </template>
@@ -34,12 +35,33 @@ <h1>{{ nodes.length}} <template if="{{ nodes.length > 1 }}">Nodes</template><tem
         }
         currentGraph.checkTransactionEnd();
       },
-      /*
       group: function (event) {
         event.preventDefault();
-        this.nodes.forEach(function (node) {
+
+        // See if the nodes are already part of a group
+        var group = '';
+        var description = '';
+        var selectedNodes = this.nodes.map(function (node) {
+          return node.id;
+        });
+        selectedNodes.sort();
+
+        this.graph.groups.forEach(function (grp) {
+          var grpNodes = JSON.parse(JSON.stringify(grp.nodes));
+          grpNodes.sort();
+          if (grpNodes.join(',') == selectedNodes.join(',')) {
+            group = grp.name;
+            description = grp.metadata.description;
+          }
         });
-      }*/
+
+        var dialog = document.createElement('noflo-group-inspector');
+        dialog.group = group;
+        dialog.groupdescription = description;
+        dialog.nodes = selectedNodes;
+        dialog.graph = this.graph;
+        document.body.appendChild(dialog);
+      },
       subgraph: function (event) {
         event.preventDefault();
         var currentGraph = this.graph;

elements/noflo-packets.html

@@ -74,8 +74,11 @@
           menu.graph = this.currentgraph;
           this.edgeMenu = document.createElement('the-card');
           this.edgeMenu.type = 'edge-menu';
+          this.edgeMenu.dialog = menu;
           this.edgeMenu.appendChild(menu);
           this.edgeMenu.addTo(this.panel);
+        } else {
+          this.edgeMenu.dialog.edges = this.edges;
         }
 
         this.edges.forEach(function (edge) {