The version with 4 bezier curves lookes much more natural IMO.
It’s cleaner and enables users to follow the flow easier.
The current way has never bothered me and the new way won’t either. I’m more interested in how NR works than how the lines look 
Looks great 
[Extra text to over come 20 char min limit ]
I think it would be helpful to have Nick's proposed logic available as an option, perhaps in the Settings:View menu. This is not only about making efficient use of screen space in the editor. Having flows well-organized logically and visually makes them easier to maintain, modify, and trouble-shoot.
Besides horizontal flows that need to wrap around or might be better arranged vertically, there are cases where feedback is needed. So, I am curious about how Nick's algorithm would handle these flows (all drawn with the snap-to-grid option and default grid spacing):
Well it was not the intention to distract Nick from his current tasks...
For me (personally) the new view looks very nice!
But suppose we have a flow like this (in the old view):
How will this be represented in the new view: like (1) or like (2)?
Because (2) would be confusing ...
Is that a herd of hairy Yaks I see approaching ?
@drmibell @BartButenaers thanks for the feedback. Here's a side-by-side comparison of a few more layouts.
I think most of them are improved - the only two that are questionable are the top-middle and top-right flows.
The top-middle flow - two nodes that loopback on themselves, aligned horizontally - is a bit of an extreme edge case. But I can certainly add in some logic to handle it to give a better suggestion of the link looping back.
The top-right flow - two nodes that loopback on themselves, stacked vertically - is still an edge case, but not as extreme. You can see once the nodes are 4 spaces apart (third from top) the wires clearly cross. When they are closer, the horizontal sections do overlap. May be able to do a bit of offsetting to help there.
Will have a poke around later. If anyone wants to play themselves, the code for it is on github in the new-wire-routing branch.
In response to some other bits of feedback - there's no plan to have different wiring layouts the user can pick between. The intention is to make sure the layout we use is clear in all cases. There's no benefit to making things like this an option.
2 Likes
Nice side-by-side comparison – would you mind exporting those nodes so we could do our own comparisons using the same layout? Or is this already available as a test case in the wiring branch?
Here you go:
[{"id":"c2da749a.75ce78","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":60,"wires":[["28b86c82.137014"]]},{"id":"28b86c82.137014","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":100,"wires":[["c2da749a.75ce78"]]},{"id":"7e47f653.712bf8","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":220,"wires":[["4e0b2800.b25718"]]},{"id":"4e0b2800.b25718","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":160,"wires":[["7e47f653.712bf8"]]},{"id":"973d3027.87791","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":360,"wires":[["6ee2884b.839e68"]]},{"id":"6ee2884b.839e68","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":280,"wires":[["973d3027.87791"]]},{"id":"33cf20c4.3ddc5","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":60,"wires":[["c109d402.591ef8"]]},{"id":"c109d402.591ef8","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":60,"wires":[["33cf20c4.3ddc5"]]},{"id":"44a6ee80.eadc7","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":140,"wires":[["6a13de18.c5648"]]},{"id":"6a13de18.c5648","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":160,"wires":[["44a6ee80.eadc7"]]},{"id":"dbb75edd.7cfb1","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":200,"wires":[["b37d277b.2f8188"]]},{"id":"b37d277b.2f8188","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":240,"wires":[["dbb75edd.7cfb1"]]},{"id":"5f501d35.672504","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":240,"wires":[["6c86ce8a.e2c2c"]]},{"id":"6c86ce8a.e2c2c","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":300,"wires":[["18da2bef.6ca914"]]},{"id":"18da2bef.6ca914","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":360,"wires":[[]]},{"id":"9574e513.3aacc8","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":60,"wires":[["3101c282.e2109e"]]},{"id":"3101c282.e2109e","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":100,"wires":[["3845ab6.7b94154"]]},{"id":"3845ab6.7b94154","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":140,"wires":[["5ff8bce2.91eac4"]]},{"id":"5ff8bce2.91eac4","type":"function","z":"d88d0e06.fb719","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":150,"y":180,"wires":[[]]},{"id":"23a76c2d.817654","type":"inject","z":"d88d0e06.fb719","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":420,"wires":[["c1d4f58e.47a7e8"]]},{"id":"c1d4f58e.47a7e8","type":"function","z":"d88d0e06.fb719","name":"A node with a very long name that stretches","func":"\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":420,"wires":[["1a0e9812.872168","d731fcef.b89f9"]]},{"id":"1a0e9812.872168","type":"function","z":"d88d0e06.fb719","name":"A node with a very long name that stretches across the screen","func":"\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":460,"wires":[["696e4fa0.bf801","a104d457.170528"]]},{"id":"696e4fa0.bf801","type":"debug","z":"d88d0e06.fb719","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":460,"wires":[]},{"id":"a104d457.170528","type":"function","z":"d88d0e06.fb719","name":"A node with a very long name that stretches across the screen","func":"\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":500,"wires":[["f418f310.59151"]]},{"id":"f418f310.59151","type":"debug","z":"d88d0e06.fb719","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":500,"wires":[]},{"id":"d731fcef.b89f9","type":"debug","z":"d88d0e06.fb719","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":710,"y":420,"wires":[]}]
FWIW, as an outsider, I like the default wiring. If I have wires under a node, I just spread the nodes apart a bit more, or use link nodes.
However, off topic, being able to put a label in a link node would be a huge improvement.
1 Like
Bravo Nick ! Excellent work !
Two minor suggestions to lighten the HTML source/code:
- Unless I’m mistaken, you don’t need to draw the Bezier curves using “M C C C C” … you can use “M C S S S” instead like this (beginning at line 545)
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]+" "+
cp[3][0]+" "+cp[3][1]+" "+
midX+" "+midY+
" S "+
//cp[4][0]+" "+cp[4][1]+" "+
cp[5][0]+" "+cp[5][1]+" "+
bottomX+" "+bottomY+
" S "+
//cp[6][0]+" "+cp[6][1]+" "+
cp[7][0]+" "+cp[7][1]+" "+
destX+" "+destY
The “S” allows chaining of bezier curves. I’ve tested the above on Chrome and it seems to give the same result as your code.
- All the coordinates of your points have like 12 numbers after the decimal point. I’ve tried using .toFixed(2) on your code and the precision seems good enough … again the benefit is mainly to reduce the size of the HTML code …
(Edit: changed “M C S C S” to “M C S S S” as it gives the same results)
Second the suggestion for labels in the link node. I've made my own (very ugly) set, as here:
.
I think they help make the flow easier to understand.
2 Likes
Just tried out the current changes on one of my existing flows on a test install and I really like them
PS Discourse is the best ever forum I've used for adding images - just lets me paste direct from captured clipboard 
Bit late to the discussion … but I really like your proposal Nick, I think it works well and there will always be edge-cases in any wiring layout. I believe we can easily work around them - the overall layout looks nicer, more classy. If, as it appears, it isn’t much work to implement then it would be very welcome.
In regards to having wiring layout options though, I agree, lets keep it simple. One layout to rule them all 
I’ll admit that it would also be nice to get labels on the link nodes - I’d be happy to do that manually though which gives the most flexibility to label as needed for the flow.
1 Like
The same flow’s nodes/wires have now been rendered with at least two different layout algorithms. Last year when I first took a whack at automated wire routing, I came up with two variants that looked pretty good. I’ll have to see if I can dig them up…
So I have to wonder – why not have a layout selector that each user can choose from? How is that any different than choosing whether to show/hide the grid? I realize there would be extra code in the view.js logic to support each layout, but that code has already been written and initially tested.
In order to support alternate layouts, this would be a good time to add a “pluggable” wire routing function to replace the inline code that is there now. Of course, the existing logic would be the default (or “Classic”) mode – then others could be added without affecting anyone, until they choose to display a different layout… similar to the settings for alternate themes. I know, probably more work than was planned right now, but it would be worth it, imo.
Although probably OFT for this thread, I also think that would be a great idea, and has been requested many times in Slack.
Threads are cheap - just start another one…
1 Like
Complexity & time to implement/maintain.
I was kind-of against making wire layout changes at the start because I think there are a lot of more important things that are needed in NR. But as Nick was indicating he needed a change of scenery and found it easy enough to tweak, then it seemed like a nice touch - and is. But as you start to get into options and settings, you add a fair bit of complexity, all of which needs not only writing but also testing and maintaining.
Personally, I'd rather see other issues dealt with before looking at extra user choice for minimal benefit.
2 Likes
I see this is an older topic and people are passionate. I was thinking about wire routing, why not opt for a tangent "node" on the wire, hide when not selected, either bezier or straight, hold mouse to select the option. Something like:
