From 51ea5dc34276cff2f8ae4f6eac091b2336e77aa1 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 5 Mar 2020 10:43:28 +0000 Subject: [PATCH] [groups] Add ungroup-selection action --- .../editor-client/src/js/keymap.json | 3 +- .../@node-red/editor-client/src/js/nodes.js | 7 +- .../editor-client/src/js/ui/group.js | 43 ++++++++---- .../@node-red/editor-client/src/js/ui/view.js | 66 +++++++++++-------- 4 files changed, 75 insertions(+), 44 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index c4d666845..5bd938e98 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -62,6 +62,7 @@ "shift-left": "core:step-selection-left", "ctrl-shift-j": "core:show-previous-tab", "ctrl-shift-k": "core:show-next-tab", - "ctrl-shift-g": "core:group-selection" + "ctrl-shift-g": "core:group-selection", + "ctrl-shift-u": "core:ungroup-selection" } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js index 2bf8d4a21..fdd6886d1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js +++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js @@ -1452,7 +1452,11 @@ RED.nodes = (function() { groupsByZ[group.z].push(group); groups[group.id] = group; } - + function removeGroup(group) { + var i = groupsByZ[group.z].indexOf(group); + groupsByZ[group.z].splice(i,1); + delete groups[group.id]; + } return { @@ -1551,6 +1555,7 @@ RED.nodes = (function() { subflowContains: subflowContains, addGroup: addGroup, + removeGroup: removeGroup, group: function(id) { return groups[id] }, groups: function(z) { return groupsByZ[z] }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js index 7c9bd67f9..bfc73f098 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js @@ -60,6 +60,7 @@ RED.group = (function() { RED.actions.add("core:group-selection", function() { groupSelection() }) + RED.actions.add("core:ungroup-selection", function() { ungroupSelection() }) $(_groupEditTemplate).appendTo("#red-ui-editor-node-configs"); @@ -67,25 +68,39 @@ RED.group = (function() { function groupSelection() { var selection = RED.view.selection(); - // var groupNodes = new Set(); - // - // if (selection.groups) { - // selection.groups.forEach(function(g) { - // g.nodes.forEach() - // }) - // } - // - // if (selection.nodes) { - // - // } - if (selection.nodes) { var group = createGroup(selection.nodes); if (group) { - RED.view.select({groups:[group]}) + RED.view.select({nodes:[group]}) } } } + function ungroupSelection() { + var selection = RED.view.selection(); + if (selection.nodes) { + var newSelection = []; + groups = selection.nodes.filter(function(n) { return n.type === "group" }); + groups.forEach(function(g) { + var parentGroup = RED.nodes.group(g.g); + if (parentGroup) { + var index = parentGroup.nodes.indexOf(g); + parentGroup.nodes.splice(index,1); + } + g.nodes.forEach(function(n) { + newSelection.push(n); + if (parentGroup) { + // Move nodes to parent group + n.g = parentGroup.id; + parentGroup.nodes.push(n); + } else { + delete n.g; + } + }) + RED.nodes.removeGroup(g); + }) + RED.view.select({nodes:newSelection}) + } + } function createGroup(nodes) { if (nodes.length === 0) { return; @@ -168,7 +183,7 @@ RED.group = (function() { group.nodes.push(n); group.x = Math.min(group.x,n.x-n.w/2-25-((n._def.button && n._def.align!=="right")?20:0)); group.y = Math.min(group.y,n.y-n.h/2-25); - group.w = Math.max(group.w,n.x+n.w/2+25+((n._def.button && n._def.align=="right")?20:0) - group.x), + group.w = Math.max(group.w,n.x+n.w/2+25+((n._def.button && n._def.align=="right")?20:0) - group.x); group.h = Math.max(group.h,n.y+n.h/2+25-group.y); } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 81ba16b81..94937aa65 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -29,7 +29,6 @@ RED.view = (function() { var DEBUG_EVENTS = false; - 2 var space_width = 5000, space_height = 5000, lineCurveScale = 0.75, @@ -63,30 +62,30 @@ RED.view = (function() { var activeGroups = []; var dirtyGroups = {}; - var selected_link = null, - mousedown_link = null, - mousedown_node = null, - mousedown_group = null, - mousedown_port_type = null, - mousedown_port_index = 0, - mouseup_node = null, - mouse_offset = [0,0], - mouse_position = null, - mouse_mode = 0, - mousedown_group_handle = null; - moving_set = [], - lasso = null, - ghostNode = null, - showStatus = false, - lastClickNode = null, - dblClickPrimed = null, - clickTime = 0, - clickElapsed = 0, - scroll_position = [], - quickAddActive = false, - quickAddLink = null, - showAllLinkPorts = -1, - groupNodeSelectPrimed = false; + var selected_link = null; + var mousedown_link = null; + var mousedown_node = null; + var mousedown_group = null; + var mousedown_port_type = null; + var mousedown_port_index = 0; + var mouseup_node = null; + var mouse_offset = [0,0]; + var mouse_position = null; + var mouse_mode = 0; + var mousedown_group_handle = null; + var moving_set = []; + var lasso = null; + var ghostNode = null; + var showStatus = false; + var lastClickNode = null; + var dblClickPrimed = null; + var clickTime = 0; + var clickElapsed = 0; + var scroll_position = []; + var quickAddActive = false; + var quickAddLink = null; + var showAllLinkPorts = -1; + var groupNodeSelectPrimed = false; var selectNodesOptions; @@ -4342,10 +4341,21 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } moving_set = [{n:selectedNode}]; } } else if (selection) { - if (selection.groups) { + if (selection.nodes) { updateActiveNodes(); - selection.groups.forEach(function(g) { - selectGroup(g,true); + moving_set = []; + // TODO: this selection group span groups + // - if all in one group -> activate the group + // - if in multiple groups (or group/no-group) + // -> select the first 'set' of things in the same group/no-group + selection.nodes.forEach(function(n) { + if (n.type !== "group") { + n.selected = true; + n.dirty = true; + moving_set.push({n:n}); + } else { + selectGroup(n,true); + } }) } }