frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

[groups] Support dragging node from palette into group

This commit is contained in:
Nick O'Leary 2020-03-13 23:01:19 +00:00
parent 7886e5d57c
commit 27c462fee9
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@ -284,6 +284,8 @@ RED.palette = (function() {
var mouseX;
var mouseY;
var spliceTimer;
var groupTimer;
var activeGroup;
var paletteWidth;
var paletteTop;
$(d).draggable({
@ -295,16 +297,37 @@ RED.palette = (function() {
start: function() {
paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
activeGroup = null;
RED.view.focus();
},
stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
stop: function() {
d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null; }
if (groupTimer) { clearTimeout(groupTimer); groupTimer = null; }
},
drag: function(e,ui) {
var paletteNode = getPaletteNode(nt);
ui.originalPosition.left = paletteNode.offset().left;
mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop();
if (!groupTimer) {
groupTimer = setTimeout(function() {
var group = RED.view.getGroupAtPoint(mouseX,mouseY);
if (group !== activeGroup) {
// TODO: needs to be a CSS style on the group
d3.selectAll(".red-ui-flow-group-body").style("stroke-dasharray", function(d) { return (d === group)?"10 4":"none"})
activeGroup = group;
if (activeGroup) {
$(ui.helper).data('group',activeGroup);
} else {
$(ui.helper).removeData('group');
}
}
groupTimer = null;
},200)
}
if (def.inputs > 0 && def.outputs > 0) {
mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop();
if (!spliceTimer) {
spliceTimer = setTimeout(function() {
var nodes = [];

21
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -389,14 +389,35 @@ RED.view = (function() {
historyEvent.removedLinks = [spliceLink];
}
var group = $(ui.helper).data("group");
if (group) {
RED.group.addToGroup(group, nn);
historyEvent = {
t: 'multi',
events: [historyEvent],
}
historyEvent.events.push({
t: "addToGroup",
group: group,
nodes: nn
})
}
RED.history.push(historyEvent);
RED.nodes.add(nn);
RED.editor.validateNode(nn);
RED.nodes.dirty(true);
// auto select dropped node - so info shows (if visible)
exitActiveGroup();
clearSelection();
nn.selected = true;
moving_set.push({n:nn});
if (group) {
selectGroup(group,false);
group.active = true;
activeGroup = group;
}
updateActiveNodes();
updateSelection();
redraw();