Live data from Hacker News

How to draw S-curved arrows between boxes

dragonman225.js.org

51–59 of 59 posts

Re: How to draw S-curved arrows between boxes

#52
post #19

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…

Excellent :)

Re: How to draw S-curved arrows between boxes

#54
The blog post is not bad, but as a graphics programmer I don't get why this one algorithm is made as a full NPM package. (Getting some left-pad vibes again...) The actual source code is about 200 lines (which can probably be shortened down to 50 if you try enough), why don't you just include it as a code snippet in that blog post for others to copy in their codebase? The code itself is pretty straightforward to understand, and you're probably going to make some little modifications to suit your needs.

Re: How to draw S-curved arrows between boxes

#55

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…

It’s been many a year since I thought of XPress.

I recall I did a Mac XPress XTension that used GUSI (sockets) to talk to a 4D server to grab artwork. I even had it multi-threading (co-operative of course) and a UI using PowerPlant. Rather a hack.

Re: How to draw S-curved arrows between boxes

#56

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.

Agree.

Re: How to draw S-curved arrows between boxes

#57

Earlier quoted context omitted.

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.

Agree.

Also, this is a great problem, and we tried to solve it in a more general context. http://dpd.cs.princeton.edu/Papers/DGKN97.pdf

I believe it's an open problem what makes a curve look "natural" or how to do a good job of routing multiple splines around obstacles so they do not intersect each other, though the work of Keean Crane at CMU seems promising: https://www.cs.cmu.edu/~kmcrane/Projects/RepulsiveCurves/ind...

Re: How to draw S-curved arrows between boxes

#58

In cases when the boxes overlap, there are ways to choose an arrow which will not cross the boxes. But this is prevented by the constraint that the starting and ending points must be on the midpoint of a box edge. If the midpoint of the a given edge is occluded by a box, or occludes a box, then that edge is not considered, even though it is partially visible and has a viable point for the arrow. E.g. if we could star…

So, you could take the midpoint of non overlapped edge segments? And split that segment as more arrows leave from it? Sounds like a good further step.

Another one would be reducing the amount of crossover between different arrows.

Re: How to draw S-curved arrows between boxes

#59

Earlier quoted context omitted.

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…

Sounds like a topic for your blog.
Post reply on HN