Better wire layout when looping back

editor/js/ui/view.js

@@ -464,6 +464,82 @@ RED.view = (function() {
         RED.actions.add("core:step-selection-left", function() { moveSelection(-20,0);});
     }
 
+    function generateLinkPath(origX,origY, destX, destY, sc) {
+        var dy = destY-origY;
+        var dx = destX-origX;
+        var delta = Math.sqrt(dy*dy+dx*dx);
+        var scale = lineCurveScale;
+        var scaleY = 0;
+        if (dx*sc > 0) {
+            if (delta < node_width) {
+                scale = 0.75-0.75*((node_width-delta)/node_width);
+                // scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
+                // if (Math.abs(dy) < 3*node_height) {
+                //     scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
+                // }
+            }
+        } else {
+            scale = 0.4-0.2*(Math.max(0,(node_width-Math.min(Math.abs(dx),Math.abs(dy)))/node_width));
+        }
+        if (dx*sc > 0) {
+            return "M "+origX+" "+origY+
+                " C "+(origX+sc*(node_width*scale))+" "+(origY+scaleY*node_height)+" "+
+                (destX-sc*(scale)*node_width)+" "+(destY-scaleY*node_height)+" "+
+                destX+" "+destY
+        } else {
+
+            var midX = Math.floor(destX-dx/2);
+            var midY = Math.floor(destY-dy/2);
+            //
+            if (dy == 0) {
+                midY = destY + node_height;
+            }
+            var cp_height = node_height/2;
+            var y1 = (destY + midY)/2
+            var topX =origX + sc*node_width*scale;
+            var topY = dy>0?Math.min(y1 - dy/2 , origY+cp_height):Math.max(y1 - dy/2 , origY-cp_height);
+            var bottomX = destX - sc*node_width*scale;
+            var bottomY = dy>0?Math.max(y1, destY-cp_height):Math.min(y1, destY+cp_height);
+            var x1 = (origX+topX)/2;
+            var scy = dy>0?1:-1;
+            var cp = [
+                // Orig -> Top
+                [x1,origY],
+                [topX,dy>0?Math.max(origY, topY-cp_height):Math.min(origY, topY+cp_height)],
+                // Top -> Mid
+                // [Mirror previous cp]
+                [x1,dy>0?Math.min(midY, topY+cp_height):Math.max(midY, topY-cp_height)],
+                // Mid -> Bottom
+                // [Mirror previous cp]
+                [bottomX,dy>0?Math.max(midY, bottomY-cp_height):Math.min(midY, bottomY+cp_height)],
+                // Bottom -> Dest
+                // [Mirror previous cp]
+                [(destX+bottomX)/2,destY]
+            ];
+            if (cp[2][1] === topY+scy*cp_height) {
+                if (Math.abs(dy) < cp_height*10) {
+                    cp[1][1] = topY-scy*cp_height/2;
+                    cp[3][1] = bottomY-scy*cp_height/2;
+                }
+                cp[2][0] = topX;
+            }
+            return "M "+origX+" "+origY+
+                " C "+
+                   cp[0][0]+" "+cp[0][1]+" "+
+                   cp[1][0]+" "+cp[1][1]+" "+
+                   topX+" "+topY+
+                " S "+
+                   cp[2][0]+" "+cp[2][1]+" "+
+                   midX+" "+midY+
+               " S "+
+                  cp[3][0]+" "+cp[3][1]+" "+
+                  bottomX+" "+bottomY+
+                " S "+
+                    cp[4][0]+" "+cp[4][1]+" "+
+                    destX+" "+destY
+        }
+    }
+
 
     function addNode(type,x,y) {
         var m = /^subflow:(.+)$/.exec(type);
@@ -794,28 +870,7 @@ RED.view = (function() {
 
                 var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
 
-                var dy = mousePos[1]-(drag_line.node.y+portY);
+                drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc));
-                var dx = mousePos[0]-(drag_line.node.x+sc*drag_line.node.w/2);
-                var delta = Math.sqrt(dy*dy+dx*dx);
-                var scale = lineCurveScale;
-                var scaleY = 0;
-
-                if (delta < node_width) {
-                    scale = 0.75-0.75*((node_width-delta)/node_width);
-                }
-                if (dx*sc < 0) {
-                    scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
-                    if (Math.abs(dy) < 3*node_height) {
-                        scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
-                    }
-                }
-
-                drag_line.el.attr("d",
-                    "M "+(drag_line.node.x+sc*drag_line.node.w/2)+" "+(drag_line.node.y+portY)+
-                    " C "+(drag_line.node.x+sc*(drag_line.node.w/2+node_width*scale))+" "+(drag_line.node.y+portY+scaleY*node_height)+" "+
-                    (mousePos[0]-sc*(scale)*node_width)+" "+(mousePos[1]-scaleY*node_height)+" "+
-                    mousePos[0]+" "+mousePos[1]
-                    );
             }
             d3.event.preventDefault();
         } else if (mouse_mode == RED.state.MOVING) {
@@ -2394,32 +2449,17 @@ RED.view = (function() {
                         var numOutputs = d.source.outputs || 1;
                         var sourcePort = d.sourcePort || 0;
                         var y = -((numOutputs-1)/2)*13 +13*sourcePort;
-
-                        var dy = d.target.y-(d.source.y+y);
-                        var dx = (d.target.x-d.target.w/2)-(d.source.x+d.source.w/2);
-                        var delta = Math.sqrt(dy*dy+dx*dx);
-                        var scale = lineCurveScale;
-                        var scaleY = 0;
-                        if (delta < node_width) {
-                            scale = 0.75-0.75*((node_width-delta)/node_width);
-                        }
-
-                        if (dx < 0) {
-                            scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
-                            if (Math.abs(dy) < 3*node_height) {
-                                scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
-                            }
-                        }
-
                         d.x1 = d.source.x+d.source.w/2;
                         d.y1 = d.source.y+y;
                         d.x2 = d.target.x-d.target.w/2;
                         d.y2 = d.target.y;
 
-                        return "M "+d.x1+" "+d.y1+
+                        // return "M "+d.x1+" "+d.y1+
-                            " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
+                        //     " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
-                            (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
+                        //     (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
-                            d.x2+" "+d.y2;
+                        //     d.x2+" "+d.y2;
+
+                        return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
                     });
                 }
             })

editor/sass/flow.scss

@@ -248,7 +248,7 @@
 
 .link_outline {
     stroke: #fff;
-    stroke-width: 4;
+    stroke-width: 5;
     cursor: crosshair;
     fill: none;
     pointer-events: none;