@node-red/editor-client 3.1.0-beta.1 → 3.1.0-beta.2

package/public/red/red.js

@@ -3738,6 +3738,9 @@ RED.nodes = (function() {
 
     function setDirty(d) {
         dirty = d;
+        if (!d) {
+            allNodes.clearState()
+        }
         RED.events.emit("workspace:dirty",{dirty:dirty});
     }
 
@@ -3760,7 +3763,6 @@ RED.nodes = (function() {
             }
         };
 
-
         var exports = {
             setModulePendingUpdated: function(module,version) {
                 moduleList[module].pending_version = version;
@@ -3930,22 +3932,72 @@ RED.nodes = (function() {
 
     // allNodes holds information about the Flow nodes.
     var allNodes = (function() {
+        // Map node.id -> node
         var nodes = {};
+        // Map tab.id -> Array of nodes on that tab
         var tabMap = {};
+        // Map tab.id -> Set of dirty object ids on that tab
+        var tabDirtyMap = {};
+        // Map tab.id -> Set of object ids of things deleted from the tab that weren't otherwise dirty
+        var tabDeletedNodesMap = {};
+        // Set of object ids of things added to a tab after initial import
+        var addedDirtyObjects = new Set()
+
+        function changeCollectionDepth(tabNodes, toMove, direction, singleStep) {
+            const result = []
+            const moved = new Set();
+            const startIndex = direction ? tabNodes.length - 1 : 0
+            const endIndex = direction ? -1 : tabNodes.length
+            const step = direction ? -1 : 1
+            let target = startIndex // Only used for all-the-way moves
+            for (let i = startIndex; i != endIndex; i += step) {
+                if (toMove.size === 0) {
+                    break;
+                }
+                const n = tabNodes[i]
+                if (toMove.has(n)) {
+                    if (singleStep) {
+                        if (i !== startIndex && !moved.has(tabNodes[i - step])) {
+                            tabNodes.splice(i, 1)
+                            tabNodes.splice(i - step, 0, n)
+                            n._reordered = true
+                            result.push(n)
+                        }
+                    } else {
+                        if (i !== target) {
+                            tabNodes.splice(i, 1)
+                            tabNodes.splice(target, 0, n)
+                            n._reordered = true
+                            result.push(n)
+                        }
+                        target += step
+                    }
+                    toMove.delete(n);
+                    moved.add(n);
+                }
+            }
+            return result
+        }
+
         var api = {
             addTab: function(id) {
                 tabMap[id] = [];
+                tabDirtyMap[id] = new Set();
+                tabDeletedNodesMap[id] = new Set();
             },
             hasTab: function(z) {
                 return tabMap.hasOwnProperty(z)
             },
             removeTab: function(id) {
                 delete tabMap[id];
+                delete tabDirtyMap[id];
+                delete tabDeletedNodesMap[id];
             },
             addNode: function(n) {
                 nodes[n.id] = n;
                 if (tabMap.hasOwnProperty(n.z)) {
                     tabMap[n.z].push(n);
+                    api.addObjectToWorkspace(n.z, n.id, n.changed || n.moved)
                 } else {
                     console.warn("Node added to unknown tab/subflow:",n);
                     tabMap["_"] = tabMap["_"] || [];
@@ -3959,7 +4011,36 @@ RED.nodes = (function() {
                     if (i > -1) {
                         tabMap[n.z].splice(i,1);
                     }
+                    api.removeObjectFromWorkspace(n.z, n.id)
+                }
+            },
+            /**
+             * Add an object to our dirty/clean tracking state
+             * @param {String} z 
+             * @param {String} id 
+             * @param {Boolean} isDirty 
+             */
+            addObjectToWorkspace: function (z, id, isDirty) {
+                if (isDirty) {
+                    addedDirtyObjects.add(id)
+                }
+                if (tabDeletedNodesMap[z].has(id)) {
+                    tabDeletedNodesMap[z].delete(id)
+                }
+                api.markNodeDirty(z, id, isDirty)
+            },
+            /**
+             * Remove an object from our dirty/clean tracking state
+             * @param {String} z 
+             * @param {String} id 
+             */
+            removeObjectFromWorkspace: function (z, id) {
+                if (!addedDirtyObjects.has(id)) {
+                    tabDeletedNodesMap[z].add(id)
+                } else {
+                    addedDirtyObjects.delete(id)
                 }
+                api.markNodeDirty(z, id, false)
             },
             hasNode: function(id) {
                 return nodes.hasOwnProperty(id);
@@ -3972,152 +4053,54 @@ RED.nodes = (function() {
                 n.z = newZ;
                 api.addNode(n)
             },
-            moveNodesForwards: function(nodes) {
-                var result = [];
+            /**
+             * @param {array} nodes 
+             * @param {boolean} direction true:forwards false:back
+             * @param {boolean} singleStep true:single-step false:all-the-way
+             */
+            changeDepth: function(nodes, direction, singleStep) {
                 if (!Array.isArray(nodes)) {
                     nodes = [nodes]
                 }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var moved = new Set();
-                for (var i = tabNodes.length-1; i >= 0; i--) {
-                    if (toMove.size === 0) {
-                        break;
+                let result = []
+                const tabNodes = tabMap[nodes[0].z];
+                const toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
+                if (toMove.size > 0) {
+                    result = result.concat(changeCollectionDepth(tabNodes, toMove, direction, singleStep))
+                    if (result.length > 0) {
+                        RED.events.emit('nodes:reorder',{
+                            z: nodes[0].z,
+                            nodes: result
+                        });
                     }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i < tabNodes.length-1 && !moved.has(tabNodes[i+1])) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            // Add it back one position higher
-                            tabNodes.splice(i+1,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        toMove.delete(n);
-                        moved.add(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
-                }
-                return result;
-            },
-            moveNodesBackwards: function(nodes) {
-                var result = [];
-                if (!Array.isArray(nodes)) {
-                    nodes = [nodes]
                 }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var moved = new Set();
-                for (var i = 0; i < tabNodes.length; i++) {
-                    if (toMove.size === 0) {
-                        break;
+
+                const groupNodes = groupsByZ[nodes[0].z] || []
+                const groupsToMove = new Set(nodes.filter(function(n) { return n.type === 'group'}))
+                if (groupsToMove.size > 0) {
+                    const groupResult = changeCollectionDepth(groupNodes, groupsToMove, direction, singleStep)
+                    if (groupResult.length > 0) {
+                        result = result.concat(groupResult)
+                        RED.events.emit('groups:reorder',{
+                            z: nodes[0].z,
+                            nodes: groupResult
+                        });
                     }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i > 0 && !moved.has(tabNodes[i-1])) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            // Add it back one position lower
-                            tabNodes.splice(i-1,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        toMove.delete(n);
-                        moved.add(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
                 }
-                return result;
+                RED.view.redraw(true)
+                return result
+            },
+            moveNodesForwards: function(nodes) {
+                return api.changeDepth(nodes, true, true)
+            },
+            moveNodesBackwards: function(nodes) {
+                return api.changeDepth(nodes, false, true)
             },
             moveNodesToFront: function(nodes) {
-                var result = [];
-                if (!Array.isArray(nodes)) {
-                    nodes = [nodes]
-                }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var target = tabNodes.length-1;
-                for (var i = tabNodes.length-1; i >= 0; i--) {
-                    if (toMove.size === 0) {
-                        break;
-                    }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i < target) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            tabNodes.splice(target,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        target--;
-                        toMove.delete(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
-                }
-                return result;
+                return api.changeDepth(nodes, true, false)
             },
             moveNodesToBack: function(nodes) {
-                var result = [];
-                if (!Array.isArray(nodes)) {
-                    nodes = [nodes]
-                }
-                // Can only do this for nodes on the same tab.
-                // Use nodes[0] to get the z
-                var tabNodes = tabMap[nodes[0].z];
-                var toMove = new Set(nodes.filter(function(n) { return n.type !== "group" && n.type !== "subflow" }));
-                var target = 0;
-                for (var i = 0; i < tabNodes.length; i++) {
-                    if (toMove.size === 0) {
-                        break;
-                    }
-                    var n = tabNodes[i];
-                    if (toMove.has(n)) {
-                        // This is a node to move.
-                        if (i > target) {
-                            // Remove from current position
-                            tabNodes.splice(i,1);
-                            // Add it back one position lower
-                            tabNodes.splice(target,0,n);
-                            n._reordered = true;
-                            result.push(n);
-                        }
-                        target++;
-                        toMove.delete(n);
-                    }
-                }
-                if (result.length > 0) {
-                    RED.events.emit('nodes:reorder',{
-                        z: nodes[0].z,
-                        nodes: result
-                    });
-                }
-                return result;
+                return api.changeDepth(nodes, false, false)
             },
             getNodes: function(z) {
                 return tabMap[z];
@@ -4125,6 +4108,33 @@ RED.nodes = (function() {
             clear: function() {
                 nodes = {};
                 tabMap = {};
+                tabDirtyMap = {};
+                tabDeletedNodesMap = {};
+                addedDirtyObjects = new Set();
+            },
+            /**
+             * Clear all internal state on what is dirty.
+             */
+            clearState: function () {
+                // Called when a deploy happens, we can forget about added/remove
+                // items as they have now been deployed.
+                addedDirtyObjects = new Set()
+                const flowsToCheck = new Set()
+                for (const [z, set] of Object.entries(tabDeletedNodesMap)) {
+                    if (set.size > 0) {
+                        set.clear()
+                        flowsToCheck.add(z)
+                    }
+                }
+                for (const [z, set] of Object.entries(tabDirtyMap)) {
+                    if (set.size > 0) {
+                        set.clear()
+                        flowsToCheck.add(z)
+                    }
+                }
+                for (const z of flowsToCheck) {
+                    api.checkTabState(z)
+                }
             },
             eachNode: function(cb) {
                 var nodeList,i,j;
@@ -4190,7 +4200,7 @@ RED.nodes = (function() {
                 return result;
             },
             getNodeOrder: function(z) {
-                return tabMap[z].map(function(n) { return n.id })
+                return (groupsByZ[z] || []).concat(tabMap[z]).map(n => n.id)
             },
             setNodeOrder: function(z, order) {
                 var orderMap = {};
@@ -4202,6 +4212,41 @@ RED.nodes = (function() {
                     B._reordered = true;
                     return orderMap[A.id] - orderMap[B.id];
                 })
+                if (groupsByZ[z]) {
+                    groupsByZ[z].sort(function(A,B) {
+                        return orderMap[A.id] - orderMap[B.id];
+                    })
+                }
+            },
+            /**
+             * Update our records if an object is dirty or not
+             * @param {String} z tab id
+             * @param {String} id object id
+             * @param {Boolean} dirty whether the object is dirty or not
+             */
+            markNodeDirty: function(z, id, dirty) {
+                if (tabDirtyMap[z]) {
+                    if (dirty) {
+                        tabDirtyMap[z].add(id)
+                    } else {
+                        tabDirtyMap[z].delete(id)
+                    }
+                    api.checkTabState(z)
+                }
+            },
+            /**
+             * Check if a tab should update its contentsChange flag
+             * @param {String} z tab id
+             */
+            checkTabState: function (z) {
+                const ws = workspaces[z]
+                if (ws) {
+                    const contentsChanged = tabDirtyMap[z].size > 0 || tabDeletedNodesMap[z].size > 0
+                    if (Boolean(ws.contentsChanged) !== contentsChanged) {
+                        ws.contentsChanged = contentsChanged
+                        RED.events.emit("flows:change", ws);
+                    }
+                }
             }
         }
         return api;
@@ -4289,6 +4334,11 @@ RED.nodes = (function() {
                     throw new Error(`Cannot modified property '${prop}' of locked object '${node.type}:${node.id}'`)
                 }
             }
+            if (node.z && (prop === 'changed' || prop === 'moved')) {
+                setTimeout(() => {
+                    allNodes.markNodeDirty(node.z, node.id, node.changed || node.moved)
+                }, 0)
+            }
             node[prop] = value;
             return true
         }
@@ -4358,10 +4408,16 @@ RED.nodes = (function() {
         }
         if (l.source.z === l.target.z && linkTabMap[l.source.z]) {
             linkTabMap[l.source.z].push(l);
+            allNodes.addObjectToWorkspace(l.source.z, getLinkId(l), true)
         }
         RED.events.emit("links:add",l);
     }
 
+    function getLinkId(link) {
+        return link.source.id + ':' + link.sourcePort + ':' + link.target.id
+    }
+
+
     function getNode(id) {
         if (id in configNodes) {
             return configNodes[id];
@@ -4556,6 +4612,7 @@ RED.nodes = (function() {
                 if (index !== -1) {
                     linkTabMap[l.source.z].splice(index,1)
                 }
+                allNodes.removeObjectFromWorkspace(l.source.z, getLinkId(l))
             }
         }
         RED.events.emit("links:remove",l);
@@ -4725,6 +4782,11 @@ RED.nodes = (function() {
         return false;
     }
 
+    function getDownstreamNodes(node) {
+        const downstreamLinks = nodeLinks[node.id].out
+        const downstreamNodes = new Set(downstreamLinks.map(l => l.target))
+        return Array.from(downstreamNodes)
+    }
     function getAllDownstreamNodes(node) {
         return getAllFlowNodes(node,'down').filter(function(n) { return n !== node });
     }
@@ -5380,6 +5442,7 @@ RED.nodes = (function() {
      * Options:
      *  - generateIds - whether to replace all node ids
      *  - addFlow - whether to import nodes to a new tab
+     *  - markChanged - whether to set changed=true on all newly imported objects
      *  - reimport - if node has a .z property, dont overwrite it
      *               Only applicible when `generateIds` is false
      *  - importMap - how to resolve any conflicts.
@@ -5388,7 +5451,7 @@ RED.nodes = (function() {
      *       - id:replace - import over the top of existing
      */
     function importNodes(newNodesObj,options) { // createNewIds,createMissingWorkspace) {
-        const defOpts = { generateIds: false, addFlow: false, reimport: false, importMap: {} }
+        const defOpts = { generateIds: false, addFlow: false, markChanged: false, reimport: false, importMap: {} }
         options = Object.assign({}, defOpts, options)
         options.importMap = options.importMap || {}
         const createNewIds = options.generateIds;
@@ -5414,7 +5477,7 @@ RED.nodes = (function() {
             newNodes = newNodesObj;
         }
 
-        if (!$.isArray(newNodes)) {
+        if (!Array.isArray(newNodes)) {
             newNodes = [newNodes];
         }
 
@@ -5712,6 +5775,9 @@ RED.nodes = (function() {
                     if (!n.z) {
                         delete configNode.z;
                     }
+                    if (options.markChanged) {
+                        configNode.changed = true
+                    }
                     if (n.hasOwnProperty('d')) {
                         configNode.d = n.d;
                     }
@@ -5774,6 +5840,9 @@ RED.nodes = (function() {
                     if (n.hasOwnProperty('g')) {
                         node.g = n.g;
                     }
+                    if (options.markChanged) {
+                        node.changed = true
+                    }
                     if (createNewIds || options.importMap[n.id] === "copy") {
                         if (subflow_denylist[n.z]) {
                             continue;
@@ -5994,7 +6063,7 @@ RED.nodes = (function() {
             // get added
             if (activeSubflow && /^link /.test(n.type) && n.links) {
                 n.links = n.links.filter(function(id) {
-                    var otherNode = RED.nodes.node(id);
+                    const otherNode = node_map[id] || RED.nodes.node(id);
                     return (otherNode && otherNode.z === activeWorkspace)
                 });
             }
@@ -6287,6 +6356,7 @@ RED.nodes = (function() {
         groupsByZ[group.z] = groupsByZ[group.z] || [];
         groupsByZ[group.z].push(group);
         groups[group.id] = group;
+        allNodes.addObjectToWorkspace(group.z, group.id, group.changed || group.moved)
         RED.events.emit("groups:add",group);
         return group
     }
@@ -6303,10 +6373,14 @@ RED.nodes = (function() {
             }
         }
         RED.group.markDirty(group);
-
+        allNodes.removeObjectFromWorkspace(group.z, group.id)
         delete groups[group.id];
         RED.events.emit("groups:remove",group);
     }
+    function getGroupOrder(z) {
+        const groups = groupsByZ[z]
+        return groups.map(g => g.id)
+    }
 
     function addJunction(junction) {
         if (!junction.__isProxy__) {
@@ -6318,6 +6392,7 @@ RED.nodes = (function() {
         if (!nodeLinks[junction.id]) {
             nodeLinks[junction.id] = {in:[],out:[]};
         }
+        allNodes.addObjectToWorkspace(junction.z, junction.id, junction.changed || junction.moved)
         RED.events.emit("junctions:add", junction)
         return junction
     }
@@ -6329,6 +6404,7 @@ RED.nodes = (function() {
         }
         delete junctions[junction.id]
         delete nodeLinks[junction.id];
+        allNodes.removeObjectFromWorkspace(junction.z, junction.id)
         RED.events.emit("junctions:remove", junction)
 
         var removedLinks = links.filter(function(l) { return (l.source === junction) || (l.target === junction); });
@@ -6566,6 +6642,9 @@ RED.nodes = (function() {
                     RED.view.redraw(true);
                 }
             });
+            RED.events.on('deploy', function () {
+                allNodes.clearState()
+            })
         },
         registry:registry,
         setNodeList: registry.setNodeList,
@@ -6668,6 +6747,20 @@ RED.nodes = (function() {
                 }
             }
         },
+        eachGroup: function(cb) {
+            for (var group of Object.values(groups)) {
+                if (cb(group) === false) {
+                    break
+                }
+            }
+        },
+        eachJunction: function(cb) {
+            for (var junction of Object.values(junctions)) {
+                if (cb(junction) === false) {
+                    break
+                }
+            }
+        },
 
         node: getNode,
 
@@ -6690,6 +6783,7 @@ RED.nodes = (function() {
         getAllFlowNodes: getAllFlowNodes,
         getAllUpstreamNodes: getAllUpstreamNodes,
         getAllDownstreamNodes: getAllDownstreamNodes,
+        getDownstreamNodes: getDownstreamNodes,
         getNodeIslands: getNodeIslands,
         createExportableNodeSet: createExportableNodeSet,
         createCompleteNodeSet: createCompleteNodeSet,
@@ -7905,7 +7999,8 @@ RED.history = (function() {
                 if (ev.addToGroup) {
                     RED.group.removeFromGroup(ev.addToGroup,ev.nodes.map(function(n) { return n.n }),false);
                     inverseEv.removeFromGroup = ev.addToGroup;
-                } else if (ev.removeFromGroup) {
+                }
+                if (ev.removeFromGroup) {
                     RED.group.addToGroup(ev.removeFromGroup,ev.nodes.map(function(n) { return n.n }));
                     inverseEv.addToGroup = ev.removeFromGroup;
                 }
@@ -7948,6 +8043,9 @@ RED.history = (function() {
                         ev.node[i] = ev.changes[i];
                     }
                 }
+                ev.node.dirty = true;
+                ev.node.changed = ev.changed;
+
                 var eventType;
                 switch(ev.node.type) {
                     case 'tab': eventType = "flows"; break;
@@ -8038,8 +8136,6 @@ RED.history = (function() {
                         inverseEv.links.push(ev.createdLinks[i]);
                     }
                 }
-                ev.node.dirty = true;
-                ev.node.changed = ev.changed;
             } else if (ev.t == "createSubflow") {
                 inverseEv = {
                     t: "deleteSubflow",
@@ -8175,6 +8271,12 @@ RED.history = (function() {
                         ev.groups[i].nodes = [];
                         RED.nodes.addGroup(ev.groups[i]);
                         RED.group.addToGroup(ev.groups[i],nodes);
+                        if (ev.groups[i].g) {
+                            const parentGroup = RED.nodes.group(ev.groups[i].g)
+                            if (parentGroup) {
+                                RED.group.addToGroup(parentGroup, ev.groups[i])
+                            }
+                        }
                     }
                 }
             } else if (ev.t == "addToGroup") {
@@ -10292,6 +10394,9 @@ RED.utils = (function() {
             } else {
                 return null;
             }
+        },
+        cancel: function() {
+            this.element.sortable("cancel");
         }
     });
 })(jQuery);
@@ -12937,7 +13042,7 @@ RED.tabs = (function() {
                     // Assume this is wheel event which might not trigger
                     // the scroll event, so do things manually
                     var sl = scrollContainer.scrollLeft();
-                    sl -= evt.originalEvent.deltaY;
+                    sl += evt.originalEvent.deltaY;
                     scrollContainer.scrollLeft(sl);
                 }
             })
@@ -13599,7 +13704,6 @@ RED.tabs = (function() {
 
                 var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
                 if (options.onselect) {
-                    $('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges);
                     $('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').appendTo(badges);
                 }
 
@@ -16154,12 +16258,17 @@ RED.deploy = (function() {
             } else {
                 RED.notify('<p>' + RED._("deploy.successfulDeploy") + '</p>', "success");
             }
-            RED.nodes.eachNode(function (node) {
-                const flow = node.z && (RED.nodes.workspace(node.z) || RED.nodes.subflow(node.z) || null);
+            const flowsToLock = new Set()
+            function ensureUnlocked(id) {
+                const flow = id && (RED.nodes.workspace(id) || RED.nodes.subflow(id) || null);
                 const isLocked = flow ? flow.locked : false;
                 if (flow && isLocked) {
                     flow.locked = false;
+                    flowsToLock.add(flow)
                 }
+            }
+            RED.nodes.eachNode(function (node) {
+                ensureUnlocked(node.z)
                 if (node.changed) {
                     node.dirty = true;
                     node.changed = false;
@@ -16171,11 +16280,33 @@ RED.deploy = (function() {
                 if (node.credentials) {
                     delete node.credentials;
                 }
-                if (flow && isLocked) {
-                    flow.locked = isLocked;
-                }
             });
+            RED.nodes.eachGroup(function (node) {
+                ensureUnlocked(node.z)
+                if (node.changed) {
+                    node.dirty = true;
+                    node.changed = false;
+                }
+                if (node.moved) {
+                    node.dirty = true;
+                    node.moved = false;
+                }
+            })
+            RED.nodes.eachJunction(function (node) {
+                ensureUnlocked(node.z)
+                if (node.changed) {
+                    node.dirty = true;
+                    node.changed = false;
+                }
+                if (node.moved) {
+                    node.dirty = true;
+                    node.moved = false;
+                }
+            })
             RED.nodes.eachConfig(function (confNode) {
+                if (confNode.z) {
+                    ensureUnlocked(confNode.z)
+                }
                 confNode.changed = false;
                 if (confNode.credentials) {
                     delete confNode.credentials;
@@ -16185,8 +16316,16 @@ RED.deploy = (function() {
                 subflow.changed = false;
             });
             RED.nodes.eachWorkspace(function (ws) {
-                ws.changed = false;
+                if (ws.changed || ws.added) {
+                    ensureUnlocked(ws.z)
+                    ws.changed = false;
+                    delete ws.added
+                    RED.events.emit("flows:change", ws)
+                }
             });
+            flowsToLock.forEach(flow => {
+                flow.locked = true
+            })
             // Once deployed, cannot undo back to a clean state
             RED.history.markAllDirty();
             RED.view.redraw();
@@ -19384,6 +19523,10 @@ RED.keyboard = (function() {
                 }
             }
         });
+
+        RED.actions.add("core:show-global-env", function() {
+            RED.userSettings.show('envvar');
+        });
     }
 
     return {
@@ -19475,8 +19618,11 @@ RED.workspaces = (function() {
                 info: "",
                 label: RED._('workspace.defaultName',{number:workspaceIndex}),
                 env: [],
-                hideable: true
+                hideable: true,
             };
+            if (!skipHistoryEntry) {
+                ws.added = true
+            }
             RED.nodes.addWorkspace(ws,targetIndex);
             workspace_tabs.addTab(ws,targetIndex);
 
@@ -19486,8 +19632,7 @@ RED.workspaces = (function() {
                 RED.nodes.dirty(true);
             }
         }
-        $("#red-ui-tab-"+(ws.id.replace(".","-"))).attr("flowname",ws.label)
-
+        $("#red-ui-tab-"+(ws.id.replace(".","-"))).attr("flowname",ws.label).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed || ws.added));
         RED.view.focus();
         return ws;
     }
@@ -19553,7 +19698,7 @@ RED.workspaces = (function() {
             }
         });
 
-        let isCurrentLocked = RED.workspaces.isActiveLocked()
+        let isCurrentLocked = RED.workspaces.isLocked()
         if (tab) {
             isCurrentLocked = tab.locked
         }
@@ -19768,6 +19913,12 @@ RED.workspaces = (function() {
                     $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-locked');
                 }
 
+                const changeBadgeContainer = $('<svg class="red-ui-flow-tab-changed red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').appendTo("#red-ui-tab-"+(tab.id.replace(".","-")))
+                const changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                changeBadge.setAttribute("cx",5);
+                changeBadge.setAttribute("cy",5);
+                changeBadge.setAttribute("r",5);
+                changeBadgeContainer.append(changeBadge)
 
                 RED.menu.setDisabled("menu-item-workspace-delete",activeWorkspace === 0 || workspaceTabCount <= 1);
                 if (workspaceTabCount === 1) {
@@ -20030,6 +20181,11 @@ RED.workspaces = (function() {
                 RED.workspaces.show(viewStack[++viewStackPos],true);
             }
         })
+
+        RED.events.on("flows:change", (ws) => {
+            $("#red-ui-tab-"+(ws.id.replace(".","-"))).toggleClass('red-ui-workspace-changed',!!(ws.contentsChanged || ws.changed || ws.added));
+        })
+
         hideWorkspace();
     }
 
@@ -20108,19 +20264,8 @@ RED.workspaces = (function() {
             RED.history.push(historyEvent);
             RED.events.emit("flows:change",workspace);
             RED.nodes.dirty(true);
-            // RED.sidebar.config.refresh();
-            // var selection = RED.view.selection();
-            // if (!selection.nodes && !selection.links && workspace.id === activeWorkspace) {
-            //     RED.sidebar.info.refresh(workspace);
-            // }
-            // if (changes.hasOwnProperty('disabled')) {
-            //     RED.nodes.eachNode(function(n) {
-            //         if (n.z === workspace.id) {
-            //             n.dirty = true;
-            //         }
-            //     });
-            //     RED.view.redraw();
-            // }
+            RED.nodes.filterNodes({z:workspace.id}).forEach(n => n.dirty = true)
+            RED.view.redraw(true);
         }
     }
 
@@ -20226,8 +20371,9 @@ RED.workspaces = (function() {
         active: function() {
             return activeWorkspace
         },
-        isActiveLocked: function() {
-            var ws = RED.nodes.workspace(activeWorkspace) || RED.nodes.subflow(activeWorkspace)
+        isLocked: function(id) {
+            id = id || activeWorkspace
+            var ws = RED.nodes.workspace(id) || RED.nodes.subflow(id)
             return ws && ws.locked
         },
         selection: function() {
@@ -20374,8 +20520,8 @@ RED.statusBar = (function() {
   */
 
 RED.view = (function() {
-    var space_width = 5000,
-        space_height = 5000,
+    var space_width = 8000,
+        space_height = 8000,
         lineCurveScale = 0.75,
         scaleFactor = 1,
         node_width = 100,
@@ -20405,8 +20551,9 @@ RED.view = (function() {
     var activeJunctions = [];
     var activeFlowLinks = [];
     var activeLinkNodes = {};
-    var activeGroup = null;
     var activeHoverGroup = null;
+    var groupAddActive = false;
+    var groupAddParentGroup = null;
     var activeGroups = [];
     var dirtyGroups = {};
 
@@ -20468,10 +20615,10 @@ RED.view = (function() {
     var groupLayer;
     var drag_lines;
 
-    var movingSet = (function() {
+    const movingSet = (function() {
         var setIds = new Set();
         var set = [];
-        var api = {
+        const api = {
             add: function(node) {
                 if (Array.isArray(node)) {
                     for (var i=0;i<node.length;i++) {
@@ -20519,14 +20666,27 @@ RED.view = (function() {
             get: function(i) { return set[i] },
             forEach: function(func) { set.forEach(func) },
             nodes: function() { return set.map(function(n) { return n.n })},
-            has: function(node) { return setIds.has(node.id) }
+            has: function(node) { return setIds.has(node.id) },
+            /**
+             * Make the specified node the first node of the moving set, if
+             * it is already in the set.
+             * @param {Node} node 
+             */
+            makePrimary: function (node) {
+                const index = set.findIndex(n => n.n === node)
+                if (index > -1) {
+                    const removed = set.splice(index, 1)
+                    set.unshift(...removed)
+                }
+            },
+            find: function(func) { return set.find(func) }
         }
         return api;
     })();
 
-    var selectedLinks = (function() {
+    const selectedLinks = (function() {
         var links = new Set();
-        return {
+        const api = {
             add: function(link) {
                 links.add(link);
                 link.selected = true;
@@ -20544,8 +20704,16 @@ RED.view = (function() {
             },
             forEach: function(func) { links.forEach(func) },
             has: function(link) { return links.has(link) },
-            toArray: function() { return Array.from(links) }
+            toArray: function() { return Array.from(links) },
+            clearUnselected: function () {
+                api.forEach(l => {
+                    if (!l.source.selected || !l.target.selected) {
+                        api.remove(l)
+                    }
+                })
+            }
         }
+        return api
     })();
 
 
@@ -20588,6 +20756,7 @@ RED.view = (function() {
                 d3.select(document).on('mouseup.red-ui-workspace-tracker', null)
                 if (lasso) {
                     if (d3.event.buttons !== 1) {
+                        outer.classed('red-ui-workspace-lasso-active', false)
                         lasso.remove();
                         lasso = null;
                     }
@@ -20722,6 +20891,31 @@ RED.view = (function() {
                     }
                     d3.event.preventDefault();
             });
+            
+
+        const handleAltToggle = (event) => {
+            if (mouse_mode === RED.state.MOVING_ACTIVE && event.key === 'Alt' && groupAddParentGroup) {
+                RED.nodes.group(groupAddParentGroup).dirty = true
+                for (let n = 0; n<movingSet.length(); n++) {
+                    const node = movingSet.get(n);
+                    node.n._detachFromGroup = event.altKey
+                }
+                if (!event.altKey) {
+                    if (groupHoverTimer) {
+                        clearTimeout(groupHoverTimer)
+                        groupHoverTimer = null
+                    }
+                    if (activeHoverGroup) {
+                        activeHoverGroup.hovered = false
+                        activeHoverGroup.dirty = true
+                        activeHoverGroup = null
+                    }
+                }
+                RED.view.redraw()
+            }
+        }
+        document.addEventListener("keyup", handleAltToggle)
+        document.addEventListener("keydown", handleAltToggle)
 
         // Workspace Background
         eventLayer.append("svg:rect")
@@ -20930,27 +21124,11 @@ RED.view = (function() {
                     nn.y -= gridOffset.y;
                 }
 
-                var spliceLink = $(ui.helper).data("splice");
-                if (spliceLink) {
-                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
-                    RED.nodes.removeLink(spliceLink);
-                    var link1 = {
-                        source:spliceLink.source,
-                        sourcePort:spliceLink.sourcePort,
-                        target: nn
-                    };
-                    var link2 = {
-                        source:nn,
-                        sourcePort:0,
-                        target: spliceLink.target
-                    };
-                    RED.nodes.addLink(link1);
-                    RED.nodes.addLink(link2);
-                    historyEvent.links = [link1,link2];
-                    historyEvent.removedLinks = [spliceLink];
+                var linkToSplice = $(ui.helper).data("splice");
+                if (linkToSplice) {
+                    spliceLink(linkToSplice, nn, historyEvent)
                 }
 
-
                 var group = $(ui.helper).data("group");
                 if (group) {
                     var oldX = group.x; 
@@ -20987,15 +21165,9 @@ RED.view = (function() {
                 RED.editor.validateNode(nn);
                 RED.nodes.dirty(true);
                 // auto select dropped node - so info shows (if visible)
-                exitActiveGroup();
                 clearSelection();
                 nn.selected = true;
                 movingSet.add(nn);
-                if (group) {
-                    selectGroup(group,false);
-                    enterActiveGroup(group);
-                    activeGroup = group;
-                }
                 updateActiveNodes();
                 updateSelection();
                 redraw();
@@ -21015,7 +21187,7 @@ RED.view = (function() {
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
         RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection(true);deleteSelection();});
         RED.actions.add("core:paste-from-internal-clipboard",function(){
-            if (RED.workspaces.isActiveLocked()) {
+            if (RED.workspaces.isLocked()) {
                 return
             }
             importNodes(clipboard,{generateIds: clipboardSource === 'copy', generateDefaultNames: clipboardSource === 'copy'});
@@ -21058,7 +21230,7 @@ RED.view = (function() {
                 if (/^subflow:/.test(node.type)) {
                     RED.workspaces.show(node.type.substring(8))
                 } else if (node.type === 'group') {
-                    enterActiveGroup(node);
+                    // enterActiveGroup(node);
                     redraw();
                 }
             }
@@ -21246,16 +21418,31 @@ RED.view = (function() {
             });
             activeJunctions = RED.nodes.junctions(activeWorkspace) || [];
             activeGroups = RED.nodes.groups(activeWorkspace)||[];
-            activeGroups.forEach(function(g, i) {
-                g._index = i;
-                if (g.g) {
-                    g._root = g.g;
-                    g._depth = 1;
-                } else {
-                    g._root = g.id;
-                    g._depth = 0;
+            if (activeGroups.length) {
+                const groupTree = {}
+                const rootGroups = []
+                activeGroups.forEach(function(g, i) {
+                    groupTree[g.id] = g
+                    g._index = i;
+                    g._childGroups = []
+                    if (!g.g) {
+                        rootGroups.push(g)
+                    }
+                });
+                activeGroups.forEach(function(g) {
+                    if (g.g) {
+                        groupTree[g.g]._childGroups.push(g)
+                        g._parentGroup = groupTree[g.g]
+                    }
+                })
+                let ii = 0
+                // Depth-first walk of the groups
+                const processGroup = g => {
+                    g._order = ii++
+                    g._childGroups.forEach(processGroup)
                 }
-            });
+                rootGroups.forEach(processGroup)
+            }
         } else {
             activeNodes = [];
             activeLinks = [];
@@ -21263,43 +21450,13 @@ RED.view = (function() {
             activeGroups = [];
         }
 
-        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;
-                        }
-                        if (g._root !== parentGroup._root) {
-                            g._root = parentGroup._root;
-                            changed = true;
-                        }
-                    }
-                }
-            });
-        } while (changed)
         activeGroups.sort(function(a,b) {
-            if (a._root === b._root) {
-                return a._depth - b._depth;
-            } else {
-                // return a._root.localeCompare(b._root);
-                return a._index - b._index;
-            }
+            return a._order - b._order
         });
 
         var group = groupLayer.selectAll(".red-ui-flow-group").data(activeGroups,function(d) { return d.id });
         group.sort(function(a,b) {
-            if (a._root === b._root) {
-                return a._depth - b._depth;
-            } else {
-                return a._index - b._index;
-                // return a._root.localeCompare(b._root);
-            }
+            return a._order - b._order
         })
     }
 
@@ -21404,6 +21561,7 @@ RED.view = (function() {
             updateSelection();
         }
         if (mouse_mode === 0 && lasso) {
+            outer.classed('red-ui-workspace-lasso-active', false)
             lasso.remove();
             lasso = null;
         }
@@ -21435,6 +21593,7 @@ RED.view = (function() {
                             .attr("height", 0)
                             .attr("class", "nr-ui-view-lasso");
                         d3.event.preventDefault();
+                        outer.classed('red-ui-workspace-lasso-active', true)
                     }
                 } else if (d3.event.altKey && !activeFlowLocked) {
                     //Alt [+shift] held - Begin slicing
@@ -21455,14 +21614,13 @@ RED.view = (function() {
         }
         options = options || {};
         var point = options.position || lastClickPosition;
-        var spliceLink = options.splice;
+        var linkToSplice = options.splice;
         var spliceMultipleLinks = options.spliceMultiple
         var targetGroup = options.group;
         var touchTrigger = options.touchTrigger;
 
-        if (targetGroup && !targetGroup.active) {
+        if (targetGroup) {
             selectGroup(targetGroup,false);
-            enterActiveGroup(targetGroup);
             RED.view.redraw();
         }
 
@@ -21527,7 +21685,7 @@ RED.view = (function() {
             }
             hideDragLines();
         }
-        if (spliceLink || spliceMultipleLinks) {
+        if (linkToSplice || spliceMultipleLinks) {
             filter = {
                 input:true,
                 output:true,
@@ -21611,7 +21769,8 @@ RED.view = (function() {
                         w: 0, h: 0,
                         outputs: 1,
                         inputs: 1,
-                        dirty: true
+                        dirty: true,
+                        moved: true
                     }
                     historyEvent = {
                         t:'add',
@@ -21777,24 +21936,9 @@ RED.view = (function() {
                     }
                 }
 
-                if (spliceLink) {
+                if (linkToSplice) {
                     resetMouseVars();
-                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
-                    RED.nodes.removeLink(spliceLink);
-                    var link1 = {
-                        source:spliceLink.source,
-                        sourcePort:spliceLink.sourcePort,
-                        target: nn
-                    };
-                    var link2 = {
-                        source:nn,
-                        sourcePort:0,
-                        target: spliceLink.target
-                    };
-                    RED.nodes.addLink(link1);
-                    RED.nodes.addLink(link2);
-                    historyEvent.links = (historyEvent.links || []).concat([link1,link2]);
-                    historyEvent.removedLinks = [spliceLink];
+                    spliceLink(linkToSplice, nn, historyEvent)
                 }
                 RED.history.push(historyEvent);
                 RED.nodes.dirty(true);
@@ -21803,7 +21947,6 @@ RED.view = (function() {
                 nn.selected = true;
                 if (targetGroup) {
                     selectGroup(targetGroup,false);
-                    enterActiveGroup(targetGroup);
                 }
                 movingSet.add(nn);
                 updateActiveNodes();
@@ -22018,16 +22161,11 @@ RED.view = (function() {
             if ((d > 3 && !dblClickPrimed) || (dblClickPrimed && d > 10)) {
                 clickElapsed = 0;
                 if (!activeFlowLocked) {
-                    mouse_mode = RED.state.MOVING_ACTIVE;
-                    spliceActive = false;
-                    if (movingSet.length() === 1) {
-                        node = movingSet.get(0);
-                        spliceActive = node.n.hasOwnProperty("_def") &&
-                                       ((node.n.hasOwnProperty("inputs") && node.n.inputs > 0) || (!node.n.hasOwnProperty("inputs") && node.n._def.inputs > 0)) &&
-                                       ((node.n.hasOwnProperty("outputs") && node.n.outputs > 0) || (!node.n.hasOwnProperty("outputs") && node.n._def.outputs > 0)) &&
-                                       RED.nodes.filterLinks({ source: node.n }).length === 0 &&
-                                       RED.nodes.filterLinks({ target: node.n }).length === 0;
+                    if (mousedown_node) {
+                        movingSet.makePrimary(mousedown_node)
                     }
+                    mouse_mode = RED.state.MOVING_ACTIVE;
+                    startSelectionMove()
                 }
             }
         } else if (mouse_mode == RED.state.MOVING_ACTIVE || mouse_mode == RED.state.IMPORT_DRAGGING || mouse_mode == RED.state.DETACHED_DRAGGING) {
@@ -22042,6 +22180,7 @@ RED.view = (function() {
                     node.n.ox = node.n.x;
                     node.n.oy = node.n.y;
                 }
+                node.n._detachFromGroup = d3.event.altKey
                 node.n.x = mousePos[0]+node.dx;
                 node.n.y = mousePos[1]+node.dy;
                 node.n.dirty = true;
@@ -22110,9 +22249,8 @@ RED.view = (function() {
                 }
             }
 
-            // Check link splice or group-add
+            // Check link splice
             if (movingSet.length() === 1 && movingSet.get(0).n.type !== "group") {
-            //}{//NIS
                 node = movingSet.get(0);
                 if (spliceActive) {
                     if (!spliceTimer) {
@@ -22160,23 +22298,39 @@ RED.view = (function() {
                         },100);
                     }
                 }
-                if (node.n.type !== 'subflow' && !node.n.g && activeGroups) {
-                    if (!groupHoverTimer) {
-                        groupHoverTimer = setTimeout(function() {
-                            activeHoverGroup = getGroupAt(node.n.x,node.n.y);
-                            for (var i=0;i<activeGroups.length;i++) {
-                                var g = activeGroups[i];
-                                if (g === activeHoverGroup) {
-                                    g.hovered = true;
-                                    g.dirty = true;
-                                } else if (g.hovered) {
-                                    g.hovered = false;
-                                    g.dirty = true;
+            }
+            // Check merge into group
+            if (groupAddActive) {
+                if (!groupHoverTimer) {
+                    const isDetachFromGroup = d3.event.altKey
+                    groupHoverTimer = setTimeout(function() {
+                        node = movingSet.get(0);
+                        const hoveredGroup = getGroupAt(mousePos[0],mousePos[1], true);
+                        if (hoveredGroup !== activeHoverGroup) {
+                            if (activeHoverGroup) {
+                                activeHoverGroup.hovered = false
+                                activeHoverGroup.dirty = true
+                            }
+                            activeHoverGroup = hoveredGroup
+                        }
+                        if (activeHoverGroup && groupAddParentGroup && !isDetachFromGroup) {
+                            if (groupAddParentGroup === activeHoverGroup.id) {
+                                activeHoverGroup = null
+                            } else {
+                                const nodeGroup = RED.nodes.group(groupAddParentGroup)
+                                // This node is already in a group. It should only be draggable
+                                // into a group that is a child of the group its in
+                                if (!RED.group.contains(nodeGroup, activeHoverGroup)) {
+                                    activeHoverGroup = null
                                 }
                             }
-                            groupHoverTimer = null;
-                        },50);
-                    }
+                        }
+                        if (activeHoverGroup) {
+                            activeHoverGroup.hovered = true
+                            activeHoverGroup.dirty = true
+                        }
+                        groupHoverTimer = null;
+                    }, 50);
                 }
             }
 
@@ -22230,6 +22384,16 @@ RED.view = (function() {
                 };
                 RED.history.push(historyEvent);
                 RED.nodes.dirty(true);
+            } else {
+                // Trigger quick add dialog
+                d3.event.stopPropagation();
+                clearSelection();
+                const point = d3.mouse(this);
+                var clickedGroup = getGroupAt(point[0], point[1]);
+                if (drag_lines.length > 0) {
+                    clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+                }
+                showQuickAddDialog({ position: point, group: clickedGroup });
             }
             hideDragLines();
         }
@@ -22238,56 +22402,32 @@ RED.view = (function() {
             var y = parseInt(lasso.attr("y"));
             var x2 = x+parseInt(lasso.attr("width"));
             var y2 = y+parseInt(lasso.attr("height"));
-            var ag = activeGroup;
             if (!d3.event.shiftKey) {
                 clearSelection();
-                if (ag) {
-                    if (x < ag.x+ag.w && x2 > ag.x && y < ag.y+ag.h && y2 > ag.y) {
-                        // There was an active group and the lasso intersects with it,
-                        // so reenter the group
-                        enterActiveGroup(ag);
-                        activeGroup.selected = true;
-                    }
-                }
             }
-            activeGroups.forEach(function(g) {
-                if (!g.selected) {
-                    if (g.x > x && g.x+g.w < x2 && g.y > y && g.y+g.h < y2) {
-                        if (!activeGroup || RED.group.contains(activeGroup,g)) {
-                            while (g.g && (!activeGroup || g.g !== activeGroup.id)) {
-                                g = RED.nodes.group(g.g);
-                            }
-                            if (!g.selected) {
-                                selectGroup(g,true);
-                            }
-                        }
+
+            activeGroups.forEach(function(n) {
+                if (!movingSet.has(n) && !n.selected) {
+                    // group entirely within lasso
+                    if (n.x > x && n.y > y && n.x + n.w < x2 && n.y + n.h < y2) {
+                        n.selected = true
+                        n.dirty = true
+                        var groupNodes = RED.group.getNodes(n,true);
+                        groupNodes.forEach(gn => movingSet.add(gn))
                     }
                 }
             })
-
             activeNodes.forEach(function(n) {
-                if (!n.selected) {
+                if (!movingSet.has(n) && !n.selected) {
                     if (n.x > x && n.x < x2 && n.y > y && n.y < y2) {
-                        if (!activeGroup || RED.group.contains(activeGroup,n)) {
-                            if (n.g && (!activeGroup || n.g !== activeGroup.id)) {
-                                var group = RED.nodes.group(n.g);
-                                while (group.g && (!activeGroup || group.g !== activeGroup.id)) {
-                                    group = RED.nodes.group(group.g);
-                                }
-                                if (!group.selected) {
-                                    selectGroup(group,true);
-                                }
-                            } else {
-                                n.selected = true;
-                                n.dirty = true;
-                                movingSet.add(n);
-                            }
-                        }
+                        n.selected = true;
+                        n.dirty = true;
+                        movingSet.add(n);
                     }
                 }
             });
             activeJunctions.forEach(function(n) {
-                if (!n.selected) {
+                if (!movingSet.has(n) && !n.selected) {
                     if (n.x > x && n.x < x2 && n.y > y && n.y < y2) {
                         n.selected = true;
                         n.dirty = true;
@@ -22310,17 +22450,6 @@ RED.view = (function() {
                 }
             })
 
-            // var selectionChanged = false;
-            // do {
-            //     selectionChanged = false;
-            //     selectedGroups.forEach(function(g) {
-            //         if (g.g && g.selected && RED.nodes.group(g.g).selected) {
-            //             g.selected = false;
-            //             selectionChanged = true;
-            //         }
-            //     })
-            // } while(selectionChanged);
-
             if (activeSubflow) {
                 activeSubflow.in.forEach(function(n) {
                     n.selected = (n.x > x && n.x < x2 && n.y > y && n.y < y2);
@@ -22345,6 +22474,7 @@ RED.view = (function() {
                 }
             }
             updateSelection();
+            outer.classed('red-ui-workspace-lasso-active', false)
             lasso.remove();
             lasso = null;
         } else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey && !d3.event.metaKey ) {
@@ -22359,210 +22489,80 @@ RED.view = (function() {
             RED.actions.invoke("core:split-wires-with-junctions")
             slicePath.remove();
             slicePath = null;
-
-            // var removedLinks = new Set()
-            // var addedLinks = []
-            // var addedJunctions = []
-            //
-            // var groupedLinks = {}
-            // selectedLinks.forEach(function(l) {
-            //     var sourceId = l.source.id+":"+l.sourcePort
-            //     groupedLinks[sourceId] = groupedLinks[sourceId] || []
-            //     groupedLinks[sourceId].push(l)
-            //
-            //     groupedLinks[l.target.id] = groupedLinks[l.target.id] || []
-            //     groupedLinks[l.target.id].push(l)
-            // });
-            // var linkGroups = Object.keys(groupedLinks)
-            // linkGroups.sort(function(A,B) {
-            //     return groupedLinks[B].length - groupedLinks[A].length
-            // })
-            // linkGroups.forEach(function(gid) {
-            //     var links = groupedLinks[gid]
-            //     var junction = {
-            //         _def: {defaults:{}},
-            //         type: 'junction',
-            //         z: RED.workspaces.active(),
-            //         id: RED.nodes.id(),
-            //         x: 0,
-            //         y: 0,
-            //         w: 0, h: 0,
-            //         outputs: 1,
-            //         inputs: 1,
-            //         dirty: true
-            //     }
-            //     links = links.filter(function(l) { return !removedLinks.has(l) })
-            //     if (links.length === 0) {
-            //         return
-            //     }
-            //     links.forEach(function(l) {
-            //         junction.x += l._sliceLocation.x
-            //         junction.y += l._sliceLocation.y
-            //     })
-            //     junction.x = Math.round(junction.x/links.length)
-            //     junction.y = Math.round(junction.y/links.length)
-            //     if (snapGrid) {
-            //         junction.x = (gridSize*Math.round(junction.x/gridSize));
-            //         junction.y = (gridSize*Math.round(junction.y/gridSize));
-            //     }
-            //
-            //     var nodeGroups = new Set()
-            //
-            //     RED.nodes.addJunction(junction)
-            //     addedJunctions.push(junction)
-            //     let newLink
-            //     if (gid === links[0].source.id+":"+links[0].sourcePort) {
-            //         newLink = {
-            //             source: links[0].source,
-            //             sourcePort: links[0].sourcePort,
-            //             target: junction
-            //         }
-            //     } else {
-            //         newLink = {
-            //             source: junction,
-            //             sourcePort: 0,
-            //             target: links[0].target
-            //         }
-            //     }
-            //     addedLinks.push(newLink)
-            //     RED.nodes.addLink(newLink)
-            //     links.forEach(function(l) {
-            //         removedLinks.add(l)
-            //         RED.nodes.removeLink(l)
-            //         let newLink
-            //         if (gid === l.target.id) {
-            //             newLink = {
-            //                 source: l.source,
-            //                 sourcePort: l.sourcePort,
-            //                 target: junction
-            //             }
-            //         } else {
-            //             newLink = {
-            //                 source: junction,
-            //                 sourcePort: 0,
-            //                 target: l.target
-            //             }
-            //         }
-            //         addedLinks.push(newLink)
-            //         RED.nodes.addLink(newLink)
-            //         nodeGroups.add(l.source.g || "__NONE__")
-            //         nodeGroups.add(l.target.g || "__NONE__")
-            //     })
-            //     if (nodeGroups.size === 1) {
-            //         var group = nodeGroups.values().next().value
-            //         if (group !== "__NONE__") {
-            //             RED.group.addToGroup(RED.nodes.group(group), junction)
-            //         }
-            //     }
-            // })
-            // slicePath.remove();
-            // slicePath = null;
-            //
-            // if (addedJunctions.length > 0) {
-            //     RED.history.push({
-            //         t: 'add',
-            //         links: addedLinks,
-            //         junctions: addedJunctions,
-            //         removedLinks: Array.from(removedLinks)
-            //     })
-            //     RED.nodes.dirty(true)
-            // }
-            // RED.view.redraw(true);
         }
         if (mouse_mode == RED.state.MOVING_ACTIVE) {
             if (movingSet.length() > 0) {
-                var addedToGroup = null;
-                var moveEvent = null;
-                if (activeHoverGroup) {
-                    var oldX = activeHoverGroup.x; 
-                    var oldY = activeHoverGroup.y; 
-                    for (var j=0;j<movingSet.length();j++) {
-                        var n = movingSet.get(j);
-                        RED.group.addToGroup(activeHoverGroup,n.n);
-                    }
-                    if ((activeHoverGroup.x !== oldX) ||
-                        (activeHoverGroup.y !== oldY)) {
-                        moveEvent = {
-                            t: "move",
-                            nodes: [{n: activeHoverGroup,
-                                     ox: oldX, oy: oldY,
-                                     dx: activeHoverGroup.x -oldX,
-                                     dy: activeHoverGroup.y -oldY}],
-                            dirty: true
-                        };
-                    }
-                    addedToGroup = activeHoverGroup;
+                historyEvent = { t: 'multi', events: [] }
 
-                    activeHoverGroup.hovered = false;
-                    enterActiveGroup(activeHoverGroup)
-                    // TODO: check back whether this should add to moving_set
-                    activeGroup.selected = true;
-                    activeHoverGroup = null;
+                // Check to see if we're dropping into a group
+                const {
+                    addedToGroup,
+                    removedFromGroup,
+                    groupMoveEvent,
+                    rehomedNodes
+                } = addMovingSetToGroup()
+
+                if (groupMoveEvent) {
+                    historyEvent.events.push(groupMoveEvent)
                 }
 
-                var ns = [];
-                for (var j=0;j<movingSet.length();j++) {
-                    var n = movingSet.get(j);
-                    if (n.ox !== n.n.x || n.oy !== n.n.y) {
-                        ns.push({n:n.n,ox:n.ox,oy:n.oy,moved:n.n.moved});
+                // Create two lists of nodes:
+                //  - nodes that have moved without changing group
+                //  - nodes that have moved AND changed group
+                const moveEvent = {
+                    t: 'move',
+                    nodes: [],
+                    dirty: RED.nodes.dirty()
+                }
+                const moveAndChangedGroupEvent = {
+                    t: 'move',
+                    nodes: [],
+                    dirty: RED.nodes.dirty(),
+                    addToGroup: addedToGroup,
+                    removeFromGroup: removedFromGroup
+                }
+                for (let j = 0; j < movingSet.length(); j++) {
+                    const n = movingSet.get(j);
+                    delete n.n._detachFromGroup
+                    if (n.ox !== n.n.x || n.oy !== n.n.y || addedToGroup) {
+                        // This node has moved or added to a group
+                        if (rehomedNodes.has(n)) {
+                            moveAndChangedGroupEvent.nodes.push({...n})
+                        } else {
+                            moveEvent.nodes.push({...n})
+                        }
                         n.n.dirty = true;
                         n.n.moved = true;
                     }
                 }
 
-                if (ns.length > 0 && mouse_mode == RED.state.MOVING_ACTIVE) {
-                    historyEvent = {t:"move",nodes:ns,dirty:RED.nodes.dirty()};
+                // Check to see if we need to splice a link
+                if (moveEvent.nodes.length > 0) {
+                    historyEvent.events.push(moveEvent)
                     if (activeSpliceLink) {
-                        // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp
-                        var spliceLink = d3.select(activeSpliceLink).data()[0];
-                        RED.nodes.removeLink(spliceLink);
-                        var link1 = {
-                            source:spliceLink.source,
-                            sourcePort:spliceLink.sourcePort,
-                            target: movingSet.get(0).n
-                        };
-                        var link2 = {
-                            source:movingSet.get(0).n,
-                            sourcePort:0,
-                            target: spliceLink.target
-                        };
-                        RED.nodes.addLink(link1);
-                        RED.nodes.addLink(link2);
-                        historyEvent.links = [link1,link2];
-                        historyEvent.removedLinks = [spliceLink];
-                        updateActiveNodes();
-                    }
-                    if (addedToGroup) {
-                        historyEvent.addToGroup = addedToGroup;
+                        var linkToSplice = d3.select(activeSpliceLink).data()[0];
+                        spliceLink(linkToSplice, movingSet.get(0).n, moveEvent)
                     }
+                }
+                if (moveAndChangedGroupEvent.nodes.length > 0) {
+                    historyEvent.events.push(moveAndChangedGroupEvent)
+                }
+                
+                // Only continue if something has moved
+                if (historyEvent.events.length > 0) {
                     RED.nodes.dirty(true);
-                    if (moveEvent) {
-                        historyEvent = {
-                            t: "multi",
-                            events: [moveEvent, historyEvent]
-                        };
+                    if (historyEvent.events.length === 1) {
+                        // Keep history tidy - no need for multi-event
+                        RED.history.push(historyEvent.events[0]);
+                    } else {
+                        // Multiple events - push the whole lot as one
+                        RED.history.push(historyEvent);
                     }
-                    RED.history.push(historyEvent);
+                    updateActiveNodes();
                 }
             }
         }
-        // if (mouse_mode === RED.state.MOVING && mousedown_node && mousedown_node.g) {
-        //     if (mousedown_node.gSelected) {
-        //         delete mousedown_node.gSelected
-        //     } else {
-        //         if (!d3.event.ctrlKey && !d3.event.metaKey) {
-        //             clearSelection();
-        //         }
-        //         RED.nodes.group(mousedown_node.g).selected = true;
-        //         mousedown_node.selected = true;
-        //         mousedown_node.dirty = true;
-        //         movingSet.add(mousedown_node);
-        //     }
-        // }
         if (mouse_mode == RED.state.MOVING || mouse_mode == RED.state.MOVING_ACTIVE || mouse_mode == RED.state.DETACHED_DRAGGING) {
-            // if (mousedown_node) {
-            //     delete mousedown_node.gSelected;
-            // }
             if (mouse_mode === RED.state.DETACHED_DRAGGING) {
                 var ns = [];
                 for (var j=0;j<movingSet.length();j++) {
@@ -22600,6 +22600,95 @@ RED.view = (function() {
         redraw();
     }
 
+
+    function spliceLink(link, node, historyEvent) {
+        RED.nodes.removeLink(link);
+        const link1 = {
+            source: link.source,
+            sourcePort: link.sourcePort,
+            target: node
+        };
+        const link2 = {
+            source: node,
+            sourcePort: 0,
+            target: link.target
+        };
+        RED.nodes.addLink(link1);
+        RED.nodes.addLink(link2);
+
+        historyEvent.links = (historyEvent.links || []).concat([link1,link2]);
+        historyEvent.removedLinks = [link];
+    }
+
+    function addMovingSetToGroup() {
+
+        const isDetachFromGroup = groupAddParentGroup && d3.event.altKey
+
+        let addedToGroup = null;
+        let removedFromGroup = null;
+        let groupMoveEvent = null;
+        let rehomedNodes = new Set()
+
+        if (activeHoverGroup) {
+            // Nodes are being dropped into a group. We have to assume at
+            // this point that everything in the movingSet is valid for adding
+            // to this group. But it could be a mix of nodes and existing groups.
+            // In which case, we don't want to rehome all of the nodes inside
+            // existing groups - we just want to rehome the top level objects.
+            var oldX = activeHoverGroup.x; 
+            var oldY = activeHoverGroup.y; 
+            if (groupAddParentGroup) {
+                removedFromGroup = RED.nodes.group(groupAddParentGroup)
+            }
+            // Second pass - now we know what to move, we can move it
+            for (let j=0;j<movingSet.length();j++) {
+                const n = movingSet.get(j)
+                if (!n.n.g || (removedFromGroup && n.n.g === removedFromGroup.id)) {
+                    rehomedNodes.add(n)  
+                    RED.group.addToGroup(activeHoverGroup, n.n);
+                }
+            }
+            if ((activeHoverGroup.x !== oldX) ||
+                (activeHoverGroup.y !== oldY)) {
+                groupMoveEvent = {
+                    t: "move",
+                    nodes: [{n: activeHoverGroup,
+                             ox: oldX, oy: oldY,
+                             dx: activeHoverGroup.x -oldX,
+                             dy: activeHoverGroup.y -oldY}],
+                    dirty: true
+                };
+            }
+            addedToGroup = activeHoverGroup;
+            activeHoverGroup.hovered = false;
+            activeHoverGroup = null;
+        } else if (isDetachFromGroup) {
+            // The nodes are being removed from their group
+            removedFromGroup = RED.nodes.group(groupAddParentGroup)
+            for (let j=0;j<movingSet.length();j++) {
+                const n = movingSet.get(j)
+                if (n.n.g && n.n.g === removedFromGroup.id) {
+                    rehomedNodes.add(n)  
+                    RED.group.removeFromGroup(removedFromGroup, n.n);
+                }
+            }
+        }
+        activeGroups.forEach(g => {
+            if (g.hovered) {
+                g.hovered = false
+                g.dirty = true
+            }
+        })
+
+        return {
+            addedToGroup,
+            removedFromGroup,
+            groupMoveEvent,
+            rehomedNodes
+        }
+
+    }
+
     function zoomIn() {
         if (scaleFactor < 2) {
             zoomView(scaleFactor+0.1);
@@ -22658,10 +22747,9 @@ RED.view = (function() {
             }
             clearSelection();
         } else if (lasso) {
+            outer.classed('red-ui-workspace-lasso-active', false)
             lasso.remove();
             lasso = null;
-        } else if (activeGroup) {
-            exitActiveGroup()
         } else {
             clearSelection();
         }
@@ -22672,82 +22760,61 @@ RED.view = (function() {
             return;
         }
         selectedLinks.clear();
-
-        if (activeGroup) {
-            var ag = activeGroup;
-            clearSelection();
-            enterActiveGroup(ag);
-
-            var groupNodes = RED.group.getNodes(ag,false);
-            groupNodes.forEach(function(n) {
-                if (n.type === 'group') {
-                    selectGroup(n,true,true);
-                } else {
-                    movingSet.add(n)
-                    n.selected = true;
-                    n.dirty = true;
-                }
-            })
-            activeGroup.selected = true;
-        } else {
-
-            clearSelection();
-            exitActiveGroup();
-            activeGroups.forEach(function(g) {
-                if (!g.g) {
-                    selectGroup(g, true);
-                    if (!g.selected) {
-                        g.selected = true;
-                        g.dirty = true;
-                    }
-                } else {
-                    g.selected = false;
+        clearSelection();
+        activeGroups.forEach(function(g) {
+            if (!g.g) {
+                selectGroup(g, true);
+                if (!g.selected) {
+                    g.selected = true;
                     g.dirty = true;
                 }
-            })
+            } else {
+                g.selected = false;
+                g.dirty = true;
+            }
+        })
 
-            activeNodes.forEach(function(n) {
-                if (mouse_mode === RED.state.SELECTING_NODE) {
-                    if (selectNodesOptions.filter && !selectNodesOptions.filter(n)) {
-                        return;
-                    }
+        activeNodes.forEach(function(n) {
+            if (mouse_mode === RED.state.SELECTING_NODE) {
+                if (selectNodesOptions.filter && !selectNodesOptions.filter(n)) {
+                    return;
                 }
-                if (!n.g && !n.selected) {
+            }
+            if (!n.g && !n.selected) {
+                n.selected = true;
+                n.dirty = true;
+                movingSet.add(n);
+            }
+        });
+
+        activeJunctions.forEach(function(n) {
+            if (!n.selected) {
+                n.selected = true;
+                n.dirty = true;
+                movingSet.add(n);
+            }
+        })
+
+        if (mouse_mode !== RED.state.SELECTING_NODE && activeSubflow) {
+            activeSubflow.in.forEach(function(n) {
+                if (!n.selected) {
                     n.selected = true;
                     n.dirty = true;
                     movingSet.add(n);
                 }
             });
-
-            activeJunctions.forEach(function(n) {
+            activeSubflow.out.forEach(function(n) {
                 if (!n.selected) {
                     n.selected = true;
                     n.dirty = true;
                     movingSet.add(n);
                 }
-            })
-
-            if (mouse_mode !== RED.state.SELECTING_NODE && activeSubflow) {
-                activeSubflow.in.forEach(function(n) {
-                    if (!n.selected) {
-                        n.selected = true;
-                        n.dirty = true;
-                        movingSet.add(n);
-                    }
-                });
-                activeSubflow.out.forEach(function(n) {
-                    if (!n.selected) {
-                        n.selected = true;
-                        n.dirty = true;
-                        movingSet.add(n);
-                    }
-                });
-                if (activeSubflow.status) {
-                    if (!activeSubflow.status.selected) {
-                        activeSubflow.status.selected = true;
-                        activeSubflow.status.dirty = true;
-                        movingSet.add(activeSubflow.status);
-                    }
+            });
+            if (activeSubflow.status) {
+                if (!activeSubflow.status.selected) {
+                    activeSubflow.status.selected = true;
+                    activeSubflow.status.dirty = true;
+                    movingSet.add(activeSubflow.status);
                 }
             }
         }
@@ -22766,11 +22833,6 @@ RED.view = (function() {
         }
         movingSet.clear();
         selectedLinks.clear();
-        if (activeGroup) {
-            activeGroup.active = false
-            activeGroup.dirty = true;
-            activeGroup = null;
-        }
         activeGroups.forEach(function(g) {
             g.selected = false;
             g.dirty = true;
@@ -22893,7 +22955,7 @@ RED.view = (function() {
     }
 
     function editSelection() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (movingSet.length() > 0) {
             var node = movingSet.get(0).n;
             if (node.type === "subflow") {
@@ -23227,7 +23289,7 @@ RED.view = (function() {
 
 
     function detachSelectedNodes() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
             const {newLinks, removedLinks} = RED.nodes.detachNodes(selection.nodes);
@@ -23330,6 +23392,7 @@ RED.view = (function() {
         mousedown_port_type = null;
         activeSpliceLink = null;
         spliceActive = false;
+        groupAddActive = false;
         if (activeHoverGroup) {
             activeHoverGroup.hovered = false;
             activeHoverGroup = null;
@@ -23532,8 +23595,25 @@ RED.view = (function() {
                             (drag_line.portType === PORT_TYPE_INPUT && mouseup_node.type === "subflow" && (mouseup_node.direction === "status" || mouseup_node.direction === "out")) ||
                             (drag_line.portType === PORT_TYPE_OUTPUT && mouseup_node.type === "subflow" && mouseup_node.direction === "in")
                         )) {
+                            let hasJunctionLoop = false
+                            if (link.source.type === 'junction' && link.target.type === 'junction') {
+                                // This is joining two junctions together. We want to avoid creating a loop
+                                // of pure junction nodes as there is no way to break out of it.
+
+                                const visited = new Set()
+                                let toVisit = [link.target]
+                                while (toVisit.length > 0) {
+                                    const next = toVisit.shift()
+                                    if (next === link.source) {
+                                        hasJunctionLoop = true
+                                        break
+                                    }
+                                    visited.add(next)
+                                    toVisit = toVisit.concat(RED.nodes.getDownstreamNodes(next).filter(n => n.type === 'junction' && !visited.has(n)))
+                                }
+                            }
                             var existingLink = RED.nodes.filterLinks({source:src,target:dst,sourcePort: src_port}).length !== 0;
-                            if (!existingLink) {
+                            if (!hasJunctionLoop && !existingLink) {
                                 RED.nodes.addLink(link);
                                 addedLinks.push(link);
                             }
@@ -23651,7 +23731,7 @@ RED.view = (function() {
                 console.log("Definition error: "+node.type+"."+((portType === PORT_TYPE_INPUT)?"inputLabels":"outputLabels"),err);
                 result = null;
             }
-        } else if ($.isArray(portLabels)) {
+        } else if (Array.isArray(portLabels)) {
             result = portLabels[portIndex];
         }
         return result;
@@ -23809,7 +23889,7 @@ RED.view = (function() {
         }
         if (dblClickPrimed && mousedown_node == d && clickElapsed > 0 && clickElapsed < dblClickInterval) {
             mouse_mode = RED.state.DEFAULT;
-            if (RED.workspaces.isActiveLocked()) {
+            if (RED.workspaces.isLocked()) {
                 clickElapsed = 0;
                 d3.event.stopPropagation();
                 return
@@ -23836,7 +23916,6 @@ RED.view = (function() {
                 clearSelection();
 
                 selectGroup(RED.nodes.group(d.g), false);
-                enterActiveGroup(RED.nodes.group(d.g))
 
                 mousedown_node.selected = true;
                 movingSet.add(mousedown_node);
@@ -23889,57 +23968,25 @@ RED.view = (function() {
         //RED.touch.radialMenu.show(d3.select(this),pos);
         if (mouse_mode == RED.state.IMPORT_DRAGGING || mouse_mode == RED.state.DETACHED_DRAGGING) {
             var historyEvent = RED.history.peek();
-            if (activeSpliceLink) {
-                // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp
-                var spliceLink = d3.select(activeSpliceLink).data()[0];
-                RED.nodes.removeLink(spliceLink);
-                var link1 = {
-                    source:spliceLink.source,
-                    sourcePort:spliceLink.sourcePort,
-                    target: movingSet.get(0).n
-                };
-                var link2 = {
-                    source:movingSet.get(0).n,
-                    sourcePort:0,
-                    target: spliceLink.target
-                };
-                RED.nodes.addLink(link1);
-                RED.nodes.addLink(link2);
+             // Check to see if we're dropping into a group
+             const {
+                addedToGroup,
+                removedFromGroup,
+                groupMoveEvent,
+                rehomedNodes
+            } = addMovingSetToGroup()
 
-                historyEvent.links = [link1,link2];
-                historyEvent.removedLinks = [spliceLink];
+            if (activeSpliceLink) {
+                var linkToSplice = d3.select(activeSpliceLink).data()[0];
+                spliceLink(linkToSplice, movingSet.get(0).n, historyEvent)
                 updateActiveNodes();
             }
-
-            var moveEvent = null;
-            if (activeHoverGroup) {
-                var oldX = activeHoverGroup.x; 
-                var oldY = activeHoverGroup.y; 
-                for (var j=0;j<movingSet.length();j++) {
-                    var n = movingSet.get(j);
-                    RED.group.addToGroup(activeHoverGroup,n.n);
-                }
-                if ((activeHoverGroup.x !== oldX) ||
-                    (activeHoverGroup.y !== oldY)) {
-                    moveEvent = {
-                        t: "move",
-                        nodes: [{n: activeHoverGroup,
-                                 ox: oldX, oy: oldY,
-                                 dx: activeHoverGroup.x -oldX,
-                                 dy: activeHoverGroup.y -oldY}],
-                        dirty: true
-                    };
-                }
-                historyEvent.addedToGroup = activeHoverGroup;
-
-                activeHoverGroup.hovered = false;
-                enterActiveGroup(activeHoverGroup)
-                // TODO: check back whether this should add to moving_set
-                activeGroup.selected = true;
-                activeHoverGroup = null;
-            }
             if (mouse_mode == RED.state.DETACHED_DRAGGING) {
-                var ns = [];
+                // Create two lists of nodes:
+                //  - nodes that have moved without changing group
+                //  - nodes that have moved AND changed group
+                const ns = [];
+                const rehomedNodeList = [];
                 for (var j=0;j<movingSet.length();j++) {
                     var n = movingSet.get(j);
                     if (n.ox !== n.n.x || n.oy !== n.n.y) {
@@ -23948,14 +23995,20 @@ RED.view = (function() {
                         n.n.moved = true;
                     }
                 }
-                var event = {t:"multi",events:[historyEvent,{t:"move",nodes:ns}],dirty: historyEvent.dirty};
-                if (moveEvent) {
-                    event.events.push(moveEvent);
+                var event = {
+                    t: "multi",
+                    events: [
+                        historyEvent,
+                        { t: "move", nodes: ns }
+                    ],
+                    dirty: historyEvent.dirty
+                };
+                if (groupMoveEvent) {
+                    event.events.push(groupMoveEvent);
                 }
                 RED.history.replace(event)
-            }
-            else if(moveEvent) {
-                var event = {t:"multi", events:[historyEvent, moveEvent], dirty: true};
+            } else if (groupMoveEvent) {
+                var event = { t:"multi", events: [historyEvent, groupMoveEvent], dirty: true};
                 RED.history.replace(event);
             }
 
@@ -24008,126 +24061,11 @@ RED.view = (function() {
             clickElapsed < dblClickInterval &&
             d.type !== 'junction'
         lastClickNode = mousedown_node;
-
-        if (!d.selected && d.g /*&& !RED.nodes.group(d.g).selected*/) {
-            var nodeGroup = RED.nodes.group(d.g);
-
-            if (nodeGroup !== activeGroup && (d3.event.ctrlKey || d3.event.metaKey)) {
-                if (activeGroup && nodeGroup.g === activeGroup.id) {
-                    // Clicked on a node in a non-active group, inside the activeGroup, with ctrl pressed
-                    // - add/remove the group from the current selection
-                    groupNodeSelectPrimed = true;
-                     if (nodeGroup.selected) {
-                         deselectGroup(nodeGroup);
-                     } else {
-                         selectGroup(nodeGroup,true);
-                     }
-                } else {
-                    // Clicked on a node in a non-active group with ctrl pressed
-                    //  - exit active group
-                    //  - toggle the select state of the group
-                    exitActiveGroup();
-                    groupNodeSelectPrimed = true;
-                    if (nodeGroup.selected) {
-                        deselectGroup(nodeGroup);
-                    } else {
-                        selectGroup(nodeGroup,true);
-                    }
-                }
-            } else if (nodeGroup === activeGroup ) {
-                if (d3.event.shiftKey) {
-                    if (!d3.event.ctrlKey && !d3.event.metaKey) {
-                        var ag = activeGroup;
-                        clearSelection();
-                        enterActiveGroup(ag);
-                        activeGroup.selected = true;
-                    }
-                    var cnodes = RED.nodes.getAllFlowNodes(mousedown_node);
-                    for (var n=0;n<cnodes.length;n++) {
-                        if (!cnodes[n].selected) {
-                            cnodes[n].selected = true;
-                            cnodes[n].dirty = true;
-                            movingSet.add(cnodes[n]);
-                        }
-                    }
-                } else {
-                    // Clicked on a node in the active group
-                    if (!d3.event.ctrlKey && !d3.event.metaKey) {
-                        // Ctrl not pressed so clear selection
-                        var ag = activeGroup;
-                        clearSelection();
-                        deselectGroup(nodeGroup);
-                        selectGroup(nodeGroup,false,false);
-                        if (ag) {
-                            enterActiveGroup(ag);
-                            activeGroup.selected = true;
-                        }
-                    }
-
-                    // Select this node
-                    mousedown_node.selected = true;
-                    movingSet.add(mousedown_node);
-                }
-            } else {
-                // Clicked on a node in a group
-                //  - if this group is not selected, clear current selection
-                //    and select this group
-                //  - if this group is not the active group, exit the active group
-                //    and select the group
-                //  - if this group is the active group, keep it active and
-                //    change node selection
-
-                // Set groupNodeSelectPrimed to true as this is a (de)select of the
-                // group and NOT meant to trigger going into the group - see nodeMouseUp
-                groupNodeSelectPrimed = !nodeGroup.selected;
-                var ag = activeGroup;
-                if (!nodeGroup.selected) {
-                    clearSelection();
-                }
-                if (ag) {
-                    if (ag !== nodeGroup && ag.id !== nodeGroup.g) {
-                        ag.active = false;
-                        ag.dirty = true;
-                    } else {
-                        activeGroup = ag;
-                        activeGroup.active = true;
-                    }
-                } else {
-                    dblClickPrimed = false;
-                }
-                selectGroup(nodeGroup, !(activeGroup && activeGroup === nodeGroup), !!groupNodeSelectPrimed);
-                if (activeGroup && activeGroup === nodeGroup) {
-                    mousedown_node.selected = true;
-                    movingSet.add(mousedown_node);
-                }
-            }
-
-
-            if (d3.event.button != 2) {
-                var mouse = d3.touches(this)[0]||d3.mouse(this);
-                mouse[0] += d.x-d.w/2;
-                mouse[1] += d.y-d.h/2;
-                prepareDrag(mouse);
-            }
-        } else if (d.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
+     
+        if (d.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
             mousedown_node.selected = false;
             movingSet.remove(mousedown_node);
         } else {
-
-            // if (d.g && !RED.nodes.group(d.g).selected) {
-            //     selectGroup(RED.nodes.group(d.g), false);
-            // }
-
-
-            // if (!d.selected && d.g) {
-            //     if (!RED.nodes.group(d.g).selected) {// && !RED.nodes.group(d.g).selected) {
-            //         clearSelection();
-            //         selectGroup(RED.nodes.group(d.g));
-            //         d.selected = true;
-            //         console.log(d.id,"Setting selected")
-            //         d.gSelected = true;
-            //     }
-            // } else
             if (d3.event.shiftKey) {
                 if (!(d3.event.ctrlKey||d3.event.metaKey)) {
                     clearSelection();
@@ -24153,8 +24091,6 @@ RED.view = (function() {
             } else if (!d.selected) {
                 if (!d3.event.ctrlKey && !d3.event.metaKey) {
                     clearSelection();
-                } else {
-                    exitActiveGroup();
                 }
                 mousedown_node.selected = true;
                 movingSet.add(mousedown_node);
@@ -24353,7 +24289,7 @@ RED.view = (function() {
         if (RED.view.DEBUG) {
             console.warn("groupMouseUp", { mouse_mode, event: d3.event });
         }
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (dblClickPrimed && mousedown_group == g && clickElapsed > 0 && clickElapsed < dblClickInterval) {
             mouse_mode = RED.state.DEFAULT;
             RED.editor.editGroup(g);
@@ -24379,7 +24315,6 @@ RED.view = (function() {
         }
 
         if (mouse_mode == RED.state.QUICK_JOINING) {
-            d3.event.stopPropagation();
             return;
         } else if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
@@ -24401,34 +24336,16 @@ RED.view = (function() {
         lastClickNode = g;
 
         if (g.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
-            if (g === activeGroup) {
-                exitActiveGroup();
-            }
             deselectGroup(g);
             d3.event.stopPropagation();
         } else {
             if (!g.selected) {
                 if (!d3.event.ctrlKey && !d3.event.metaKey) {
-                    var ag = activeGroup;
                     clearSelection();
-                    if (ag && g.g === ag.id) {
-                        enterActiveGroup(ag);
-                        activeGroup.selected = true;
-                    }
-                }
-                if (activeGroup) {
-                    if (!RED.group.contains(activeGroup,g)) {
-                        // Clicked on a group that is outside the activeGroup
-                        exitActiveGroup();
-                    } else {
-                    }
                 }
                 selectGroup(g,true);//!wasSelected);
-            } else if (activeGroup && g.g !== activeGroup.id){
-                exitActiveGroup();
             }
 
-
             if (d3.event.button != 2) {
                 var d = g.nodes[0];
                 prepareDrag(mouse);
@@ -24456,51 +24373,42 @@ RED.view = (function() {
             allNodes.forEach(function(n) {
                 if (!currentSet.has(n)) {
                     movingSet.add(n)
-                    // n.selected = true;
                 }
                 n.dirty = true;
             })
         }
+        selectedLinks.clearUnselected()
     }
-    function enterActiveGroup(group) {
-        if (activeGroup) {
-            exitActiveGroup();
-        }
-        group.active = true;
-        group.dirty = true;
-        activeGroup = group;
-        movingSet.remove(group);
-    }
-    function exitActiveGroup() {
-        if (activeGroup) {
-            activeGroup.active = false;
-            activeGroup.dirty = true;
-            deselectGroup(activeGroup);
-            selectGroup(activeGroup,true);
-            activeGroup = null;
-        }
-    }
+
     function deselectGroup(g) {
         if (g.selected) {
             g.selected = false;
             g.dirty = true;
         }
-        var nodeSet = new Set(g.nodes);
+        const allNodes = RED.group.getNodes(g,true);
+        const nodeSet = new Set(allNodes);
         nodeSet.add(g);
-        for (var i = movingSet.length()-1; i >= 0; i -= 1) {
-            var msn = movingSet.get(i);
+        for (let i = movingSet.length()-1; i >= 0; i -= 1) {
+            const msn = movingSet.get(i);
             if (nodeSet.has(msn.n) || msn.n === g) {
                 msn.n.selected = false;
                 msn.n.dirty = true;
                 movingSet.remove(msn.n,i)
             }
         }
+        selectedLinks.clearUnselected()
     }
-    function getGroupAt(x,y) {
+    function getGroupAt(x, y, ignoreSelected) {
         // x,y expected to be in node-co-ordinate space
         var candidateGroups = {};
         for (var i=0;i<activeGroups.length;i++) {
             var g = activeGroups[i];
+            if (ignoreSelected && movingSet.has(g)) {
+                // When ignoreSelected is set, do not match any group in the
+                // current movingSet. This is used when dragging a selection
+                // to find a candidate group for adding the selection to
+                continue
+            }
             if (x >= g.x && x <= g.x + g.w && y >= g.y && y <= g.y + g.h) {
                 candidateGroups[g.id] = g;
             }
@@ -24577,7 +24485,7 @@ RED.view = (function() {
     function showTouchMenu(obj,pos) {
         var mdn = mousedown_node;
         var options = [];
-        const isActiveLocked = RED.workspaces.isActiveLocked()
+        const isActiveLocked = RED.workspaces.isLocked()
         options.push({name:"delete",disabled:(isActiveLocked || movingSet.length()===0 && selectedLinks.length() === 0),onselect:function() {deleteSelection();}});
         options.push({name:"cut",disabled:(isActiveLocked || movingSet.length()===0),onselect:function() {copySelection(true);deleteSelection();}});
         options.push({name:"copy",disabled:(isActiveLocked || movingSet.length()===0),onselect:function() {copySelection();}});
@@ -25117,6 +25025,7 @@ RED.view = (function() {
                     nodesReordered = true;
                     delete d._reordered;
                 }
+
                 if (d.dirty) {
                     var self = this;
                     var thisNode = d3.select(this);
@@ -25770,23 +25679,30 @@ RED.view = (function() {
                 g.attr("id",d.id);
 
                 var groupBorderRadius = 4;
-
+                var groupOutlineBorderRadius = 6
                 var selectGroup = groupSelectLayer.append('g').attr("class", "red-ui-flow-group").attr("id","group_select_"+d.id);
-                selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
+                const groupBackground = selectGroup.append('rect')
+                    .classed("red-ui-flow-group-outline-select",true)
                     .classed("red-ui-flow-group-outline-select-background",true)
-                    .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
-                    .attr("x",-4)
-                    .attr("y",-4);
-
-
-                selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
-                    .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
-                    .attr("x",-4)
-                    .attr("y",-4)
-                selectGroup.on("mousedown", function() {groupMouseDown.call(g[0][0],d)});
-                selectGroup.on("mouseup", function() {groupMouseUp.call(g[0][0],d)});
-                selectGroup.on("touchstart", function() {groupMouseDown.call(g[0][0],d); d3.event.preventDefault();});
-                selectGroup.on("touchend", function() {groupMouseUp.call(g[0][0],d); d3.event.preventDefault();});
+                    .attr('rx',groupOutlineBorderRadius).attr('ry',groupOutlineBorderRadius)
+                    .attr("x",-3)
+                    .attr("y",-3);
+                selectGroup.append('rect')
+                    .classed("red-ui-flow-group-outline-select",true)
+                    .classed("red-ui-flow-group-outline-select-outline",true)
+                    .attr('rx',groupOutlineBorderRadius).attr('ry',groupOutlineBorderRadius)
+                    .attr("x",-3)
+                    .attr("y",-3)
+                selectGroup.append('rect')
+                    .classed("red-ui-flow-group-outline-select",true)
+                    .classed("red-ui-flow-group-outline-select-line",true)
+                    .attr('rx',groupOutlineBorderRadius).attr('ry',groupOutlineBorderRadius)
+                    .attr("x",-3)
+                    .attr("y",-3)
+                groupBackground.on("mousedown", function() {groupMouseDown.call(g[0][0],d)});
+                groupBackground.on("mouseup", function() {groupMouseUp.call(g[0][0],d)});
+                groupBackground.on("touchstart", function() {groupMouseDown.call(g[0][0],d); d3.event.preventDefault();});
+                groupBackground.on("touchend", function() {groupMouseUp.call(g[0][0],d); d3.event.preventDefault();});
 
                 g.append('rect').classed("red-ui-flow-group-outline",true).attr('rx',0.5).attr('ry',0.5);
 
@@ -25804,11 +25720,7 @@ RED.view = (function() {
             });
             if (addedGroups) {
                 group.sort(function(a,b) {
-                    if (a._root === b._root) {
-                        return a._depth - b._depth;
-                    } else {
-                        return a._index - b._index;
-                    }
+                    return a._order - b._order
                 })
             }
             group[0].reverse();
@@ -25833,6 +25745,11 @@ RED.view = (function() {
                             var margin = 26;
                             d.nodes.forEach(function(n) {
                                 groupOpCount++
+                                if (n._detachFromGroup) {
+                                    // Do not include this node when recalulating
+                                    // the group dimensions
+                                    return
+                                }
                                 if (n.type !== "group") {
                                     minX = Math.min(minX,n.x-n.w/2-margin-((n._def.button && n._def.align!=="right")?20:0));
                                     minY = Math.min(minY,n.y-n.h/2-margin);
@@ -25845,11 +25762,12 @@ RED.view = (function() {
                                     maxY = Math.max(maxY,n.y+n.h+margin)
                                 }
                             });
-
-                            d.x = minX;
-                            d.y = minY;
-                            d.w = maxX - minX;
-                            d.h = maxY - minY;
+                            if (minX !== Number.POSITIVE_INFINITY && minY !== Number.POSITIVE_INFINITY) {
+                                d.x = minX;
+                                d.y = minY;
+                                d.w = maxX - minX;
+                                d.h = maxY - minY;
+                            }
                             recalculateLabelOffsets = true;
                             // if set explicitly to false, this group has just been
                             // imported so needed this initial resize calculation.
@@ -25906,16 +25824,25 @@ RED.view = (function() {
                     } else {
                         selectGroup.classList.remove("red-ui-flow-group-hovered")
                     }
+                    if (d.selected) {
+                        selectGroup.classList.add("red-ui-flow-group-selected")
+                    } else {
+                        selectGroup.classList.remove("red-ui-flow-group-selected")
+                    }
                     var selectGroupRect = selectGroup.children[0];
-                    selectGroupRect.setAttribute("width",d.w+8)
-                    selectGroupRect.setAttribute("height",d.h+8)
-                    selectGroupRect.style.strokeOpacity = (d.active || d.selected || d.highlighted)?0.8:0;
-                    selectGroupRect.style.strokeDasharray = (d.active)?"10 4":"";
+                    // Background
+                    selectGroupRect.setAttribute("width",d.w+6)
+                    selectGroupRect.setAttribute("height",d.h+6)
+                    // Outline
                     selectGroupRect = selectGroup.children[1];
-                    selectGroupRect.setAttribute("width",d.w+8)
-                    selectGroupRect.setAttribute("height",d.h+8)
-                    selectGroupRect.style.strokeOpacity = (d.active || d.selected || d.highlighted)?0.8:0;
-                    selectGroupRect.style.strokeDasharray = (d.active)?"10 4":"";
+                    selectGroupRect.setAttribute("width",d.w+6)
+                    selectGroupRect.setAttribute("height",d.h+6)
+                    selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
+                    // Line
+                    selectGroupRect = selectGroup.children[2];
+                    selectGroupRect.setAttribute("width",d.w+6)
+                    selectGroupRect.setAttribute("height",d.h+6)
+                    selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
 
                     if (d.highlighted) {
                         selectGroup.classList.add("red-ui-flow-node-highlighted");
@@ -26043,7 +25970,7 @@ RED.view = (function() {
         if (mouse_mode === RED.state.SELECTING_NODE) {
             return;
         }
-
+        const wasDirty = RED.nodes.dirty()
         var nodesToImport;
         if (typeof newNodesObj === "string") {
             if (newNodesObj === "") {
@@ -26060,7 +25987,7 @@ RED.view = (function() {
             nodesToImport = newNodesObj;
         }
 
-        if (!$.isArray(nodesToImport)) {
+        if (!Array.isArray(nodesToImport)) {
             nodesToImport = [nodesToImport];
         }
         if (options.generateDefaultNames) {
@@ -26093,7 +26020,12 @@ RED.view = (function() {
                     return (n.type === "global-config");
                 });
             }
-            var result = RED.nodes.import(filteredNodesToImport,{generateIds:options.generateIds, addFlow: addNewFlow, importMap: options.importMap});
+            var result = RED.nodes.import(filteredNodesToImport,{
+                generateIds: options.generateIds,
+                addFlow: addNewFlow,
+                importMap: options.importMap,
+                markChanged: true
+            });
             if (result) {
                 var new_nodes = result.nodes;
                 var new_links = result.links;
@@ -26109,7 +26041,7 @@ RED.view = (function() {
                 var new_ms = new_nodes.filter(function(n) { return n.hasOwnProperty("x") && n.hasOwnProperty("y") && n.z == RED.workspaces.active() });
                 new_ms = new_ms.concat(new_groups.filter(function(g) { return g.z === RED.workspaces.active()}))
                 new_ms = new_ms.concat(new_junctions.filter(function(j) { return j.z === RED.workspaces.active()}))
-                var new_node_ids = new_nodes.map(function(n){ n.changed = true; return n.id; });
+                var new_node_ids = new_nodes.map(function(n){ return n.id; });
 
                 clearSelection();
                 movingSet.clear();
@@ -26175,28 +26107,19 @@ RED.view = (function() {
                     }
                     if (!touchImport) {
                         mouse_mode = RED.state.IMPORT_DRAGGING;
-                        spliceActive = false;
-                        if (movingSet.length() === 1) {
-                            node = movingSet.get(0);
-                            spliceActive = node.n.hasOwnProperty("_def") &&
-                                           ((node.n.hasOwnProperty("inputs") && node.n.inputs > 0) || (!node.n.hasOwnProperty("inputs") && node.n._def.inputs > 0)) &&
-                                           ((node.n.hasOwnProperty("outputs") && node.n.outputs > 0) || (!node.n.hasOwnProperty("outputs") && node.n._def.outputs > 0))
-
-
-                        }
+                        startSelectionMove()  
                     }
-
                 }
 
                 var historyEvent = {
-                    t:"add",
-                    nodes:new_node_ids,
-                    links:new_links,
-                    groups:new_groups,
+                    t: "add",
+                    nodes: new_node_ids,
+                    links: new_links,
+                    groups: new_groups,
                     junctions: new_junctions,
-                    workspaces:new_workspaces,
-                    subflows:new_subflows,
-                    dirty:RED.nodes.dirty()
+                    workspaces: new_workspaces,
+                    subflows: new_subflows,
+                    dirty: wasDirty
                 };
                 if (movingSet.length() === 0) {
                     RED.nodes.dirty(true);
@@ -26205,7 +26128,7 @@ RED.view = (function() {
                     var subflowRefresh = RED.subflow.refresh(true);
                     if (subflowRefresh) {
                         historyEvent.subflow = {
-                            id:activeSubflow.id,
+                            id: activeSubflow.id,
                             changed: activeSubflowChanged,
                             instances: subflowRefresh.instances
                         }
@@ -26323,6 +26246,59 @@ RED.view = (function() {
         }
     }
 
+    function startSelectionMove() {
+        spliceActive = false;
+        if (movingSet.length() === 1) {
+            const node = movingSet.get(0);
+            spliceActive = node.n.hasOwnProperty("_def") &&
+                           ((node.n.hasOwnProperty("inputs") && node.n.inputs > 0) || (!node.n.hasOwnProperty("inputs") && node.n._def.inputs > 0)) &&
+                           ((node.n.hasOwnProperty("outputs") && node.n.outputs > 0) || (!node.n.hasOwnProperty("outputs") && node.n._def.outputs > 0)) &&
+                           RED.nodes.filterLinks({ source: node.n }).length === 0 &&
+                           RED.nodes.filterLinks({ target: node.n }).length === 0;
+        }
+        groupAddActive = false
+        groupAddParentGroup = null
+        if (movingSet.length() > 0 && activeGroups) {
+            // movingSet includes the selection AND any nodes inside selected groups
+            // So we cannot simply check the `g` of all nodes match.
+            // Instead, we have to:
+            // - note all groups in movingSet
+            // - note all .g values referenced in movingSet
+            // - then check for g values for groups not in movingSet
+            let isValidSelection = true
+            let hasNullGroup = false
+            const selectedGroups = []
+            const referencedGroups = new Set()
+            movingSet.forEach(n => {
+                if (n.n.type === 'subflow') {
+                    isValidSelection = false
+                }
+                if (n.n.type === 'group') {
+                    selectedGroups.push(n.n.id)
+                }
+                if (n.n.g) {
+                    referencedGroups.add(n.n.g)
+                } else {
+                    hasNullGroup = true
+                }
+            })
+            if (isValidSelection) {
+                selectedGroups.forEach(g => referencedGroups.delete(g))
+                // console.log('selectedGroups', selectedGroups)
+                // console.log('referencedGroups',referencedGroups)
+                // console.log('hasNullGroup', hasNullGroup)
+                if (referencedGroups.size === 0) {
+                    groupAddActive = true
+                } else if (!hasNullGroup && referencedGroups.size === 1) {
+                    groupAddParentGroup = referencedGroups.values().next().value
+                    groupAddActive = true
+                }
+            }
+            // console.log('groupAddActive', groupAddActive)
+            // console.log('groupAddParentGroup', groupAddParentGroup)
+        }
+    }
+
     function toggleShowGrid(state) {
         if (state) {
             gridLayer.style("visibility","visible");
@@ -26402,24 +26378,18 @@ RED.view = (function() {
         if (movingSet.length() > 0) {
             movingSet.forEach(function(n) {
                 if (n.n.type !== 'group') {
-                    allNodes.add(n.n);
+                allNodes.add(n.n);
                 }
             });
         }
-        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
-            } else {
-                selectedGroups.forEach(function(g) {
-                    var groupNodes = RED.group.getNodes(g,true);
-                    groupNodes.forEach(function(n) {
-                        allNodes.delete(n);
-                    });
-                    allNodes.add(g);
-                });
-            }
-        }
+        var selectedGroups = activeGroups.filter(function(g) { return g.selected });
+        selectedGroups.forEach(function(g) {
+            var groupNodes = RED.group.getNodes(g,true);
+            groupNodes.forEach(function(n) {
+                allNodes.delete(n);
+            });
+            allNodes.add(g);
+        });
         if (allNodes.size > 0) {
             selection.nodes = Array.from(allNodes);
         }
@@ -26664,7 +26634,7 @@ RED.view = (function() {
             return result;
         },
         getGroupAtPoint: getGroupAt,
-        getActiveGroup: function() { return activeGroup },
+        getActiveGroup: function() { return null },
         reveal: function(id,triggerHighlight) {
             if (RED.nodes.workspace(id) || RED.nodes.subflow(id)) {
                 RED.workspaces.show(id, null, null, true);
@@ -26983,9 +26953,9 @@ RED.view = (function() {
 
  RED.view.navigator = (function() {
 
-     var nav_scale = 25;
-     var nav_width = 5000/nav_scale;
-     var nav_height = 5000/nav_scale;
+     var nav_scale = 50;
+     var nav_width = 8000/nav_scale;
+     var nav_height = 8000/nav_scale;
 
      var navContainer;
      var navBox;
@@ -27163,7 +27133,7 @@ RED.view.tools = (function() {
     }
 
     function alignToGrid() {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -27214,7 +27184,7 @@ RED.view.tools = (function() {
     }
 
     function moveSelection(dx,dy) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         if (moving_set === null) {
@@ -27283,7 +27253,7 @@ RED.view.tools = (function() {
     }
 
     function setSelectedNodeLabelState(labelShown) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -27572,9 +27542,9 @@ RED.view.tools = (function() {
     }
 
     function alignSelectionToEdge(direction) {
-        // if (RED.workspaces.isActiveLocked()) {
-        //     return
-        // }
+        if (RED.workspaces.isLocked()) {
+            return;
+        }
         var selection = RED.view.selection();
 
         if (selection.nodes && selection.nodes.length > 1) {
@@ -27676,7 +27646,7 @@ RED.view.tools = (function() {
     }
 
     function distributeSelection(direction) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -27837,7 +27807,7 @@ RED.view.tools = (function() {
     }
 
     function reorderSelection(dir) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -27845,9 +27815,8 @@ RED.view.tools = (function() {
             var nodesToMove = [];
             selection.nodes.forEach(function(n) {
                 if (n.type === "group") {
-                    nodesToMove = nodesToMove.concat(RED.group.getNodes(n, true).filter(function(n) {
-                        return n.type !== "group";
-                    }))
+                    nodesToMove.push(n)
+                    nodesToMove = nodesToMove.concat(RED.group.getNodes(n, true))
                 } else if (n.type !== "subflow"){
                     nodesToMove.push(n);
                 }
@@ -27876,7 +27845,7 @@ RED.view.tools = (function() {
     }
 
     function wireSeriesOfNodes() {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -27919,7 +27888,7 @@ RED.view.tools = (function() {
     }
 
     function wireNodeToMultiple() {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -27964,12 +27933,70 @@ RED.view.tools = (function() {
         }
     }
 
+    function wireMultipleToNode() {
+        if (RED.workspaces.isLocked()) {
+            return
+        }
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            if (selection.nodes.length > 1) {
+                var targetNode = selection.nodes[selection.nodes.length - 1];
+                if (targetNode.inputs === 0) {
+                    return;
+                }
+                var i = 0;
+                var newLinks = [];
+                for (i = 0; i < selection.nodes.length - 1; i++) {
+                    var sourceNode = selection.nodes[i];
+                    if (sourceNode.outputs > 0) {
+                        
+                        // Wire the first output to the target that has no link to the target yet.
+                        // This allows for connecting all combinations of inputs/outputs. 
+                        // The user may then delete links quickly that aren't needed.
+                        var sourceConnectedOutports = RED.nodes.filterLinks({
+                            source: sourceNode,
+                            target: targetNode
+                        });
+
+                        // Get outport indices that have no link yet
+                        var sourceOutportIndices = Array.from({ length: sourceNode.outputs }, (_, i) => i);
+                        var sourceConnectedOutportIndices = sourceConnectedOutports.map( x => x.sourcePort );
+                        var sourceFreeOutportIndices = sourceOutportIndices.filter(x => !sourceConnectedOutportIndices.includes(x));
+
+                        // Does an unconnected source port exist?
+                        if (sourceFreeOutportIndices.length == 0) {
+                            continue;
+                        }
+                        
+                        // Connect the first free outport to the target
+                        var newLink = {
+                            source: sourceNode,
+                            target: targetNode,
+                            sourcePort: sourceFreeOutportIndices[0]
+                        }
+                        RED.nodes.addLink(newLink);
+                        newLinks.push(newLink);
+                    }
+                }
+                if (newLinks.length > 0) {
+                    RED.history.push({
+                        t: 'add',
+                        links: newLinks,
+                        dirty: RED.nodes.dirty()
+                    })
+                    RED.nodes.dirty(true);
+                    RED.view.redraw(true);
+                }
+            }
+        }
+    }
+
     /**
      * Splits selected wires and re-joins them with link-out+link-in
      * @param {Object || Object[]} wires The wire(s) to split and replace with link-out, link-in nodes.
      */
     function splitWiresWithLinkNodes(wires) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link));
@@ -28140,7 +28167,7 @@ RED.view.tools = (function() {
      * @param {{ renameBlank: boolean, renameClash: boolean, generateHistory: boolean }} options Possible options are `renameBlank`, `renameClash` and `generateHistory`
      */
     function generateNodeNames(node, options) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         options = Object.assign({
@@ -28213,7 +28240,7 @@ RED.view.tools = (function() {
     }
 
     function addJunctionsToWires(wires) {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link));
@@ -28257,7 +28284,8 @@ RED.view.tools = (function() {
                 w: 0, h: 0,
                 outputs: 1,
                 inputs: 1,
-                dirty: true
+                dirty: true,
+                moved: true
             }
             links = links.filter(function(l) { return !removedLinks.has(l) })
             if (links.length === 0) {
@@ -28431,6 +28459,7 @@ RED.view.tools = (function() {
 
             RED.actions.add("core:wire-series-of-nodes", function() { wireSeriesOfNodes() })
             RED.actions.add("core:wire-node-to-multiple", function() { wireNodeToMultiple() })
+            RED.actions.add("core:wire-multiple-to-node", function() { wireMultipleToNode() })
 
             RED.actions.add("core:split-wire-with-link-nodes", function () { splitWiresWithLinkNodes() });
             RED.actions.add("core:split-wires-with-junctions", function () { addJunctionsToWires() });
@@ -30198,6 +30227,10 @@ RED.sidebar.info = (function() {
                     RED.workspaces.show(n.id, null, true);
                 }
             });
+            RED.popover.tooltip(toggleVisibleButton, function () {
+                var isHidden = !div.hasClass("red-ui-info-outline-item-hidden");
+                return RED._("sidebar.info." + (isHidden ? "hideFlow" : "showFlow"));
+            });
         }
         if (n.type !== 'subflow') {
             var toggleButton = $('<button type="button" class="red-ui-info-outline-item-control-disable red-ui-button red-ui-button-small"><i class="fa fa-circle-thin"></i><i class="fa fa-ban"></i></button>').appendTo(controls).on("click",function(evt) {
@@ -30696,6 +30729,9 @@ RED.sidebar.info = (function() {
                 objects[n.id].children = missingParents[n.id];
                 delete missingParents[n.id]
             }
+            if (objects[n.id].children.length === 0) {
+                objects[n.id].children.push(getEmptyItem(n.id));
+            }
         }
         var parent = n.g||n.z||"__global__";
 
@@ -31407,17 +31443,19 @@ RED.sidebar.config = (function() {
         } else {
             var currentType = "";
             nodes.forEach(function(node) {
-                var label = RED.utils.getNodeLabel(node,node.id);
+                var labelText = RED.utils.getNodeLabel(node,node.id);
                 if (node.type != currentType) {
                     $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
                     currentType = node.type;
                 }
-
+                if (node.changed) {
+                    labelText += "!!"
+                }
                 var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
                 nodeDiv.data('node',node.id);
-                var label = $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
+                var label = $('<div class="red-ui-palette-label"></div>').text(labelText).appendTo(nodeDiv);
                 if (node.d) {
                     nodeDiv.addClass("red-ui-palette-node-config-disabled");
                     $('<i class="fa fa-ban"></i>').prependTo(label);
@@ -34116,6 +34154,7 @@ RED.editor = (function() {
     function showEditDialog(node, defaultTab) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
+        if (node.z && RED.workspaces.isLocked(node.z)) { return }
         var editing_node = node;
         var removeInfoEditorOnClose = false;
         var skipInfoRefreshOnClose = false;
@@ -34301,6 +34340,13 @@ RED.editor = (function() {
 
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
 
+                var helpButton = $('<button type="button" class="red-ui-button"><i class="fa fa-book"></button>').on("click", function(evt) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    RED.sidebar.help.show(editing_node.type);
+                }).appendTo(trayFooterLeft);
+                RED.popover.tooltip(helpButton, RED._("sidebar.help.showHelp"));
+
                 $('<input id="node-input-node-disabled" type="checkbox">').prop("checked",!!node.d).appendTo(trayFooterLeft).toggleButton({
                     enabledIcon: "fa-circle-thin",
                     disabledIcon: "fa-ban",
@@ -34404,6 +34450,8 @@ RED.editor = (function() {
         var editing_config_node = RED.nodes.node(id);
         var activeEditPanes = [];
 
+        if (editing_config_node && editing_config_node.z && RED.workspaces.isLocked(editing_config_node.z)) { return }
+
         var configNodeScope = ""; // default to global
         var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
         if (activeSubflow) {
@@ -34446,6 +34494,13 @@ RED.editor = (function() {
 
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
 
+                var helpButton = $('<button type="button" class="red-ui-button"><i class="fa fa-book"></button>').on("click", function(evt) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    RED.sidebar.help.show(editing_config_node.type);
+                }).appendTo(trayFooterLeft);
+                RED.popover.tooltip(helpButton, RED._("sidebar.help.showHelp"));
+
                 $('<input id="node-config-input-node-disabled" type="checkbox">').prop("checked",!!editing_config_node.d).appendTo(trayFooterLeft).toggleButton({
                     enabledIcon: "fa-circle-thin",
                     disabledIcon: "fa-ban",
@@ -34950,6 +35005,7 @@ RED.editor = (function() {
     function showEditGroupDialog(group, defaultTab) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
+        if (group.z && RED.workspaces.isLocked(group.z)) { return }
         var editing_node = group;
         editStack.push(group);
         RED.view.state(RED.state.EDITING);
@@ -35178,9 +35234,9 @@ RED.editor = (function() {
                     workspace.locked = false;
                 }
                 $('<input id="node-input-locked" type="checkbox">').prop("checked",workspace.locked).appendTo(trayFooterRight).toggleButton({
-                    enabledLabel: 'Unlocked',
+                    enabledLabel: RED._("common.label.unlocked"),
                     enabledIcon: "fa-unlock-alt",
-                    disabledLabel: 'Locked',
+                    disabledLabel: RED._("common.label.locked"),
                     disabledIcon: "fa-lock",
                     invertState: true
                 })
@@ -37919,32 +37975,37 @@ RED.editor = (function() {
                         }
 
                         try {
-                            var result = expr.evaluate(legacyMode?{msg:parsedData}:parsedData);
-                            if (usesContext) {
-                                testResultEditor.setValue(RED._("expressionEditor.errors.context-unsupported"),-1);
-                                return;
-                            }
-                            if (usesEnv) {
-                                testResultEditor.setValue(RED._("expressionEditor.errors.env-unsupported"),-1);
-                                return;
-                            }
-                            if (usesMoment) {
-                                testResultEditor.setValue(RED._("expressionEditor.errors.moment-unsupported"),-1);
-                                return;
-                            }
-                            if (usesClone) {
-                                testResultEditor.setValue(RED._("expressionEditor.errors.clone-unsupported"),-1);
-                                return;
-                            }
-
-                            var formattedResult;
-                            if (result !== undefined) {
-                                formattedResult = JSON.stringify(result,null,4);
-                            } else {
-                                formattedResult = RED._("expressionEditor.noMatch");
-                            }
-                            testResultEditor.setValue(formattedResult,-1);
-                        } catch(err) {
+                            expr.evaluate(legacyMode?{msg:parsedData}:parsedData, (err, result) => {
+                                if (err) {
+                                    testResultEditor.setValue(RED._("expressionEditor.errors.eval",{message:err.message}),-1);
+                                } else {
+                                    if (usesContext) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.context-unsupported"),-1);
+                                        return;
+                                    }
+                                    if (usesEnv) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.env-unsupported"),-1);
+                                        return;
+                                    }
+                                    if (usesMoment) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.moment-unsupported"),-1);
+                                        return;
+                                    }
+                                    if (usesClone) {
+                                        testResultEditor.setValue(RED._("expressionEditor.errors.clone-unsupported"),-1);
+                                        return;
+                                    }
+        
+                                    var formattedResult;
+                                    if (result !== undefined) {
+                                        formattedResult = JSON.stringify(result,null,4);
+                                    } else {
+                                        formattedResult = RED._("expressionEditor.noMatch");
+                                    }
+                                    testResultEditor.setValue(formattedResult,-1);
+                                }
+                            });
+                        } catch(err) {                            
                             testResultEditor.setValue(RED._("expressionEditor.errors.eval",{message:err.message}),-1);
                         }
                     }
@@ -39511,18 +39572,21 @@ RED.editor.codeEditor.monaco = (function() {
     //TODO: get from externalModules.js  For now this is enough for feature parity with ACE (and then some).
     const knownModules = {
         "assert": {package: "node", module: "assert", path: "node/assert.d.ts" },
+        "assert/strict": {package: "node", module: "assert/strict", path: "node/assert/strict.d.ts" },
         "async_hooks": {package: "node", module: "async_hooks", path: "node/async_hooks.d.ts" },
         "buffer": {package: "node", module: "buffer", path: "node/buffer.d.ts" },
         "child_process": {package: "node", module: "child_process", path: "node/child_process.d.ts" },
         "cluster": {package: "node", module: "cluster", path: "node/cluster.d.ts" },
         "console": {package: "node", module: "console", path: "node/console.d.ts" },
-        "constants": {package: "node", module: "constants", path: "node/constants.d.ts" },
         "crypto": {package: "node", module: "crypto", path: "node/crypto.d.ts" },
         "dgram": {package: "node", module: "dgram", path: "node/dgram.d.ts" },
+        "diagnostics_channel.d": {package: "node", module: "diagnostics_channel", path: "node/diagnostics_channel.d.ts" },
         "dns": {package: "node", module: "dns", path: "node/dns.d.ts" },
+        "dns/promises": {package: "node", module: "dns/promises", path: "node/dns/promises.d.ts" },
         "domain": {package: "node", module: "domain", path: "node/domain.d.ts" },
         "events": {package: "node", module: "events", path: "node/events.d.ts" },
         "fs": {package: "node", module: "fs", path: "node/fs.d.ts" },
+        "fs/promises": {package: "node", module: "fs/promises", path: "node/fs/promises.d.ts" },
         "globals": {package: "node", module: "globals", path: "node/globals.d.ts" },
         "http": {package: "node", module: "http", path: "node/http.d.ts" },
         "http2": {package: "node", module: "http2", path: "node/http2.d.ts" },
@@ -39536,8 +39600,13 @@ RED.editor.codeEditor.monaco = (function() {
         "querystring": {package: "node", module: "querystring", path: "node/querystring.d.ts" },
         "readline": {package: "node", module: "readline", path: "node/readline.d.ts" },
         "stream": {package: "node", module: "stream", path: "node/stream.d.ts" },
+        "stream/consumers": {package: "node", module: "stream/consumers", path: "node/stream/consumers.d.ts" },
+        "stream/promises": {package: "node", module: "stream/promises", path: "node/stream/promises.d.ts" },
+        "stream/web": {package: "node", module: "stream/web", path: "node/stream/web.d.ts" },
         "string_decoder": {package: "node", module: "string_decoder", path: "node/string_decoder.d.ts" },
+        "test": {package: "node", module: "test", path: "node/test.d.ts" },
         "timers": {package: "node", module: "timers", path: "node/timers.d.ts" },
+        "timers/promises": {package: "node", module: "timers/promises", path: "node/timers/promises.d.ts" },
         "tls": {package: "node", module: "tls", path: "node/tls.d.ts" },
         "trace_events": {package: "node", module: "trace_events", path: "node/trace_events.d.ts" },
         "tty": {package: "node", module: "tty", path: "node/tty.d.ts" },
@@ -41866,7 +41935,7 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-import-text").on("keyup", validateImport);
         $("#red-ui-clipboard-dialog-import-text").on('paste',function() { setTimeout(validateImport,10)});
 
-        if (RED.workspaces.active() === 0 || RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.active() === 0 || RED.workspaces.isLocked()) {
             $("#red-ui-clipboard-dialog-import-opt-current").addClass('disabled').removeClass("selected");
             $("#red-ui-clipboard-dialog-import-opt-new").addClass("selected");
         } else {
@@ -42641,7 +42710,7 @@ RED.clipboard = (function() {
             RED.keyboard.add("#red-ui-drop-target", "escape" ,hideDropTarget);
 
             $('#red-ui-workspace-chart').on("dragenter",function(event) {
-                if (!RED.workspaces.isActiveLocked() && (
+                if (!RED.workspaces.isLocked() && (
                     $.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
                      $.inArray("Files",event.originalEvent.dataTransfer.types) != -1)) {
                     $("#red-ui-drop-target").css({display:'table'}).focus();
@@ -42651,7 +42720,7 @@ RED.clipboard = (function() {
             $('#red-ui-drop-target').on("dragover",function(event) {
                 if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
                      $.inArray("Files",event.originalEvent.dataTransfer.types) != -1 ||
-                        RED.workspaces.isActiveLocked()) {
+                        RED.workspaces.isLocked()) {
                     event.preventDefault();
                 }
             })
@@ -42659,7 +42728,7 @@ RED.clipboard = (function() {
                 hideDropTarget();
             })
             .on("drop",function(event) {
-                if (!RED.workspaces.isActiveLocked()) {
+                if (!RED.workspaces.isLocked()) {
                     try {
                         if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
                             var data = event.originalEvent.dataTransfer.getData("text/plain");
@@ -44608,7 +44677,7 @@ RED.search = (function() {
             const isMultipleLinks = !hasSelection && hasLinks && wireLinks.length > 1
             const canDelete = hasSelection || hasLinks
             const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group'
-            const canEdit = !RED.workspaces.isActiveLocked()
+            const canEdit = !RED.workspaces.isLocked()
             const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
             const isAllGroups = hasSelection && selection.nodes.filter(n => n.type !== 'group').length === 0
             const hasGroup = hasSelection && selection.nodes.filter(n => n.type === 'group' ).length > 0
@@ -44659,17 +44728,18 @@ RED.search = (function() {
                             w: 0, h: 0,
                             outputs: 1,
                             inputs: 1,
-                            dirty: true
+                            dirty: true,
+                            moved: true
                         }
+                        const junction = RED.nodes.addJunction(nn);
                         const historyEvent = {
                             dirty: RED.nodes.dirty(),
                             t: 'add',
-                            junctions: [nn]
+                            junctions: [junction]
                         }
-                        RED.nodes.addJunction(nn);
                         RED.history.push(historyEvent);
                         RED.nodes.dirty(true);
-                        RED.view.select({nodes: [nn] });
+                        RED.view.select({nodes: [junction] });
                         RED.view.redraw(true)
                     },
                     disabled: !canEdit
@@ -44707,17 +44777,24 @@ RED.search = (function() {
                     options: [
                         { onselect: 'core:group-selection' },
                         { onselect: 'core:ungroup-selection', disabled: !hasGroup },
-                        null,
-                        { onselect: 'core:copy-group-style', disabled: !hasGroup },
-                        { onselect: 'core:paste-group-style', disabled: !hasGroup}
                     ]
                 })
+                if (hasGroup) {
+                    menuItems[menuItems.length - 1].options.push(
+                        { onselect: 'core:merge-selection-to-group', label: RED._("menu.label.groupMergeSelection") }
+                    )
+
+                }
                 if (canRemoveFromGroup) {
                     menuItems[menuItems.length - 1].options.push(
-                        null,
                         { onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") }
                     )
                 }
+                menuItems[menuItems.length - 1].options.push(
+                    null,
+                    { onselect: 'core:copy-group-style', disabled: !hasGroup },
+                    { onselect: 'core:paste-group-style', disabled: !hasGroup}
+                )
             }
             if (canEdit && hasMultipleSelection) {
                 menuItems.push({
@@ -46045,7 +46122,7 @@ RED.subflow = (function() {
             }
         });
         RED.events.on("view:selection-changed",function(selection) {
-            if (!selection.nodes || RED.workspaces.isActiveLocked()) {
+            if (!selection.nodes || RED.workspaces.isLocked()) {
                 RED.menu.setDisabled("menu-item-subflow-convert",true);
             } else {
                 RED.menu.setDisabled("menu-item-subflow-convert",false);
@@ -46108,7 +46185,7 @@ RED.subflow = (function() {
     }
 
     function convertToSubflow() {
-        if (RED.workspaces.isActiveLocked()) {
+        if (RED.workspaces.isLocked()) {
             return
         }
         var selection = RED.view.selection();
@@ -47025,7 +47102,7 @@ RED.group = (function() {
             var activateMerge = false;
             var activateRemove = false;
             var singleGroupSelected = false;
-            var locked = RED.workspaces.isActiveLocked()
+            var locked = RED.workspaces.isLocked()
 
             if (activateGroup) {
                 singleGroupSelected = selection.nodes.length === 1 && selection.nodes[0].type === 'group';
@@ -47103,7 +47180,7 @@ RED.group = (function() {
         }
     }
     function pasteGroupStyle() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         if (groupStyleClipboard) {
             var selection = RED.view.selection();
@@ -47138,7 +47215,7 @@ RED.group = (function() {
     }
 
     function groupSelection() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
@@ -47157,12 +47234,12 @@ RED.group = (function() {
         }
     }
     function ungroupSelection() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
             var newSelection = [];
-            groups = selection.nodes.filter(function(n) { return n.type === "group" });
+            let groups = selection.nodes.filter(function(n) { return n.type === "group" });
 
             var historyEvent = {
                 t:"ungroup",
@@ -47181,7 +47258,7 @@ RED.group = (function() {
     }
 
     function ungroup(g) {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         var nodes = [];
         var parentGroup = RED.nodes.group(g.g);
         g.nodes.forEach(function(n) {
@@ -47208,7 +47285,7 @@ RED.group = (function() {
     }
 
     function mergeSelection() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
@@ -47278,7 +47355,7 @@ RED.group = (function() {
     }
 
     function removeSelection() {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (RED.view.state() !== RED.state.DEFAULT) { return }
         var selection = RED.view.selection();
         if (selection.nodes) {
@@ -47306,13 +47383,21 @@ RED.group = (function() {
         }
     }
     function createGroup(nodes) {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (nodes.length === 0) {
             return;
         }
-        if (nodes.filter(function(n) { return n.type === "subflow" }).length > 0) {
-            RED.notify(RED._("group.errors.cannotAddSubflowPorts"),"error");
-            return;
+        const existingGroup = nodes[0].g
+        for (let i = 0; i < nodes.length; i++) {
+            const n = nodes[i]
+            if (n.type === 'subflow') {
+                RED.notify(RED._("group.errors.cannotAddSubflowPorts"),"error");
+                return;
+            }
+            if (n.g !== existingGroup) {
+                console.warn("Cannot add nooes with different z properties")
+                return
+            }
         }
         // nodes is an array
         // each node must be on the same tab (z)
@@ -47325,12 +47410,17 @@ RED.group = (function() {
             y: Number.POSITIVE_INFINITY,
             w: 0,
             h: 0,
-            _def: RED.group.def
+            _def: RED.group.def,
+            changed: true
         }
 
         group.z = nodes[0].z;
         group = RED.nodes.addGroup(group);
 
+        if (existingGroup) {
+            addToGroup(RED.nodes.group(existingGroup), group)
+        }
+
         try {
             addToGroup(group,nodes);
         } catch(err) {
@@ -47354,7 +47444,7 @@ RED.group = (function() {
             if (!z) {
                 z = n.z;
             } else if (z !== n.z) {
-                throw new Error("Cannot add nooes with different z properties")
+                throw new Error("Cannot add nodes with different z properties")
             }
             if (n.g) {
                 // This is already in a group.
@@ -47371,14 +47461,10 @@ RED.group = (function() {
                 throw new Error(RED._("group.errors.cannotCreateDiffGroups"))
             }
         }
-        // The nodes are already in a group. The assumption is they should be
-        // wrapped in the newly provided group, and that group added to in their
-        // place to the existing containing group.
+        // The nodes are already in a group - so we need to remove them first
         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
         for (i=0;i<nodes.length;i++) {
@@ -47412,7 +47498,7 @@ RED.group = (function() {
         markDirty(group);
     }
     function removeFromGroup(group, nodes, reparent) {
-        if (RED.workspaces.isActiveLocked()) { return }
+        if (RED.workspaces.isLocked()) { return }
         if (!Array.isArray(nodes)) {
             nodes = [nodes];
         }
@@ -47430,7 +47516,7 @@ RED.group = (function() {
             n.dirty = true;
             var index = group.nodes.indexOf(n);
             group.nodes.splice(index,1);
-            if (reparent && group.g) {
+            if (reparent && parentGroup) {
                 n.g = group.g
                 parentGroup.nodes.push(n);
             } else {
@@ -48617,14 +48703,14 @@ RED.projects = (function() {
                         var row = $('<div class="form-row"></div>').appendTo(body);
                         $('<label for="red-ui-projects-dialog-screen-create-project-file">'+RED._("projects.default-files.flow-file")+'</label>').appendTo(row);
                         var subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        var defaultFlowFile = (createProjectOptions.files &&createProjectOptions.files.flow) || (RED.settings.files && RED.settings.files.flow)||"flow.json";
+                        var defaultFlowFile = (createProjectOptions.files &&createProjectOptions.files.flow) || (RED.settings.files && RED.settings.files.flow) || "flows.json";
                         projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val(defaultFlowFile)
                             .on("change keyup paste",validateForm)
                             .appendTo(subrow);
                         $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
                         $('<label class="red-ui-projects-edit-form-sublabel"><small>*.json</small></label>').appendTo(row);
 
-                        var defaultCredentialsFile = (createProjectOptions.files &&createProjectOptions.files.credentials) || (RED.settings.files && RED.settings.files.credentials)||"flow_cred.json";
+                        var defaultCredentialsFile = (createProjectOptions.files &&createProjectOptions.files.credentials) || (RED.settings.files && RED.settings.files.credentials) || "flows_cred.json";
                         row = $('<div class="form-row"></div>').appendTo(body);
                         $('<label for="red-ui-projects-dialog-screen-create-project-credfile">'+RED._("projects.default-files.credentials-file")+'</label>').appendTo(row);
                         subrow = $('<div style="position:relative;"></div>').appendTo(row);
@@ -49127,7 +49213,7 @@ RED.projects = (function() {
                         row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
                         $('<label for="red-ui-projects-dialog-screen-create-project-file">'+RED._("projects.create.flow-file")+'</label>').appendTo(row);
                         subrow = $('<div style="position:relative;"></div>').appendTo(row);
-                        projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val("flow.json")
+                        projectFlowFileInput = $('<input id="red-ui-projects-dialog-screen-create-project-file" type="text">').val("flows.json")
                             .on("change keyup paste",validateForm)
                             .appendTo(subrow);
                         $('<div class="red-ui-projects-dialog-screen-input-status"></div>').appendTo(subrow);
@@ -50498,6 +50584,9 @@ RED.projects.settings = (function() {
         }
         var description = addTargetToExternalLinks($('<span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
         description.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
+        setTimeout(function () {
+            mermaid.init();
+        }, 200);
     }
 
     function editSummary(activeProject, summary, container, version, versionContainer) {