[groups] Add ungroup-selection action

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -62,6 +62,7 @@
         "shift-left": "core:step-selection-left",
         "ctrl-shift-j": "core:show-previous-tab",
         "ctrl-shift-k": "core:show-next-tab",
-        "ctrl-shift-g": "core:group-selection"
+        "ctrl-shift-g": "core:group-selection",
+        "ctrl-shift-u": "core:ungroup-selection"
      }
 }

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

@@ -1452,7 +1452,11 @@ RED.nodes = (function() {
         groupsByZ[group.z].push(group);
         groups[group.id] = group;
     }
-
+    function removeGroup(group) {
+        var i = groupsByZ[group.z].indexOf(group);
+        groupsByZ[group.z].splice(i,1);
+        delete groups[group.id];
+    }
 
 
     return {
@@ -1551,6 +1555,7 @@ RED.nodes = (function() {
         subflowContains: subflowContains,
 
         addGroup: addGroup,
+        removeGroup: removeGroup,
         group: function(id) { return groups[id] },
         groups: function(z) { return groupsByZ[z] },
 

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

@@ -60,6 +60,7 @@ RED.group = (function() {
 
 
         RED.actions.add("core:group-selection", function() { groupSelection() })
+        RED.actions.add("core:ungroup-selection", function() { ungroupSelection() })
 
         $(_groupEditTemplate).appendTo("#red-ui-editor-node-configs");
 
@@ -67,25 +68,39 @@ RED.group = (function() {
 
     function groupSelection() {
         var selection = RED.view.selection();
-        // var groupNodes = new Set();
-        //
-        // if (selection.groups) {
-        //     selection.groups.forEach(function(g) {
-        //         g.nodes.forEach()
-        //     })
-        // }
-        //
-        // if (selection.nodes) {
-        //
-        // }
-
         if (selection.nodes) {
             var group = createGroup(selection.nodes);
             if (group) {
-                RED.view.select({groups:[group]})
+                RED.view.select({nodes:[group]})
             }
         }
     }
+    function ungroupSelection() {
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var newSelection = [];
+            groups = selection.nodes.filter(function(n) { return n.type === "group" });
+            groups.forEach(function(g) {
+                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);
+                    if (parentGroup) {
+                        // Move nodes to parent group
+                        n.g = parentGroup.id;
+                        parentGroup.nodes.push(n);
+                    } else {
+                        delete n.g;
+                    }
+                })
+                RED.nodes.removeGroup(g);
+            })
+            RED.view.select({nodes:newSelection})
+        }
+    }
     function createGroup(nodes) {
         if (nodes.length === 0) {
             return;
@@ -168,7 +183,7 @@ RED.group = (function() {
             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);
-            group.w = Math.max(group.w,n.x+n.w/2+25+((n._def.button && n._def.align=="right")?20:0) - group.x),
+            group.w = Math.max(group.w,n.x+n.w/2+25+((n._def.button && n._def.align=="right")?20:0) - group.x);
             group.h = Math.max(group.h,n.y+n.h/2+25-group.y);
         }
     }

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

@@ -29,7 +29,6 @@
 
 RED.view = (function() {
     var DEBUG_EVENTS = false;
-    2
     var space_width = 5000,
         space_height = 5000,
         lineCurveScale = 0.75,
@@ -63,30 +62,30 @@ RED.view = (function() {
     var activeGroups = [];
     var dirtyGroups = {};
 
-    var selected_link = null,
+    var selected_link = null;
-        mousedown_link = null,
+    var mousedown_link = null;
-        mousedown_node = null,
+    var mousedown_node = null;
-        mousedown_group = null,
+    var mousedown_group = null;
-        mousedown_port_type = null,
+    var mousedown_port_type = null;
-        mousedown_port_index = 0,
+    var mousedown_port_index = 0;
-        mouseup_node = null,
+    var mouseup_node = null;
-        mouse_offset = [0,0],
+    var mouse_offset = [0,0];
-        mouse_position = null,
+    var mouse_position = null;
-        mouse_mode = 0,
+    var mouse_mode = 0;
-        mousedown_group_handle = null;
+    var mousedown_group_handle = null;
-        moving_set = [],
+    var moving_set = [];
-        lasso = null,
+    var lasso = null;
-        ghostNode = null,
+    var ghostNode = null;
-        showStatus = false,
+    var showStatus = false;
-        lastClickNode = null,
+    var lastClickNode = null;
-        dblClickPrimed = null,
+    var dblClickPrimed = null;
-        clickTime = 0,
+    var clickTime = 0;
-        clickElapsed = 0,
+    var clickElapsed = 0;
-        scroll_position = [],
+    var scroll_position = [];
-        quickAddActive = false,
+    var quickAddActive = false;
-        quickAddLink = null,
+    var quickAddLink = null;
-        showAllLinkPorts = -1,
+    var showAllLinkPorts = -1;
-        groupNodeSelectPrimed = false;
+    var groupNodeSelectPrimed = false;
 
     var selectNodesOptions;
 
@@ -4342,10 +4341,21 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                         moving_set = [{n:selectedNode}];
                     }
                 } else if (selection) {
-                    if (selection.groups) {
+                    if (selection.nodes) {
                         updateActiveNodes();
-                        selection.groups.forEach(function(g) {
+                        moving_set = [];
-                            selectGroup(g,true);
+                        // TODO: this selection group span groups
+                        //  - if all in one group -> activate the group
+                        //  - if in multiple groups (or group/no-group)
+                        //      -> select the first 'set' of things in the same group/no-group
+                        selection.nodes.forEach(function(n) {
+                            if (n.type !== "group") {
+                                n.selected = true;
+                                n.dirty = true;
+                                moving_set.push({n:n});
+                            } else {
+                                selectGroup(n,true);
+                            }
                         })
                     }
                 }