Move nodes to top-left corner when converting to subflow

packages/node_modules/@node-red/editor-client/src/js/history.js

@@ -262,6 +262,8 @@ RED.history = (function() {
             } else if (ev.t == "createSubflow") {
                 if (ev.nodes) {
                     RED.nodes.filterNodes({z:ev.subflow.subflow.id}).forEach(function(n) {
+                        n.x += ev.subflow.offsetX;
+                        n.y += ev.subflow.offsetY;
                         n.z = ev.activeWorkspace;
                         n.dirty = true;
                     });

packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js

@@ -430,6 +430,12 @@ RED.subflow = (function() {
         RED.nodes.dirty(true);
     }
 
+    function snapToGrid(x) {
+        if (RED.settings.get("editor").view['view-snap-grid']) {
+            x = Math.round(x / RED.view.gridSize()) * RED.view.gridSize();
+        }
+        return x;
+    }
     function convertToSubflow() {
         var selection = RED.view.selection();
         if (!selection.nodes) {
@@ -461,8 +467,14 @@ RED.subflow = (function() {
                 Math.max(boundingBox[3],n.y)
             ]
         }
+        var offsetX = snapToGrid(boundingBox[0] - 180);
+        var offsetY = snapToGrid(boundingBox[1] - 60);
 
-        var center = [(boundingBox[2]+boundingBox[0]) / 2,(boundingBox[3]+boundingBox[1]) / 2];
+
+        var center = [
+            snapToGrid((boundingBox[2]+boundingBox[0]) / 2),
+            snapToGrid((boundingBox[3]+boundingBox[1]) / 2)
+        ];
 
         RED.nodes.eachLink(function(link) {
             if (nodes[link.source.id] && nodes[link.target.id]) {
@@ -519,8 +531,8 @@ RED.subflow = (function() {
             in: Object.keys(candidateInputNodes).map(function(v,i) { var index = i; return {
                 type:"subflow",
                 direction:"in",
-                x:candidateInputNodes[v].x-(candidateInputNodes[v].w/2)-80,
+                x:snapToGrid(candidateInputNodes[v].x-(candidateInputNodes[v].w/2)-80 - offsetX),
-                y:candidateInputNodes[v].y,
+                y:snapToGrid(candidateInputNodes[v].y - offsetY),
                 z:subflowId,
                 i:index,
                 id:RED.nodes.id(),
@@ -529,8 +541,8 @@ RED.subflow = (function() {
             out: candidateOutputs.map(function(v,i) { var index = i; return {
                 type:"subflow",
                 direction:"in",
-                x:v.source.x+(v.source.w/2)+80,
+                x:snapToGrid(v.source.x+(v.source.w/2)+80 - offsetX),
-                y:v.source.y,
+                y:snapToGrid(v.source.y - offsetY),
                 z:subflowId,
                 i:index,
                 id:RED.nodes.id(),
@@ -605,6 +617,8 @@ RED.subflow = (function() {
                     return isLocalLink;
                 });
             }
+            n.x -= offsetX;
+            n.y -= offsetY;
             n.z = subflow.id;
         }
 
@@ -613,7 +627,9 @@ RED.subflow = (function() {
             nodes:[subflowInstance.id],
             links:new_links,
             subflow: {
-                subflow: subflow
+                subflow: subflow,
+                offsetX: offsetX,
+                offsetY: offsetY
             },
 
             activeWorkspace: RED.workspaces.active(),

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -2703,6 +2703,8 @@ RED.view = (function() {
                             d.resize = false;
                         }
                         var thisNode = d3.select(this);
+                        thisNode.classed("node_subflow",function(d) { return activeSubflow != null; })
+
                         //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
                         thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         if (mouse_mode != RED.state.MOVING_ACTIVE) {
@@ -3004,6 +3006,9 @@ RED.view = (function() {
             links.each(function(d) {
                 var link = d3.select(this);
                 if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
+                    if (/link_line/.test(link.attr('class'))) {
+                        link.classed("link_subflow", function(d) { return !d.link && activeSubflow });
+                    }
                     link.attr("d",function(d){
                         var numOutputs = d.source.outputs || 1;
                         var sourcePort = d.sourcePort || 0;
@@ -3017,8 +3022,11 @@ RED.view = (function() {
                         //     " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
                         //     (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
                         //     d.x2+" "+d.y2;
-
+                        var path = generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
-                        return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
+                        if (/NaN/.test(path)) {
+                            return ""
+                        }
+                        return path;
                     });
                 }
             })