frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

[groups] Support dragging node from palette into group

Browse Source
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 mouseX;
var mouseY; var mouseY;
var spliceTimer; var spliceTimer;
var groupTimer;
var activeGroup;
var paletteWidth; var paletteWidth;
var paletteTop; var paletteTop;
$(d).draggable({ $(d).draggable({
@ -295,16 +297,37 @@ RED.palette = (function() {
start: function() { start: function() {
paletteWidth = $("#red-ui-palette").width(); paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
activeGroup = null;
RED.view.focus(); 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) { drag: function(e,ui) {
var paletteNode = getPaletteNode(nt); var paletteNode = getPaletteNode(nt);
ui.originalPosition.left = paletteNode.offset().left; 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) { 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) { if (!spliceTimer) {
spliceTimer = setTimeout(function() { spliceTimer = setTimeout(function() {
var nodes = []; 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]; 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.history.push(historyEvent);
RED.nodes.add(nn); RED.nodes.add(nn);
RED.editor.validateNode(nn); RED.editor.validateNode(nn);
RED.nodes.dirty(true); RED.nodes.dirty(true);
// auto select dropped node - so info shows (if visible) // auto select dropped node - so info shows (if visible)
exitActiveGroup();
clearSelection(); clearSelection();
nn.selected = true; nn.selected = true;
moving_set.push({n:nn}); moving_set.push({n:nn});
if (group) {
selectGroup(group,false);
group.active = true;
activeGroup = group;
}
updateActiveNodes(); updateActiveNodes();
updateSelection(); updateSelection();
redraw(); redraw();