From 2b2eee352f6059f03e47c4c9ca3b63144d5da81e Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 25 Jun 2018 13:18:00 +0100 Subject: [PATCH] Better wire layout when looping back --- editor/js/ui/view.js | 126 ++++++++++++++++++++++++++++-------------- editor/sass/flow.scss | 2 +- 2 files changed, 84 insertions(+), 44 deletions(-) diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 3332f9916..0945a7cd9 100644 --- a/editor/js/ui/view.js +++ b/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); - 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] - ); + 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)); } 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+ - " 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; + // return "M "+d.x1+" "+d.y1+ + // " 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; + + return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1); }); } }) diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss index 314bc8a8d..dd2d4e286 100644 --- a/editor/sass/flow.scss +++ b/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;