Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to draw S-curved arrows between boxes

dragonman225.js.org

Post reply on HN
Print view View original

31–40 of 59 posts

Re: How to draw S-curved arrows between boxes

#31

Post by jamessb »

vjeux wrote: post #19
emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

Back in 2012 I made a series of blog posts about all the unique image algorithms I could find: - Facebook (that I designed): https://blog.vjeux.com/2012/image/image-layout-algorithm-fac... - Google Plus: https://blog.vjeux.com/2012/javascript/image-layout-algorith... - Google Plus, finding best breaks, which also explains fancy text layout algorithm: https://blog.vjeux.com/2014/image/google-plus-layout-find-be... - L…

Another related blog post is "Building the Image Grid from Google Photos": https://medium.com/@danrschlosser/building-the-image-grid-fr...

Re: How to draw S-curved arrows between boxes

#32

Post by raphlinus »

TacticalCoder wrote: post #25
emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

That line-breaking link is really great, I enjoyed it a lot! However it barely scratches the surface: there's no good line-breaking without hyphenation. And then even once you have a great H & J algorithm (Hyphenation and Justification), you have the visual problem of "rivers" (be it text or print): a "river" behind when on one line you have the space between two words nearly matching another space between two words…

Android has a sophisticated algorithm for line breaking, including hyphenation. It's similar to that of InDesign (both were strongly inspired by the Knuth-Plass algorithm used by TeX), but tuned for mobile use. In particular, it's pretty shy about adding hyphens, but if a well-placed hyphen will prevent a two-line sentence from spilling to three (in which the last word is by itself), it will do so fairly aggressively. I'm quite proud of that.

Unfortunately, I don't have a good writeup of that, but some of the details are in this ATypI talk[1].

[1]: https://www.youtube.com/watch?v=L8LD0BM-Vjk

Re: How to draw S-curved arrows between boxes

#33

Post by monkeycantype »

anonymous532 wrote: post #5

It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.

but it's solving one part of the problem, and doing a good job at it. I've been making diagrams using graphviz, but setting the positions and edge curves manually, pulling the nodes and edges out of a list in excel

https://github.com/mathew-j-davis/boxesandarrows

I've been setting the 'waypoints' for more complex curves (curves with many bends) manually (typing the bezier numbers in by hand), while I try and figure out how I want them routed, you're right it's not easy figuring out rules for where edge should go, let alone implementing it

Re: How to draw S-curved arrows between boxes

#35

Post by jimmygrapes »

melony wrote: post #20
emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

One of the most difficult programming challenges I have encountered is calculating and displaying automatic drag and drop alignment guidelines/rulers (like those in Figma and PowerPoint that show up when you drag two element close to each other or near certain ratios) efficiently. They are not documented anywhere despite being a very common pattern. Most drag and drop libraries and framework don't have out of the box…

On a related note, the tab stop/indent marker/ruler in MS Word (and the related ruler/guidelines in Photoshop and others) are sorely missing in the generally available UI elements. For text on the web I get it, since it's all markdown and/or html, not exactly WYSIWYG-emulating-paper. Guidelines for the purposes of snap alignment are relatively easy to implement and have tons of use, but I have not seen any good ones in the wild yet.

Re: How to draw S-curved arrows between boxes

#36

Post by mbrodersen »

anonymous532 wrote: post #5

It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.

I don’t think the author is making any claims about the algorithm being able to handle more than the 2 box case. Why the negativity?

Re: How to draw S-curved arrows between boxes

#37

Post by alhirzel »

alejohausner wrote: post #29

The graphviz system [1], originally from at&t labs, has a program called "dot" that does this kind of thing very well, including routing the arrows around other boxes that may be in the way. It's been open sourced. It's also been ported to the web [2] 1: https://graphviz.org/ 2: http://www.webgraphviz.com/?tab=map

Sometimes I wish there were a more modern replacement for Graphviz. There are things that it doesn't handle very well (e.g., nested subgraphs) and I feel like there are good (albeit proprietary) algorithms which could make their way into a general package.

Re: How to draw S-curved arrows between boxes

#38

Post by AceJohnny2 »

TobTobXX wrote: post #18
AceJohnny2 wrote: post #13

Earlier quoted context omitted.

Not so weird. Here's a random example, from Wikipedia: https://en.wikipedia.org/wiki/Force-directed_graph_drawing#/...

These are straight lines. Not sure you even _want_ Bézier curves in this context, striaght lines are probably clearer in these graphs with hundreds of connections.

Ah, good point.

Re: How to draw S-curved arrows between boxes

#39

Post by adolph »

throw10920 wrote: post #26
emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

Yes! Please! Every one of these problems are interesting ones that have been solved before...but the solutions are packaged up into massive systems (good luck finding the code for actually executing element layout in Chromium) and then it seems like are never discussed again on places like Reddit, HN, Stack Exchange, or even among other programmers I know IRL. In particular, I'm incredibly interested in layout algori…

Agreed, maybe something expressed in human learnable non-code procedural notation.

Re: How to draw S-curved arrows between boxes

#40

Post by monkeycantype »

alhirzel wrote: post #37
alejohausner wrote: post #29

The graphviz system [1], originally from at&t labs, has a program called "dot" that does this kind of thing very well, including routing the arrows around other boxes that may be in the way. It's been open sourced. It's also been ported to the web [2] 1: https://graphviz.org/ 2: http://www.webgraphviz.com/?tab=map

Sometimes I wish there were a more modern replacement for Graphviz. There are things that it doesn't handle very well (e.g., nested subgraphs) and I feel like there are good (albeit proprietary) algorithms which could make their way into a general package.

I use dot, and manually position everything, then use the neato -n2 option to render:

`dot -T ${format} -n${n} ${verbose>1?"-v ":""}-Goverlap-true -Gsplines=false -Kneato -o "${ output }" "${ input }"`

this still doesn't do subgraphs well,

so I sometime do the 'groups' in a separate document, then composite the layers with image magick

`magick composite ${verbose>1?"-verbose ":""}-gravity NorthWest "${a}" "${b}" "${png_output}"`;

Post reply on HN