[groups] Add merge-selection-to-group and remove-selection-from-group

packages/node_modules/@node-red/editor-client/src/js/ui/group.js

@@ -61,6 +61,8 @@ RED.group = (function() {
 
         RED.actions.add("core:group-selection", function() { groupSelection() })
         RED.actions.add("core:ungroup-selection", function() { ungroupSelection() })
+        RED.actions.add("core:merge-selection-to-group", function() { mergeSelection() })
+        RED.actions.add("core:remove-selection-from-group", function() { removeSelection() })
 
         $(_groupEditTemplate).appendTo("#red-ui-editor-node-configs");
 
@@ -81,24 +83,110 @@ RED.group = (function() {
             var newSelection = [];
             groups = selection.nodes.filter(function(n) { return n.type === "group" });
             groups.forEach(function(g) {
+                newSelection = newSelection.concat(ungroup(g))
+            })
+            RED.view.select({nodes:newSelection})
+        }
+    }
+
+    function ungroup(g) {
+        var nodes = [];
         var parentGroup = RED.nodes.group(g.g);
         if (parentGroup) {
             var index = parentGroup.nodes.indexOf(g);
             parentGroup.nodes.splice(index,1);
         }
         g.nodes.forEach(function(n) {
-                    newSelection.push(n);
+            nodes.push(n);
             if (parentGroup) {
                 // Move nodes to parent group
                 n.g = parentGroup.id;
                 parentGroup.nodes.push(n);
+                parentGroup.dirty = true;
+                n.dirty = true;
             } else {
                 delete n.g;
             }
         })
         RED.nodes.removeGroup(g);
-            })
+        return nodes;
-            RED.view.select({nodes:newSelection})
+    }
+
+    function mergeSelection() {
+        // TODO: this currently creates an entirely new group. Need to merge properties
+        //       of any existing group
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var nodes = [];
+            var n;
+            var parentGroup;
+            // First pass, check they are all in the same parent
+            // TODO: DRY mergeSelection,removeSelection,...
+            for (var i=0; i<selection.nodes.length; i++) {
+                n = selection.nodes[i];
+                if (i === 0) {
+                    parentGroup = n.g;
+                } else if (n.g !== parentGroup) {
+                    RED.notify("Cannot merge nodes from different groups","error");
+                    return;
+                }
+            }
+            // Second pass, ungroup any groups in the selection and add their contents
+            // to the selection
+            for (var i=0; i<selection.nodes.length; i++) {
+                n = selection.nodes[i];
+                if (n.type === "group") {
+                    nodes = nodes.concat(ungroup(n));
+                } else {
+                    nodes.push(n);
+                }
+                n.dirty = true;
+            }
+            // Finally, create the new group
+            var group = createGroup(nodes);
+            if (group) {
+                RED.view.select({nodes:[group]})
+            }
+
+        }
+    }
+
+    function removeSelection() {
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var nodes = [];
+            var n;
+            var parentGroup;
+            // First pass, check they are all in the same parent
+            // TODO: DRY mergeSelection,removeSelection,...
+            for (var i=0; i<selection.nodes.length; i++) {
+                n = selection.nodes[i];
+                if (i === 0) {
+                    parentGroup = n.g;
+                } else if (n.g !== parentGroup) {
+                    RED.notify("Cannot merge nodes from different groups","error");
+                    return;
+                }
+            }
+            if (parentGroup) {
+                parentGroup = RED.nodes.group(parentGroup);
+                var grandparentGroup = RED.nodes.group(parentGroup.g);
+                for (var i=0; i<selection.nodes.length; i++) {
+                    n = selection.nodes[i];
+                    n.dirty = true;
+                    nodes.push(n);
+                    var index = parentGroup.nodes.indexOf(n);
+                    parentGroup.nodes.splice(index,1);
+                    if (parentGroup.g) {
+                        n.g = parentGroup.g
+                        grandparentGroup.nodes.push(n);
+                        grandparentGroup.dirty = true;
+                    } else {
+                        delete n.g;
+                    }
+                }
+                RED.view.select({nodes:nodes})
+            }
         }
     }
     function createGroup(nodes) {
@@ -168,6 +256,7 @@ RED.group = (function() {
         if (g) {
             g = RED.nodes.group(g);
             g.nodes.push(group);
+            g.dirty = true;
             group.g = g.id;
         }
         // Second pass - add them to the group
@@ -180,6 +269,7 @@ RED.group = (function() {
                 }
             }
             n.g = group.id;
+            n.dirty = true;
             group.nodes.push(n);
             group.x = Math.min(group.x,n.x-n.w/2-25-((n._def.button && n._def.align!=="right")?20:0));
             group.y = Math.min(group.y,n.y-n.h/2-25);

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -4373,7 +4373,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                     allNodes.add(n.n);
                 });
             }
-            var selectedGroups =  activeGroups.filter(function(g) { return g.selected });
+            var selectedGroups =  activeGroups.filter(function(g) { return g.selected && !g.active });
             if (selectedGroups.length > 0) {
                 if (selectedGroups.length === 1 && selectedGroups[0].active) {
                     // Let nodes be nodes