[groups] Keep groups ordered by depth in DOM

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

@@ -531,6 +531,37 @@ RED.view = (function() {
         });
 
         activeGroups = RED.nodes.groups(activeWorkspace)||[];
+        activeGroups.forEach(function(g) {
+            if (g.g) {
+                g._depth = 1;
+            } else {
+                g._depth = 0;
+            }
+        });
+        var changed = false;
+        do {
+            changed = false;
+            activeGroups.forEach(function(g) {
+                if (g.g) {
+                    var parentGroup = RED.nodes.group(g.g);
+                    if (parentGroup) {
+                        var parentDepth = parentGroup._depth;
+                        if (g._depth !== parentDepth + 1) {
+                            g._depth = parentDepth + 1;
+                            changed = true;
+                        }
+                    } else {
+                        console.log("Missing group",g.g);
+                    }
+                }
+            });
+        } while (changed)
+        activeGroups.sort(function(a,b) {
+            return a._depth - b._depth;
+        });
+        groupLayer.selectAll(".red-ui-flow-group").sort(function(a,b) {
+            return a._depth - b._depth;
+        })
     }
 
     function generateLinkPath(origX,origY, destX, destY, sc) {
@@ -1813,6 +1844,7 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
             var removedLinks = [];
             var removedSubflowOutputs = [];
             var removedSubflowInputs = [];
+            var removedGroups = [];
             var removedSubflowStatus;
             var subflowInstances = [];
 
@@ -1842,9 +1874,18 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
                     }
                 }
                 var selectedGroups = activeGroups.filter(function(g) { return !g.active && g.selected });
-                selectedGroups.forEach(function(g) {
+                while (selectedGroups.length > 0) {
+                    var g = selectedGroups.shift();
+                    if (removedGroups.indexOf(g) === -1) {
+                        removedGroups.push(g);
+                        g.nodes.forEach(function(n) {
+                            if (n.type === "group") {
+                                selectedGroups.push(n);
+                            }
+                        })
                         RED.nodes.removeGroup(g);
-                });
+                    }
+                };
                 if (removedSubflowOutputs.length > 0) {
                     result = RED.subflow.removeOutput(removedSubflowOutputs);
                     if (result) {
@@ -3986,7 +4027,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
             group.exit().remove();
             var groupEnter = group.enter().insert("svg:g")
                 .attr("class", "red-ui-flow-group")
-
             groupEnter.each(function(d,i) {
                 var g = d3.select(this);
 
@@ -4029,6 +4069,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                     .attr('rx',1).attr('ry',1).style({
                         "pointer-events": "none",
                         "fill":d.fill||"none",
+                        "fill-opacity": 1,
                         "stroke": d.stroke||"none",
                         "stroke-width": 2
                     })
@@ -4036,6 +4077,9 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
 
                 d.dirty = true;
             });
+
+            group[0].reverse();
+
             group.each(function(d,i) {
                 if (d.dirty || dirtyGroups[d.id]) {
                     var g = d3.select(this);
@@ -4074,7 +4118,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                         .style("stroke",function(d) { /*if (d.selected) { return "#ff7f0e" } */return d.style.stroke || "none"})
                         .style("stroke-dasharray", function(d) { return (d.active||d.hovered)?"10 4":"none"})
                         .style("fill", function(d) { return d.style.fill || "none"})
-                        .style("fill-opacity", 0.1)
+                        .style("fill-opacity", 1)
 
                     // g.selectAll(".red-ui-flow-group-handle-0")
                     //     .style("opacity",function(d) { return d.selected?1:0})
@@ -4563,6 +4607,5 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
             chart.scrollLeft(chart.scrollLeft()+x);
             chart.scrollTop(chart.scrollTop()+y)
         }
-        ,ms: function() { return moving_set }
     };
 })();

packages/node_modules/@node-red/editor-client/src/sass/flow.scss

@@ -248,6 +248,7 @@ g.red-ui-flow-node-selected {
 
 .red-ui-flow-link-outline {
     stroke: $view-background;
+    stroke-opacity: 0.4;
     stroke-width: 5;
     cursor: crosshair;
     fill: none;