From 27c462fee913d6be9ecf4185759c544672dcf5a5 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 13 Mar 2020 23:01:19 +0000
Subject: [PATCH] [groups] Support dragging node from palette into group

---
 .../editor-client/src/js/ui/palette.js        | 29 +++++++++++++++++--
 .../@node-red/editor-client/src/js/ui/view.js | 21 ++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
index 967a61f51..d0842a45f 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -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 = [];
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 ecc009315..6b2603a21 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
@@ -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();